ФреймворкJavaScript

Закладка: превью ссылок карточкой

Статичная карточка OpenGraph для вставленной ссылки, как «Create bookmark» в Notion. Показывает заголовок страницы, описание, изображение предпросмотра, favicon и домен.

Метаданные приходят с эндпоинта разворачивания ссылок, который предоставляете вы. Бэкенд обязателен из-за CORS. Blok поставляет только контракт.

Импорт

TypeScript

import { Bookmark } from '@bloklabs/core/tools';

Конфигурация

Опция	Тип	По умолчанию	Описание
`endpoint`	`string`	`""`	Эндпоинт разворачивания ссылок, который предоставляете вы. Обязателен. Вызывается как `endpoint?url=<encoded>` и должен вернуть `{ success: 1, link, meta: { title, description, image: { url }, favicon, domain } }`. Обратите внимание: `image` это объект, а не строка.
`headers`	`Record<string, string>`	`undefined`	Необязательные заголовки (например, авторизации), которые отправляются вместе с запросом метаданных.

Формат данных

TypeScript

interface BookmarkData {
  url: string;          // The bookmarked URL
  title?: string;       // Page title
  description?: string; // Page description
  image?: string;       // Preview image URL
  favicon?: string;     // Favicon URL
  domain?: string;      // Page domain, e.g. "example.com"
}

JSON

{
  "id": "bkm001",
  "type": "bookmark",
  "data": {
    "url": "https://example.com/article",
    "title": "An Interesting Article",
    "description": "A short summary of the page.",
    "image": "https://example.com/preview.png",
    "favicon": "https://example.com/favicon.ico",
    "domain": "example.com"
  }
}

Пример использования

TypeScript

import { Blok } from '@bloklabs/core';
import { Bookmark } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    bookmark: {
      class: Bookmark,
      config: {
        endpoint: 'https://your-backend.example.com/unfurl',
      },
    },
  },
});