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: improved clause anchor links

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 10:00:38 +00:00
parent 9a2ae93ccf
commit 9774d59aef
11 changed files with 392 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/styles/global.css
View File

@@ -416,32 +416,39 @@ html {
text-align: right;
font-weight: 500;
color: theme(colors.slate.400);
transition: opacity 0.15s;
}
.dark .prose-spec ol>li::before {
color: theme(colors.neutral.500);
}
/* Invisible anchor link that appears on hover */
/* Anchor link with clause number - hidden by default, shown on hover */
.prose-spec .clause-link {
position: absolute;
left: -3.5rem;
top: 0.125rem;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
right: 100%;
margin-right: 0.5rem;
font-weight: 500;
color: theme(colors.slate.400);
text-decoration: none;
opacity: 0;
transition: opacity 0.15s;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
}
.dark .prose-spec .clause-link {
color: theme(colors.neutral.500);
}
/* Link icon before the clause number */
.prose-spec .clause-link::before {
content: "";
display: block;
width: 1rem;
height: 1rem;
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;
@@ -451,13 +458,22 @@ html {
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");
}
/* Show anchor link on hover - only when not hovering nested lists */
/* On hover: show anchor link, hide CSS counter */
.prose-spec ol>li:hover:not(:has(ol:hover))>.clause-link,
.prose-spec ol>li:hover:not(:has(ol:hover))>p>.clause-link,
.prose-spec .clause-link:hover {
opacity: 1;
}
.prose-spec ol>li:hover:not(:has(ol:hover))::before {
opacity: 0;
}
/* Orange color on direct hover of the link */
.prose-spec .clause-link:hover {
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");
}

4
src/utils/parseSpecContent.ts
View File

@@ -229,10 +229,10 @@ 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 to inject
// Create anchor link HTML with clause number text
const anchorHtml: Html = {
type: "html",
value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true"></a>`,
value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true">${clauseNum}.</a>`,
};
// Prepend anchor to paragraph children
(child as { children: RootContent[] }).children.unshift(