content

What it is

@kitr/content turns folders of markdown into typed pages. kitr generate renders each file once, with highlighted code, a table of contents and callouts, and writes JSON the app imports from #kitr/content: loadPage('docs', slug) for one page, nav.docs for the sidebar and loadSearch() for the search index.

It runs at build time; the app only reads the generated files, so a docs site can be fully static. Use it for docs, guides, changelogs and blog posts. For data that users edit, use a database with db.

Install

Adds @kitr/content, config/content.ts and a first page in content/docs/. The docs kit adds it with a sidebar, search and dark mode. Every change.

Quick start

Load a page in a route's loader and render it with <DocBody>:

import { defineRoutes } from '@kitr/kitr/app'
import { notFound } from '@kitr/router'
import router from '@kitr/router/routes'
import { loadPage } from '#kitr/content'

export const routes = defineRoutes([router], (r) =>
  r.page('/docs/$slug', {
    loader: async ({ params }) => {
      const page = await loadPage('docs', params.slug)
      if (!page) throw notFound()
      return page
    },
    lazy: () => import('./pages/docs/slug'),
  }),
)

Open /docs/getting-started. The page shows content/docs/getting-started.md, its code highlighted for light and dark themes, and kitr dev re-renders it when you save the file. Next in the guide: Render a page.

Built on

unified parses the markdown with remark and rehype, and Shiki highlights code with the same grammars as VS Code. kitr adds collections, nav.json, typed slugs, callouts, command blocks with a package-manager picker, search and llms.txt.

Problems it solves

• Docs that drift from the sidebar. Order and group pages.
• Code samples that look different in dark mode. Highlight code.
• Install commands for one package manager only. Show commands for every package manager.
• No search on a static site. Search the pages.
• Coding agents that scrape HTML. Serve llms.txt.

Further reading

• Guide.
• API reference.
• unified and Shiki.
• SEO, Router and the docs kit.