Mix refinement

This commit is contained in:
Ben Aultowski 2025-12-28 03:32:42 -05:00
parent 5fdf3b2259
commit d52e5fff4b
30 changed files with 154 additions and 42 deletions

View file

@ -83,12 +83,14 @@ export default async function (eleventyConfig) {
// --------------------- Filters
eleventyConfig.addFilter('toIsoString', filters.toISOString);
eleventyConfig.addFilter('formatDate', filters.formatDate);
eleventyConfig.addFilter('formatDateUTC', filters.formatDateUTC);
eleventyConfig.addFilter('markdownFormat', filters.markdownFormat);
eleventyConfig.addFilter('splitlines', filters.splitlines);
eleventyConfig.addFilter('striptags', filters.striptags);
eleventyConfig.addFilter('shuffle', filters.shuffleArray);
eleventyConfig.addFilter('alphabetic', filters.sortAlphabetically);
eleventyConfig.addFilter('slugify', filters.slugifyString);
eleventyConfig.addFilter('padNumber', filters.padNumber);
// --------------------- Shortcodes
eleventyConfig.addShortcode('svg', shortcodes.svgShortcode);

13
package-lock.json generated
View file

@ -2204,7 +2204,8 @@
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
"integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
"dev": true,
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@types/markdown-it": {
"version": "14.1.2",
@ -2223,7 +2224,8 @@
"resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
"dev": true,
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@types/node": {
"version": "24.10.1",
@ -2733,7 +2735,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.25",
"caniuse-lite": "^1.0.30001754",
@ -3399,8 +3400,7 @@
"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
"integrity": "sha512-vhE6eymDQSKWUXwwA37NtTTVEzjtGVfDr3pRbsWEQ5onH/Snp2c+2xZHWJJawG/0hCCJLRGt4xVtEVUVILol4w==",
"dev": true,
"license": "BSD-3-Clause",
"peer": true
"license": "BSD-3-Clause"
},
"node_modules/didyoumean": {
"version": "1.2.2",
@ -4841,7 +4841,6 @@
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
"license": "MIT",
"peer": true,
"dependencies": {
"argparse": "^2.0.1",
"entities": "^4.4.0",
@ -5754,7 +5753,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@ -6450,7 +6448,6 @@
"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
"integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
"license": "MIT",
"peer": true,
"dependencies": {
"posthtml-parser": "^0.11.0",
"posthtml-render": "^3.0.0"

View file

@ -1,18 +1,21 @@
import {toISOString, formatDate} from './filters/dates.js';
import {toISOString, formatDate, formatDateUTC} from './filters/dates.js';
import {markdownFormat} from './filters/markdown-format.js';
import {shuffleArray} from './filters/sort-random.js';
import {sortAlphabetically} from './filters/sort-alphabetic.js';
import {splitlines} from './filters/splitlines.js';
import {striptags} from './filters/striptags.js';
import {slugifyString} from './filters/slugify.js';
import {padNumber} from './filters/pad-number.js';
export default {
toISOString,
formatDate,
formatDateUTC,
markdownFormat,
splitlines,
striptags,
shuffleArray,
sortAlphabetically,
slugifyString
slugifyString,
padNumber
};

View file

@ -1,7 +1,12 @@
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc.js';
dayjs.extend(utc);
/** Converts the given date string to ISO8610 format. */
export const toISOString = dateString => dayjs(dateString).toISOString();
/** Formats a date using dayjs's conventions: https://day.js.org/docs/en/display/format */
export const formatDate = (date, format) => dayjs(date).format(format);
/** Formats a date in UTC to avoid TZ shifts for day-only dates */
export const formatDateUTC = (date, format) => dayjs.utc(date).format(format);

View file

@ -0,0 +1,4 @@
/** Pads a number with leading zeros to 2 digits. */
export const padNumber = (num, length = 2) => {
return String(num).padStart(length, '0');
};

View file

@ -0,0 +1,32 @@
{% if album or artist or date %}
<div class="album-info | sidebar" style="--gutter: var(--space-s); --flow-space: var(--space-s); --sidebar-target-width: 200px; padding: var(--space-s); background: var(--color-bg-accent); border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-2, 8px)">
{% if albumArt %}
<div>
{% imageKeys {
"src": albumArt,
"alt": album + " — " + artist,
"loading": "lazy",
"widths": [200, 400],
"sizes": "(min-width:48em) 200px, 33vw",
"formats": ["webp", "jpeg"]
} %}
</div>
{% else %}
<div aria-hidden="true" style="inline-size: 200px; block-size: 200px; background: var(--color-bg-accent-2); border: var(--stroke); border-radius: var(--border-radius-medium)"></div>
{% endif %}
<div class="flow" style="--flow-space: var(--space-3xs)">
{% if album %}
<p class="text-step-1 font-display">{{ album }}</p>
{% endif %}
{% if artist %}
<p class="text-step-0">{{ artist }}</p>
{% endif %}
{% if date %}
<p class="text-step--1">
<time datetime="{{ date | toIsoString }}">{{ date | formatDateUTC("MMMM D, YYYY") }}</time>
</p>
{% endif %}
</div>
</div>
{% endif %}

View file

@ -1,20 +1,10 @@
{% set headingLevel = headingLevel | default(false) %}
{% set headingLevel = headingLevel | default('h3') %}
<details class="details flow" id="{{ item.data.title }}">
<summary>
<{{ headingLevel }}>
{{ item.data.track_number }}. {{ item.data.title }} by {{ item.data.artist }}
</{{ headingLevel }}>
</summary>
<section class="flow" id="{{ item.data.title | slugify }}">
<{{ headingLevel }}>
{{ item.data.track_number }}. {{ item.data.title }} by {{ item.data.artist }}
</{{ headingLevel }}>
<div class="flow">
{{- item.templateContent | safe -}}
</div>
</details>
{% css "local" %}
{% include "css/details.css" %}
{% endcss %}
{% js "defer" %}
{% include "scripts/details.js" %}
{% endjs %}
</section>

View file

@ -7,14 +7,16 @@ layout: base
<h1>{{ title }}</h1>
{{ content | safe }}
<div class="feature | region region-space-l">
{% set projectTracks = collections.tracksByProject[project] %}
{% set projectTracks = collections.tracksByProject[project] %}
<nav aria-label="Track list" class="region region-space-l">
<h2>Contents</h2>
<ol class="flow" style="--flow-space: var(--space-xs)">
{% for track in projectTracks %}
{% set item = track %}
{% include "partials/card-mix-track.njk" %}
<li>
<a href="{{ track.url }}">{{ track.data.title }} — {{ track.data.artist }}</a>
</li>
{% endfor %}
</div>
</ol>
</nav>
</div>
</div>

53
src/_layouts/track.njk Normal file
View file

@ -0,0 +1,53 @@
---
layout: base
---
{% set projectTracks = collections.tracksByProject[project] %}
{% set currentIndex = -1 %}
{% for t in projectTracks %}
{% if t.url == page.url %}
{% set currentIndex = loop.index0 %}
{% endif %}
{% endfor %}
{% set prev = projectTracks[currentIndex - 1] %}
{% 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)">
<div>
<a href="{{ albumUrl }}" class="button" aria-label="Back to album">Contents</a>
</div>
<div class="cluster" style="--gutter: var(--space-xs)">
{% if prev %}
<a rel="prev" href="{{ prev.url }}" class="button">← {{ prev.data.track_number | padNumber }}. {{ prev.data.title }}</a>
{% endif %}
{% if next %}
<a rel="next" href="{{ next.url }}" class="button">{{ next.data.track_number | padNumber }}. {{ next.data.title }} →</a>
{% endif %}
</div>
</nav>
<h1>{{ title }}</h1>
{% include "partials/album-info.njk" %}
{{ content | safe }}
<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>
<div class="cluster" style="--gutter: var(--space-xs)">
{% if prev %}
<a rel="prev" href="{{ prev.url }}" class="button">← {{ prev.data.track_number | padNumber }}. {{ prev.data.title }}</a>
{% endif %}
{% if next %}
<a rel="next" href="{{ next.url }}" class="button">{{ next.data.track_number | padNumber }}. {{ next.data.title }} →</a>
{% endif %}
</div>
</nav>
</div>
</div>

View file

@ -1,6 +1,6 @@
---
layout: mix
title: "Tomorrow's Bacon"
title: "Tomorrows Bacon"
project: TomorrowsBacon
permalink: /mixes/tomorrowsbacon/index.html
go: tomorrowsbacon

View file

@ -5,16 +5,11 @@ album: "Whiplash"
date: 1997-02-24
project: TomorrowsBacon
track_number: 01
start_time: ""
albumArt: "/pages/projects/mixes/tomorrowsbacon/james-whiplash.jpg"
---
{% imageKeys {
"src": "/pages/projects/mixes/tomorrowsbacon/james-whiplash.jpg",
"alt": "Whiplash by James",
"loading": "lazy",
"widths": [200, 400],
"sizes": "(min-width:30em) 50vw, 100vw",
"formats": ["webp", "jpeg"]
} %}
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Tim"
date: 1985-09-18
project: TomorrowsBacon
track_number: 02
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Mania"
date: 1988-05-31
project: TomorrowsBacon
track_number: 03
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Mania"
date: 2020-06-03
project: TomorrowsBacon
track_number: 04
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Fine Art"
date: 2024-06-14
project: TomorrowsBacon
track_number: 05
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Fine Art"
date: 2017-10-06
project: TomorrowsBacon
track_number: 6
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Cracker Island"
date: 2023-02-24
project: TomorrowsBacon
track_number: 7
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "All Is Full of Love [CD Single]"
date: 1999-05-24
project: TomorrowsBacon
track_number: 8
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "OK Computer"
date: 1997-05-21
project: TomorrowsBacon
track_number: 9
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "London Calling"
date: 1979-12-14
project: TomorrowsBacon
track_number: 10
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Young Enough"
date: 2019-05-10
project: TomorrowsBacon
track_number: 12
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Love Is Dead"
date: 1996-01-19
project: TomorrowsBacon
track_number: 13
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Wide Awake!"
date: 2018-05-18
project: TomorrowsBacon
track_number: 14
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Van Halen"
date: 1978-02-10
project: TomorrowsBacon
track_number: 15
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Mountainhead"
date: 2024-03-01
project: TomorrowsBacon
track_number: 16
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "We Were Dead Before The Ship Even Sank"
date: 2007-03-20
project: TomorrowsBacon
track_number: 17
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Yes"
date: 1995-03-21
project: TomorrowsBacon
track_number: 18
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Sniff More Gritty"
date: 2024-11-15
project: TomorrowsBacon
track_number: 19
start_time: ""
---
## Notes
Notes go here.

View file

@ -5,6 +5,7 @@ album: "Nowhere"
date: 1990-09-15
project: TomorrowsBacon
track_number: 20
start_time: ""
---
## Notes
Notes go here.

View file

@ -0,0 +1,11 @@
import slugify from "slugify";
const s = (str) => slugify(String(str), { lower: true, strict: true });
export default {
layout: "track",
permalink: (data) => {
const num = String(data.track_number).padStart(2, "0");
return `/mixes/${s(data.project)}/${num}-${s(data.title)}/index.html`;
},
};