Routing

Routing here is file-based. There are two layers working together:

1. AnalogJS page components under docs/src/app/pages define the app's routes.
2. A single catch-all page renders any Markdown file under docs/src/content/docs.

The catch-all page

The file pages/docs/[...slug].page.ts matches every URL beneath /docs. The slug param captures the full remaining path — including slashes — so nested folders just work:

import { Component } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { injectContent, MarkdownComponent } from '@analogjs/content';

@Component({
  selector: 'docs-page',
  imports: [MarkdownComponent],
  template: `<analog-markdown [content]="doc()?.content" />`,
})
export default class DocPage {
  // /docs/guides/routing  ->  src/content/docs/guides/routing.md
  readonly doc = toSignal(
    injectContent({ param: 'slug', subdirectory: 'docs' }),
  );
}

URL mapping

The path under content/docs becomes the path under /docs:

File	URL
content/docs/getting-started.md	/docs/getting-started
content/docs/guides/routing.md	/docs/guides/routing
content/docs/api/overview.md	/docs/api/overview

Frontmatter drives everything

Every file starts with YAML frontmatter:

---
title: Routing
description: Short summary used in lists and meta tags
order: 3
section: Guides
---

• title and description set the page <title> and meta description.
• section groups the page in the sidebar.
• order sorts pages within a section (and drives previous/next links).

Because the sidebar is generated from this frontmatter, adding a page never requires touching TypeScript. See Auto-generated navigation.

Linking between docs

Use normal Markdown links with absolute paths, like [Deployment](/docs/guides/deployment). The router intercepts them so navigation stays a single-page transition.