docgen-render 0.1.1

HTML rendering for docgen, the Cargo-only static documentation-site generator
Documentation
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{% if site_title %}{{ title }} — {{ site_title }}{% else %}{{ title }}{% endif %}</title>
  <script>(function(){try{
  var s=localStorage.getItem('doc-theme');
  var t=s||(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');
  document.documentElement.setAttribute('data-theme',t);
  var w=parseInt(localStorage.getItem('doc-left-rail-width'),10);
  if(w>=180&&w<=560)document.documentElement.style.setProperty('--left-rail-width',w+'px');
}catch(e){}})();</script>
  <link rel="stylesheet" href="{{ base | safe }}/docgen.css" />
  <link rel="stylesheet" href="{{ base | safe }}/code.css" />
  {% if has_components_css %}<link rel="stylesheet" href="{{ base | safe }}/components.css" />{% endif %}
  {% if has_math %}<link rel="stylesheet" href="{{ base | safe }}/vendor/katex/katex.min.css" />{% endif %}
</head>
{% macro render_nodes(nodes, depth, path) %}
<ul class="docgen-tree" data-depth="{{ depth }}">
  {% for node in nodes %}
    {% if node.kind == "dir" %}
      <li class="docgen-tree__group">
        <details class="docgen-tree__details" data-tree-path="{{ path }}/{{ node.name }}" open>
          <summary class="docgen-tree__summary{% if node.slug and node.slug == slug %} is-active{% endif %}"><span class="docgen-tree__chev" aria-hidden="true"></span>{% if node.slug %}<a class="docgen-tree__folder-link" href="{{ base | safe }}/{{ node.slug | safe }}"{% if node.slug == slug %} aria-current="page"{% endif %}>{{ node.name }}</a>{% else %}{{ node.name }}{% endif %}</summary>
          {{ render_nodes(node.children, depth + 1, path ~ "/" ~ node.name) }}
        </details>
      </li>
    {% else %}
      <li class="docgen-tree__item{% if node.slug == slug %} is-active{% endif %}">
        <a class="docgen-tree__link" href="{{ base | safe }}/{{ node.slug | safe }}"{% if node.slug == slug %} aria-current="page"{% endif %}>{{ node.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>
{% endmacro %}
<body class="docgen-app" x-data="{ navOpen: false }" @keydown.escape.window="navOpen=false">
  <a class="docgen-skip-link" href="#docgen-main">Skip to content</a>
  <header class="docgen-topbar">
    <a class="docgen-topbar__brand" href="{{ base | safe }}/">
      <span class="docgen-brand-mark" aria-hidden="true"></span>
      <span class="docgen-brand-name">{% if site_title %}{{ site_title }}{% else %}Docs{% endif %}</span>
    </a>
    <div class="docgen-topbar__main">
      {% if search_enabled %}
      <button class="docgen-search-trigger" data-docgen-search>
        <svg class="docgen-search-trigger__icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <span class="docgen-search-trigger__label">Search pages, headings, Rust refs…</span>
        <kbd class="docgen-kbd">⌘K</kbd>
      </button>
      {% endif %}
      <div class="docgen-topbar__actions">
        <div class="docgen-btn-strip" role="group" aria-label="Layout">
          {% if has_diff %}
          <a class="docgen-ctl--diff icon-only" href="{{ base | safe }}/diff" aria-label="Show documentation diff" title="Show documentation diff">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4v16M18 4v16"/><path d="M9 8h6M9 16h6M12 5v6M12 13v6"/></svg>
          </a>
          {% endif %}
          <button type="button" class="docgen-ctl--fullwidth icon-only" aria-pressed="false" aria-label="Toggle full page width" title="Toggle full page width">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5"/></svg>
          </button>
          <button type="button" class="docgen-ctl--rail icon-only" aria-pressed="true" aria-label="Toggle page info" title="Toggle page info">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
          </button>
        </div>
        <div class="docgen-theme-toggle" x-data="docgenThemeToggle" role="tablist" aria-label="Theme">
          <button type="button" class="docgen-theme-toggle__btn" :class="{ 'is-active': theme==='dark' }" :aria-pressed="theme==='dark'" @click="set('dark')" aria-label="Dark">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
          </button>
          <button type="button" class="docgen-theme-toggle__btn" :class="{ 'is-active': theme==='light' }" :aria-pressed="theme==='light'" @click="set('light')" aria-label="Light">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
          </button>
        </div>
        <button class="docgen-sidebar-toggle" aria-label="Toggle navigation" aria-controls="docgen-sidebar" :aria-expanded="navOpen ? 'true' : 'false'" @click="navOpen=!navOpen">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>
      </div>
    </div>
  </header>
  <div class="docgen-sidebar-backdrop" x-show="navOpen" @click="navOpen=false" x-cloak></div>
  <div class="docgen-layout">
    <nav class="docgen-sidebar" id="docgen-sidebar" :class="{ 'is-open': navOpen }">
      {{ render_nodes(tree, 0, "") }}
    </nav>
    <div class="docgen-rail-resizer" role="separator" aria-orientation="vertical" aria-label="Resize sidebar" tabindex="-1"></div>
    <main class="docgen-content" id="docgen-main" tabindex="-1">
      {% if home %}
      <section class="docgen-home">
        <header class="docgen-home__head">
          <div>
            <h1 class="docgen-home__title">{% if site_title %}{{ site_title }}{% else %}{{ title }}{% endif %}</h1>
            {% if home.description %}<p class="docgen-home__sub">{{ home.description }}</p>{% endif %}
          </div>
          <div class="docgen-home__stats">
            <div class="docgen-home__stat"><div class="docgen-home__stat-num">{{ home.pages }}</div><div class="docgen-home__stat-lbl">pages</div></div>
            <div class="docgen-home__stat"><div class="docgen-home__stat-num">{{ home.links }}</div><div class="docgen-home__stat-lbl">links</div></div>
            {% if commit %}<div class="docgen-home__stat"><div class="docgen-home__stat-num">{{ commit }}</div><div class="docgen-home__stat-lbl">commit</div></div>{% endif %}
          </div>
        </header>
        {% if search_enabled %}
        <button class="docgen-home__search" data-docgen-search>
          <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          <span class="docgen-home__search-ph">Use ⌘K or / anywhere to search — or open the documentation</span>
          <span class="docgen-home__search-hint">search</span>
        </button>
        {% endif %}
        {% if home.sections or home.recent %}
        <div class="docgen-home__grid">
          {% if home.sections %}
          <div class="docgen-home__col">
            <div class="docgen-home__col-title"><span>Sections</span><span>{{ home.sections | length }}</span></div>
            <div class="docgen-home__cards">
              {% for s in home.sections %}
              <a class="docgen-home__card" href="{{ base | safe }}/{{ s.slug | safe }}">
                <span class="docgen-home__card-title">{{ s.label }}</span>
                <span class="docgen-home__card-meta"><b>{{ s.count }}</b> pages</span>
              </a>
              {% endfor %}
            </div>
          </div>
          {% endif %}
          {% if home.recent %}
          <div class="docgen-home__col">
            <div class="docgen-home__col-title"><span>Recent</span><span>{{ home.recent | length }}</span></div>
            <ul class="docgen-home__recent">
              {% for r in home.recent %}
              <li>
                <span class="docgen-home__recent-when">{% if r.section %}{{ r.section }}{% else %}—{% endif %}</span>
                <a class="docgen-home__recent-what" href="{{ base | safe }}/{{ r.slug | safe }}">{{ r.title }}</a>
              </li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
        </div>
        {% endif %}
      </section>
      {% endif %}
      {% if not home %}
      <header class="docgen-doc-header">
        <h1 class="docgen-doc-title">{{ title }}</h1>
        {% if description %}<p class="docgen-doc-lede">{{ description }}</p>{% endif %}
      </header>
      {% endif %}
      <article class="docgen-doc-content">
        {{ body | safe }}
      </article>
      {% if is_home and graph_json %}
      <section class="docgen-home-graph" aria-label="Documentation graph">
        <div class="docgen-home-graph__head">
          <h2>Doc graph</h2>
          <span class="docgen-graph__meta">{{ graph_node_count }} nodes &middot; {{ graph_edge_count }} links</span>
        </div>
        <div class="docgen-graph" x-data="docgenGraph">
          <svg class="docgen-graph__svg" viewBox="0 0 1420 760" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Document link graph"></svg>
        </div>
        <script type="application/json" id="docgen-graph-data">{{ graph_json | safe }}</script>
      </section>
      {% endif %}
    </main>
    <aside class="docgen-rail" aria-label="Page navigation and information">
      {% if headings %}
      <section class="docgen-rail__section">
        <h2>On this page</h2>
        <nav class="docgen-rail__toc" aria-label="On this page">
          {% for h in headings %}
          <a class="docgen-rail__toc-link{% if h.depth == 3 %} is-depth-3{% endif %}" href="#{{ h.id | safe }}" data-toc-id="{{ h.id | safe }}">{{ h.text }}</a>
          {% endfor %}
        </nav>
      </section>
      {% endif %}
      <section class="docgen-rail__section">
        <h2>Additional info</h2>
        <div class="docgen-rail__info">
          <div class="docgen-rail__info-row">
            <span>Path</span>
            <a href="{{ base | safe }}/{{ slug | safe }}">/{{ slug }}</a>
          </div>
          <div class="docgen-rail__info-row">
            <span>Layer</span>
            <strong>{% if "/" in slug %}{{ (slug | split("/")) | first }}{% elif slug %}{{ slug }}{% else %}home{% endif %}</strong>
          </div>
          {% if commit %}
          <div class="docgen-rail__info-row">
            <span>Commit</span>
            <strong>{{ commit }}</strong>
          </div>
          {% endif %}
          {% if built %}
          <div class="docgen-rail__info-row">
            <span>Built</span>
            <strong>{{ built }}</strong>
          </div>
          {% endif %}
        </div>
      </section>
      {% if backlinks %}
      <section class="docgen-rail__section">
        <h2>Referenced by</h2>
        <div class="docgen-rail__backlinks">
          {% for bl in backlinks %}
          <a class="docgen-rail__backlink" href="{{ base | safe }}/{{ bl.slug | safe }}">
            <span>{{ bl.title }}</span>
            {% if bl.description %}<small>{{ bl.description }}</small>{% endif %}
          </a>
          {% endfor %}
        </div>
      </section>
      {% endif %}
    </aside>
  </div>
  <!-- island infra: bootstrap defines the registry; islands self-register; Alpine starts last -->
  <script>window.DOCGEN_BASE = {{ base | tojson | safe }};</script>
  <script src="{{ base | safe }}/bootstrap.js"></script>
  <script src="{{ base | safe }}/islands/theme-toggle.js"></script>
  <script src="{{ base | safe }}/islands/layout.js"></script>
  <script src="{{ base | safe }}/islands/scrollspy.js"></script>
  <script src="{{ base | safe }}/islands/wikilink.js"></script>
  {% if search_enabled %}<script src="{{ base | safe }}/search.js" defer></script>{% endif %}
  {% if is_home and graph_json %}<script src="{{ base | safe }}/islands/graph.js"></script>{% endif %}
  {% if has_mermaid %}<script src="{{ base | safe }}/islands/mermaid.js"></script>{% endif %}
  {% if has_component_island %}<script src="{{ base | safe }}/components.js"></script>{% endif %}
  <script src="{{ base | safe }}/vendor/alpine/alpine.min.js" defer></script>
</body>
</html>