Theme Demo

This page intentionally exercises common content patterns so theme changes can be checked in one place. It is not product copy; it is a compact visual fixture for markdown rendering, generated navigation, code highlighting, callouts, tables, badges, and Mermaid diagrams.

Typography

Foundatio Theme should make normal documentation feel calm and readable. Paragraphs, inline code, links, lists, blockquotes, and badges should all sit on the same typographic baseline without surprising spacing.

Inline badge Warning Danger

Navigation is generated from markdown front matter.
Search, LLM files, and markdown mirrors are generated during the Lume build.
Code blocks use the same Shiki rendering path in pages and detailed search excerpts.

A blockquote should read as secondary documentation context, not as a card or callout.

Callouts

INFO

Info callouts are useful for neutral context and short implementation notes.

Success path

Tip callouts highlight the recommended path. Inline code such as site.use(foundatio()) should inherit the correct callout code background.

Watch the bundle

Warnings should stand out without turning the whole page into an alert. They often mention tradeoffs, version constraints, or migration details.

Deployment check

Danger callouts are reserved for things that can break deployed sites, such as serving extensionless HTML files as downloads.

Rendered details

Details blocks should render as expandable content and preserve nested markdown.

export const expanded = true;

Code Blocks

Code blocks should use VitePress-style chrome, copy buttons, language labels, optional line numbers, highlighted lines, focused lines, warnings, errors, and colored diffs.

export default {
  name: "FoundatioTheme"
}

import lume from "lume/mod.ts";
import foundatio from "jsr:@foundatiofx/lume-theme";

// Keep theme setup in Lume config.
const site = lume({ prettyUrls: true });
site.use(foundatio({
  title: "My Project",
  description: "Project documentation",
  docsRoot: "guide",
}));

export default site;

csharp

public record BuildSite(string Name);

public sealed class BuildSiteHandler
{
    public string Handle(BuildSite command)
    {
        return $"Built {command.Name}";
    }
}

export default {
  data() {
    return {
      msg: "Focused!"
    }
  }
}

export default {
  data() {
    return {
      msg: "Removed"
      msg: "Added"
      warning: "Check this"
      error: "Fix this"
    }
  }
}

Code Groups

Code group tabs use the same filename-based icon convention as VitePress.

config.jsconfig.ts

export default {
  title: "Foundatio Theme",
  docsRoot: "guide",
};

import type { FoundatioThemeOptions } from "jsr:@foundatiofx/lume-theme";

export default {
  title: "Foundatio Theme",
  docsRoot: "guide",
} satisfies FoundatioThemeOptions;

theme.tsguide/page.mdsrc/BuildSiteHandler.cs

import lume from "lume/mod.ts";
import foundatio from "jsr:@foundatiofx/lume-theme";

// Keep theme setup in Lume config.
const site = lume({ prettyUrls: true });

site.use(foundatio({
  title: "Project Docs",
  description: "Technical documentation",
  docsRoot: "guide",
}));

export default site;

---
title: Page Title
nav:
  section: Guide
  order: 1
---

# Page Title

Write normal markdown content.

csharp

public record BuildSite(string Name);

public sealed class BuildSiteHandler
{
    public string Handle(BuildSite command)
    {
        return $"Built {command.Name}";
    }
}

A code group with one file should still keep the same tab and block chrome.

single.config.ts

import lume from "lume/mod.ts";
import foundatio from "jsr:@foundatiofx/lume-theme";

const site = lume({ prettyUrls: true });
site.use(foundatio({ title: "Single File Group" }));

export default site;

Tables

Feature	Output	Notes
Local search	`search-index.json`	Compact section-level records
LLM index	`llms.txt` and `llms-full.txt`	Generated from docs content
Markdown mirrors	`.md` files beside clean docs URLs	Authoring metadata stripped

Mermaid

Mermaid diagrams should be lazy-loaded and rendered after the page is interactive.

flowchart LR
  Markdown[Markdown pages] --> Lume[Lume build]
  Lume --> Theme[Foundatio theme]
  Theme --> Site[Generated site]
  Theme --> Search[Search index]
  Theme --> Mirrors[Markdown mirrors]

Links

Internal links such as Getting Started and Components should use clean URLs and pass URL checking. External links such as Lume should retain their normal external-link treatment.

This page is part of the generated sidebar, so it should receive previous and next page links from surrounding guide pages.