lew/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add links to grid plugin

Browse source
This commit is contained in:
Lewis Wynne 2026-01-24 02:08:23 +00:00
parent d3893f5e3a
commit 5ff2a3056e
2 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/blog/src/plugins/remark-aside.ts
View file

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

13
apps/blog/src/styles/global.css
View file

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