Add rehype-citation

package.json

@@ -32,6 +32,8 @@
         "firebase-admin": "12.1.1",
         "gray-matter": "4.0.3",
         "isomorphic-unfetch": "^4.0.2",
+        "mdx-mermaid": "^2.0.0",
+        "mermaid": "^10.9.1",
         "next": "^14.2.3",
         "next-compose-plugins": "2.2.1",
         "next-mdx-remote": "5.0.0",
@@ -43,6 +45,7 @@
         "react-share": "5.1.0",
         "react-social-icons": "6.16.0",
         "rehype-autolink-headings": "7.1.0",
+        "rehype-citation": "^2.0.0",
         "rehype-slug": "6.0.0",
         "remark-codesandbox": "^0.10.1",
         "remark-emoji": "4.0.1",

src/components/Mermaid.tsx

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic.js'
+import type { MermaidProps } from 'mdx-mermaid/lib/Mermaid'
+
+const MdxMermaid = dynamic(
+    () => import('mdx-mermaid/lib/Mermaid').then((res) => res.Mermaid),
+    { ssr: false }
+)
+
+// Workaround for https://github.com/vercel/next.js/discussions/36369
+// Inspired by https://github.com/datopian/datahub/blob/8feb87739ddaeb07272666d4c11d50774a583e57/packages/core/src/ui/Mermaid/Mermaid.tsx#L12
+export const Mermaid: React.FC<MermaidProps> = ({ ...props }) => {
+    return <MdxMermaid {...props} />
+}

src/modules/posts.ts

@@ -13,6 +13,7 @@ export type PostData = {
     title: string
     description: string
     bannerFullUrl: string
+    bibliography?: string
 }
 
 export type PostContent = string
@@ -44,6 +45,7 @@ export const getPostDataAndContent = (slug): GetPostDataAndContentOutput => {
         ...data,
         date: formattedDate,
         bannerFullUrl: `${SITE_ROOT}${data.banner}`,
+        bibliography: data.bibliography ? `${SITE_ROOT}${data.bibliography}` : null,
         href: `${SITE_ROOT}/blog/${slug}`
     }
 

src/pages/blog/[slug].tsx

@@ -8,6 +8,8 @@ import codesandbox from 'remark-codesandbox'
 import prism from 'remark-prism'
 import slug from 'rehype-slug'
 import link from 'rehype-autolink-headings'
+import mdxMermaid from 'mdx-mermaid'
+import rehypeCitation from 'rehype-citation'
 
 import {
     getAllPostSlugs,
@@ -26,6 +28,7 @@ import Youtube from '@Components/Youtube'
 import Timeline from '@Components/Timeline'
 import Table from '@Components/Table'
 import Alert from '@Components/Alert'
+import { Mermaid } from '@Components/Mermaid'
 import { ComparisonTable } from '@Components/ComparisonTable'
 import { Typography } from '@mui/material'
 import 'prism-theme-night-owl'
@@ -39,7 +42,8 @@ const components = {
     Alert,
     ComparisonTable,
     Typography,
-    Link
+    Link,
+    mermaid: Mermaid
 }
 
 interface Props {
@@ -91,11 +95,20 @@ export const getStaticProps: GetStaticProps<{
             remarkPlugins: [
                 [toc, { tight: true }],
                 [emoji, { emoticon: true }],
+                [mdxMermaid],
                 [codesandbox, { mode: 'button' }],
                 [prism]
             ],
             rehypePlugins: [
                 slug,
+                [
+                    rehypeCitation,
+                    {
+                        bibliography: data.bibliography,
+                        linkCitations: true,
+                        csl: 'vancouver'
+                    }
+                ],
                 [
                     link,
                     {