Skip to main content
On this page

Kitchen Sink

This is the single markdown regression page for the @pagesmith/docs example. It exercises alerts, math, GFM, tables, tasks, code fences, typography, and footnotes together so this example has one obvious place to verify markdown rendering.

For how this docs site is wired, use the rest of the Guide: pagesmith.config.json5, content/, meta.json5, layout overrides, Pagefind, and CLI flows all live there.

Note

This page intentionally stacks many features. In real docs, prefer focused content and use a page like this only for regression coverage.

Pipeline snapshot

The @pagesmith/docs build uses @pagesmith/core’s markdown stack. A simplified mental model:

Stage Role
remark Parse Markdown -> mdast
plugins GFM, math, alerts, typography
rehype HTML ast + code chrome, TOC
serialize HTML string for layouts

Annotated TypeScript (illustrative)

pipeline sketch
  return unified()    .use(remarkParse)    .use(remarkGfm)    .use(remarkMath)    .use(...options.remarkPlugins)    .use(remarkRehype)    .use(...options.rehypePlugins);}

Multi-language schema snippets

TypeScript
import { z } from "zod";const PostSchema = z.object({  title: z.string(),  date: z.coerce.date(),  draft: z.boolean().default(false),  tags: z.array(z.string()).default([]),});
Python (Pydantic)
from pydantic import BaseModelfrom datetime import datefrom typing import Listclass Post(BaseModel):    title: str    date: date    draft: bool = False    tags: List[str] = []

Equations

Build-time work for pages is loosely for plugin count . Display math:

GFM mix

Check State
Tables On
MathJax On
GitHub alerts On
  • remark pipeline
  • Built-in code renderer
  • Placeholder unchecked item

Strikethrough: old path current path.

Code tabs + collapse

npm
npm install @pagesmith/docs
pnpm
pnpm add @pagesmith/docs
widget.ts
export type Widget = { id: string };export function getWidget(id: string): Widget | undefined {  stats.hits++;  return cache.get(id);}

Diff fence

Diff
- const port = 3000+ const port = Number(process.env.PORT) || 3000

Bare URL autolink: https://github.com/sujeet-pro/pagesmith

Pagesmith processes Markdown in a unified-style pipeline1.

Deployment

Static HTML goes to outDir from pagesmith.config.json5 (this repo points at ../../gh-pages/examples/doc-site for GitHub Pages). Set basePath and origin to match where the site is hosted.

Important

basePath must match your host’s URL prefix, for example a GitHub Pages project site under /repo-name.

.github/workflows/deploy.yml
jobs:  deploy:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: actions/setup-node@v4        with:          node-version: 20      - run: npm ci      - run: npm run build      - uses: actions/upload-pages-artifact@v5        with:          path: gh-pages      - uses: actions/deploy-pages@v5

Quick reference

Feature Notes
Bold **text**
Inline math $x$ delimiters
Display math $$ fences
Table pipe tables
Task - [ ] / - [x]
Alert > [!NOTE] syntax
Code metadata title, mark, collapse on fenced code

This is the only markdown showcase page in this example. The rest of the guide explains the docs workflow itself.

Footnotes

  1. See https://unifiedjs.com for the broader ecosystem this stack resembles. ↩