Takumi
Generate Open Graph images for your documentation pages.
Installation
This plugin is included in fumapress.
Enable the plugin in your Fumapress config:
import { defineConfig } from "fumapress";
import { takumiPlugin } from "fumapress/plugins/takumi";
export default defineConfig({
// ...
})
.usePlugins(takumiPlugin());The plugin creates a .webp Open Graph image for every docs page and adds the matching metadata:
<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" />The default image uses fumadocs-ui/og/takumi with the page title, description, and site name.
Set site.baseUrl in your config to make og:image resolve to an absolute URL.
import { defineConfig } from "fumapress";
export default defineConfig({
site: {
baseUrl: "https://press.fumadocs.dev",
},
});Options
generate
Customize the image content or image response options:
import { defineConfig } from "fumapress";
import { takumiPlugin } from "fumapress/plugins/takumi";
export default defineConfig({
// ...
}).usePlugins(
takumiPlugin({
generate(page) {
return {
node: (
<div
style={{
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
padding: 80,
background: "#111",
color: "white",
}}
>
<p>{this.siteConfig.name}</p>
<h1>{page.data.title}</h1>
</div>
),
options: {
// passed to @takumi-rs/image-response
debug: false,
},
};
},
}),
);The image size is fixed at 1200x630, and the response format is always webp.
Last updated on