feat: labelled grids added to remark

apps/blog/src/plugins/remark-aside.ts

@@ -1,14 +1,44 @@
 import { visit } from 'unist-util-visit';
 import type { Root } from 'mdast';
 
+function nodeToText(node: any): string {
+  if (node.type === 'text') return node.value;
+  if (node.children) return node.children.map(nodeToText).join('');
+  return '';
+}
+
 export default function remarkAside() {
   return (tree: Root) => {
     visit(tree, ['textDirective', 'leafDirective'], (node: any) => {
       if (node.name !== 'left' && node.name !== 'right') return;
-
       const data = node.data || (node.data = {});
       data.hName = 'span';
       data.hProperties = { className: [node.name] };
     });
+
+    visit(tree, 'containerDirective', (node: any) => {
+      if (node.name !== 'grid') return;
+      let html = '<div class="grid">';
+      for (const child of node.children) {
+        if (child.data?.directiveLabel) continue;
+        if (child.type === 'paragraph' && child.children?.length > 0) {
+          const firstChild = child.children[0];
+          if (firstChild?.type === 'textDirective' && firstChild.name === 'label') {
+            const labelText = nodeToText(firstChild);
+            const contentText = child.children
+              .slice(1)
+              .map(nodeToText)
+              .join('')
+              .replace(/^\s+/, '');
+            html += `<span class="label">${labelText}</span>`;
+            html += `<div class="content">${contentText}</div>`;
+          }
+        }
+      }
+      html += '</div>';
+      node.type = 'html';
+      node.value = html;
+      delete node.children;
+    });
   };
 }

apps/blog/src/styles/global.css

@@ -34,6 +34,32 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+div.grid {
+  display: grid;
+  grid-template-columns: minmax(2.375rem, min-content) 1fr;
+  gap: 0.625rem 0.75rem;
+  row-gap: 0.625rem;
+  line-height: 1.25;
+  margin-bottom: 2rem;
+  margin-top: 0;
+}
+
+div.grid .label {
+  display: block;
+  margin-top: 0.375rem;
+  margin-block: 0;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
+  text-align: right;
+  color: #888;
+  font-style: italic;
+}
+
+div.grid .content {
+  display: block;
+}
+
 details {
   margin: 1rem 0;
 }