jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: more improved anchor links

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 11:03:55 +00:00
parent 9774d59aef
commit 8ed4e2df44
11 changed files with 387 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/styles/global.css
View File

@@ -397,7 +397,7 @@ html {
/* Spec clauses - ordered list with CSS counters and hover anchor links */
.prose-spec ol {
padding-left: 2.5rem;
padding-left: 2.25rem;
counter-reset: item;
list-style: none;
}
@@ -416,7 +416,6 @@ html {
text-align: right;
font-weight: 500;
color: theme(colors.slate.400);
transition: opacity 0.15s;
}
.dark .prose-spec ol>li::before {
@@ -427,12 +426,11 @@ html {
.prose-spec .clause-link {
position: absolute;
right: 100%;
margin-right: 0.5rem;
padding-right: 0.5rem;
font-weight: 500;
color: theme(colors.slate.400);
text-decoration: none;
opacity: 0;
transition: opacity 0.15s;
display: flex;
align-items: center;
gap: 0.25rem;
@@ -443,19 +441,11 @@ html {
color: theme(colors.neutral.500);
}
/* Link icon before the clause number */
.prose-spec .clause-link::before {
content: "";
/* Link icon in the anchor link */
.prose-spec .clause-link-icon {
flex-shrink: 0;
width: 0.875rem;
height: 0.875rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.dark .prose-spec .clause-link::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E");
}
/* On hover: show anchor link, hide CSS counter */
@@ -474,10 +464,6 @@ html {
color: theme(colors.orange.500);
}
.prose-spec .clause-link:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23f97316'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E");
}
.prose-spec img {
max-width: 100%;
height: auto;

24
src/utils/parseSpecContent.ts
View File

@@ -6,6 +6,8 @@ import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { getIconData, iconToSVG, iconToHTML } from "@iconify/utils";
import heroicons from "@iconify-json/heroicons/icons.json";
import type {
Root,
RootContent,
@@ -61,6 +63,23 @@ function slugify(text: string): string {
.trim();
}
/**
* Generate link icon SVG from heroicons icon set
*/
function generateLinkIconSvg(): string {
const iconData = getIconData(heroicons, "link");
if (!iconData) {
return "";
}
const result = iconToSVG(iconData);
return iconToHTML(result.body, {
...result.attributes,
class: "clause-link-icon",
stroke: "currentColor",
"stroke-width": "2",
});
}
type MdastNode = Root | RootContent;
/**
@@ -229,10 +248,11 @@ function addClauseAnchors(list: List, prefix: string = ""): void {
// Find the first paragraph in the item and prepend an anchor link
for (const child of item.children) {
if (child.type === "paragraph") {
// Create anchor link HTML with clause number text
// Create anchor link HTML with clause number text and link icon
const linkIcon = generateLinkIconSvg();
const anchorHtml: Html = {
type: "html",
value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true">${clauseNum}.</a>`,
value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true">${linkIcon}${clauseNum}.</a>`,
};
// Prepend anchor to paragraph children
(child as { children: RootContent[] }).children.unshift(