feat: mdx page integration and styling

2024-08-03 23:51:39 +07:00 · 2024-08-03 23:51:39 +07:00 · 4ed056f744
commit 4ed056f744
parent 9071c6994d
25 changed files with 360 additions and 420 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -29,6 +29,7 @@
        "packageDir": "."
      }
    ],
+    "import/no-unresolved": "off",
    "import/extensions": "off",
    "no-console": "off",
    "github/array-foreach": "off",
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,15 +1,4 @@
-import nextMDX from '@next/mdx'
-
-const withMDX = nextMDX()
-
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Configure `pageExtensions` to include MDX files
-  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
-  experimental: {
-    // Use the mdx rust compiler
-    mdxRs: true,
-  },
-}
+const nextConfig = {}

-export default withMDX(nextConfig)
+export default nextConfig
--- a/package.json
+++ b/package.json
@ -22,18 +22,16 @@
  },
  "dependencies": {
    "@icons-pack/react-simple-icons": "^9.6.0",
-    "@mdx-js/loader": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.5",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@react-spring/web": "^9.7.4",
-    "@types/mdx": "^2.0.13",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
    "lucide-react": "^0.408.0",
    "next": "14.2.5",
+    "next-mdx-remote": "^5.0.0",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
@ -43,6 +41,7 @@
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
+    "@types/mdx": "^2.0.13",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -11,15 +11,6 @@ importers:
      '@icons-pack/react-simple-icons':
        specifier: ^9.6.0
        version: 9.6.0(react@18.3.1)
-      '@mdx-js/loader':
-        specifier: ^3.0.1
-        version: 3.0.1(webpack@5.93.0)
-      '@mdx-js/react':
-        specifier: ^3.0.1
-        version: 3.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@next/mdx':
-        specifier: ^14.2.5
-        version: 14.2.5(@mdx-js/loader@3.0.1(webpack@5.93.0))(@mdx-js/react@3.0.1(@types/react@18.3.3)(react@18.3.1))
      '@radix-ui/react-dialog':
        specifier: ^1.1.1
        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -32,21 +23,24 @@ importers:
      '@react-spring/web':
        specifier: ^9.7.4
        version: 9.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@types/mdx':
-        specifier: ^2.0.13
-        version: 2.0.13
      class-variance-authority:
        specifier: ^0.7.0
        version: 0.7.0
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      gray-matter:
+        specifier: ^4.0.3
+        version: 4.0.3
      lucide-react:
        specifier: ^0.408.0
        version: 0.408.0(react@18.3.1)
      next:
        specifier: 14.2.5
        version: 14.2.5(@babel/core@7.24.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-mdx-remote:
+        specifier: ^5.0.0
+        version: 5.0.0(@types/react@18.3.3)(react@18.3.1)
      next-themes:
        specifier: ^0.3.0
        version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -69,6 +63,9 @@ importers:
        specifier: ^1.0.7
        version: 1.0.7(tailwindcss@3.4.6)
    devDependencies:
+      '@types/mdx':
+        specifier: ^2.0.13
+        version: 2.0.13
      '@types/node':
        specifier: ^20
        version: 20.14.11
@ -966,11 +963,6 @@ packages:
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

-  '@mdx-js/loader@3.0.1':
-    resolution: {integrity: sha512-YbYUt7YyEOdFxhyuCWmLKf5vKhID/hJAojEUnheJk4D8iYVLFQw+BAoBWru/dHGch1omtmZOPstsmKPyBF68Tw==}
-    peerDependencies:
-      webpack: '>=5'
-
  '@mdx-js/mdx@3.0.1':
    resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}

@ -986,17 +978,6 @@ packages:
  '@next/eslint-plugin-next@14.2.5':
    resolution: {integrity: sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==}

-  '@next/mdx@14.2.5':
-    resolution: {integrity: sha512-AROhSdXQg0/jt55iqxVSJqp9oaCyXwRe44/I17c77gDshZ6ex7VKBZDH0GljaxZ0Y4mScYUbFJJEh42Xw4X4Dg==}
-    peerDependencies:
-      '@mdx-js/loader': '>=0.15.0'
-      '@mdx-js/react': '>=0.15.0'
-    peerDependenciesMeta:
-      '@mdx-js/loader':
-        optional: true
-      '@mdx-js/react':
-        optional: true
-
  '@next/swc-darwin-arm64@14.2.5':
    resolution: {integrity: sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==}
    engines: {node: '>= 10'}
@ -1563,9 +1544,6 @@ packages:
  '@types/debug@4.1.12':
    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}

-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
-
  '@types/eslint@9.6.0':
    resolution: {integrity: sha512-gi6WQJ7cHRgZxtkQEoyHMppPjq9Kxo5Tjn2prSKDSmZrCz8TZ3jSRCeTJm+WoM+oB0WG37bRqLzaaU3q7JypGg==}

@ -1732,57 +1710,6 @@ packages:
  '@ungap/structured-clone@1.2.0':
    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}

