embed-card

Provider Registry

Extend the package with custom matchers and renderers instead of forking it.

Provider Registry

Providers are small objects with three responsibilities:

  • match a URL
  • resolve a normalized embed descriptor
  • declare the provider branding metadata

Example

import {
  createEmbedProvider,
  defaultProviders,
  resolveEmbed,
} from "embed-card"

const docsProvider = createEmbedProvider({
  id: "company-docs",
  label: "Company Docs",
  accentColor: "#7c3aed",
  match: (url) => url.hostname === "docs.example.com",
  resolve: (url) => ({
    provider: "company-docs",
    providerLabel: "Company Docs",
    accentColor: "#7c3aed",
    title: "Internal documentation",
    description: "Custom registries keep the API extensible.",
    site: url.hostname,
    url: url.toString(),
    displayUrl: url.toString(),
    renderer: {
      type: "link",
      href: url.toString(),
      ctaLabel: "Open docs",
    },
  }),
})

const embed = resolveEmbed("https://docs.example.com/platform/embeds", {
  providers: [docsProvider, ...defaultProviders],
})

This keeps the default package useful on day one while leaving space for project-specific embeds later.

On this page