From 643784b1ab254ff742987d99f471db1ad297ef52 Mon Sep 17 00:00:00 2001
From: ArgentumCation <mira@argentumcation.com>
Date: Thu, 18 Jul 2024 17:25:13 -0400
Subject: [PATCH] lots of stuff ig

---
 astro.config.mjs                  |   3 +-
 package.json                      |   3 +
 pnpm-lock.yaml                    | 115 +++++++++++++++++++++++++++++-
 src/components/BaseHead.astro     |  30 ++++----
 src/components/Footer.astro       |  62 +++++++++++++++-
 src/content/blog/btrfs.md         |  18 ++---
 src/content/blog/traefik-setup.md |  33 +++++----
 src/content/config.ts             |  11 ++-
 src/layouts/BlogLayout.astro      |   6 +-
 src/layouts/Layout.astro          |  56 ++++++++-------
 src/pages/feed.xml.js             |   5 +-
 src/pages/posts/[...slug].astro   |  11 +--
 src/styles/global.css             |  48 ++++++++++++-
 13 files changed, 317 insertions(+), 84 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 7a3c8c8..15c4e86 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,6 +3,7 @@ import mdx from "@astrojs/mdx";
 import nodejs from "@astrojs/node";
 import { remarkReadingTime } from "./remark-reading-time.mjs";
 import { modifiedTime } from "./remark-modified-time.mjs";
