feat: add GitHub-style markdown alert support

astro.config.ts

@@ -9,6 +9,7 @@ import rehypeExternalLinks from 'rehype-external-links'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import remarkEmoji from 'remark-emoji'
+import remarkGithubAlerts from 'remark-github-blockquote-alert'
 import remarkMath from 'remark-math'
 import remarkSectionize from 'remark-sectionize'
 import rehypeDocument from 'rehype-document'
@@ -159,6 +160,6 @@ export default defineConfig({
         },
       ],
     ],
-    remarkPlugins: [remarkMath, remarkEmoji, remarkSectionize],
+    remarkPlugins: [remarkMath, remarkEmoji, remarkSectionize, remarkGithubAlerts],
   },
 })

package.json

@@ -30,7 +30,7 @@
     "astro": "astro",
     "generate:og": "tsx scripts/generate-og-image.ts",
     "prettier": "prettier --write **/*.{ts,tsx,css,astro} --ignore-path .gitignore",
-    "deploy": "git push origin main:prod"
+    "push:prod": "git push origin main:prod"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.8",
@@ -59,6 +59,7 @@
     "rehype-external-links": "^3.0.0",
     "rehype-pretty-code": "^0.14.3",
     "remark-emoji": "^5.0.2",
+    "remark-github-blockquote-alert": "^2.1.0",
     "remark-math": "^6.0.0",
     "remark-sectionize": "^2.1.0",
     "satori": "^0.16.2",

pnpm-lock.yaml

@@ -86,6 +86,9 @@ importers:
       remark-emoji:
         specifier: ^5.0.2
         version: 5.0.2
+      remark-github-blockquote-alert:
+        specifier: ^2.1.0
+        version: 2.1.0
       remark-math:
         specifier: ^6.0.0
         version: 6.0.0
@@ -2235,6 +2238,10 @@ packages:
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
+  remark-github-blockquote-alert@2.1.0:
+    resolution: {integrity: sha512-J392jmIP684d7iGsENN0uguL10IGbRdc8bTUSrd/jOLzdWkwg721Fj3JPQGN8tF6fTIrE5HHOIA3nBuwuaeuPQ==}
+    engines: {node: '>=16'}
+
   remark-math@6.0.0:
     resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
 
@@ -5443,6 +5450,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-github-blockquote-alert@2.1.0:
+    dependencies:
+      unist-util-visit: 5.1.0
+
   remark-math@6.0.0:
     dependencies:
       '@types/mdast': 4.0.4

src/styles/typography.css

@@ -83,6 +83,36 @@
       @apply [&>p]:my-0 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0;
     }
 
+    /* GitHub-style admonitions */
+    .markdown-alert {
+      @apply my-4 rounded-md border-l-4 px-4 py-2 not-italic;
+      @apply [&>p]:my-0 [&>p:not(.markdown-alert-title)]:mt-1;
+    }
+    .markdown-alert-title {
+      @apply flex items-center gap-2 font-semibold text-sm;
+      @apply [&>svg]:size-4 [&>svg]:fill-current;
+    }
+    .markdown-alert-note {
+      @apply border-blue-500 bg-blue-500/10;
+      @apply [&>.markdown-alert-title]:text-blue-600 dark:[&>.markdown-alert-title]:text-blue-400;
+    }
+    .markdown-alert-tip {
+      @apply border-green-500 bg-green-500/10;
+      @apply [&>.markdown-alert-title]:text-green-600 dark:[&>.markdown-alert-title]:text-green-400;
+    }
+    .markdown-alert-important {
+      @apply border-purple-500 bg-purple-500/10;
+      @apply [&>.markdown-alert-title]:text-purple-600 dark:[&>.markdown-alert-title]:text-purple-400;
+    }
+    .markdown-alert-warning {
+      @apply border-yellow-500 bg-yellow-500/10;
+      @apply [&>.markdown-alert-title]:text-yellow-600 dark:[&>.markdown-alert-title]:text-yellow-400;
+    }
+    .markdown-alert-caution {
+      @apply border-red-500 bg-red-500/10;
+      @apply [&>.markdown-alert-title]:text-red-600 dark:[&>.markdown-alert-title]:text-red-400;
+    }
+
     hr {
       @apply border-border my-10 border-t-2;
     }