use remark-gfm@3 since v4 is still getting rolled out

see remarkjs/remark-gfm#57

components/logo.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { motion } from 'framer-motion'
 
 interface LogoProps {

contentlayer.config.ts

@@ -1,4 +1,5 @@
 import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer/source-files'
+import remarkGfm from 'remark-gfm'
 
 export const Post = defineDocumentType(() => ({
   name: 'Post',
@@ -58,4 +59,10 @@ export const Test = defineDocumentType(() => ({
   },
 }))
 
-export default makeSource({ contentDirPath: 'content', documentTypes: [Music, Post, Project, Test] })
+export default makeSource({
+  contentDirPath: 'content',
+  documentTypes: [Music, Post, Project, Test],
+  mdx: {
+    remarkPlugins: [remarkGfm],
+  },
+})

package.json

@@ -21,20 +21,21 @@
     "d3": "^7.0.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.10.4",
-    "framer-motion": "6.2.4",
+    "framer-motion": "10.16.5",
     "gray-matter": "^4.0.2",
     "hamburger-react": "^2.4.0",
     "next": "14.0.2",
     "next-contentlayer": "^0.3.4",
     "next-themes": "0.2.1",
     "postcss": "8.4.31",
-    "prism-react-renderer": "^1.1.1",
+    "prism-react-renderer": "2.2.0",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.2.0",
     "react-spring": "9.1.0",
     "react-syntax-highlighter": "^15.4.5",
+    "remark-gfm": "3.0.1",
     "sharp": "^0.30.5",
     "tailwindcss": "3.3.5"
   },
@@ -44,7 +45,7 @@
     "@types/d3": "^7.1.0",
     "@types/gtag.js": "^0.0.8",
     "@types/react": "18.2.0",
-    "@types/react-syntax-highlighter": "13.5.2",
+    "@types/react-syntax-highlighter": "15.5.10",
     "@typescript-eslint/eslint-plugin": "6.10.0",
     "@typescript-eslint/parser": "6.10.0",
     "cypress": "9.2.0",