Overview

The Documentation collection powers content under /docs/*. Every entry is MDX composed of reusable sections (Header, Text, Image, Code block, Info block). The sidebar is generated from the folder structure and each file’s order.

Location and slug

  • Collection: doc
  • Path: content/docs
  • Slug: based on folders and filename (e.g. content/docs/get-started/install.mdx → /docs/get-started/install)

To create a grouped section like cms with nested pages:

  1. Create a top-level file content/docs/cms.mdx (set title, optional icon, and order).
  2. Create a folder content/docs/cms/ and place child pages inside (e.g. documentation.mdx).

The sidebar uses this pattern to nest items under the parent.

How it renders

  • app/docs/[[...slug]]/page.tsx fetches the doc by slug and converts the SEO object via generateSeoMetadata().
  • DocsSections maps Tina sections to React components.
  • DocsBreadcrumbs builds a trail from the structured nav.
  • DocsPagination shows Previous/Next based on nav order.
  • Static params are generated from Tina; the page revalidates daily.

Sidebar and ordering

The sidebar is built by walking content/docs and sorting items by order. Nested folders become nested groups. Each item can set an icon from the Lucide list.

To add new icons, update the enum LucideIcon and the LucideIconMap used by the renderer, then expose options via lucideIcons.

Sections you can use

  • Header - small section title used inside the page.
  • Text - rich text; keep paragraphs short.
  • Image - image with alt text; prefer /public assets.
  • Code block - language + code string, highlighted with Shiki.
  • Info block - short callouts or tips.

Code highlighting

Code blocks use Shiki for syntax highlighting. Available languages are defined in tina/options/codeLanguages.ts and map to Shiki IDs. You can extend the list using identifiers from Shikiji’s language catalog. See Styling & Theming.

Choose concise language IDs. Example: typescript, tsx, bash, json. Match exactly what Shiki expects.

Search

A FlexSearch index is generated at build time and loaded by the docs layout. The floating button toggles the sidebar and search on small screens.

After adding or renaming docs, rebuild to refresh the search index.

SEO

Each doc includes the shared SEO object. Metadata is generated with generateSeoMetadata() and the canonical path /docs/<slug>. Keep both descriptions ≤ 160 characters and prefer OG images sized 1280×640 (WebP).

Tips

  • Use folders for sections, order for sorting within each level.
  • Keep one topic per page. Split long pages rather than adding many headers.
  • Prefer relative links between docs (e.g. /docs/get-started/install).
  • Keep images small; use WebP if possible.