+import remarkCallout from "@r4ai/remark-callout";
 
 export default defineConfig({
   site: "https://argentumcation.com",
@@ -11,7 +12,7 @@ export default defineConfig({
     shikiConfig: {
       theme: "css-variables",
     },
-    remarkPlugins: [remarkReadingTime, modifiedTime],
+    remarkPlugins: [remarkReadingTime, modifiedTime, remarkCallout],
   },
   adapter: nodejs({
     mode: "standalone",
diff --git a/package.json b/package.json
index 8b42859..710331f 100644
--- a/package.json
+++ b/package.json
@@ -24,16 +24,19 @@
     "@astrojs/mdx": "^1.1.0",
     "@astrojs/node": "^6.0.1",
     "@astrojs/rss": "^3.0.0",
+    "@r4ai/remark-callout": "^0.4.0",
     "accessible-astro-components": "^1.6.6",
     "astro": "^3.2.0",
     "astro-icon": "^0.8.1",
     "dayjs": "^1.11.10",
     "highlight.js": "^11.8.0",
     "htmx.org": "^1.9.6",
+    "markdown-it": "^14.1.0",
     "mdast-util-to-string": "^4.0.0",
     "npm-watch": "^0.11.0",
     "reading-time": "^1.5.0",
     "rollup": "^3.29.4",
+    "sanitize-html": "^2.13.0",
     "sass": "^1.68.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c3c6a87..70eff5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   '@astrojs/rss':
     specifier: ^3.0.0
     version: 3.0.0
+  '@r4ai/remark-callout':
+    specifier: ^0.4.0
+    version: 0.4.0
   accessible-astro-components:
     specifier: ^1.6.6
     version: 1.6.6
@@ -38,6 +41,9 @@ dependencies:
   htmx.org:
     specifier: ^1.9.6
     version: 1.9.6
+  markdown-it:
+    specifier: ^14.1.0
+    version: 14.1.0
   mdast-util-to-string:
     specifier: ^4.0.0
     version: 4.0.0
@@ -50,6 +56,9 @@ dependencies:
   rollup:
     specifier: ^3.29.4
     version: 3.29.4
+  sanitize-html:
+    specifier: ^2.13.0
+    version: 2.13.0
   sass:
     specifier: ^1.68.0
     version: 1.68.0
@@ -1017,6 +1026,14 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
 
+  /@r4ai/remark-callout@0.4.0:
+    resolution: {integrity: sha512-bJJCmKVyKwRYul0O+oI62gGCKqUcXL1wihmxMiFT3y98DL5fTpzd1jjlHshJHf+sdg3tHfRUlVmxC2U4OlF1kg==}
+    engines: {node: '>=16'}
+    dependencies:
+      defu: 6.1.4
+      unist-util-visit: 5.0.0
+    dev: false
+
   /@trysound/sax@0.2.0:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -1913,6 +1930,15 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+    dev: false
+
   /depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -1963,6 +1989,14 @@ packages:
       entities: 2.2.0
     dev: false
 
+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: false
+
   /domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
     dev: false
@@ -1974,6 +2008,13 @@ packages:
       domelementtype: 2.3.0
     dev: false
 
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: false
+
   /domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
     dependencies:
@@ -1982,6 +2023,14 @@ packages:
       domhandler: 4.3.1
     dev: false
 
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: false
+
   /dset@3.1.2:
     resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==}
     engines: {node: '>=4'}
@@ -2035,6 +2084,11 @@ packages:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
     dev: false
 
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /es-module-lexer@1.3.1:
     resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}
     dev: false
@@ -2116,7 +2170,6 @@ packages:
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
-    dev: true
 
   /escape-string-regexp@5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
@@ -2635,6 +2688,15 @@ packages:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
     dev: false
 
+  /htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+    dev: false
+
   /htmx.org@1.9.6:
     resolution: {integrity: sha512-4Zebo9nzg8u2ZHuIJmvB/nQS6kIMLIoEfhTg/oRwyCIJhL5MLA/jPU1EPEBtGOmG4ZG0k05Vpd3sab2+zfvteQ==}
     dev: false
@@ -2810,6 +2872,11 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
@@ -2915,6 +2982,12 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+    dependencies:
+      uc.micro: 2.1.0
+    dev: false
+
   /load-yaml-file@0.2.0:
     resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
     engines: {node: '>=6'}
@@ -2978,6 +3051,18 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+    dev: false
+
   /markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: false
@@ -3186,6 +3271,10 @@ packages:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: false
 
+  /mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+    dev: false
+
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: false
@@ -3847,6 +3936,10 @@ packages:
       unist-util-visit-children: 2.0.2
     dev: false
 
+  /parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+    dev: false
+
   /parse5@6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: false
@@ -4003,6 +4096,11 @@ packages:
     dev: false
     optional: true
 
+  /punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -4249,6 +4347,17 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
+  /sanitize-html@2.13.0:
+    resolution: {integrity: sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==}
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 8.0.2
+      is-plain-object: 5.0.0
+      parse-srcset: 1.0.2
+      postcss: 8.4.31
+    dev: false
+
   /sass-formatter@0.7.9:
     resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
     dependencies:
@@ -4777,6 +4886,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+    dev: false
+
   /undefsafe@2.0.5:
     resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
     dev: false
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 2ff6ed2..ca8e2eb 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -23,22 +23,22 @@ const { title, description } = Astro.props;
 </script>
 
 <script src="https://unpkg.com/hyperscript.org@0.9.11"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+/>
 
 <!-- Set default theme -->
 <script is:inline>
-const theme = (() => {
-  if (localStorage.getItem("theme")?.startsWith("theme_")) {
-    return localStorage.getItem("theme");
-  }
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-    return "theme_lunar_witch";
-  }
-  return "theme_Bluloco-Zsh-Light";
-})();
-window.localStorage.setItem("theme", theme);
-document.documentElement.classList.add(theme);
+  const theme = (() => {
+    if (localStorage.getItem("theme")?.startsWith("theme_")) {
+      return localStorage.getItem("theme");
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "theme_lunar_witch";
+    }
+    return "theme_Bluloco-Zsh-Light";
+  })();
+  window.localStorage.setItem("theme", theme);
+  document.documentElement.classList.add(theme);
 </script>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 0e225ea..d0a734f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -21,7 +21,7 @@ themes.delete("default");
       (<span class="p-name">Mira</span>)
     </a>
     <!-- Author Metadata -->
-    <div hidden="">
+    <div style="display: none">
       <span class="p-honorific-suffix">Kendo 3-Kyu Emeritus</span>
       <img
         style="float:left; margin-right:4px"
@@ -32,7 +32,41 @@ themes.delete("default");
       <a class="u-email" href="mailto:mira@ミラ.コム">mira@ミラ.コム</a>
       <span class="dt-bday">20XX-04-02</span>
       <div>
-        <span class="u-key"><!-- TODO --></span>
+        <link
+          rel="pgpkey"
+          type="application/pgp-keys"
+          title="ArgentumCation's PGP Key"
+          href="https://keyserver.ubuntu.com/pks/lookup?op=get&search=0xdd8583a510deb949714ed847430c50ca90f98bbe"
+        />
+        <pre
+          class="u-key">
+          -----BEGIN PGP PUBLIC KEY BLOCK-----
+          xjMEZIjWHxYJKwYBBAHaRw8BAQdAtI4ucxI1PHAJNSIj2TITGcW4BWK2muk3sFfh
+          cyTHvrXNMkFyZ2VudHVtQ2F0aW9uIDxhcmdlbnR1bWNhdGlvbkBhcmdlbnR1bWNh
+          dGlvbi5jb20+wo4EExYKADYFCwkIBwIGFQoJCAsCBRYCAwEAAh4EFiEE3YWDpRDe
+          uUlxTthHQwxQypD5i74FAmSOOF8CGwEACgkQQwxQypD5i74vTwD/Y3T/Jet8zvAK
+          8MhZvEG1H+M/eQFZaAzvSA2FOWmTRo8A+wbyQCbun9Bb5fCZ4/kxHcaGzVgUJSst
+          4j/RMrWUXdIMwo4EExYKADYCGyMWIQTdhYOlEN65SXFO2EdDDFDKkPmLvgUCZI35
+          +gULCQgHAgYVCgkICwIFFgIDAQACHgQACgkQQwxQypD5i747swEA/ugdrs+omBA1
+          2qNqysT9QPqcPnVjSSvYVpVYjNBVvNcBAIDoQJ4T3IEv353iY6oaZfRwoHeFNYWr
+          xJwaGReiIDQFwpMEExYKADsWIQTdhYOlEN65SXFO2EdDDFDKkPmLvgUCZIjWHwIb
+          IwULCQgHAgIiAgYVCgkICwIEFgIDAQIeBwIXgAAKCRBDDFDKkPmLvl3wAQCPR0mt
+          8omFlGLTYi8XJqGu/ha+wGeGrNCh7LixYHfHkwD+Im2LqQkcNXLAJPDK1vGGOh0A
+          D+bSiGT+5Ly40/gkPw7OOARkiNYfEgorBgEEAZdVAQUBAQdAFfcK11UfBm4IPs9w
+          i7YrZ78OxMRm4wf0qdSCQ7vQTDoDAQgHwn4EGBYKACYCGwwWIQTdhYOlEN65SXFO
+          2EdDDFDKkPmLvgUCZI442gUJAeaWOwAKCRBDDFDKkPmLvixuAP9xx1LE2u2qK85v
+          w8tX0Xq0CYMcoJHlCkr5QClBd5v9MwD/anBykPYGnZaMXpqwAEFeY/YkhGWgThkK
+          zzjj1FvXywDCeAQYFgoAIBYhBN2Fg6UQ3rlJcU7YR0MMUMqQ+Yu+BQJkiNYfAhsM
+          AAoJEEMMUMqQ+Yu+mwsBAJV56nL80qeusyuAGrwX+Olgto8tXpmyCVFp825lJRPr
+          AP93N28QeqAnPssteJrWMUN/vrPC8WMebSkvu9jj252dAc4zBGSOOGYWCSsGAQQB
+          2kcPAQEHQOY3LSWsg9XK1rI7r2E+1tmX3Vi7W5opwkvqO6AsduZRwsA1BBgWCgAm
+          FiEE3YWDpRDeuUlxTthHQwxQypD5i74FAmSOOGYCGyIFCQHhM4AAgQkQQwxQypD5
+          i752IAQZFgoAHRYhBJg7grqI4mDBitvwbRVrumZ8pbPPBQJkjjhmAAoJEBVrumZ8
+          pbPPVE8A/0PuUBsaR5QJP7CjiRB0oGmFs4Q/xTLV+PFoUNQNPNlGAQDxJNx844Bs
+          spKDee99cgh6KMzRApNjNAmDBkKezFilBw2HAQDATl1ZehPrkQA1H6ytL0mELqQY
+          lJj4vTGSsBtTxmZ2NgD9HBjGd6OEAjJR7pAmF+720JzDHgtELnFI1E+/5JkNyAw= =staE
+          -----END PGP PUBLIC KEY BLOCK-----
+        </pre>
       </div>
       <span class="p-gender-identity">Who even knows anymore? (She/They)</span>
       <span class="u-sound"
@@ -66,6 +100,30 @@ themes.delete("default");
       </div>
     </form>
   </div>
+  <table class="palette">
+    <tr>
+      <td style="background-color:var(--background)">&nbsp;</td>
+      <td style="background-color:var(--black)">&nbsp;</td>
+      <td style="background-color:var(--red)">&nbsp;</td>
+      <td style="background-color:var(--green)">&nbsp;</td>
+      <td style="background-color:var(--yellow)">&nbsp;</td>
+      <td style="background-color:var(--blue)">&nbsp;</td>
+      <td style="background-color:var(--magenta)">&nbsp;</td>
+      <td style="background-color:var(--cyan)">&nbsp;</td>
+      <td style="background-color:var(--white)">&nbsp;</td>
+    </tr>
+    <tr>
+      <td style="background-color:var(--foreground)">&nbsp;</td>
+      <td style="background-color:var(--bright-black)">&nbsp;</td>
+      <td style="background-color:var(--bright-red)">&nbsp;</td>
+      <td style="background-color:var(--bright-green)">&nbsp;</td>
+      <td style="background-color:var(--bright-yellow)">&nbsp;</td>
+      <td style="background-color:var(--bright-blue)">&nbsp;</td>
+      <td style="background-color:var(--bright-magenta)">&nbsp;</td>
+      <td style="background-color:var(--bright-cyan)">&nbsp;</td>
+      <td style="background-color:var(--bright-white)">&nbsp;</td>
+    </tr>
+  </table>
   <p style="margin:auto">
     <a href="https://fediring.net/previous?host=argentumcation.com">←</a>
     <a href="https://fediring.net/">Fediring</a>
diff --git a/src/content/blog/btrfs.md b/src/content/blog/btrfs.md
index 300e038..1b21046 100644
--- a/src/content/blog/btrfs.md
+++ b/src/content/blog/btrfs.md
@@ -39,11 +39,13 @@ tags: [linux, btrfs]
 
 ---
 
-- btrbk
-- in place conversion
-- subvol layout
-- dual Linux boot
-- dual boot with windows
-- automated package manager snapshots
-- Swapfiles
-- zfs comparison
+> [!todo] TODO
+>
+> - btrbk
+> - in place conversion
+> - subvol layout
+> - dual Linux boot
+> - dual boot with windows
+> - automated package manager snapshots
+> - Swapfiles
+> - zfs comparison
diff --git a/src/content/blog/traefik-setup.md b/src/content/blog/traefik-setup.md
index e3bdc4d..960c395 100644
--- a/src/content/blog/traefik-setup.md
+++ b/src/content/blog/traefik-setup.md
@@ -2,7 +2,7 @@
 title: "Getting up and running with Traefik"
 author: "ArgentumCation"
 layout: ../../layouts/Layout.astro
-pubDate: "03 Apr, 2023"
+pubDate: "2023-04-03"
 slug: "traefik-setup"
 ---
 
@@ -10,11 +10,11 @@ slug: "traefik-setup"
 - Traefik is pretty decent at that, it'll set up your HTTPS certs and auto generate routes from your docker images
 - only problem is its an absolute bitch to set up
 - Here's a stripped down `docker-compose.yml` to give you an idea of how I have it set up
-- The end result should be a lighttpd server running on `blog.argentumcation.com` 
+- The end result should be a lighttpd server running on `blog.argentumcation.com`
+
 ```yaml
 # Just setting some default values for my containers
-x-service_defaults:
-  &service_defaults
+x-service_defaults: &service_defaults
   env_file: .env
   restart: unless-stopped
   extra_hosts:
@@ -32,15 +32,15 @@ services:
     labels:
       - traefik.http.services.traefik-docker.loadbalancer.server.port=8080
       # For the management interface
-      - '8080:8080'
+      - "8080:8080"
       # To let traefik receive incoming HTTP traffic
-      - '80:80'
+      - "80:80"
       # To let traefik receive incoming HTTPS traffic
-      - '443:443'
+      - "443:443"
     volumes:
       # This lets traefik see your docker services
       - $DOCKER_SOCK:/var/run/docker.sock:ro
-	  # Traefik Configs
+      # Traefik Configs
       - $CONF_DIR/traefik/traefik.yml:/traefik.yml
       - $CONF_DIR/traefik/traefik_dynamic.yml:/etc/traefik/traefik_dynamic.yml
       # Let's Encrypt folder (for storing HTTPS cert related stuff)
@@ -52,13 +52,15 @@ services:
     image: sebp/lighttpd
     labels:
       # This is the hostname that traefik will proxy to this container
-      - traefik.http.routers.lighttpd-docker.rule=Host(`blog.$PUBLIC`) 
-      # This is the port the container is listening on, often traefik can detect this 
+      - traefik.http.routers.lighttpd-docker.rule=Host(`blog.$PUBLIC`)
+      # This is the port the container is listening on, often traefik can detect this
       # automatically, but we'll just be explicit here
       - traefik.http.services.lighttpd-docker.loadbalancer.server.port=80
 ```
+
 - `traefik.secrets.env` contains my cloudflare API key so that Traefik can automatically add DNS routes
 - For reference, here's my `.env` file
+
 ```sh
 # GENERAL
 PUBLIC=argentumcation.com
@@ -80,8 +82,10 @@ PGID=1000
 USER_UID=1000
 USER_GID=1000
 ```
+
 - And of course, the actual traefik configuration files:
-    - `traefik.yml`: 
+  - `traefik.yml`:
+
 ```yaml
 accessLog:
   filePath: ./traefik-access.log
@@ -95,7 +99,7 @@ certificatesResolvers:
     acme:
       dnschallenge:
         provider: cloudflare #look, I know, don't judge me
-      email: [redacted] 
+      email: [redacted]
       storage: /letsencrypt/acme.json
 entryPoints:
   web:
@@ -130,9 +134,10 @@ providers:
   file:
     directory: /etc/traefik/
     watch: true
-
 ```
+
     - `traefik-dynamic.yml`
+
 ```yaml
 http:
   middlewares: #This should redirect incoming http connections to https
@@ -140,4 +145,4 @@ http:
       redirectscheme:
         scheme: https
         permanent: true
-```
\ No newline at end of file
+```
diff --git a/src/content/config.ts b/src/content/config.ts
index 69adea6..5245fce 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,14 +1,11 @@
 // 1. Import utilities from `astro:content`
-import { z, defineCollection } from "astro:content";
+import { defineCollection } from "astro:content";
+import { rssSchema } from "@astrojs/rss";
+
 // 2. Define your collection(s)
 const blogCollection = defineCollection({
   type: "content",
-  schema: z.object({
-    title: z.string(),
-    tags: z.array(z.string()).optional(),
-    pubDate: z.string(),
-    author: z.string(),
-  }),
+  schema: rssSchema,
 });
 // 3. Export a single `collections` object to register your collection(s)
 //    This key should match your collection directory name in "src/content"
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 091a508..d5efe0f 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -25,8 +25,10 @@ document.documentElement.classList.add(theme);
   <body class="container">
     <Header />
     <main>
-      <h1>{title}</h1>
-      <slot />
+      <article class="h-entry">
+        <h1 "p-name">{title}</h1>
+        <slot />
+      </article>
     </main>
     <Footer />
   </body>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0f2c7e1..e150883 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -5,17 +5,17 @@ import Footer from "../components/Footer.astro";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 
-const { minutesRead } = Astro.props.frontmatter
+const { minutesRead } = Astro.props.frontmatter;
 const {
-  frontmatter: { title, description, pubDate, image, author },
+  frontmatter: { title, description, pubDate, image, author, slug },
 } = Astro.props;
 
 dayjs.extend(utc);
 
-const lastModified = dayjs()
-  .utc(Astro.props.frontmatter.lastModified)
-  .format("YYYY-MM-DD HH:mm:ss UTC");
-
+const lastModified = (
+  dayjs(Astro.props.frontmatter.pubDate) ??
+  dayjs().utc(Astro.props.frontmatter.lastModified)
+).format("YYYY-MM-DD HH:mm:ss");
 ---
 
 <html lang="en">
@@ -23,33 +23,35 @@ const lastModified = dayjs()
     <BaseHead title={title} description={description} />
   </head>
   <body class="container">
+    <div class="meta u-url">{Astro.url}</div>
     <Header />
     <main>
-      <article>
-        <div class="article-head">
-          <h1 class="title">{title}</h1>
-          <em>Written by: {author}</em><br />
-          {minutesRead} <br />
-          Published on: <time>{lastModified}</time> <br />
-          {image && <img width={720} height={360} src={image} alt="" />}
-        </div>
-        <div class="article-body">
+      <article class="h-entry">
+        <h1 class="p-name">{title}</h1>
+        <em>Written by: {author}</em><br />
+        {minutesRead}
+        <br />
+        Last Changed: <time class="dt-published">{lastModified}</time>
+        <br />
+        {image && <img width={720} height={360} src={image} alt="" />}
+        <div class="e-content">
           <hr />
           <slot />
         </div>
       </article>
-    </main>
-    <div class="footer-container">
       <Footer />
-    </div>
-    <style>
-      html {
-        min-height: 100vh;
-      }
-      time {
-        display: inline-block;
-        margin-top: 10px;
-      }
-    </style>
+      <style>
+        .meta {
+          display: none;
+        }
+        html {
+          min-height: 100vh;
+        }
+        time {
+          display: inline-block;
+          margin-top: 10px;
+        }
+      </style>
+    </main>
   </body>
 </html>
diff --git a/src/pages/feed.xml.js b/src/pages/feed.xml.js
index 3100034..46edd55 100644
--- a/src/pages/feed.xml.js
+++ b/src/pages/feed.xml.js
@@ -1,6 +1,9 @@
 import rss from "@astrojs/rss";
 import { getCollection } from "astro:content";
+import sanitizeHtml from 'sanitize-html';
+import MarkdownIt from 'markdown-it';
 
+const parser = new MarkdownIt();
 export async function GET(context) {
   const blog = await getCollection("blog");
   return rss({
@@ -11,7 +14,7 @@ export async function GET(context) {
       title: post.data.title,
       pubDate: post.data.pubDate,
       description: post.data.description,
-      customData: post.data.customData,
+      content: sanitizeHtml(parser.render(post.body)),
       // Compute RSS link from post `slug`
       // This example assumes all posts are rendered as `/blog/[slug]` routes
       link: `/posts/${post.slug}/`,
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index ac151d8..27e4a34 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,15 +1,16 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from "astro:content";
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
-  const blogEntries = await getCollection('blog');
-  return blogEntries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+  const blogEntries = await getCollection("blog");
+  return blogEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
   }));
 }
 // 2. For your template, you can get the entry directly from the prop
 const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
-<h1>{entry.data.title}</h1>
+
 <Content />
diff --git a/src/styles/global.css b/src/styles/global.css
index 2ed4030..2aae5f8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,5 @@
 @import "https://unpkg.com/terminal.css@0.7.4/dist/terminal.min.css";
+@import url("https://fonts.googleapis.com/css2?family=Recursive:wght,MONO@300..1000,1&display=swap");
 
 :root {
   /* Terminal Colors */
@@ -27,7 +28,7 @@
   --astro-code-token-punctuation: var(--base05, --foreground);
   --astro-code-token-link: var(--base09, var(--orange, var(--cyan)));
   /*Fonts*/
-  --mono-font-stack: monospace, sans-serif;
+  --mono-font-stack: "Recursive", monospace;
   --font-stack: var(--mono-font-stack);
 }
 
@@ -276,3 +277,48 @@ ol ol ol ol ol ol ol ol ol ol {
   width: 88px;
   height: 31px;
 }
+
+div[data-callout] {
+  padding: 0.75em;
+  color: var(--background-color);
+}
+
+div[data-callout-type="todo"] {
+  background-color: var(--foreground);
+}
+
+div[data-callout-type="info"] {
+  background-color: var(--primary-color);
+}
+
+div[data-callout-type="question"] {
+  background-color: var(--tertiary-color);
+}
+
+div[data-callout-type="warn"] {
+  background-color: var(--base03, var(--yellow));
+}
+
+div[data-callout-type="fail"] {
+  background-color: var(--error-color);
+}
+
+div[data-callout-type="error"] {
+  background-color: var(--error-color);
+}
+
+div[data-callout-title] {
+  font-weight: bold;
+  font-size: 1.5em;
+}
+
+.palette {
+  margin: auto;
+  width: min-content;
+}
+
+.palette td {
+  border: none;
+  line-height: 1em;
+  max-width: 4em;
+}