Get rid of web components

content/blog/job-paranoia-am-i-getting-fired.md

@@ -6,6 +6,7 @@ tags:
   - Quick Thoughts
   - Work
 synopsis: "Some thoughts on understanding what actually gets people fired."
+mastodon_id: "115549540413041782"
 ---
 I occasionally talk to people facing what I can best describe as job paranoia—the fear that their boss is out to get them, see them fired, et cetera. If you're someone who occasionally feels like this, as someone who has both hired and fired people, I'm here to offer some reassurance. Before we proceed—and I know you'll understand this intuitively because you have excellent reading comprehension—my description to come of certain hiring and management practices is not an endorsement of them.
 

content/now-burning/Now Burning_Golden Pavillion (Kinkaku)_Shoyeido_2025-11-18 14:22:00_2:22 PM.md

@@ -0,0 +1,7 @@
+---
+title: Golden Pavillion (Kinkaku)
+manufacturer: Shoyeido
+date: 2025-11-18 14:22:00
+time: 2:22 PM
+---
+A perfect stick for this time of year. Thanks Irene!

content/now-burning/Now Burning_Orange Blossom_The Mother’s Fragrances_2025-11-19 10:29:00_10:29 AM.md

@@ -0,0 +1,7 @@
+---
+title: Orange Blossom
+manufacturer: The Mother’s Fragrances
+date: 2025-11-19 10:29:00
+time: 10:29 AM
+---
+

content/now-burning/Now Burning_Patchouli_The Mother's Fragrances_2025-11-18 18:38:00_6:38 PM.md

@@ -0,0 +1,7 @@
+---
+title: Patchouli
+manufacturer: The Mother’s Fragrances
+date: 2025-11-18 18:38:00
+time: 6:38 PM
+---
+

content/now-burning/Now Burning_Premium Agarwood_Asayu_2025-11-20 15:16:00_3:16 PM.md

@@ -0,0 +1,7 @@
+---
+title: Premium Agarwood
+manufacturer: Asayu
+date: 2025-11-20 15:16:00
+time: 3:16 PM
+---
+

content/now-burning/Now Burning_Sandalwood_Vajra_2025-11-18 17:40:00_5:40 PM.md

@@ -0,0 +1,7 @@
+---
+title: Sandalwood
+manufacturer: Vajra
+date: 2025-11-18 17:40:00
+time: 5:40 PM
+---
+Some of the better rope incense I've tried to date. Gentle woody and burning paper notes. 

content/now-burning/Now Burning_Shirohato_Kyukyodo_2025-11-19 12:02:00_12:02 PM.md

@@ -0,0 +1,7 @@
+---
+title: Shirohato
+manufacturer: Kyukyodo
+date: 2025-11-19 12:02:00
+time: 12:02 PM
+---
+

content/now-burning/Now Burning_Texas Red Cedar_The World Makes Scents_2025-11-17 10:34:00_10:34 AM.md

@@ -0,0 +1,7 @@
+---
+title: Texas Red Cedar
+manufacturer: The World Makes Scents
+date: 2025-11-17 10:34:00
+time: 10:34 AM
+---
+

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