✨ feat: add admonition functionality and markdown-extended-features article, improve blockquote styling

src/plugins/remark-admonitions.mjs

@@ -0,0 +1,66 @@
+import { visit } from 'unist-util-visit'
+
+const ADMONITION_TYPES = {
+  note: 'NOTE',
+  tip: 'TIP',
+  important: 'IMPORTANT',
+  warning: 'WARNING',
+  caution: 'CAUTION',
+}
+
+const GITHUB_ADMONITION_REGEX = new RegExp(
+  `^\\s*\\[!(${Object.values(ADMONITION_TYPES).join('|')})\\]\\s*`,
+  'i',
+)
+
+export function remarkAdmonitions() {
+  return (tree) => {
+    // Create an admonition blockquote
+    function createAdmonition(node, type, title) {
+      const titleSpan = `<span class="admonition-title">${title}</span>`
+
+      node.data = node.data || {}
+      node.data.hName = 'blockquote'
+      node.data.hProperties = {
+        className: `admonition-${type}`,
+      }
+
+      node.children.unshift({
+        type: 'html',
+        value: titleSpan,
+      })
+    }
+
+    // Handle :::type syntax
+    visit(tree, 'containerDirective', (node) => {
+      const type = node.name
+      if (!ADMONITION_TYPES[type])
+        return
+
+      const title = node.attributes?.title || ADMONITION_TYPES[type]
+      createAdmonition(node, type, title)
+    })
+
+    // Handle > [!TYPE] syntax
+    visit(tree, 'blockquote', (node) => {
+      if (!node.children?.length || node.children[0].type !== 'paragraph')
+        return
+
+      const paragraph = node.children[0]
+      if (!paragraph.children?.length || paragraph.children[0].type !== 'text')
+        return
+
+      const textNode = paragraph.children[0]
+      const match = textNode.value.match(GITHUB_ADMONITION_REGEX)
+      if (!match)
+        return
+
+      const type = match[1].toLowerCase()
+      const title = ADMONITION_TYPES[type]
+
+      textNode.value = textNode.value.substring(match[0].length)
+
+      createAdmonition(node, type, title)
+    })
+  }
+}