💄 Add icons to admonitions

- Make admonition types recognizable at a glance
- Hide icons that fail to load

Author: SnaveSutit

src/app.html

@@ -11,6 +11,20 @@
 			rel="stylesheet"
 		/>
 		%sveltekit.head%
+		<script>
+			// Hide admonition icons that fail to load. Registered before the page renders, since
+			// image errors don't bubble and can fire before hydration.
+			document.addEventListener(
+				'error',
+				event => {
+					const target = event.target
+					if (target instanceof HTMLImageElement && target.matches('.admonition-icon')) {
+						target.hidden = true
+					}
+				},
+				true
+			)
+		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

src/lib/docs/remark-admonitions.ts

@@ -4,6 +4,20 @@ import { visit } from 'unist-util-visit'
 
 const ADMONITION_NAMES = new Set(['note', 'tip', 'warning', 'info', 'danger'])
 
+/** Paths in the MCDP icon set (github.com/FuncFusion/mc-dp-icons-assets) for each admonition. */
+const ADMONITION_ICONS: Record<string, string> = {
+	note: 'misc/antbot/upscaled/pushpin.png',
+	tip: 'misc/antbot/upscaled/check.png',
+	info: 'icons/current/readme_file.svg',
+	warning: 'misc/antbot/upscaled/exclamation_mark.png',
+	danger: 'misc/antbot/upscaled/cross.png',
+}
+
+export function getAdmonitionIconUrl(kind: string): string {
+	const path = ADMONITION_ICONS[kind] ?? ADMONITION_ICONS.note
+	return `https://github.com/FuncFusion/mc-dp-icons-assets/blob/main/${path}?raw=true`
+}
+
 function defaultTitle(name: string): string {
 	switch (name) {
 		case 'tip':
@@ -289,7 +303,19 @@ const remarkAdmonitions: Plugin<[], Root> = () => {
 						properties: {
 							className: ['admonition-title'],
 						},
-						children: [{ type: 'text', value: title }],
+						children: [
+							{
+								type: 'element',
+								tagName: 'img',
+								properties: {
+									className: ['admonition-icon'],
+									src: getAdmonitionIconUrl(kind),
+									alt: '',
+								},
+								children: [],
+							},
+							{ type: 'text', value: title },
+						],
 					},
 					{
 						type: 'element',

src/lib/styles/global.css

@@ -142,11 +142,23 @@ code {
 }
 
 .docs-content .admonition-title {
+	display: flex;
+	align-items: center;
+	gap: 8px;
 	margin: 0 0 8px;
 	font-family: 'MinecraftFull', sans-serif;
 	font-size: 16px;
 }
 
+.docs-content .admonition-icon {
+	width: 20px;
+	height: 20px;
+	margin: 0;
+	background: none;
+	box-shadow: none;
+	image-rendering: pixelated;
+}
+
 .docs-content .admonition-tip {
 	border-left-color: #6add8f;
 	background-color: #102d22;

src/routes/[[lang=lang]]/docs/[...path]/+page.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import { getLanguageName } from '$lib/docs/docs'
+	import { getAdmonitionIconUrl } from '$lib/docs/remark-admonitions'
 
 	const { data } = $props()
 </script>
 
 {#if !data.translated}
 	<aside class="admonition admonition-info" lang="en">
-		<p class="admonition-title">Not translated yet</p>
+		<p class="admonition-title">
+			<img class="admonition-icon" src={getAdmonitionIconUrl('info')} alt="" />
+			Not translated yet
+		</p>
 		<div class="admonition-content">
 			<p>
 				This page isn't available in {getLanguageName(data.lang, 'en')} yet, so it's shown in