Configurations

Main Config

Primary options for your app.

press.config.tsx

import { defineConfig } from "fumapress";

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

Layouts

Specify or customize the UI (renderers) for pages.

press.config.tsx

import { createDocsLayoutPage } from "fumapress/layouts/docs";
import { defineConfig } from "fumapress";

export default defineConfig({
  // ...
}).useLayouts({
  // 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.

press.config.tsx

import { defineConfig } from "fumapress";

export default defineConfig({
  // ...
  renderMode: "static",
});

This will force Fumapress to build all routes as static.

Meta

To add meta tags, you can leverage the meta config.

press.config.tsx

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:

src/app.css

@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:

src/app.css

@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

Custom Routing

The routing config is optional, you can create one if needed.

src/waku.server.tsx

import adapter from "waku/adapters/default";
// your main config file
import pressConfig from "../press.config";
import { createRouter } from "fumapress/router";

const router = createRouter(pressConfig);

const pages = router.createPages(async ({ createPage }) => {
  // note: root element is already created by Fumapress
  createPage({
    render: "dynamic",
    path: "/hello-world",
    component() {
      // ...
    },
  });
});

export default adapter(pages);

See the Waku Config-based Routing section if you want to create custom routes.

Configurations

Main Config

Layouts

Render Mode

Meta

Tailwind CSS

Server Entry

Custom Routing

On this page