[components/toc][s]: fixed heading links

site/components/Heading.js

@@ -1,28 +1,16 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 
 
 export const Heading = ({ level, observer }) => (props) => {
-  const ref = useRef(null);
-
-  const handleClick = async () => {
-    const url = ref.current.querySelector("a").href;
-    try {
-      await navigator.clipboard.writeText(url);
-    } catch {
-      return
-    }
-  }
-
   useEffect(() => {
     if (observer) {
       observer.observe(document.getElementById(props.id));
     }
   });
 
+
   return React.createElement(`h${level}`, {
     ...props,
-    className: "scroll-mt-16 cursor-copy",
-    ref,
-    onClick: handleClick
+    className: "scroll-mt-16 cursor-pointer"
   })
 }

site/contentlayer.config.ts

@@ -63,7 +63,7 @@ export default makeSource({
     ],
     rehypePlugins: [
       rehypeSlug,
-      rehypeAutolinkHeadings,
+      [ rehypeAutolinkHeadings, { behavior: 'wrap' } ],
       [ rehypeToc, { position: 'afterend' } ]
     ]
   }

site/styles/global.css

@@ -11,11 +11,18 @@
 }
 
 /* OTHERS */
-
 html {
   scroll-behavior: smooth;
 }
 
+a {
+  @apply no-underline !important;
+}
+
+a:hover {
+  @apply text-yellow-li !important;
+}
+
 /* bg-neutral-800
   @apply bg-slate-800
 */