Home Layout

Overview

Use the home layout for standalone content pages that only need shared navbar.

It is a good fit for marketing pages, landing pages, or custom content pages that should live in your content source.

Config

Configure it as the default content page renderer with useLayouts():

press.config.tsx

import { defineConfig } from "fumapress";
import { createHomeLayoutPage } from "fumapress/layouts/home";

export default defineConfig({
  // ...
}).layouts({
  page: createHomeLayoutPage(),
});

Customize the rendered body or layout props with the render option:

press.config.tsx

import { defineConfig } from "fumapress";
import { createHomeLayoutPage } from "fumapress/layouts/home";

export default defineConfig({
  // ...
}).layouts({
  page: createHomeLayoutPage({
    render(page) {
      return {
        layoutProps: {
          nav: {
            title: page.data.title,
          },
        },
      };
    },
  }),
});

File-based Layout

For custom route files, use createHomeLayout() directly as a wrapper:

src/pages/_layout.tsx

import type { ReactNode } from "react";
import { createHomeLayout } from "fumapress/layouts/home";
import type PressConfig from "../../press.config";

const HomeLayout = createHomeLayout<typeof PressConfig.$context>();

export default function Layout({ children }: { children: ReactNode }) {
  return <HomeLayout>{children}</HomeLayout>;
}

The <HomeLayout /> is a normal component that you can use anywhere.

Home Layout

Overview

Config

File-based Layout

On this page