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

Define the layout and pass it through renderPage.

press.config.tsx

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

const HomePage = createHomeLayoutPage<typeof config.$context>();

const config = defineConfig({
  // ...
  renderPage: (props) => <HomePage {...props} />,
});

export default config;

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

press.config.tsx

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

const HomePage = createHomeLayoutPage<typeof config.$context>({
  render(page) {
    return {
      layoutProps: {
        nav: {
          title: page.data.title,
        },
      },
    };
  },
});

const config = defineConfig({
  // ...
  renderPage: (props) => <HomePage {...props} />,
});

export default config;

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