add callouts

astro.config.mjs

@@ -7,6 +7,7 @@ import pagefind from "astro-pagefind";
 import svelte from "@astrojs/svelte";
 import prefetch from "@astrojs/prefetch";
 import astroExpressiveCode from "astro-expressive-code";
+import remarkObsidianCallout from "remark-obsidian-callout";
 const prod = process.env.NODE_ENV === "production";
 
 // https://astro.build/config
@@ -29,6 +30,14 @@ export default defineConfig({
 		shikiConfig: {
 			theme: "dracula",
 		},
+		remarkPlugins: [
+			[
+				remarkObsidianCallout,
+				{
+					blockquoteClass: "not-prose",
+				},
+			],
+		],
 	},
 	compressHTML: prod,
 	build: {

package.json

@@ -33,6 +33,7 @@
 		"prettier": "^3.0.3",
 		"prettier-plugin-astro": "^0.12.0",
 		"prettier-plugin-svelte": "^3.0.3",
+		"remark-obsidian-callout": "^1.1.3",
 		"typescript": "^5.2.2"
 	},
 	"prettier": {

src/layouts/DocsArticle.astro

@@ -122,4 +122,6 @@ const contributeLinks = [
 	}
 
 	customElements.define("docs-article", DocsArticle);
+
+	import "../lib/callout";
 </script>

src/lib/callout.css

@@ -0,0 +1,96 @@
+blockquote[data-callout] {
+	@apply p-4 px-5 my-3 rounded-md text-slate-200;
+}
+
+.callout-title {
+	@apply flex items-center gap-1 mb-1;
+}
+
+.callout-title-icon svg {
+	@apply w-5 h-5 mr-1;
+}
+
+.callout-title-text {
+	@apply font-semibold;
+}
+
+blockquote[data-expandable="true"] .callout-title {
+	cursor: pointer;
+	user-select: none;
+}
+
+blockquote[data-expandable="true"][data-expanded="false"]
+	> *:not(.callout-title) {
+	display: none;
+}
+
+.callout-caret {
+	transform: rotate(0);
+	transition: transform 0.2s ease-out;
+}
+
+blockquote[data-expandable="true"][data-expanded="false"] .callout-caret {
+	transform: rotate(-90deg);
+}
+
+/* Fallback colours */
+blockquote[data-callout] {
+	@apply bg-blue-400 bg-opacity-10;
+
+	& .callout-title {
+		@apply text-blue-400;
+	}
+}
+
+blockquote[data-callout="tip"],
+blockquote[data-callout="hint"],
+blockquote[data-callout="important"] {
+	@apply bg-cyan-400 bg-opacity-10;
+
+	& .callout-title {
+		@apply text-cyan-400;
+	}
+}
+
+blockquote[data-callout="success"],
+blockquote[data-callout="check"],
+blockquote[data-callout="done"] {
+	@apply bg-green-400 bg-opacity-10;
+
+	& .callout-title {
+		@apply text-green-400;
+	}
+}
+
+blockquote[data-callout="question"],
+blockquote[data-callout="help"],
+blockquote[data-callout="faq"] {
+	@apply bg-yellow-400 bg-opacity-10;
+
+	& .callout-title {
+		@apply text-yellow-400;
+	}
+}
+
+blockquote[data-callout="warning"],
+blockquote[data-callout="caution"],
+blockquote[data-callout="attention"] {
+	@apply bg-orange-400 bg-opacity-10;
+
+	& .callout-title {
+		@apply text-orange-400;
+	}
+}
+
+blockquote[data-callout="failure"],
+blockquote[data-callout="fail"],
+blockquote[data-callout="missing"],
+blockquote[data-callout="danger"],
+blockquote[data-callout="error"],
+blockquote[data-callout="bug"] {
+	@apply bg-red-400 bg-opacity-10;
+
+	& .callout-title {
+		@apply text-red-400;
+	}
+}

src/lib/callout.js

@@ -0,0 +1,33 @@
+import "./callout.css";
+
+function transition(cb) {
+	if (document.startViewTransition) {
+		document.startViewTransition(cb);
+	} else {
+		cb();
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	const callouts = document.querySelectorAll(
+		"blockquote[data-callout][data-expandable=true]",
+	);
+	for (const callout of callouts) {
+		const title = callout.querySelector(".callout-title");
+
+		// Add caret svg icon
+		title.innerHTML += `<svg class="callout-caret" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M16.53 8.97a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06L12 12.44l3.47-3.47a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/></svg>`;
+
+		// Make expandable
+		title.addEventListener("click", () => {
+			const { dataset } = callout;
+			transition(() => {
+				if (dataset.expanded === "true") {
+					dataset.expanded = "false";
+				} else {
+					dataset.expanded = "true";
+				}
+			});
+		});
+	}
+});