API Overview

This page summarizes the small set of AnalogJS content helpers the site uses. You will reach for these whenever you extend the docs.

injectContent

Loads a single content file, reactively, based on the current route.

import { injectContent } from '@analogjs/content';

// By route param + subdirectory (used by the catch-all doc page)
injectContent({ param: 'slug', subdirectory: 'docs' });

// By an explicit filename (relative to src/content, no extension)
injectContent({ customFilename: 'docs/getting-started' });

It returns an Observable<ContentFile> whose shape is:

Field	Type	Description
attributes	Record<string, any>	Parsed frontmatter
content	string	Rendered HTML
toc	TableOfContentItem[]	Headings for the "On this page" list
slug	string	Resolved slug

injectContentFiles

Returns metadata for all content files — no bodies. This is what powers the auto-generated sidebar:

import { injectContentFiles } from '@analogjs/content';

interface DocAttributes {
  title: string;
  description?: string;
  order: number;
  section: string;
}

const docs = injectContentFiles<DocAttributes>((file) =>
  file.filename.includes('/content/docs/'),
);

How navigation is generated

1. Read every doc's frontmatter with injectContentFiles.
2. Group by section.
3. Sort items by order, then title.
4. Order sections by their smallest order.

The result: dropping a new .md file into content/docs makes it appear in the sidebar, become routable, and get prerendered — with zero code changes. This is the single most important property of the site.

Rendering Markdown

The <analog-markdown> component renders HTML and accepts a class string, which is where the Tailwind Typography prose classes go:

import { MarkdownComponent } from '@analogjs/content';

<analog-markdown
  [content]="doc()?.content"
  classes="prose prose-slate dark:prose-invert max-w-none"
/>

Related reading: Routing and Deployment.