Blog
Build a blog system with Fumapress.
Installation
This plugin is included in fumapress.
Fumadocs MDX
If you use Fumadocs MDX, create a new collection for blog and register it as a content source:
import { defineConfig } from "fumapress";
import { blogMetaSchema, blogPageSchema } from "fumapress/adapters/mdx/schema";
import { blogPlugin } from "fumapress/plugins/blog";
import { defineDocs } from "fumadocs-mdx/macro";
const docs = defineDocs({
dir: "content/docs",
docs: { async: true },
});
const blog = defineDocs({
dir: "content/blog",
docs: {
async: true,
schema: blogPageSchema,
lastModified: true,
postprocess: {
includeProcessedMarkdown: true,
},
},
meta: {
schema: blogMetaSchema,
},
});
export default defineConfig({
content: {
docs: docs.toFumadocsSource(),
blog: blog.toFumadocsSource({
baseDir: "blog",
}),
},
})
.plugins(blogPlugin());The plugin overrides the renderer for blog pages, by default, all pages from the blog content source are rendered as blog posts.
You can also define a isBlog() option to determine whether the page is a blog post
import { defineConfig } from "fumapress";
import { blogPlugin } from "fumapress/plugins/blog";
export default defineConfig({
// ...
}).plugins(
blogPlugin({
isBlog: (page) => page.type === "blog",
}),
);The integration is now configured, you can write blog posts under the content/blog directory (as specified in defineDocs()):
---
title: My Blog Post
description: Hello World!!!
tags: [my-tag]
---
## Introduction
Welcome to my first blog post.Other Content Sources
If you don't use Fumadocs MDX, you can keep the your content config, but make sure to define the isBlog() option like:
import { defineConfig } from "fumapress";
import { blogPlugin } from "fumapress/plugins/blog";
import { myCms } from "./my-cms";
export default defineConfig({
content: myCms.toStaticSource(),
}).plugins(
blogPlugin({
// since it is not using multi-source, `page.type` will be `undefined`.
// you need to detect it from other properties, like page path.
isBlog: (page) => page.path.startsWith("blog/"),
}),
);Options
paths
The plugin will create additional pages, you can override their pathnames.
import { defineConfig } from "fumapress";
import { blogPlugin } from "fumapress/plugins/blog";
export default defineConfig({
// ...
}).plugins(
blogPlugin({
paths: {
index: "/blog",
tags: "/blog/tags",
},
}),
);You can set to false to disable a certain page.
layouts
Override the UI.
import { defineConfig } from "fumapress";
import { blogPlugin } from "fumapress/plugins/blog";
// blog layouts
import { createHomeLayout } from "fumapress/layouts/home";
import { createBlogLayoutPage } from "fumapress/layouts/blog";
import { createBlogIndexPage } from "fumapress/layouts/blog.index";
import { createBlogTagPage, createBlogTagsPage } from "fumapress/layouts/blog.tags";
const HomeLayout = createHomeLayout<typeof config.$context>();
const BlogPage = createBlogLayoutPage<typeof config.$context>();
const BlogIndex = createBlogIndexPage<typeof config.$context>();
const BlogTags = createBlogTagsPage<typeof config.$context>();
const BlogTag = createBlogTagPage<typeof config.$context>();
const config = defineConfig({
// ...
}).plugins(
blogPlugin({
layouts: {
// shared layout for blog
layout: (props) => <HomeLayout {...props} />,
// renderer for blog pages
page: (props) => <BlogPage {...props} />,
// renderer for blog's index page
index: (props) => <BlogIndex {...props} />,
// renderer for blog's tags list
tags: (props) => <BlogTags {...props} />,
// renderer for blog's tag info page
tag: (props) => <BlogTag {...props} />,
},
}),
);
export default config;Last updated on
Ferry Health
assistant-ui
Inkeep