Get rid of web components

eleventy.config.js

@@ -117,77 +117,22 @@ export default async function (eleventyConfig) {
 	});
 
 	// Shortcodes
-
+	// Audio player
-	// 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
 	eleventyConfig.addShortcode(
 		"audio",
 		function (title, artist, media_url, cover_url) {
 			return `
-		<wc-card>
+				<figure class="mplayer">
-			<wc-mplayer
+					<div class="coverContainer">
-			title="${title}"
+						<img src="${cover_url}" class="albumCover">
-			artist="${artist}"
+					</div>
-			media_url="${media_url}"
+					<div class="captionAndPlayer">
-			cover_url="${cover_url}"
+						<figcaption class="mplayerInfo">
-			/>
+							<span class="songTitle">${title}</span><br /><span class="artist">${artist}</span>
-		</wc-card>
+						</figcaption>
+						<audio controls src="${media_url}" class="player"></audio>
+					</div>
+				</figure>
 		`;
 		},
 	);

public/css/index.css

@@ -127,18 +127,6 @@
 
 	/* Shadow */
 	--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-
-	/* Web Component Tokens */
-	--wc-card-background-color: var(--card-color);
-	--wc-card-border-radius: var(--border-radius);
-	--wc-card-margin: 0 0 var(--space-s) 0;
-	--wc-card-box-shadow: var(--box-shadow);
-	--wc-link-color: var(--text-color);
-	--wc-link-decoration-color: var(--contrast-color);
-	--wc-link-decoration-thickness: var(--link-decoration-thickness);
-	--wc-comment-text-margin: var(--space-xs) 0 0 0;
-	--wc-profile-pic-size: var(--space-l);
-	--wc-profile-pic-border-radius: 10rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -438,7 +426,7 @@ body.barebones {
 	text-align: center;
 }
 
