update to contentlayer2 (timlx fork)

contentlayer.config.ts

@@ -3,11 +3,12 @@ import {
   ComputedFields,
   makeSource,
   defineNestedType,
-} from 'contentlayer/source-files'
+} from 'contentlayer2/source-files'
 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'
@@ -32,6 +33,19 @@ import { allBlogs } from 'contentlayer/generated'
 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: {
@@ -194,7 +208,16 @@ export default makeSource({
     ],
     rehypePlugins: [
       rehypeSlug,
-      rehypeAutolinkHeadings,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'prepend',
+          headingProperties: {
+            className: ['content-header'],
+          },
+          content: icon,
+        },
+      ],
       rehypeKatex,
       [rehypeCitation, { path: path.join(root, 'data') }],
       [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }],

next.config.js

@@ -1,4 +1,4 @@
-const { withContentlayer } = require('next-contentlayer')
+const { withContentlayer } = require('next-contentlayer2')
 
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',

package.json

@@ -19,7 +19,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@waline/client": "^3.1.3",
     "autoprefixer": "^10.4.17",
-    "contentlayer": "0.3.4",
+    "contentlayer2": "0.4.4",
     "esbuild": "0.19.11",
     "framer-motion": "^10.18.0",
     "github-slugger": "^2.0.0",
@@ -29,9 +29,9 @@
     "i18next-resources-to-backend": "^1.2.0",
     "image-size": "1.1.1",
     "next": "14.1.0",
-    "next-contentlayer": "0.3.4",
+    "next-contentlayer2": "0.4.4",
     "next-themes": "^0.2.1",
-    "pliny": "0.1.6",
+    "pliny": "0.2.0",
     "postcss": "^8.4.33",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -40,14 +40,14 @@
     "react-toastify": "^10.0.3",
     "reading-time": "1.5.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-citation": "^1.0.2",
-    "rehype-katex": "^6.0.3",
-    "rehype-preset-minify": "6.0.0",
-    "rehype-prism-plus": "^1.6.0",
+    "rehype-citation": "^2.0.0",
+    "rehype-katex": "^7.0.0",
+    "rehype-preset-minify": "7.0.0",
+    "rehype-prism-plus": "^2.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "tailwindcss": "^3.4.1",
     "unist-util-visit": "^5.0.0",
     "zustand": "^4.5.0"