AkurAI-Build

Latest change 0cf28150faedd8c150474a4f16be4c9922c04f56 - feat: add Ponytail UI design system 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" tabindex="-1">
  <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 %}