Patterns

Shared styles, layout components, and how to keep CSS and structure DRY across pages.

Shared styles (styles.c.html)

You can put common CSS in a component and mount it in a template so every page that uses that template gets it. Create a .c.html file that only has a <style> block with mount="head" and serve="inline". Set TYPE: component and MOUNT: styles (or any slot name). Then in that template put {{MOUNT.styles}} inside <head> next to {{MOUNT.head}}. The build merges that component’s styles into the head for every page using that template.

e.g. src/_components/styles.c.html

---
TYPE: component
MOUNT: styles
---
<style mount="head" serve="inline">
  :root { --color-text: #e8e8e8; --color-muted: #888; }
  body { font-family: system-ui; background: #000; color: var(--color-text); }
  /* shared layout, code blocks, etc. */
</style>

In your .t.html template

<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
  {{MOUNT.styles}}
  {{MOUNT.head}}
</head>

Order matters: MOUNT.styles before MOUNT.head so page-specific styles can override. Duplicate style blocks are deduped by the build, but defining shared variables and base rules in one place keeps things consistent.

Layout in a template

Put nav, footer, and layout structure in a template so every page that uses that template gets the same shell. Use {{MOUNT.nav}}, {{MOUNT.footer}}, and wrap {{MOUNT.content}} in a <main> or grid. Each page picks a template via TEMPLATE: (e.g. all docs pages use the docs template; other pages use another). The template supplies the layout; the page supplies the content.

Template body

{{MOUNT.nav}}

<main class="main-content">
  {{MOUNT.content}}
</main>

{{MOUNT.footer}}
{{MOUNT.body}}

Reusable code block / UI components

Components that only inject CSS (no body, or a minimal wrapper) are useful for shared UI: e.g. a codeblock component with mount="head" for .code-block styles. Every page that uses code blocks includes {{MOUNT.codeblock}} once so the styles are in head; then use the same class names in your HTML. Same idea for a shared button, card, or form style component.

Page: include once, then use class

{{MOUNT.codeblock}}
<div class="code-block-wrap"><pre class="code-block">const x = 1;</pre></div>

Docs-style multi-page layout

For a docs site with a sidebar, use a layout component (e.g. docslayout) that only has CSS for the grid and sidebar. A nav component (e.g. docsnav) receives a variable like activeFileTypes so the current page can set the active link. Each doc page includes {{MOUNT.docslayout}}, {{MOUNT.docsnav:activeFileTypes}}, and the article content. See this site’s src/docs/ and src/_components/ for a full example.