Update

src/web/package.json

@@ -9,10 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.0.1",
+    "@mdx-js/react": "^3.0.1",
+    "@next/mdx": "^14.2.3",
     "@react-three/drei": "^9.102.6",
     "@react-three/fiber": "^8.15.19",
+    "@types/mdx": "^2.0.13",
     "framer-motion": "^11.0.14",
     "gray-matter": "^4.0.3",
+    "mdx": "^0.3.1",
     "next": "14.1.3",
     "next-themes": "^0.3.0",
     "react": "^18",

src/web/src/app/blog/page.jsx

@@ -1,11 +1,5 @@
-// Imports
-
-// Metadata
-
-// Exports
 export default function Blog() {
   return (
-    <div>
+    null
-    </div>
   );
 }

src/web/src/components/footer/content.jsx

@@ -49,7 +49,7 @@ function Content() {
               inline-block
               ${ItemColors[item.color]} dark:${ItemColors[item.color]}
           `}>
-            <Link href={item.href}>{item.label}</Link>
+            <Link href={item.href} target="_blank" rel="noopener noreferrer">{item.label}</Link>
           </motion.div>
         ))}
       </div>

src/web/src/lib/posts.js

@@ -1,35 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import matter from 'gray-matter';
-
-const postsDirectory = path.join(process.cwd(), 'posts');
-
-export function getSortedPostsData() {
-  // Get file names under /posts
-  const fileNames = fs.readdirSync(postsDirectory);
-  const allPostsData = fileNames.map((fileName) => {
-    // Remove ".md" from file name to get id
-    const id = fileName.replace(/\.md$/, '');
-
-    // Read markdown file as string
-    const fullPath = path.join(postsDirectory, fileName);
-    const fileContents = fs.readFileSync(fullPath, 'utf8');
-
-    // Use gray-matter to parse the post metadata section
-    const matterResult = matter(fileContents);
-
-    // Combine the data with the id
-    return {
-      id,
-      ...matterResult.data,
-    };
-  });
-  // Sort posts by date
-  return allPostsData.sort((a, b) => {
-    if (a.date < b.date) {
-      return 1;
-    } else {
-      return -1;
-    }
-  });
-}

src/web/src/posts/ssg-ssr.md

@@ -1,19 +0,0 @@
----
-title: 'When to Use Static Generation v.s. Server-side Rendering'
-date: '2020-01-02'
----
-
-We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
-
-You can use Static Generation for many types of pages, including:
-
-- Marketing pages
-- Blog posts
-- E-commerce product listings
-- Help and documentation
-
-You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
-
-On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
-
-In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.