feature/demo nav

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "cssvar.files": [
+    "./node_modules/open-props/open-props.min.css",
+    // if you have an alternative path to where your styles are located
+    // you can add it in this array of files
+    "./src/styles/variables.css"
+  ],
+
+  // you can also add support for autocomplete in other file extensions
+  "cssvar.extensions": ["css", "html", "jsx", "tsx", "astro", "svelte"]
+}

astro.config.js

@@ -1,16 +1,47 @@
 // Full Astro Configuration API Documentation:
 // https://docs.astro.build/reference/configuration-reference
 
+/**
+ * @typedef {import("hast-util-to-string").Node} Node
+ */
+
 // @type-check enabled!
 // VSCode and other TypeScript-enabled text editors will provide auto-completion,
 // helpful tooltips, and warnings if your exported object is invalid.
 // You can disable this by removing "@ts-check" and `@type` comments below.
+import astroRemark from "@astrojs/markdown-remark";
+import { h } from "hastscript";
+
+/**
+ * @param {Node} _node
+ */
+function getHeadingContent(_node) {
+	return [
+		h("svg.icon.icon-link", {}, [
+			h("use", { "xlink:href": "/sprite.svg#link" }),
+		]),
+	];
+}
 
 // @ts-check
 export default /** @type {import('astro').AstroUserConfig} */ ({
 	buildOptions: {
 		site: "https://blog.oliverturner.cloud",
 	},
-	// Enable the Preact renderer to support Preact JSX components.
+	// Enable Custom Markdown options, plugins, etc.
+	markdownOptions: {
+		render: [
+			astroRemark,
+			{
+				remarkPlugins: ["remark-code-titles"],
+				rehypePlugins: [
+					"rehype-slug",
+					["rehype-autolink-headings", { content: getHeadingContent }],
+					["rehype-add-classes", { "h1,h2,h3": "title title--link" }],
+				],
+			},
+		],
+	},
+
 	renderers: ["@astrojs/renderer-svelte"],
 });