add header link icon

app/tag-data.json

@@ -1 +1,20 @@
-{"markdown":1,"code":1,"features":1,"next-js":6,"math":1,"ols":1,"github":1,"guide":5,"tailwind":3,"hello":1,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1}
+{
+  "next-js": 6,
+  "tailwind": 3,
+  "guide": 5,
+  "feature": 2,
+  "multi-author": 1,
+  "hello": 1,
+  "math": 1,
+  "ols": 1,
+  "github": 1,
+  "writings": 1,
+  "book": 1,
+  "reflection": 1,
+  "holiday": 1,
+  "canada": 1,
+  "images": 1,
+  "markdown": 1,
+  "code": 1,
+  "features": 1
+}

contentlayer.config.ts

@@ -3,6 +3,7 @@ import { writeFileSync } from 'fs'
 import readingTime from 'reading-time'
 import { slug } from 'github-slugger'
 import path from 'path'
+import { fromHtmlIsomorphic } from 'hast-util-from-html-isomorphic'
 // Remark packages
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
@@ -25,6 +26,19 @@ import { allCoreContent, sortPosts } from 'pliny/utils/contentlayer.js'
 const root = process.cwd()
 const isProduction = process.env.NODE_ENV === 'production'
 
+// heroicon mini link
+const icon = fromHtmlIsomorphic(
+  `
+  <span class="content-header-link">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 linkicon">
+  <path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z" />
+  <path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z" />
+  </svg>
+  </span>
+`,
+  { fragment: true }
+)
+
 const computedFields: ComputedFields = {
   readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
   slug: {
@@ -134,7 +148,6 @@ export default makeSource({
   mdx: {
     cwd: process.cwd(),
     remarkPlugins: [
-      // @ts-ignore
       remarkExtractFrontmatter,
       remarkGfm,
       remarkCodeTitles,
@@ -143,7 +156,18 @@ export default makeSource({
     ],
     rehypePlugins: [
       rehypeSlug,
-      rehypeAutolinkHeadings,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'prepend',
+          headingProperties: {
+            className: ['content-header'],
+            tabIndex: '-1',
+            dir: 'auto',
+          },
+          content: icon,
+        },
+      ],
       rehypeKatex,
       [rehypeCitation, { path: path.join(root, 'data') }],
       [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }],

css/tailwind.css

@@ -33,3 +33,19 @@ input:-webkit-autofill:focus {
 .katex-display {
   overflow: auto hidden;
 }
+
+.content-header-link {
+  opacity: 0;
+  margin-left: -24px;
+  padding-right: 4px;
+}
+
+.content-header:hover .content-header-link,
+.content-header-link:hover {
+  opacity: 1;
+}
+
+.linkicon {
+  display: inline-block;
+  vertical-align: middle;
+}

package.json

@@ -20,6 +20,7 @@
     "esbuild": "0.20.2",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.2",
+    "hast-util-from-html-isomorphic": "^2.0.0",
     "image-size": "1.0.0",
     "next": "14.1.4",
     "next-contentlayer2": "0.4.4",

yarn.lock

@@ -10750,6 +10750,7 @@ __metadata:
     eslint-plugin-prettier: ^5.0.0
     github-slugger: ^2.0.0
     gray-matter: ^4.0.2
+    hast-util-from-html-isomorphic: ^2.0.0
     husky: ^9.0.0
     image-size: 1.0.0
     lint-staged: ^13.0.0