Takumi

Takumi を統合して、フレームワークに依存しない高速なメタデータ画像生成を実現します。

インストール

npm install takumi-js

メタデータ画像

ページの画像 URL を返す関数を追加し、ドキュメントページのメタデータからその画像を参照します。

import { createGetUrl } from 'fumadocs-core/source';

const getImageUrl = createGetUrl('/og/docs');

export function getPageImageUrl(page: { slugs: string[]; locale?: string }) {
  const segments = [...page.slugs, 'image.webp'];

  return { segments, url: getImageUrl(segments, page.locale) };
}

import { getPageImageUrl } from '@/lib/shared';

export const Route = createFileRoute('/docs/$')({
  head: ({ loaderData }) => ({
    meta: loaderData ? [{ property: 'og:image', content: loaderData.imageUrl }] : [],
  }),
});

// サーバー関数内の任意の場所で
return {
  imageUrl: getPageImageUrl(page).url,
};

/docs/my-page の画像は /og/docs/my-page/image.webp に配置されます。WebP 画像は PNG 画像よりもファイルサイズが小さいためです。PNG を生成したい場合は、代わりに image.png と format: 'png' を使用してください。

次に、画像を生成するルートを作成します。

import { createFileRoute } from '@tanstack/react-router';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import { source } from '@/lib/source';

export const Route = createFileRoute('/og/docs/$')({
  server: {
    handlers: {
      GET: ({ params }) => {
        const slugs = (params._splat?.split('/') ?? []).filter((v) => v.length > 0).slice(0, -1);
        const page = source.getPage(slugs);
        if (!page) return new Response(undefined, { status: 404 });

        return generateOGImage({
          title: page.data.title,
          description: page.data.description,
          site: 'My App',
          format: 'webp',
        });
      },
    },
  },
});

Takumi には全ウェイト (100-900) に対応した Geist フォントと Geist Mono フォントが同梱されているため、フォントの設定は不要です。

高度な使い方については、Takumi のドキュメントを参照してください。

その他のテンプレート

利用できるテンプレートについては、Takumi Templates を参照してください。

インストールアンカーリンクをコピー

メタデータ画像アンカーリンクをコピー

その他のテンプレートアンカーリンクをコピー

このページの内容

インストール

メタデータ画像

その他のテンプレート