diff --git a/README.md b/README.md index 570c2f5..afaf2b4 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ My blog, originally based on the very helpful eleventy-base-blog v8, although it * Mastodon comment * Profile picture * Embedded toot + * Embed audio ### Quality of Life * Copyright notice, default post image, alt text, and author details defined in `metadata.js`. diff --git a/eleventy.config.js b/eleventy.config.js index 86d68f2..1dd3f98 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -2,32 +2,43 @@ import { DateTime } from "luxon"; import markdownIt from "markdown-it"; import markdownItFootnote from "markdown-it-footnote"; import markdownItAnchor from "markdown-it-anchor"; -import mdfigcaption from 'markdown-it-image-figures'; +import mdfigcaption from "markdown-it-image-figures"; import pluginRss from "@11ty/eleventy-plugin-rss"; import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; import pluginBundle from "@11ty/eleventy-plugin-bundle"; import pluginNavigation from "@11ty/eleventy-navigation"; import prettier from "prettier"; import { EleventyHtmlBasePlugin } from "@11ty/eleventy"; -import {dateSuffixAdder, monthMap, timeFormatter} from "./public/js/modules/mastodonDateTools.js"; +import { + dateSuffixAdder, + monthMap, + timeFormatter, +} from "./public/js/modules/mastodonDateTools.js"; const figoptions = { - figcaption: true + figcaption: true, }; -export default async function(eleventyConfig) { - +export default async function (eleventyConfig) { // Helper Functions const multiReplace = (text, replacementTable) => { let newText = text; - replacementTable.forEach(x => { newText = newText.replace(x[0], x[1]) }); + replacementTable.forEach((x) => { + newText = newText.replace(x[0], x[1]); + }); return newText; }; // Transforms eleventyConfig.addTransform("prettier", function (content, outputPath) { if (outputPath && outputPath.endsWith(".html")) { - return prettier.format(content, {parser: "html", bracketSameLine: true, vueIndentScriptAndStyle: true, singleAttributePerLine: true, htmlWhitespaceSensitivity: "css"}); + return prettier.format(content, { + parser: "html", + bracketSameLine: true, + vueIndentScriptAndStyle: true, + singleAttributePerLine: true, + htmlWhitespaceSensitivity: "css", + }); } else { return content; } @@ -38,7 +49,7 @@ export default async function(eleventyConfig) { // Official plugins eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginSyntaxHighlight, { - preAttributes: { tabindex: 0 } + preAttributes: { tabindex: 0 }, }); eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(EleventyHtmlBasePlugin); @@ -47,37 +58,42 @@ export default async function(eleventyConfig) { // Filters eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => { // Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens - return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy"); + return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat( + format || "dd LLLL yyyy", + ); }); - eleventyConfig.addFilter('htmlDateString', (dateObj) => { + eleventyConfig.addFilter("htmlDateString", (dateObj) => { // dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string - return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd'); + return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd"); }); - eleventyConfig.addFilter("removeMostRecent", arr => { - return arr.slice(0, arr.length-1); + eleventyConfig.addFilter("removeMostRecent", (arr) => { + return arr.slice(0, arr.length - 1); }); // Shortcodes // Cowsay - eleventyConfig.addFilter("cowsay", cowText => { + eleventyConfig.addFilter("cowsay", (cowText) => { const cowCaptionReplacementTable = [ - [` + [ + ` o ^__^ o (oo)\\_______ (__)\\ )\\/\\ ||----w | - || ||`, ''], - [/\(\s+/g, ''], - [/\s+\(/g, ''], - [/_{3,}/g, ''], - [/-{3,}/g, ''], - [/\s\)/g, ''], - [/\n/g, ''], - [/\s{2,}/g, ' '], - [/^ /, ''] + || ||`, + "", + ], + [/\(\s+/g, ""], + [/\s+\(/g, ""], + [/_{3,}/g, ""], + [/-{3,}/g, ""], + [/\s\)/g, ""], + [/\n/g, ""], + [/\s{2,}/g, " "], + [/^ /, ""], ]; return ` @@ -92,10 +108,8 @@ export default async function(eleventyConfig) { }); // Embed a toot - eleventyConfig.addAsyncShortcode("toot", async function(instance, ID) { - const tootData = await fetch( - `https://${instance}/api/v1/statuses/${ID}` - ); + eleventyConfig.addAsyncShortcode("toot", async function (instance, ID) { + const tootData = await fetch(`https://${instance}/api/v1/statuses/${ID}`); const toot = await tootData.json(); @@ -114,12 +128,29 @@ export default async function(eleventyConfig) { publish_date="${dateTime}" sharp_corner=""> - ` + `; }); + // Embed audio + eleventyConfig.addShortcode( + "audio", + function (title, artist, media_url, cover_url) { + return ` + + + + `; + }, + ); + // Passthrough - eleventyConfig.addPassthroughCopy({ './public/': "/" }); + eleventyConfig.addPassthroughCopy({ "./public/": "/" }); // Get the first `n` elements of a collection. eleventyConfig.addFilter("head", (array, n) => { @@ -139,62 +170,59 @@ export default async function(eleventyConfig) { }); // Return all the tags used in a collection - eleventyConfig.addFilter("getAllTags", collection => { + eleventyConfig.addFilter("getAllTags", (collection) => { let tagSet = new Set(); for (let item of collection) { - (item.data.tags || []).forEach(tag => tagSet.add(tag)); + (item.data.tags || []).forEach((tag) => tagSet.add(tag)); } return Array.from(tagSet); }); eleventyConfig.addFilter("filterTagList", function filterTagList(tags) { - return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1); + return (tags || []).filter( + (tag) => ["all", "nav", "post", "posts"].indexOf(tag) === -1, + ); }); // Customize Markdown library settings: let markdownItOptions = { html: true, - typographer: true + typographer: true, }; let mdLib = markdownIt(markdownItOptions); - eleventyConfig.amendLibrary("md", mdLib => { + eleventyConfig.amendLibrary("md", (mdLib) => { mdLib - .use(markdownItAnchor, { - permalink: markdownItAnchor.permalink.ariaHidden({ - placement: "after", - class: "header-anchor", - symbol: "#", - ariaHidden: false - }), - level: [1, 2, 3, 4], - slugify: eleventyConfig.getFilter("slugify") - }) - .use(markdownItFootnote) - .use(mdfigcaption, figoptions); + .use(markdownItAnchor, { + permalink: markdownItAnchor.permalink.ariaHidden({ + placement: "after", + class: "header-anchor", + symbol: "#", + ariaHidden: false, + }), + level: [1, 2, 3, 4], + slugify: eleventyConfig.getFilter("slugify"), + }) + .use(markdownItFootnote) + .use(mdfigcaption, figoptions); }); eleventyConfig.setLibrary("md", mdLib); return { - templateFormats: [ - "md", - "njk", - "html", - "liquid", - ], + templateFormats: ["md", "njk", "html", "liquid"], markdownTemplateEngine: "njk", htmlTemplateEngine: "njk", dir: { - input: "content", // default: "." - includes: "../_includes", // default: "_includes" - data: "../_data", // default: "_data" - output: "_site" + input: "content", // default: "." + includes: "../_includes", // default: "_includes" + data: "../_data", // default: "_data" + output: "_site", }, pathPrefix: "/", }; -}; +} diff --git a/public/css/index.css b/public/css/index.css index 026b729..6f07078 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -219,6 +219,9 @@ code { background-color: var(--card-color); } } +.links-nextprev > .postlist-item-container { + grid-column: var(--span-grid); +} header, footer, main { @@ -448,6 +451,52 @@ table th { padding-right: 1em; } +/* Audio Player */ +wc-mplayer { + width: 100%; +} + +wc-mplayer::part(artist) { + font-size: var(--meta-font-size); +} + +wc-mplayer::part(cover), +wc-mplayer::part(coverContainer) { + width: var(--space-3xl); + height: var(--space-3xl); + border-radius: var(--border-radius); +} + +wc-mplayer::part(captionAndPlayer) { + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + width: 100%; +} + +wc-mplayer::part(main) { + border-radius: var(--border-radius); + display: flex; + gap: var(--space-s); + margin: 0; + padding: var(--space-m); +} + +wc-mplayer::part(player) { + align-self: flex-end; + border-radius: var(--border-radius); + width: 100%; +} + +wc-mplayer::part(title) { + font-size: var(--step-1); + font-variation-settings: + "opsz" 50, + "wght" 350, + "SOFT" 20, + "WONK" 1; +} + /* Comments */ #comments { grid-column: var(--span-grid); diff --git a/public/js/main.js b/public/js/main.js index a6cda4b..68cfb21 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,4 +1,5 @@ -import './webComponents/card.js'; -import './webComponents/profilePic.js'; -import './webComponents/comment.js'; -import './webComponents/toot.js'; +import "./webComponents/card.js"; +import "./webComponents/profilePic.js"; +import "./webComponents/comment.js"; +import "./webComponents/toot.js"; +import "./webComponents/musicPlayer.js";