Write Documentation Pages

In Beacon, each documentation page needs a content file and a navigation entry in content/nav.config.ts. The navigation entry determines the order of the page in the navigation menu.

Pages

Beacon uses MDX for documentation pages. MDX is Markdown with embedded JSX components.

In the <my-project> folder where you installed Beacon, add the document files under content/docs/ with the .mdx extension.

<my-project> is the name of the project you specified and Beacon created in the Install step.

See CommonMark Help for the official, standardized Markdown syntax.

Frontmatter

Each new documentation page needs a frontmatter block with a title and description:

---
title: A title for the page
description: A short, specific summary of what this page covers.
---

Navigation

When you add or move a page, add or update its entry in the items array of a group in content/nav.config.ts, such as Get Started. For example:

{ title: "My Page", href: "/my-page" }

content/nav.config.ts exports a list of groups, each with a title and an ordered list of items.

For example:

export const nav: NavGroup[] = [
  {
    title: "Get Started",
    href: "/",
    items: [
      { title: "Introduction", href: "/" },
      { title: "Quickstart", href: "/quickstart" },
    ],
  },
  {
    title: "Release Notes", href: "/release-notes",
    items: [],
  },
];

To nest a page under another page in the sidebar, add it to the parent item's children array:

{
  title: "My Page",
  href: "/my-page",
  children: [{ title: "My Child Page", href: "/my-child-page" }],
}

Page preview

Run the local development server to preview your changes as you edit your pages.

npm run dev