Layouts and Pages

Unlike other site generators, Code Altas places its primary focus on documentation-related content. While layouts are fully customizable, we provide a set of ready-to-use components—such as Header and Footer—that can be configured via the codealtas.config.ts file.

Docs

Typically, you only need the following layout and page files:

DocsLayout

If you only need to maintain the Docs pages, simply do this:

import { DocsLayout } from "@code-altas/ui"

export default function Layout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return <DocsLayout>{children}</DocsLayout>
}

DocsPage

Next, configure DocsPage in page.tsx:

import { DocsPage, type DocsPageProps } from "@code-altas/ui"

export const dynamic = "force-dynamic"

export default function Page({ params }: DocsPageProps) {
  return <DocsPage params={params} />
}

codealtas.config

Finally, configure the docs-related settings in codealtas.config:

import { defineConfig } from "@code-altas/ui/config"

export default defineConfig({
  title: "My Documentation",
  description: "Guides for my project",
  logo: "/logo.svg",

  docs: {
    categories: [
      {
        name: "Getting Started",
        icon: "lucide:lamp",
        slug: "index",
        docs: [
          {
            name: "Getting Started",
            docs: [
              {
                name: "Introduction",
                slug: "index",
              },
              {
                name: "Quick Start",
                slug: "quickstart",
              },
            ],
          },
        ],
      },
    ],
  },
})

Contents

Next, we need to define the specific files to make them accessible:

---
title: Quick Start
description: ...
---

lorem ipsum...

Important Notes

The docs folder creates the /docs URL prefix; a route group such as (site) does not. Built-in navigation and document links target /docs, so keep this mount point when using them. The root app/layout.tsx should contain html and body; see Quick Start for a complete example.

DocsLayout loads configuration, provides the theme, and renders the header, document navigation, and footer. DocsPage reads and renders the article. For home pages or changelog routes, use DefaultLayout in that route's layout instead. Avoid nesting DefaultLayout around DocsLayout, which would render two headers and footers.

1. Store content/ at the app root, beside package.json and codealtas.config.ts.
2. Parent group slugs contribute to the file path and URL. index segments remain in file paths and are omitted from URLs.
3. An index page is optional; only configured leaf documents are readable.
4. Use the Node.js runtime and include your content and configuration in your deployment.