From 5ff2a3056e4fd2080b368648ebd4b41a8e473633 Mon Sep 17 00:00:00 2001
From: lew <lew@ily.rs>
Date: Sat, 24 Jan 2026 02:08:23 +0000
Subject: [PATCH] feat: add links to grid plugin

---
 apps/blog/src/plugins/remark-aside.ts |  7 ++++++-
 apps/blog/src/styles/global.css       | 13 ++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/blog/src/plugins/remark-aside.ts b/apps/blog/src/plugins/remark-aside.ts
index 871cca5..b6f8e91 100644
--- a/apps/blog/src/plugins/remark-aside.ts
+++ b/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+/, '');
-            html += `<span class="label">${labelText}</span>`;
+            if (href) {
+              html += `<a class="link" href="${href}">${labelText}</a>`;
+            } else {
+              html += `<span class="label">${labelText}</span>`;
+            }
             html += `<div class="content">${contentText}</div>`;
           }
         }
diff --git a/apps/blog/src/styles/global.css b/apps/blog/src/styles/global.css
index e7f7f52..26eaf08 100644
--- a/apps/blog/src/styles/global.css
+++ b/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;
 }