Home Documentation Templates Examples Showcase GitHub ↗
Theme

Pattern

Documentation sites.

Documentation is a natural fit for Nift: many pages share the same navigation and layout, while each page's actual content remains simple and readable.

Structure

content/docs/
  getting-started.html
  configuration.html
  api.html
templates/
  docs.html
  partials/
    docs-sidebar.html
    header.html
    footer.html

Documentation template

<body>
  @input('templates/partials/header.html')
  <div class="docs-layout">
    @input('templates/partials/docs-sidebar.html')
    <main class="docs-content">@content</main>
  </div>
  @input('templates/partials/footer.html')
</body>

Links survive nesting

<a href="@pathto('docs/getting-started')">Getting started</a>
<a href="@pathto('docs/api')">API</a>

The same partial can be used by pages at different output depths because @pathto resolves from the current output page.

Shared docs UI becomes a dependency

When every documentation page inputs the same sidebar, changing that sidebar marks the pages that use it as affected. That makes a large docs site a good demonstration of Nift's dependency-aware incremental builds.

Keep authoring simple.

You can layer Markdown conversion or another content tool beside Nift if you want it, but Nift does not require a special documentation content format.

Versioned documentation

content/docs/
  v4/
    getting-started.html
    commands.html
  migration/
    v3-to-v4.html

Tracked names keep internal links explicit while shared templates can give current and historical docs the same overall design.

Documentation with interactive examples

A docs page can still load TypeScript-generated playgrounds, search UI or copy buttons from public/assets/. Static/generated documentation and interactive browser features are not mutually exclusive.