Fumapress

Fumapress is a docs framework on Waku. The plugin is included in fumapress. See the Fumapress Takumi docs for the upstream reference.

It renders an image for every docs page through Takumi and injects the matching meta tags.

Enable the plugin

import { defineConfig } from "fumapress";
import { takumiPlugin } from "fumapress/plugins/takumi";

export default defineConfig({
  // ...
})
  .plugins(takumiPlugin());

With no options, the plugin:

• Builds a WebP per page (default layout from fumadocs-ui/og/takumi: title, description, site name)
• Injects Open Graph and Twitter meta on each page

<meta property="og:image" content="/docs/page.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:card" content="summary_large_image" />

import { defineConfig } from "fumapress";

export default defineConfig({
  site: {
    baseUrl: "https://example.com",
  },
});

Customize the image

Pass generate. It runs as a method on the app context (this.siteConfig, loaders, and the rest of the Fumapress context).

Return:

For the stock card layout instead of custom JSX, import generate from fumadocs-ui/og/takumi (what the plugin uses by default):

import { generate as generateOgNode } from "fumadocs-ui/og/takumi";
import { takumiPlugin } from "fumapress/plugins/takumi";
import { googleFonts } from "takumi-js/helpers";

takumiPlugin({
  generate(page) {
    return {
      node: generateOgNode({
        title: page.data.title,
        description: page.data.description,
        site: this.siteConfig.name,
      }),
      options: {
        fonts: googleFonts([{ name: "Noto Serif", weight: [600, 800] }]),
      },
    };
  },
});

Options

From TakumiOptions in fumapress/plugins/takumi:

Paths

Image paths follow page slugs: a page at /docs/styling maps to /docs/styling.webp under basePath. The section index uses index.webp. With i18n, the locale segment is prepended.

Render mode and basePath

takumiPlugin({
  basePath: "/og",
  width: 1200,
  height: 630,
});

Fonts

Takumi never reads system fonts. Load families through options.fonts on the image response, or uncovered glyphs become tofu after the built-in Latin fallback.

See Typography & Fonts.

How it wires to Takumi

fumapress already depends on takumi-js. A normal Fumapress install already pulls the renderer, and you do not install a separate OG package for the default setup.

For the full plugin reference, use the Fumapress Takumi page.