fix: adds link to titles for navigating to anchors (#308)

varianter · Oct 25, 2023 · bbe4206 · bbe4206 · vercel · Oct 25, 2023
1 parent dd2bfcf
commit bbe4206
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 19 deletions.
diff --git a/src/layouts/handbook/handbook.module.css b/src/layouts/handbook/handbook.module.css
@@ -1,16 +1,8 @@
-.anchor {
+.titleLink {
+  color: inherit;
   text-decoration: none;
-  font-size: 0.8em;
-  padding: 0 0.5rem;
-  align-self: baseline;
-
-  /* Incase we want anchor tags after headings remove this!*/
-  display: none;
-}
-.anchor:visited,
-.anchor:link {
-  color: var(--color-secondary1__tint4);
 }
-.anchor:hover {
-  color: var(--color-primary);
+
+.titleLink:hover {
+  color: inherit;
 }
diff --git a/src/layouts/handbook/index.tsx b/src/layouts/handbook/index.tsx
@@ -11,19 +11,17 @@ function createLinkable(el: 'h2' | 'h3' | 'h4') {
   return ({ children, ...props }: JSX.IntrinsicElements[typeof el]) => {
     const textContent = getNodeText(children);
     const slug = slugify(textContent, { lower: false });
-    const childList = React.Children.toArray(children);
+
     return React.createElement(
       el,
       {
         ...props,
         id: slug,
         key: slug,
       },
-      childList.concat(
-        <a className={style.anchor} key="link" href={`#${slug}`}>
-          #
-        </a>,
-      ),
+      <a className={style.titleLink} href={`#${slug}`}>
+        {children}
+      </a>,
     );
   };
 }