-  '@webassemblyjs/ast@1.12.1':
-    resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.11.6':
-    resolution: {integrity: sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==}
-
-  '@webassemblyjs/helper-api-error@1.11.6':
-    resolution: {integrity: sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==}
-
-  '@webassemblyjs/helper-buffer@1.12.1':
-    resolution: {integrity: sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==}
-
-  '@webassemblyjs/helper-numbers@1.11.6':
-    resolution: {integrity: sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.11.6':
-    resolution: {integrity: sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==}
-
-  '@webassemblyjs/helper-wasm-section@1.12.1':
-    resolution: {integrity: sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==}
-
-  '@webassemblyjs/ieee754@1.11.6':
-    resolution: {integrity: sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==}
-
-  '@webassemblyjs/leb128@1.11.6':
-    resolution: {integrity: sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==}
-
-  '@webassemblyjs/utf8@1.11.6':
-    resolution: {integrity: sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==}
-
-  '@webassemblyjs/wasm-edit@1.12.1':
-    resolution: {integrity: sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==}
-
-  '@webassemblyjs/wasm-gen@1.12.1':
-    resolution: {integrity: sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==}
-
-  '@webassemblyjs/wasm-opt@1.12.1':
-    resolution: {integrity: sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==}
-
-  '@webassemblyjs/wasm-parser@1.12.1':
-    resolution: {integrity: sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==}
-
-  '@webassemblyjs/wast-printer@1.12.1':
-    resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==}
-
-  '@xtuc/ieee754@1.2.0':
-    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
-
-  '@xtuc/long@4.2.2':
-    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
-
  abort-controller@3.0.0:
    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
    engines: {node: '>=6.5'}
@ -1791,11 +1718,6 @@ packages:
    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
    engines: {node: '>= 0.6'}

-  acorn-import-attributes@1.9.5:
-    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
-    peerDependencies:
-      acorn: ^8
-
  acorn-jsx@5.3.2:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@ -1806,11 +1728,6 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

-  ajv-keywords@3.5.2:
-    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
-    peerDependencies:
-      ajv: ^6.9.1
-
  ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}

@ -2089,10 +2006,6 @@ packages:
    engines: {node: '>=12.13.0'}
    hasBin: true

-  chrome-trace-event@1.0.4:
-    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
-    engines: {node: '>=6.0'}
-
  ci-info@2.0.0:
    resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}

@ -2387,9 +2300,6 @@ packages:
    resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==}
    engines: {node: '>= 0.4'}

-  es-module-lexer@1.5.4:
-    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
-
  es-object-atoms@1.0.0:
    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
    engines: {node: '>= 0.4'}
@ -2552,10 +2462,6 @@ packages:
    resolution: {integrity: sha512-pWReu3fkohwyvztx/oQWWgld2iad25TfUdi6wvhhaDPIQjHU/pyvlKgXFw1kX31SQK2Nq9MH+vRDWB0ZLy8fYw==}
    engines: {node: '>=4.0.0'}

-  eslint-scope@5.1.1:
-    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
-    engines: {node: '>=8.0.0'}
-
  eslint-scope@7.2.2:
    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -2589,10 +2495,6 @@ packages:
    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
    engines: {node: '>=4.0'}

-  estraverse@4.3.0:
-    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
-    engines: {node: '>=4.0'}
-
  estraverse@5.3.0:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}
@ -2627,14 +2529,14 @@ packages:
    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
    engines: {node: '>=6'}

-  events@3.3.0:
-    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
-    engines: {node: '>=0.8.x'}
-
  execa@5.1.1:
    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
    engines: {node: '>=10'}

+  extend-shallow@2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+
  extend@3.0.2:
    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}

@ -2774,9 +2676,6 @@ packages:
    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
    engines: {node: '>=10.13.0'}

-  glob-to-regexp@0.4.1:
-    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-
  glob@10.3.10:
    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
    engines: {node: '>=16 || 14 >=14.17'}
@ -2815,6 +2714,10 @@ packages:
  graphemer@1.4.0:
    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}

+  gray-matter@4.0.3:
+    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
+    engines: {node: '>=6.0'}
+
  has-bigints@1.0.2:
    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}

@ -2987,6 +2890,10 @@ packages:
    engines: {node: '>=8'}
    hasBin: true

+  is-extendable@0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+
  is-extglob@2.1.1:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
    engines: {node: '>=0.10.0'}
@ -3151,10 +3058,6 @@ packages:
    resolution: {integrity: sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==}
    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}

-  jest-worker@27.5.1:
-    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
-    engines: {node: '>= 10.13.0'}
-
  jest-worker@29.7.0:
    resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@ -3204,9 +3107,6 @@ packages:
  json-parse-better-errors@1.0.2:
    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}

-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
  json-schema-traverse@0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}

@ -3272,10 +3172,6 @@ packages:
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

-  loader-runner@4.3.0:
-    resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
-    engines: {node: '>=6.11.5'}
-
  locate-path@3.0.0:
    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
    engines: {node: '>=6'}
@ -3615,6 +3511,12 @@ packages:
  neo-async@2.6.2:
    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}

+  next-mdx-remote@5.0.0:
+    resolution: {integrity: sha512-RNNbqRpK9/dcIFZs/esQhuLA8jANqlH694yqoDBK8hkVdJUndzzGmnPHa2nyi90N4Z9VmzuSWNRpr5ItT3M7xQ==}
+    engines: {node: '>=14', npm: '>=7'}
+    peerDependencies:
+      react: '>=16'
+
  next-themes@0.3.0:
    resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
    peerDependencies:
@ -3959,9 +3861,6 @@ packages:
  queue@6.0.2:
    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}

-  randombytes@2.1.0:
-    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
-
  range-parser@1.2.1:
    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
    engines: {node: '>= 0.6'}
