Hooked up Turbo.js to mix navigation

This commit is contained in:
Ben Aultowski 2025-12-28 12:48:20 -05:00
parent 8e72b437f6
commit eb53317ca2
2 changed files with 28 additions and 21 deletions

View file

@ -2,24 +2,26 @@
layout: base layout: base
--- ---
<div class="region" style="--region-space-top: var(--space-xl-2xl)"> <turbo-frame id="main-content">
<div class="wrapper flow prose"> <div class="region" style="--region-space-top: var(--space-xl-2xl)">
<h1>{{ title }}</h1> <div class="wrapper flow prose">
{{ content | safe }} <h1>{{ title }}</h1>
{{ content | safe }}
{% set projectTracks = collections.tracksByProject[project] %} {% set projectTracks = collections.tracksByProject[project] %}
<nav aria-label="Track list" class="region region-space-l"> <nav aria-label="Track list" class="region region-space-l">
<h2>Track List</h2> <h2>Track List</h2>
<ol class="flow" style="--flow-space: var(--space-xs)"> <ol class="flow" style="--flow-space: var(--space-xs)">
{% for track in projectTracks %} {% for track in projectTracks %}
<li> <li>
<a href="{{ track.url }}">{{ track.data.title }} — {{ track.data.artist }}</a> <a href="{{ track.url }}">{{ track.data.title }} — {{ track.data.artist }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
</nav> </nav>
</div>
</div> </div>
</div> </turbo-frame>
{% js "defer" %} {% js "defer" %}
import * as Turbo from '/assets/components/turbo.js'; import * as Turbo from '/assets/components/turbo.js';

View file

@ -13,9 +13,10 @@ layout: base
{% set next = projectTracks[currentIndex + 1] %} {% set next = projectTracks[currentIndex + 1] %}
{% set albumUrl = "/mixes/" + (project | slugify) + "/" %} {% set albumUrl = "/mixes/" + (project | slugify) + "/" %}
<div class="region" style="--region-space-top: var(--space-xl-2xl)"> <turbo-frame id="main-content">
<div class="wrapper flow prose"> <div class="region" style="--region-space-top: var(--space-xl-2xl)">
<nav aria-label="Album navigation" class="cluster" style="--cluster-horizontal-alignment: space-between; --gutter: var(--space-s)"> <div class="wrapper flow prose">
<nav aria-label="Album navigation" class="cluster" style="--cluster-horizontal-alignment: space-between; --gutter: var(--space-s)">
<div> <div>
<a href="{{ albumUrl }}" class="button" aria-label="Back to album">Contents</a> <a href="{{ albumUrl }}" class="button" aria-label="Back to album">Contents</a>
</div> </div>
@ -48,6 +49,10 @@ layout: base
{% endif %} {% endif %}
</div> </div>
</nav> </nav>
</div>
</div> </div>
</turbo-frame>
</div>
{% js "defer" %}
import * as Turbo from '/assets/components/turbo.js';
{% endjs %}