Fumapress

Fumapress is a docs framework on Waku. It ships a Takumi plugin that renders an image for every docs page and adds the matching meta tags. See the Fumapress Takumi docs for the full plugin API.

Default setupCopy Anchor Link

The plugin is part of Fumapress's recommended preset, which is on by default. With no setup, every docs page gets a 1200 × 630 WebP image and these tags:

<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" />

Set site.baseUrl so og:image is an absolute URL. Without it, the tag holds a relative path, which most crawlers cannot follow.

import { defineConfig } from "fumapress";

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

Customize the imageCopy Anchor Link

Add takumiPlugin yourself to pass options. A plugin you list replaces the preset's copy.

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

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

generate returns the image for one page. It runs with the app context as this, so this.siteConfig and the loaders are available. This example uses the docs card from fumadocs-ui/og/takumi with a Google font:

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] }]),
      },
    };
  },
});

generate returns:

OptionsCopy Anchor Link

These come from TakumiOptions in fumapress/plugins/takumi:

The plugin always encodes WebP, so format is not an option.

Image pathsCopy Anchor Link

Image paths follow page slugs. A page at /docs/styling gets /docs/styling.webp under basePath, and a section index gets index.webp. With i18n, the locale segment comes first.

FontsCopy Anchor Link

Takumi never reads system fonts. To cover characters outside the built-in Latin font, load families through options.fonts. Put fonts every page uses in the shared options, so they resolve once.

See Typography & Fonts.