@ -4212,9 +4111,9 @@ packages:
  scheduler@0.24.0-canary-efb381bbf-20230505:
    resolution: {integrity: sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA==}

-  schema-utils@3.3.0:
-    resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
-    engines: {node: '>= 10.13.0'}
+  section-matter@1.0.0:
+    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
+    engines: {node: '>=4'}

  selfsigned@2.4.1:
    resolution: {integrity: sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==}
@ -4241,9 +4140,6 @@ packages:
    resolution: {integrity: sha512-ghgmKt5o4Tly5yEG/UJp8qTd0AN7Xalw4XBtDEKP655B699qMEtra1WlXeE6WIvdEG481JvRxULKsInq/iNysw==}
    engines: {node: '>=0.10.0'}

-  serialize-javascript@6.0.2:
-    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
-
  serve-static@1.15.0:
    resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
    engines: {node: '>= 0.8.0'}
@ -4405,6 +4301,10 @@ packages:
    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
    engines: {node: '>=12'}

+  strip-bom-string@1.0.0:
+    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
+    engines: {node: '>=0.10.0'}
+
  strip-bom@3.0.0:
    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
    engines: {node: '>=4'}
@ -4503,22 +4403,6 @@ packages:
    resolution: {integrity: sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==}
    engines: {node: '>=6.0.0'}

-  terser-webpack-plugin@5.3.10:
-    resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      '@swc/core': '*'
-      esbuild: '*'
-      uglify-js: '*'
-      webpack: ^5.1.0
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      esbuild:
-        optional: true
-      uglify-js:
-        optional: true
-
  terser@5.31.3:
    resolution: {integrity: sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==}
    engines: {node: '>=10'}
@ -4644,6 +4528,9 @@ packages:
  unified@11.0.5:
    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}

+  unist-util-is@5.2.1:
+    resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
+
  unist-util-is@6.0.0:
    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}

@ -4656,9 +4543,15 @@ packages:
  unist-util-remove-position@5.0.0:
    resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}

+  unist-util-remove@3.1.1:
+    resolution: {integrity: sha512-kfCqZK5YVY5yEa89tvpl7KnBBHu2c6CzMkqHUrlOqaRgGOMp0sMvwWOVrbAtj03KhovQB7i96Gda72v/EFE0vw==}
+
  unist-util-stringify-position@4.0.0:
    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}

+  unist-util-visit-parents@5.1.3:
+    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
+
  unist-util-visit-parents@6.0.1:
    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}

@ -4713,6 +4606,9 @@ packages:
    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
    engines: {node: '>= 0.8'}

+  vfile-matter@5.0.0:
+    resolution: {integrity: sha512-jhPSqlj8hTSkTXOqyxbUeZAFFVq/iwu/jukcApEqc/7DOidaAth6rDc0Zgg0vWpzUnWkwFP7aK28l6nBmxMqdQ==}
+
  vfile-message@4.0.2:
    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}

@ -4725,30 +4621,12 @@ packages:
  walker@1.0.8:
    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}

-  watchpack@2.4.1:
-    resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}
-    engines: {node: '>=10.13.0'}
-
  wcwidth@1.0.1:
    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}

  webidl-conversions@3.0.1:
    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}

-  webpack-sources@3.2.3:
-    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
-    engines: {node: '>=10.13.0'}
-
-  webpack@5.93.0:
-    resolution: {integrity: sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-    peerDependencies:
-      webpack-cli: '*'
-    peerDependenciesMeta:
-      webpack-cli:
-        optional: true
-
  whatwg-fetch@3.6.20:
    resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}

@ -5957,14 +5835,6 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

-  '@mdx-js/loader@3.0.1(webpack@5.93.0)':
-    dependencies:
-      '@mdx-js/mdx': 3.0.1
-      source-map: 0.7.4
-      webpack: 5.93.0
-    transitivePeerDependencies:
-      - supports-color
-
  '@mdx-js/mdx@3.0.1':
    dependencies:
      '@types/estree': 1.0.5
@ -6005,13 +5875,6 @@ snapshots:
    dependencies:
      glob: 10.3.10

-  '@next/mdx@14.2.5(@mdx-js/loader@3.0.1(webpack@5.93.0))(@mdx-js/react@3.0.1(@types/react@18.3.3)(react@18.3.1))':
-    dependencies:
-      source-map: 0.7.4
-    optionalDependencies:
-      '@mdx-js/loader': 3.0.1(webpack@5.93.0)
-      '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1)
-
  '@next/swc-darwin-arm64@14.2.5':
    optional: true

@ -6743,15 +6606,11 @@ snapshots:
    dependencies:
      '@types/ms': 0.7.34

-  '@types/eslint-scope@3.7.7':
-    dependencies:
-      '@types/eslint': 9.6.0
-      '@types/estree': 1.0.5
-
  '@types/eslint@9.6.0':
    dependencies:
      '@types/estree': 1.0.5
      '@types/json-schema': 7.0.15
+    optional: true

  '@types/estree-jsx@1.0.5':
    dependencies:
@ -6773,7 +6632,8 @@ snapshots:
    dependencies:
      '@types/istanbul-lib-report': 3.0.3

-  '@types/json-schema@7.0.15': {}
+  '@types/json-schema@7.0.15':
+    optional: true

  '@types/json5@0.0.29': {}

@ -6946,86 +6806,6 @@ snapshots:

  '@ungap/structured-clone@1.2.0': {}

