Mix refinement
This commit is contained in:
parent
5fdf3b2259
commit
d52e5fff4b
30 changed files with 154 additions and 42 deletions
|
|
@ -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
13
package-lock.json
generated
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
4
src/_config/filters/pad-number.js
Normal file
4
src/_config/filters/pad-number.js
Normal 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');
|
||||
};
|
||||
32
src/_includes/partials/album-info.njk
Normal file
32
src/_includes/partials/album-info.njk
Normal 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 %}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
53
src/_layouts/track.njk
Normal 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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: mix
|
||||
title: "Tomorrow's Bacon"
|
||||
title: "Tomorrow’s Bacon"
|
||||
project: TomorrowsBacon
|
||||
permalink: /mixes/tomorrowsbacon/index.html
|
||||
go: tomorrowsbacon
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Tim"
|
|||
date: 1985-09-18
|
||||
project: TomorrowsBacon
|
||||
track_number: 02
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Mania"
|
|||
date: 1988-05-31
|
||||
project: TomorrowsBacon
|
||||
track_number: 03
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Mania"
|
|||
date: 2020-06-03
|
||||
project: TomorrowsBacon
|
||||
track_number: 04
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Fine Art"
|
|||
date: 2024-06-14
|
||||
project: TomorrowsBacon
|
||||
track_number: 05
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Fine Art"
|
|||
date: 2017-10-06
|
||||
project: TomorrowsBacon
|
||||
track_number: 6
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Cracker Island"
|
|||
date: 2023-02-24
|
||||
project: TomorrowsBacon
|
||||
track_number: 7
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "OK Computer"
|
|||
date: 1997-05-21
|
||||
project: TomorrowsBacon
|
||||
track_number: 9
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "London Calling"
|
|||
date: 1979-12-14
|
||||
project: TomorrowsBacon
|
||||
track_number: 10
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Young Enough"
|
|||
date: 2019-05-10
|
||||
project: TomorrowsBacon
|
||||
track_number: 12
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Love Is Dead"
|
|||
date: 1996-01-19
|
||||
project: TomorrowsBacon
|
||||
track_number: 13
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Wide Awake!"
|
|||
date: 2018-05-18
|
||||
project: TomorrowsBacon
|
||||
track_number: 14
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Van Halen"
|
|||
date: 1978-02-10
|
||||
project: TomorrowsBacon
|
||||
track_number: 15
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Mountainhead"
|
|||
date: 2024-03-01
|
||||
project: TomorrowsBacon
|
||||
track_number: 16
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Yes"
|
|||
date: 1995-03-21
|
||||
project: TomorrowsBacon
|
||||
track_number: 18
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Sniff More Gritty"
|
|||
date: 2024-11-15
|
||||
project: TomorrowsBacon
|
||||
track_number: 19
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ album: "Nowhere"
|
|||
date: 1990-09-15
|
||||
project: TomorrowsBacon
|
||||
track_number: 20
|
||||
start_time: ""
|
||||
---
|
||||
## Notes
|
||||
Notes go here.
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
},
|
||||
};
|
||||
Loading…
Reference in a new issue