AkurAI-Build

Latest change 5ecb45c5915e3bb122d43dbaf90b4eba39484c7d - organize native templates and reserve runtime routes by Olafur Bui

{% extends "layouts/base.html" %}
{% block title %}{{ params.slug | replace("-", " ") | title }} · Route demo · Bunfork{% endblock %}
{% block description %}Inspect a live Bunfork dynamic route, including its matched file, extracted slug, and decoded query fields.{% endblock %}
{% block body %}
<main id="main-content" class="shell article-shell route-demo-shell">
  <article>
    <header class="route-demo-intro">
      <p class="eyebrow">Native MiniJinja · dynamic route</p>
      <h1>{{ params.slug | replace("-", " ") | title }}</h1>
      <p class="lede">This HTML was rendered on the server for <code>{{ pathname }}</code>. The file route extracted the slug, decoded the query string, and passed both into an auto-escaped MiniJinja context.</p>
    </header>

    <section class="route-trace" aria-labelledby="route-trace-title">
      <div class="route-trace-header">
        <div>
          <p class="panel-kicker">Request trace</p>
          <h2 id="route-trace-title">One request, one matched file</h2>
        </div>
        <span class="route-trace-status"><span aria-hidden="true"></span>200 rendered</span>
      </div>
      <dl class="route-trace-list">
        <div>
          <dt>Request path</dt>
          <dd><code>{{ pathname }}</code></dd>
        </div>
        <div>
          <dt>Route pattern</dt>
          <dd><code>/notes/:slug</code></dd>
        </div>
        <div>
          <dt>Page template</dt>
          <dd><code>app/pages/notes/[slug].html</code></dd>
        </div>
        <div>
          <dt>Extracted param</dt>
          <dd><code>slug = {{ params.slug }}</code></dd>
        </div>
      </dl>
    </section>

    {% if query %}
    <section class="query-panel" aria-labelledby="query-panel-title">
      <div class="query-panel-heading">
        <div>
          <p class="panel-kicker">Query context</p>
          <h2 id="query-panel-title">Decoded URL fields</h2>
        </div>
        <p>Repeated keys remain separate values.</p>
      </div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr><th scope="col">Field</th><th scope="col">Value</th></tr>
          </thead>
          <tbody>
            {% for key, values in query | items %}
            <tr>
              <th scope="row"><code>{{ key }}</code></th>
              <td>
                <ul class="query-values">
                  {% for value in values %}<li><code>{{ value }}</code></li>{% endfor %}
                </ul>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
    {% endif %}

    <section class="route-examples" aria-labelledby="route-examples-title">
      <p class="panel-kicker">Try the matcher</p>
      <h2 id="route-examples-title">Swap only the slug</h2>
      <p>Each URL resolves to this same page file while receiving a different <code>params.slug</code> value.</p>
      <nav class="slug-chips" aria-label="Example dynamic routes">
        <a href="/notes/hello-rust"{% if params.slug == "hello-rust" %} aria-current="page"{% endif %}><code>hello-rust</code></a>
        <a href="/notes/verified-artifacts"{% if params.slug == "verified-artifacts" %} aria-current="page"{% endif %}><code>verified-artifacts</code></a>
        <a href="/notes/sqlcipher-at-rest"{% if params.slug == "sqlcipher-at-rest" %} aria-current="page"{% endif %}><code>sqlcipher-at-rest</code></a>
        <a href="/notes/bounded-vector-search"{% if params.slug == "bounded-vector-search" %} aria-current="page"{% endif %}><code>bounded-vector-search</code></a>
      </nav>
      <p class="route-query-example"><a href="{{ pathname }}?source=route-demo&amp;tag=rust&amp;tag=html">Attach repeated query values</a> to render the decoded fields above.</p>
    </section>

    <div class="route-demo-actions">
      <a class="button secondary" href="/">Back home</a>
      <a class="text-link" href="/docs">Read the documentation <span aria-hidden="true">→</span></a>
    </div>
  </article>
</main>
{% endblock %}