lib: Genericize content

next/lib/posts.js

-import fs from 'fs'
-import path from 'path'
-import matter from 'gray-matter'
-import remark from 'remark'
-import html from 'remark-html'
-
-const postsDirectory = path.join(process.cwd(), 'posts')
+import {getAllContentData, getAllContentIds, getContentData} from './utils'
 
 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
-    }
-  })
+  return getAllContentData('posts', true)
 }
 
 export function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory)
-
-  // Returns an array that looks like this:
-  // [
-  //   {
-  //     params: {
-  //       id: 'ssg-ssr'
-  //     }
-  //   },
-  //   {
-  //     params: {
-  //       id: 'pre-rendering'
-  //     }
-  //   }
-  // ]
-  // MUST be an array of objects
-  return fileNames.map(fileName => {
-    return {
-      params: {
-        id: fileName.replace(/\.md$/, '')
-      }
-    }
-  })
+  return getAllContentIds("posts")
 }
 
 export async function getPostData(id) {
-  const fullPath = path.join(postsDirectory, `${id}.md`)
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
-
-  // Use gray-matter to parse the post metadata section
-  const matterResult = matter(fileContents)
-
-  // Use remark to convert markdown into HTML string
-  const processedContent = await remark()
-    .use(html)
-    .process(matterResult.content)
-  const contentHtml = processedContent.toString()
-
-  // Combine the data with the id and contentHtml
-  return {
-    id,
-    contentHtml,
-    ...matterResult.data
-  }
+  return getContentData("posts", id)
 }

next/lib/utils.js

+import path from "path";
+import fs from "fs";
+import matter from "gray-matter";
+import remark from "remark";
+import html from "remark-html";
+
+function getContentDirectory(name) {
+  const dir = path.join(process.cwd(), "content", name);
+  console.log("gCD:", dir);
+  return dir;
+}
+
+function getAllContentData(name, sorted = false) {
+  // Get file names under /content/{name}
+  const contentDirectory = getContentDirectory(name);
+  const fileNames = fs.readdirSync(contentDirectory);
+  console.log("gACD: total", fileNames.length, "items");
+
+  const allContentData = 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(contentDirectory, 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,
+    };
+  });
+
+  return sorted
+    ? allContentData.sort((a, b) => {
+        if (a.date < b.date) {
+          return 1;
+        } else {
+          return -1;
+        }
+      })
+    : allContentData;
+}
+
+function getAllContentIds(name) {
+  const fileNames = fs.readdirSync(getContentDirectory(name));
+  console.log(`getAllContentIds: ${fileNames.length} ${name}(s).`);
+
+  return fileNames.map((fileName) => {
+    return {
+      params: {
+        id: fileName.replace(/\.md$/, ""),
+      },
+    };
+  });
+}
+
+async function getContentData(name, id) {
+  const fullPath = path.join(getContentDirectory(name), `${id}.md`);
+  console.log("Got content fullPath:", fullPath);
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  console.log("Got contents:", fileContents);
+
+  // Use gray-matter to parse the post metadata section
+  const matterResult = matter(fileContents);
+
+  // Use remark to convert markdown into HTML string
+  const processedContent = await remark()
+    .use(html)
+    .process(matterResult.content);
+  const contentHtml = processedContent.toString();
+
+  // Combine the data with the id and contentHtml
+  return {
+    id,
+    contentHtml,
+    ...matterResult.data,
+  };
+}
+
+export {
+  getContentDirectory,
+  getContentData,
+  getAllContentData,
+  getAllContentIds,
+};

next/styles.css

@@ -30,6 +30,10 @@ header {
   margin-bottom: 2em;
 }
 
+main h1 {
+  margin-bottom: 1em;
+}
+
 footer {
   margin-top: 4em;
   text-align: center;