-  '@webassemblyjs/ast@1.12.1':
-    dependencies:
-      '@webassemblyjs/helper-numbers': 1.11.6
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-
-  '@webassemblyjs/floating-point-hex-parser@1.11.6': {}
-
-  '@webassemblyjs/helper-api-error@1.11.6': {}
-
-  '@webassemblyjs/helper-buffer@1.12.1': {}
-
-  '@webassemblyjs/helper-numbers@1.11.6':
-    dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.11.6
-      '@webassemblyjs/helper-api-error': 1.11.6
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/helper-wasm-bytecode@1.11.6': {}
-
-  '@webassemblyjs/helper-wasm-section@1.12.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-buffer': 1.12.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/wasm-gen': 1.12.1
-
-  '@webassemblyjs/ieee754@1.11.6':
-    dependencies:
-      '@xtuc/ieee754': 1.2.0
-
-  '@webassemblyjs/leb128@1.11.6':
-    dependencies:
-      '@xtuc/long': 4.2.2
-
-  '@webassemblyjs/utf8@1.11.6': {}
-
-  '@webassemblyjs/wasm-edit@1.12.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-buffer': 1.12.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/helper-wasm-section': 1.12.1
-      '@webassemblyjs/wasm-gen': 1.12.1
-      '@webassemblyjs/wasm-opt': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
-      '@webassemblyjs/wast-printer': 1.12.1
-
-  '@webassemblyjs/wasm-gen@1.12.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/ieee754': 1.11.6
-      '@webassemblyjs/leb128': 1.11.6
-      '@webassemblyjs/utf8': 1.11.6
-
-  '@webassemblyjs/wasm-opt@1.12.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-buffer': 1.12.1
-      '@webassemblyjs/wasm-gen': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
-
-  '@webassemblyjs/wasm-parser@1.12.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-api-error': 1.11.6
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/ieee754': 1.11.6
-      '@webassemblyjs/leb128': 1.11.6
-      '@webassemblyjs/utf8': 1.11.6
-
-  '@webassemblyjs/wast-printer@1.12.1':
-    dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@xtuc/long': 4.2.2
-
-  '@xtuc/ieee754@1.2.0': {}
-
-  '@xtuc/long@4.2.2': {}
-
  abort-controller@3.0.0:
    dependencies:
      event-target-shim: 5.0.1
@ -7035,20 +6815,12 @@ snapshots:
      mime-types: 2.1.35
      negotiator: 0.6.3

-  acorn-import-attributes@1.9.5(acorn@8.12.1):
-    dependencies:
-      acorn: 8.12.1
-
  acorn-jsx@5.3.2(acorn@8.12.1):
    dependencies:
      acorn: 8.12.1

  acorn@8.12.1: {}

-  ajv-keywords@3.5.2(ajv@6.12.6):
-    dependencies:
-      ajv: 6.12.6
-
  ajv@6.12.6:
    dependencies:
      fast-deep-equal: 3.1.3
@ -7369,8 +7141,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  chrome-trace-event@1.0.4: {}
-
  ci-info@2.0.0: {}

  ci-info@3.9.0: {}
@ -7720,8 +7490,6 @@ snapshots:
      iterator.prototype: 1.1.2
      safe-array-concat: 1.1.2

-  es-module-lexer@1.5.4: {}
-
  es-object-atoms@1.0.0:
    dependencies:
      es-errors: 1.3.0
@ -8002,11 +7770,6 @@ snapshots:

  eslint-rule-documentation@1.0.23: {}

-  eslint-scope@5.1.1:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 4.3.0
-
  eslint-scope@7.2.2:
    dependencies:
      esrecurse: 4.3.0
@ -8075,8 +7838,6 @@ snapshots:
    dependencies:
      estraverse: 5.3.0

-  estraverse@4.3.0: {}
-
  estraverse@5.3.0: {}

  estree-util-attach-comments@3.0.0:
@ -8113,8 +7874,6 @@ snapshots:

  event-target-shim@5.0.1: {}

-  events@3.3.0: {}
-
  execa@5.1.1:
    dependencies:
      cross-spawn: 7.0.3
@ -8127,6 +7886,10 @@ snapshots:
      signal-exit: 3.0.7
      strip-final-newline: 2.0.0

+  extend-shallow@2.0.1:
+    dependencies:
+      is-extendable: 0.1.1
+
  extend@3.0.2: {}

  fast-deep-equal@3.1.3: {}
@ -8276,8 +8039,6 @@ snapshots:
    dependencies:
      is-glob: 4.0.3

-  glob-to-regexp@0.4.1: {}
-
  glob@10.3.10:
    dependencies:
      foreground-child: 3.2.1
@ -8332,6 +8093,13 @@ snapshots:

  graphemer@1.4.0: {}

+  gray-matter@4.0.3:
+    dependencies:
+      js-yaml: 3.14.1
+      kind-of: 6.0.3
+      section-matter: 1.0.0
+      strip-bom-string: 1.0.0
+
  has-bigints@1.0.2: {}

  has-flag@3.0.0: {}
@ -8524,6 +8292,8 @@ snapshots:

  is-docker@2.2.1: {}

+  is-extendable@0.1.1: {}
+
  is-extglob@2.1.1: {}

  is-finalizationregistry@1.0.2:
@ -8692,12 +8462,6 @@ snapshots:
      leven: 3.1.0
      pretty-format: 29.7.0