-figcaption {
+figcaption:not(.mplayerInfo) {
 	font-size: var(--step--1);
 	font-style: italic;
 	padding-top: var(--space-3xs);
@@ -504,43 +492,47 @@ table th {
 }
 
 /* Audio Player */
-wc-mplayer {
+.albumCover {
-	width: 100%;
+	object-fit: cover;
 }
 
-wc-mplayer::part(artist) {
+.albumCover,
-	font-size: var(--meta-font-size);
+.coverContainer {
-}
+	width: var(--space-4xl);
-
+	height: var(--space-4xl);
-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) {
+.artist {
+	font-size: var(--meta-font-size);
+	margin-bottom: var(--space-s);
+}
+
+.captionAndPlayer {
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
 	width: 100%;
 }
 
-wc-mplayer::part(main) {
+.mplayer {
+	background-color: var(--card-color);
 	border-radius: var(--border-radius);
+	box-shadow: var(--box-shadow);
 	display: flex;
 	gap: var(--space-s);
-	margin: 0;
+	margin: 0 0 var(--space-s) 0;
 	padding: var(--space-m);
+	width: 100%;
 }
 
-wc-mplayer::part(player) {
+.player {
 	align-self: flex-end;
 	border-radius: var(--border-radius);
 	width: 100%;
 }
 
-wc-mplayer::part(title) {
+.songTitle {
 	font-size: var(--step-1);
 	font-variation-settings:
 		"opsz" 50,
@@ -550,41 +542,13 @@ wc-mplayer::part(title) {
 }
 
 /* Comments */
-#comments {
-	grid-column: var(--span-grid);
-}
 .continue-discussion {
 	grid-column: var(--span-grid);
 }
 .continue-discussion button {
 	margin-top: var(--space-xs);
 }
-wc-comment::part(author-link),
+
-wc-toot::part(author-link) {
-	font-size: var(--step-0);
-	text-decoration: none;
-}
-wc-comment::part(main) {
-	padding: var(--space-m);
-}
-wc-comment::part(publish-date),
-wc-toot::part(publish-date) {
-	font-family: var(--meta-font-family);
-	font-size: var(--meta-font-size);
-	font-style: var(--meta-font-style);
-	font-variation-settings: var(--font-variation-settings);
-}
-wc-toot::part(main) {
-	color: white;
-	font-family: var(--meta-font-family);
-	font-size: var(--step--1);
-}
-wc-toot::part(author),
-wc-toot::part(author-link) {
-	color: white;
-	font-style: var(--meta-font-style);
-	font-variation-settings: "wght" 600;
-}
 /* Code Fences */
 pre,
 code {
@@ -1062,6 +1026,18 @@ article.post {
 		margin-right: var(--space-3xs);
 	}
 }
+.card {
+	align-items: flex-start;
+	background-color: var(--card-color);
+	border-radius: var(--border-radius);
+	box-shadow: var(--box-shadow);
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+	margin: 0 0 var(--space-s) 0;
+	padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
+	width: 100%;
+}
 .gallery-images {
 	display: flex;
 	flex-flow: row wrap;

public/js/webComponents/card.js

@@ -1,33 +0,0 @@
-const template = document.createElement('template');
-
-template.innerHTML = `
-<style>
-	#card {
-		align-items: flex-start;
-		background-color: var(--wc-card-background-color);
-		border-radius: var(--wc-card-border-radius);
-		box-shadow: var(--wc-card-box-shadow);
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: flex-start;
-		margin: var(--wc-card-margin);
-		padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
-		width: 100%;
-	}
-</style>
-
-<div id="card" part="main">
-	<slot></slot>
-</div>
-`
-
-class card extends HTMLElement {
-	constructor() {
-		super();
-
-		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
-		this._shadowRoot.appendChild(template.content.cloneNode(true));
-	}
-}
-
-window.customElements.define('wc-card', card);

public/js/webComponents/comment.js

@@ -1,76 +0,0 @@
-const template = document.createElement('template');
-
-template.innerHTML = `
-<style>
-	a {
-		color: var(--wc-link-color);
-		text-decoration-color: var(--wc-link-decoration-color);
-		text-decoration-thickness: var(--wc-link-decoration-thickness);
-	}
-	#comment {
-		margin: var(--wc-comment-text-margin);
-	}
-	#comment p {
-		margin: 0 auto 0 auto;
-	}
-	#meta {
-		display: flex;
-		flex-flow: row nowrap;
-	}
-	#meta-text {
-		display: flex;
-		flex-flow: column nowrap;
-		width: 100%;
-	}
-	#meta-text p {
-		margin: 0 1rem 0 1rem;
-	}
-</style>
-
-<article id="commentContainer" class="blog-comment" part="main">
-	<div id="meta" part="meta">
-		<div>
-			<wc-profile-pic url="" />
-		</div>
-		<div id="meta-text" part="meta-text">
-			<p id="author" part="author">
-				<a id="author-link" part="author-link"></a><span> says:</span>
-			</p>
-			<p id="publish-date" part="publish-date"></p>
-		</div>
-	</div>
-	<div id="comment" part="content">
-	</div>
-</article>
-`
-
-class comment extends HTMLElement {
-	constructor() {
-		super();
-
-		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
-		this._shadowRoot.appendChild(template.content.cloneNode(true));
-		this.$comment = this._shadowRoot.querySelector('#commentContainer');
-	}
-
-	static get observedAttributes() {
-		return ['author_name', 'author_url', 'avatar_url', 'comment_content', 'publish_date'];
-	}
-
-	attributeChangedCallback(name, oldVal, newVal) {
-		if (oldVal != newVal) {
-			this[name] = newVal;
-			this.render();
-		}
-	}
-
-	render() {
-		this.$comment.querySelector('#author-link').innerHTML = this.author_name;
-		this.$comment.querySelector('#author-link').href = this.author_url;
-		this.$comment.querySelector('wc-profile-pic').setAttribute('url', this.avatar_url)
-		this.$comment.querySelector('#comment').innerHTML = this.comment_content;
-		this.$comment.querySelector('#publish-date').innerHTML = this.publish_date;
-	}
-}
-
-window.customElements.define('wc-comment', comment);

public/js/webComponents/musicPlayer.js

@@ -1,51 +0,0 @@
-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);

public/js/webComponents/profilePic.js

@@ -1,40 +0,0 @@
-const template = document.createElement('template');
-
-template.innerHTML = `
-<style>
-#profilePic {
-border-radius: var(--wc-profile-pic-border-radius);
-width: var(--wc-profile-pic-size);
-height: var(--wc-profile-pic-size);
-}
-</style>
-
-<img src="" id="profilePic"/>
-`
-
-class profilePic extends HTMLElement {
-	constructor() {
-		super();
-
-		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
-		this._shadowRoot.appendChild(template.content.cloneNode(true));
-		this.$profilePic = this._shadowRoot.querySelector('#profilePic');
-	}
-
-	static get observedAttributes() {
-		return ['url'];
-	}
-
-	attributeChangedCallback(name, oldVal, newVal) {
-		if (oldVal != newVal) {
-			this[name] = newVal;
-			this.render();
-		}
-	}
-
-	render() {
-		this.url ? this.$profilePic.src = this.url : null;
-	}
-}
-
-window.customElements.define('wc-profile-pic', profilePic);