feat: add links to grid plugin

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

@@ -25,12 +25,17 @@ export default function remarkAside() {
           const firstChild = child.children[0];
           if (firstChild?.type === 'textDirective' && firstChild.name === 'label') {
             const labelText = nodeToText(firstChild);
+            const href = firstChild.attributes?.href;
             const contentText = child.children
               .slice(1)
               .map(nodeToText)
               .join('')
               .replace(/^\s+/, '');
+            if (href) {
+              html += `<a class="link" href="${href}">${labelText}</a>`;
+            } else {
               html += `<span class="label">${labelText}</span>`;
+            }
             html += `<div class="content">${contentText}</div>`;
           }
         }

apps/blog/src/styles/global.css

@@ -37,25 +37,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;
+  gap: 0.375rem 0.75rem;
   line-height: 1.25;
   margin-bottom: 2rem;
   margin-top: 0;
 }
 
-div.grid .label {
+div.grid .label,
+div.grid .link {
   display: block;
   margin-top: 0.375rem;
   margin-block: 0;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
   line-height: 1.4;
+}
+
+div.grid .label {
   text-align: right;
   color: #888;
   font-style: italic;
 }
 
+div.grid .link {
+  text-align: right;
+}
+
 div.grid .content {
   display: block;
 }