-  jest-worker@27.5.1:
-    dependencies:
-      '@types/node': 20.14.11
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-
  jest-worker@29.7.0:
    dependencies:
      '@types/node': 20.14.11
@ -8763,8 +8527,6 @@ snapshots:

  json-parse-better-errors@1.0.2: {}

-  json-parse-even-better-errors@2.3.1: {}
-
  json-schema-traverse@0.4.1: {}

  json-stable-stringify-without-jsonify@1.0.1: {}
@ -8822,8 +8584,6 @@ snapshots:

  lines-and-columns@1.2.4: {}

-  loader-runner@4.3.0: {}
-
  locate-path@3.0.0:
    dependencies:
      p-locate: 3.0.0
@ -9432,6 +9192,19 @@ snapshots:

  neo-async@2.6.2: {}

+  next-mdx-remote@5.0.0(@types/react@18.3.3)(react@18.3.1):
+    dependencies:
+      '@babel/code-frame': 7.24.7
+      '@mdx-js/mdx': 3.0.1
+      '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      unist-util-remove: 3.1.1
+      vfile: 6.0.2
+      vfile-matter: 5.0.0
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
  next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
    dependencies:
      react: 18.3.1
@ -9763,10 +9536,6 @@ snapshots:
    dependencies:
      inherits: 2.0.4

-  randombytes@2.1.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
  range-parser@1.2.1: {}

  react-devtools-core@5.3.1:
@ -10119,11 +9888,10 @@ snapshots:
    dependencies:
      loose-envify: 1.4.0

-  schema-utils@3.3.0:
+  section-matter@1.0.0:
    dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      ajv-keywords: 3.5.2(ajv@6.12.6)
+      extend-shallow: 2.0.1
+      kind-of: 6.0.3

  selfsigned@2.4.1:
    dependencies:
@ -10156,10 +9924,6 @@ snapshots:

  serialize-error@2.1.0: {}

-  serialize-javascript@6.0.2:
-    dependencies:
-      randombytes: 2.1.0
-
  serve-static@1.15.0:
    dependencies:
      encodeurl: 1.0.2
@ -10342,6 +10106,8 @@ snapshots:
    dependencies:
      ansi-regex: 6.0.1

+  strip-bom-string@1.0.0: {}
+
  strip-bom@3.0.0: {}

  strip-final-newline@2.0.0: {}
@ -10459,15 +10225,6 @@ snapshots:
    dependencies:
      rimraf: 2.6.3

-  terser-webpack-plugin@5.3.10(webpack@5.93.0):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      jest-worker: 27.5.1
-      schema-utils: 3.3.0
-      serialize-javascript: 6.0.2
-      terser: 5.31.3
-      webpack: 5.93.0
-
  terser@5.31.3:
    dependencies:
      '@jridgewell/source-map': 0.3.6
@ -10599,6 +10356,10 @@ snapshots:
      trough: 2.2.0
      vfile: 6.0.2

+  unist-util-is@5.2.1:
+    dependencies:
+      '@types/unist': 2.0.10
+
  unist-util-is@6.0.0:
    dependencies:
      '@types/unist': 3.0.2
@ -10616,10 +10377,21 @@ snapshots:
      '@types/unist': 3.0.2
      unist-util-visit: 5.0.0

+  unist-util-remove@3.1.1:
+    dependencies:
+      '@types/unist': 2.0.10
+      unist-util-is: 5.2.1
+      unist-util-visit-parents: 5.1.3
+
  unist-util-stringify-position@4.0.0:
    dependencies:
      '@types/unist': 3.0.2

+  unist-util-visit-parents@5.1.3:
+    dependencies:
+      '@types/unist': 2.0.10
+      unist-util-is: 5.2.1
+
  unist-util-visit-parents@6.0.1:
    dependencies:
      '@types/unist': 3.0.2
@ -10666,6 +10438,11 @@ snapshots:

  vary@1.1.2: {}

+  vfile-matter@5.0.0:
+    dependencies:
+      vfile: 6.0.2
+      yaml: 2.4.5
+
  vfile-message@4.0.2:
    dependencies:
      '@types/unist': 3.0.2
@ -10683,50 +10460,12 @@ snapshots:
    dependencies:
      makeerror: 1.0.12

-  watchpack@2.4.1:
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-
  wcwidth@1.0.1:
    dependencies:
      defaults: 1.0.4

  webidl-conversions@3.0.1: {}

-  webpack-sources@3.2.3: {}
-
-  webpack@5.93.0:
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.5
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/wasm-edit': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
-      acorn: 8.12.1
-      acorn-import-attributes: 1.9.5(acorn@8.12.1)
-      browserslist: 4.23.2
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.0
-      es-module-lexer: 1.5.4
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 3.3.0
-      tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(webpack@5.93.0)
-      watchpack: 2.4.1
-      webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-
  whatwg-fetch@3.6.20: {}

  whatwg-url@5.0.0:
