switched to mdx

pages/index.js

@@ -6,7 +6,7 @@ import Container from "../components/Container";
 import Layout from "../components/Layout";
 import Sidemenu from "../components/Sidemenu";
 import Card from "../components/Card";
-import { gardensFilePath, GARDENS_PATH } from "../utils/mdUtils";
+import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 import { motion } from "framer-motion";
 
 export default function Index({ posts }) {
@@ -65,7 +65,7 @@ export default function Index({ posts }) {
 }
 
 export function getStaticProps() {
-    const posts = gardensFilePath.map((filePath) => {
+    const posts = gardenFilePath.map((filePath) => {
         const source = fs.readFileSync(path.join(GARDENS_PATH, filePath));
         const { content, data } = matter(source);
 

pages/posts/[slug].js

@@ -5,18 +5,21 @@ import { serialize } from "next-mdx-remote/serialize";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Link from "next/link";
+import Image from "next/image";
 import path from "path";
 import Layout from "../../components/Layout";
-import { gardensFilePath, GARDENS_PATH } from "../../utils/mdUtils";
+import { gardenFilePath, GARDENS_PATH } from "../../utils/mdxUtils";
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
 // to handle import statements. Instead, you must include components in scope
 // here.
 const components = {
+    img: (props) => <Image {...props} layout="fill" loading="lazy" />,
     // It also works with dynamically-imported components, which is especially
     // useful for conditionally loading components for certain routes.
     // See the notes in README.md for more details.
+    // TestComponent: dynamic(() => import("../../components/TestComponent")),
     Head,
 };
 
@@ -42,7 +45,7 @@ export default function GardenPage({ source, frontMatter }) {
 }
 
 export const getStaticProps = async ({ params }) => {
-    const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.md`);
+    const gardenFilePath = path.join(GARDENS_PATH, `${params.slug}.mdx`);
     const source = fs.readFileSync(gardenFilePath);
 
     const { content, data } = matter(source);
@@ -65,9 +68,9 @@ export const getStaticProps = async ({ params }) => {
 };
 
 export const getStaticPaths = async () => {
-    const paths = gardensFilePath
+    const paths = gardenFilePath
         // Remove file extensions for page paths
-        .map((path) => path.replace(/\.md?$/, ""))
+        .map((path) => path.replace(/\.mdx?$/, ""))
         // Map the path into the static paths object required by Next.js
         .map((slug) => ({ params: { slug } }));
 

posts/gardens/andy-matuschak.mdx

@@ -3,8 +3,12 @@ title: Andy Matuschak
 description: Algorithms that make themselves known
 topics: ['evergreen notes', 'education', 'tools for thought']
 url: https://notes.andymatuschak.org/
-image: https://via.placeholder.com/200x250
+image: /public/andy1.jpg
 tools: ['mystery system']
 ---
 
+![Andy Matuschak's website](/public/andy1.jpg)
 
+![Andy Matuschak's website](/public/andy2.jpg)
+
+![Andy Matuschak's website](/public/andy3.jpg)

utils/mdxUtils.js

@@ -6,7 +6,7 @@ export const GARDENS_PATH = path.join(process.cwd(), "posts", "gardens");
 export const TOOLS_PATH = path.join(process.cwd(), "posts", "tools");
 
 // patternFilePath is the list of all mdx files inside the POSTS_PATH directory
-export const gardensFilePath = fs
+export const gardenFilePath = fs
     .readdirSync(GARDENS_PATH)
     // Only include md(x) files
-    .filter((path) => /\.md?$/.test(path));
+    .filter((path) => /\.mdx?$/.test(path));