css/prism.css

@@ -20,7 +20,7 @@
 }
 
 .code-line {
-  @apply block pl-4 pr-4 -mx-4 border-l-4 border-opacity-0;
+  @apply block pl-4 pr-4 -mx-4 border-l-4 border-transparent;
 }
 
 .code-line.inserted {

lib/mdx.js

@@ -9,6 +9,7 @@ import getAllFilesRecursively from './utils/files'
 import remarkGfm from 'remark-gfm'
 import remarkFootnotes from 'remark-footnotes'
 import remarkMath from 'remark-math'
+import remarkExtractFrontmatter from './remark-extract-frontmatter'
 import remarkCodeTitles from './remark-code-title'
 import remarkTocHeadings from './remark-toc-headings'
 import remarkImgToJsx from './remark-img-to-jsx'
@@ -67,6 +68,7 @@ export async function getFileBySlug(type, slug) {
       // plugins in the future.
       options.remarkPlugins = [
         ...(options.remarkPlugins ?? []),
+        remarkExtractFrontmatter,
         [remarkTocHeadings, { exportRef: toc }],
         remarkGfm,
         remarkCodeTitles,
@@ -79,10 +81,7 @@ export async function getFileBySlug(type, slug) {
         rehypeSlug,
         rehypeAutolinkHeadings,
         rehypeKatex,
-        [
+        [rehypeCitation, { path: path.join(root, 'data') }],
-          rehypeCitation,
-          { bibliography: frontmatter?.bibliography, path: path.join(root, 'data') },
-        ],
         [rehypePrismPlus, { ignoreMissing: true }],
         rehypePresetMinify,
       ]

lib/remark-extract-frontmatter.js

@@ -0,0 +1,10 @@
+import { visit } from 'unist-util-visit'
+import { load } from 'js-yaml'
+
+export default function extractFrontmatter() {
+  return (tree, file) => {
+    visit(tree, 'yaml', (node, index, parent) => {
+      file.data.frontmatter = load(node.value)
+    })
+  }
+}

package.json

@@ -21,7 +21,7 @@
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
     "mdx-bundler": "^8.0.0",
-    "next": "12.0.7",
+    "next": "12.0.9",
     "next-themes": "^0.0.14",
     "postcss": "^8.4.5",
     "preact": "^10.6.2",
@@ -29,7 +29,7 @@
     "react-dom": "17.0.2",
     "reading-time": "1.3.0",
     "rehype-autolink-headings": "^6.1.0",
-    "rehype-citation": "^0.1.2",
+    "rehype-citation": "^0.2.0",
     "rehype-katex": "^6.0.2",
     "rehype-preset-minify": "6.0.0",
     "rehype-prism-plus": "^1.1.3",
@@ -39,16 +39,16 @@
     "remark-math": "^5.1.1",
     "sharp": "^0.28.3",
     "smoothscroll-polyfill": "^0.4.4",
-    "tailwindcss": "^3.0.2",
+    "tailwindcss": "^3.0.18",
     "unist-util-visit": "^4.0.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "12.0.7",
+    "@next/bundle-analyzer": "12.0.9",
     "@svgr/webpack": "^6.1.2",
     "cross-env": "^7.0.3",
     "dedent": "^0.7.0",
     "eslint": "^7.29.0",
-    "eslint-config-next": "12.0.7",
+    "eslint-config-next": "12.0.9",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.3.1",
     "file-loader": "^6.0.0",
@@ -58,8 +58,8 @@
     "lint-staged": "^11.0.0",
     "next-remote-watch": "^1.0.0",
     "prettier": "2.2.1",
-    "socket.io": "^4.1.3",
+    "socket.io": "^4.4.0",
-    "socket.io-client": "^4.1.3"
+    "socket.io-client": "^4.4.0"
   },
   "lint-staged": {
     "*.+(js|jsx|ts|tsx)": [