Configurations
Available options.
Main Config
Primary options for your app.
import { defineConfig } from "fumapress";
export default defineConfig({
// ...
});Site
The site information like name and linked GitHub repository:
import { defineConfig } from "fumapress";
export default defineConfig({
site: {
name: "Fumapress",
baseUrl: import.meta.env.DEV ? "http://localhost:3000" : "https://press.fumadocs.dev",
git: {
user: "fuma-nama",
branch: "dev",
repo: "fumapress",
},
},
});Layouts
Specify or customize the UI (renderers) for pages.
import { createDocsLayoutPage } from "fumapress/layouts/docs";
import { defineConfig } from "fumapress";
export default defineConfig({
// ...
}).layouts({
// customize layout for pages
page: createDocsLayoutPage(),
});Render Mode
By default, Fumapress build both static & dynamic routes. If you plan to deploy it to a CDN as a static site, you need to specify a render mode.
import { defineConfig } from "fumapress";
export default defineConfig({
// ...
mode: "static",
});This will force Fumapress to build all routes as static.
Meta
To add meta tags, you can leverage the meta config.
import { defineConfig } from "fumapress";
export default defineConfig({
meta: {
root() {
return (
<>
<meta property="og:type" content="website" />
{/* you can use it for link tags as well */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap"
rel="stylesheet"
/>
</>
);
},
page(page) {
return <>{/* page-level meta tags */}</>;
},
},
});Tailwind CSS
Create a src/app.css file:
@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumapress/css/preset.css";It will be automatically loaded, restart the dev server if there's one running.
You can change the color theme or add custom styles, like:
@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/black.css";
@import "fumadocs-ui/css/preset.css";
@import "fumapress/css/preset.css";
@theme {
--default-font-family: "Geist", sans-serif;
}Server Entry
The server entry file is optional, you can create one if needed. Useful for implementing custom router.
import _adapter from "waku/adapters/default";
// your main config file
import pressConfig from "../press.config";
import { createRouter } from "fumapress/router";
import { fsRouterFn } from "fumapress/router/fs";
const router = await createRouter(pressConfig);
const modules = import.meta.glob("./pages/**/*.{ts,tsx,js,jsx}", {
base: "/src",
});
// file-system router
const pages = router.createPages(fsRouterFn(modules));
const middlewareFns = router.createMiddlewares();
const adapter = router.patchAdapter(_adapter);
export default adapter(pages, { middlewareFns });You can also use Waku Config-based Routing instead of the file-system router, see the linked docs for usage.
import _adapter from "waku/adapters/default";
// your main config file
import pressConfig from "../press.config";
import { createRouter } from "fumapress/router";
const router = await createRouter(pressConfig);
const pages = router.createPages(async ({ createPage }) => {
// note: root element is already created by Fumapress
createPage({
render: "static",
path: "/hello-world",
component() {
// ...
},
});
});
const middlewareFns = router.createMiddlewares();
const adapter = router.patchAdapter(_adapter);
export default adapter(pages, { middlewareFns });Last updated on