Get rid of web components

eleventy.config.js

@@ -117,77 +117,22 @@ export default async function (eleventyConfig) {
 	});
 
 	// Shortcodes
-
-	// Cowsay
-	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, " "],
-			[/^ /, ""],
-		];
-
-		return `
-<figure>
-  <pre class="language-" role="img" aria-label="ASCII COW">${cowText}</pre>
-  <figcaption id="cow-caption">
-    A cow thinking: <em>${multiReplace(cowText, cowCaptionReplacementTable)}</em>. The cow is illustrated using
-    preformatted text characters.
-  </figcaption>
-</figure>
-			`;
-	});
-
-	// Embed a toot
-	eleventyConfig.addAsyncShortcode("toot", async function (instance, ID) {
-		const tootData = await fetch(`https://${instance}/api/v1/statuses/${ID}`);
-
-		const toot = await tootData.json();
-
-		const dateObj = new Date(toot.created_at);
-
-		const dateTime = `${dateObj.getDate()}${dateSuffixAdder(dateObj.getDate())} of ${monthMap[dateObj.getMonth()]}, ${dateObj.getFullYear()}, at ${timeFormatter(dateObj.getHours(), dateObj.getMinutes())}`;
-
-		return `
-		<wc-toot
-		author_name="${toot.account.display_name}"
-		author_url="${toot.url.replace(/\/[0-9]+/, "")}"
-		author_username="${toot.account.username}"
-		avatar_url="${toot.account.avatar_static}"
-		toot_content="${toot.content}"
-		toot_url="${toot.url}"
-		publish_date="${dateTime}"
-		sharp_corner="">
-		</wc-toot>
-		`;
-	});
-
-	// Embed audio
+	// Audio player
 	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>
+				<figure class="mplayer">
+					<div class="coverContainer">
+						<img src="${cover_url}" class="albumCover">
+					</div>
+					<div class="captionAndPlayer">
+						<figcaption class="mplayerInfo">
+							<span class="songTitle">${title}</span><br /><span class="artist">${artist}</span>
+						</figcaption>
+						<audio controls src="${media_url}" class="player"></audio>
+					</div>
+				</figure>
 		`;
 		},
 	);