Add audio embed feature

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`.

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="">
 		</wc-toot>
-		`
+		`;
 	});
 
+	// Embed audio
+	eleventyConfig.addShortcode(
+		"audio",
+		function (title, artist, media_url, cover_url) {
+			return `
+		<wc-card>
+			<wc-mplayer
+			title="${title}"
+			artist="${artist}"
+			media_url="${media_url}"
+			cover_url="${cover_url}"
+			/>
+		</wc-card>
+		`;
+		},
+	);
+
 	// 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: "/",
 	};
-};
+}

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);

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";

public/js/webComponents/musicPlayer.js

@@ -0,0 +1,51 @@
+const template = document.createElement("template");
+
+template.innerHTML = `
+<style>
+	.cover {
+		object-fit: cover;
+	}
+</style>
+
+<figure class="mplayer" part="main">
+	<div class="coverContainer" part="coverContainer">
+		<img src="" class="cover" part="cover">
+	</div>
+	<div part="captionAndPlayer">
+		<figcaption part="caption">
+			<span class="title" part="title"></span><br /><span class="artist" part="artist"></span>
+		</figcaption>
+		<audio controls src="" class="player" part="player"></audio>
+	</div>
+</figure>
+`;
+
+class mplayer extends HTMLElement {
+	constructor() {
+		super();
+
+		this._shadowRoot = this.attachShadow({ mode: "open" });
+		this._shadowRoot.appendChild(template.content.cloneNode(true));
+		this.$mplayer = this._shadowRoot.querySelector(".mplayer");
+	}
+
+	static get observedAttributes() {
+		return ["title", "artist", "media_url", "cover_url"];
+	}
+
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal != newVal) {
+			this[name] = newVal;
+			this.render();
+		}
+	}
+
+	render() {
+		this.$mplayer.querySelector(".title").innerHTML = this.title;
+		this.$mplayer.querySelector(".artist").innerHTML = this.artist;
+		this.$mplayer.querySelector(".player").src = this.media_url;
+		this.$mplayer.querySelector(".coverContainer > img").src = this.cover_url;
+	}
+}
+
+window.customElements.define("wc-mplayer", mplayer);