--- a/src/app/blog/[slug]/layout.tsx
+++ b/src/app/blog/[slug]/layout.tsx
@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+import DefaultLayout from '@/components/layouts/default-layout'
+
+export interface PostLayoutProps {
+  children: ReactNode
+  params: {
+    slug: string
+  }
+}
+
+export default function PostLayout({ children }: PostLayoutProps) {
+  return (
+    <DefaultLayout>
+      <main>
+        <article className="flex flex-col gap-4 text-xs md:text-base my-6">{children}</article>
+      </main>
+    </DefaultLayout>
+  )
+}
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@ -0,0 +1,126 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import matter from 'gray-matter'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+
+import { components } from '@/components/mdx-components'
+
+const BLOG_PATH = path.join('src', 'contents', 'posts')
+
+export interface Props {
+  params: {
+    slug: string
+  }
+}
+
+type FrontMatterMetadata = {
+  siteTitle: string
+  postTitle: string
+  siteDescription: string
+  postDescription: string
+  publishedOn: string
+  updatedOn: string
+  isPublished: boolean
+  tags: string[]
+}
+
+export interface PostMetadata {
+  slug: string
+  frontMatter: FrontMatterMetadata
+  content: string
+}
+
+/**
+ * Get the post from file system, matching the provided slug from the route params.
+ */
+function getPost(slug: string): PostMetadata {
+  try {
+    const markdownFile = fs.readFileSync(path.join(BLOG_PATH, slug + '.mdx'), 'utf-8')
+
+    const { data: frontMatter, content } = matter(markdownFile)
+
+    if (!frontMatter.isPublished) {
+      throw new Error('Post is currently not published yet!')
+    }
+
+    return {
+      frontMatter: frontMatter as FrontMatterMetadata,
+      slug,
+      content,
+    }
+  } catch {
+    /*
+     * Catch any possible error (could be no slug exists, post has not been published,
+     * or something wrong with the fs) above and just render not found.
+     */
+    notFound()
+  }
+}
+
+/**
+ * Statically generate routes at build time.
+ *
+ * See: <https://nextjs.org/docs/app/api-reference/functions/generate-static-params>
+ */
+export async function generateStaticParams(): Promise<string[]> {
+  const files = fs.readdirSync(BLOG_PATH)
+
+  const slugPaths = files.map((filename) => filename.replace('.mdx', ''))
+
+  return slugPaths
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params
+
+  const post = getPost(slug)
+
+  return {
+    title: post.frontMatter.siteTitle,
+    description: post.frontMatter.siteDescription,
+  }
+}
+
+export default function Post({ params }: Props) {
+  const { slug } = params
+
+  const post = getPost(slug)
+
+  return (
+    <main className="flex flex-col gap-4 my-8">
+      <div id="post-detail" className="flex flex-col gap-2 mb-2">
+        <h1 id="post-title" className="text-3xl md:text-4xl font-bold">
+          {post.frontMatter.postTitle}
+        </h1>
+        <span id="post-description" className="text-base md:text-lg">
+          {post.frontMatter.postDescription}
+        </span>
+        <div id="post-tags" className="flex gap-2 mb-4">
+          {post.frontMatter.tags.map((tag: string, index: number) => {
+            return (
+              <span key={index} className="px-2 py-1 rounded-lg bg-primary/30 text-xs">
+                #{tag}
+              </span>
+            )
+          })}
+        </div>
+        <div id="post-publication-date" className="flex gap-2 font-bold text-xs">
+          <span>PUBLISHED ON: {post.frontMatter.publishedOn}</span>
+          {post.frontMatter.updatedOn !== post.frontMatter.publishedOn ? (
+            <>
+              <span>|</span>
+              <span>UPDATED ON: {post.frontMatter.updatedOn}</span>
+            </>
+          ) : null}
+        </div>
+      </div>
+      <hr />
+      <article id="post-content" className="flex flex-col gap-4">
+        <MDXRemote source={post.content} components={components} />
+      </article>
+    </main>
+  )
+}
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@ -1,6 +1,6 @@
 import { Metadata } from 'next'

-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import DefaultLayout from '@/components/layouts/default-layout'
 import UnderConstruction from '@/components/blocks/error/under-construction'

 export const metadata: Metadata = {
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,6 +1,7 @@
 import '@/styles/globals.css'

 import type { Metadata, Viewport } from 'next'
+import { ReactNode } from 'react'

 import { siteConfig } from '@/config/site'

@ -10,7 +11,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
-    template: `${siteConfig.name} | %s`,
+    template: `%s | ${siteConfig.name}`,
  },
  metadataBase: new URL(siteConfig.url),
  description: siteConfig.description,
@ -31,8 +32,8 @@ export const viewport: Viewport = {
  ],
 }

-interface RootLayoutProps {
-  children: React.ReactNode
+export interface RootLayoutProps {
+  children: ReactNode
 }

 export default function RootLayout({ children }: RootLayoutProps) {
--- a/src/app/mdx-components.tsx
+++ b/src/app/mdx-components.tsx
@ -1,7 +0,0 @@
-import type { MDXComponents } from 'mdx/types'
-
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    ...components,
-  }
-}
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@ -1,6 +1,6 @@
 import { Metadata } from 'next'

