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

View file

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