-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import DefaultLayout from '@/components/layouts/default-layout'
 import PageNotFound from '@/components/blocks/error/page-not-found'

 export const metadata: Metadata = {
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,4 +1,4 @@
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import DefaultLayout from '@/components/layouts/default-layout'
 import IntroductionSection from '@/components/blocks/home/introduction-section'
 import AboutSection from '@/components/blocks/home/about-section'
 import ContactSection from '@/components/blocks/home/contact-section'
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@ -1,6 +1,6 @@
 import { Metadata } from 'next'

-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import DefaultLayout from '@/components/layouts/default-layout'
 import UnderConstruction from '@/components/blocks/error/under-construction'

 export const metadata: Metadata = {
--- a/src/components/blocks/error/page-not-found.tsx
+++ b/src/components/blocks/error/page-not-found.tsx
@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'

 export default function PageNotFound() {
  return (
-    <div className="flex font-mono gap-4 flex-col items-center tracking-wider">
+    <div className="flex font-mono gap-4 flex-col items-center tracking-wide">
      <span className="text-7xl md:text-9xl">404</span>
      <i className="text-xl md:text-2xl">Not Found</i>
      <p className="text-center">You are trying to access a page that doesn't exists.</p>
--- a/src/components/blocks/error/under-construction.tsx
+++ b/src/components/blocks/error/under-construction.tsx
@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'

 export default function UnderConstruction() {
  return (
-    <div className="flex font-mono gap-4 flex-col items-center tracking-wider">
+    <div className="flex font-mono gap-4 flex-col items-center tracking-wide">
      <span className="text-7xl md:text-9xl">501</span>
      <i className="text-xl md:text-2xl">Not Implemented</i>
      <p className="text-center">Sorry! The page is currently under construction.</p>
--- a/src/components/blocks/footer/footer.tsx
+++ b/src/components/blocks/footer/footer.tsx
@ -1,12 +1,9 @@
-'use client'
-
 import Anchor from '@/components/anchor'
 import Package from '../../../../package.json'

 export default function Footer() {
  return (
    <footer className="flex flex-col gap-1 items-center mb-8 text-xs md:text-base">
-      <p className="font-semibold text-center">Site Version: {Package.version}</p>
      <p className="font-semibold text-center">
        Created with ❤️ by{' '}
        <Anchor href={Package.author.url} isExternal>
--- a/src/components/blocks/header/header-navigation.tsx
+++ b/src/components/blocks/header/header-navigation.tsx
@ -48,7 +48,7 @@ export default function HeaderNavigation() {
  return (
    <nav className="flex h-16 p-2 items-center">
      <div className="flex-1">
-        <Link href={'/'} className="font-bold text-xl" onClick={smoothHeaderScroll}>
+        <Link href="/" className="font-bold text-xl" onClick={smoothHeaderScroll}>
          Refansa
        </Link>
      </div>
@ -56,8 +56,8 @@ export default function HeaderNavigation() {
        <Clock />
      </div>
      <div id="Desktop" className="flex-1 hidden md:flex gap-4 items-center justify-end">
-        <NavigationItem href="blog">Blog</NavigationItem>
-        <NavigationItem href="projects">Projects</NavigationItem>
+        <NavigationItem href="/blog">Blog</NavigationItem>
+        <NavigationItem href="/projects">Projects</NavigationItem>
        <ThemeSwitch />
      </div>
      <div id="Mobile" className="flex-1 flex md:hidden justify-end">
@ -78,8 +78,8 @@ export default function HeaderNavigation() {
                </SheetClose>
              </SheetTitle>
              <SheetDescription className="flex flex-col gap-2">
-                <NavigationItem href="blog">Blog</NavigationItem>
-                <NavigationItem href="projects">Projects</NavigationItem>
+                <NavigationItem href="/blog">Blog</NavigationItem>
+                <NavigationItem href="/projects">Projects</NavigationItem>
              </SheetDescription>
            </SheetHeader>
          </SheetContent>
--- a/src/components/blocks/home/about-section.tsx
+++ b/src/components/blocks/home/about-section.tsx
@ -4,7 +4,7 @@ import { Heading } from '@/components/ui/heading'

 export default function AboutSection() {
  return (
-    <section className="flex flex-col gap-4 tracking-wider leading-relaxed text-xs md:text-base">
+    <section className="flex flex-col gap-4 tracking-wide leading-relaxed text-xs md:text-base">
      <Heading level={3}>A bit about me</Heading>
      <p>
        I'm a Software Developer from Jakarta, Indonesia 🇮🇩,{' '}
--- a/src/components/blocks/home/contact-section.tsx
+++ b/src/components/blocks/home/contact-section.tsx
@ -5,7 +5,7 @@ import Anchor from '@/components/anchor'

 export default function ContactSection() {
  return (
-    <section className="flex flex-col gap-4 text-xs md:text-base tracking-wider leading-relaxed">
+    <section className="flex flex-col gap-4 text-xs md:text-base tracking-wide leading-relaxed">
      <Heading level={3}>Contact</Heading>
      <div className="flex flex-col gap-2">
        <span>
--- a/src/components/blocks/home/introduction-section.tsx
+++ b/src/components/blocks/home/introduction-section.tsx
@ -5,6 +5,7 @@ import { Mail } from 'lucide-react'
 import { siteConfig } from '@/config/site'

 import { Button } from '@/components/ui/button'
+import TermWord from '@/components/term-word'

 export default function IntroductionSection() {
  return (
@ -21,7 +22,11 @@ export default function IntroductionSection() {
      </span>
      <div className="mt-4 flex flex-col">
        <span className="text-lg md:text-2xl font-bold">
-          A Passionate, <i>self-taught</i> Software Developer
+          A Passionate,{' '}
+          <TermWord description="College is too expensive nowadays.">
+            <i>self-taught</i>
+          </TermWord>{' '}
+          Software Developer
        </span>
        <span className="text-lg md:text-2xl font-bold text-foreground/50">
          And a Patron of Open Source Software.
--- a/src/components/layouts/default-layout.tsx
+++ b/src/components/layouts/default-layout.tsx
--- a/src/components/mdx-components.tsx
+++ b/src/components/mdx-components.tsx
@ -0,0 +1,46 @@
+import { MDXComponents } from 'mdx/types'
+
+import Anchor from '@/components/anchor'
+import TermWord from '@/components/term-word'
+import { Heading } from '@/components/ui/heading'
+
+export const components: MDXComponents = {
+  Anchor,
+  TermWord,
+  Heading,
+  p(props) {
+    return <p className="tracking-wide leading-relaxed">{props.children}</p>
+  },
+  h1(props) {
+    return <Heading level={1}>{props.children as string}</Heading>
+  },
+  h2(props) {
+    return <Heading level={2}>{props.children as string}</Heading>
+  },
+  h3(props) {
+    return <Heading level={3}>{props.children as string}</Heading>
+  },
+  h4(props) {
+    return <Heading level={4}>{props.children as string}</Heading>
+  },
+  h5(props) {
+    return <Heading level={5}>{props.children as string}</Heading>
+  },
+  h6(props) {
+    return <Heading level={6}>{props.children as string}</Heading>
+  },
+  code(props) {
+    return (
+      <code className="bg-gray-500/20 text-foreground/50 p-1 tracking-normal">
+        {props.children}
+      </code>
+    )
+  },
+  blockquote(props) {
+    return (
+      <blockquote className="bg-gray-500/20 my-3 px-4 py-6 border-l-8 border-gray-500/50">
+        {props.children}
+      </blockquote>
+    )
+  },
+}
--- a/src/components/term-word.tsx
+++ b/src/components/term-word.tsx
@ -1,8 +1,8 @@
-import { ReactNode } from 'react'
+import { HTMLAttributes, ReactNode } from 'react'

 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

-export interface Props {
+export interface Props extends HTMLAttributes<HTMLSpanElement> {
  children: ReactNode
  /**
   * The description of the term word.
@ -10,14 +10,16 @@ export interface Props {
  description: string
 }

-export default function TermWord({ children, description }: Props) {
+export default function TermWord({ children, description, ...rest }: Props) {
  return (
    <Tooltip>
      <TooltipTrigger>
-        <span className="underline decoration-dashed underline-offset-2">{children}</span>
+        <span className="underline decoration-dashed underline-offset-2" {...rest}>
+          {children}
+        </span>
      </TooltipTrigger>
      <TooltipContent>
-        <span className="not-italic">{description}</span>
+        <span className="not-italic font-normal">{description}</span>
      </TooltipContent>
    </Tooltip>
  )
--- a/src/contents/posts/the-weird-state-of-web-development.mdx
+++ b/src/contents/posts/the-weird-state-of-web-development.mdx
@ -0,0 +1,20 @@
+---
+siteTitle: 'What the heck is going on with web development?'
+postTitle: 'The Weird State of Web Development'
+siteDescription: 'Javascript, the mother of all frameworks.'
+postDescription: 'A never ending solution to a never ending problem...'
+publishedOn: '03 August, 2024'
+updatedOn: '04 August, 2024'
+isPublished: true
+tags: ['web-development', 'personal-thought']
+---
+
+I still remember the first time I tried to dip my toe into the world of programming. On that time, I still can't wrap my head around some of the general-purpose language
+like C, C++, Java or the likes (*Yes, I'm just that stupid at the time*) actually works, this was in my early days when I start learning how to code in junior high school.
+Everytime I tried C, I keep shooting my foot with **`segmentation fault`** errors, so I say to myself,
+
+> You know what? Let me just learn how to create a website, it look simple enough. It won't be too hard isn't it? (*But boy do I was wrong...*)
+
+I start off with just HTML, CSS, and a little bit of javascript, it was just a simple personal website. But then I start comparing my work with others.
+I keep mumbling to myself, how do I do this? How do I do that? It was more complicated than I imagined. I thought browser just support HTML, CSS, and JS, so I did my research. But to my surprise,
+<TermWord description="There are other things that are supported by browsers, but I'm talking about the main general support of browser DOM rendering.">**THEY DO JUST THAT**<span className="dark:text-red-400 text-red-600">*</span></TermWord>.
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -4,15 +4,15 @@

@layer base {
  :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 90%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
+    --popover: 0 0% 95%;
    --popover-foreground: 240 10% 3.9%;
-    --primary: 33 44% 22%;
+    --primary: 33 44% 42%;
    --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 240 4.8% 95.9%;
+    --secondary: 240 4.8% 80.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
@ -65,11 +65,13 @@
  }
  html {
    @apply scroll-smooth;
+    scrollbar-color: hsl(var(--primary)) hsl(var(--secondary));
+    scrollbar-width: thin;
  }
  body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground/90;
  }
  *::selection {
-    @apply bg-primary/20;
+    @apply bg-primary/30;
  }
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -4,10 +4,10 @@ import TailwindCSSAnimate from 'tailwindcss-animate'
 const config = {
  darkMode: ['class'],
  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+    './pages/**/*.{ts,tsx,mdx}',
+    './components/**/*.{ts,tsx,mdx}',
+    './app/**/*.{ts,tsx,mdx}',
+    './src/**/*.{ts,tsx,mdx}',
  ],
  prefix: '',
  theme: {