Remove BlogData completely (#357)

Directly read the directories from FS

Author: chenglou

pages/blogpost-guide.mdx

@@ -25,19 +25,7 @@ For example, let's create a new file:
 touch _blogposts/2020-01-30-my-new-blog-post.mdx
 ```
 
-### Map the file to a URL
-
-Open the `src/BlogData.res` file and add the path to `data`:
-
-```res
-let data = [
-  // ...
-  "2020-01-30-my-new-blog-post",
-  // ...
-]
-```
-
-Save your changes within and refresh your browser within [/blog](/blog). You should now see a warning for some malformed frontmatter data. Let's fix this!
+Refresh your browser within [/blog](/blog). You should now see a warning for some malformed frontmatter data. Let's fix this!
 
 ## Add Frontmatter Data
 

scripts/test-hrefs.mjs

@@ -14,19 +14,18 @@ import path from "path";
 import fs from "fs";
 import urlModule from "url";
 import { URL } from 'url';
-import {data as blogIndex} from '../src/BlogData.mjs'
-import {blogPathToSlug} from '../src/common/BlogApi.mjs'
+import {getAllPosts, blogPathToSlug} from '../src/common/BlogApi.mjs'
 
 const __dirname = new URL('.', import.meta.url).pathname;
 
 const mapBlogFilePath = path => {
-  const match = path.match(/\.\/_blogposts\/(.*)\.mdx/);
+  const match = path.match(/\.\/_blogposts\/(.*\.mdx)/);
 
   if (match) {
     let relPath = match[1];
-    let path = blogIndex.find((path) => path === relPath);
-    if (path != null) {
-      return `./pages/blog/${blogPathToSlug(path)}`;
+    let data = getAllPosts().find(({path}) => path === relPath);
+    if (data != null) {
+      return `./pages/blog/${blogPathToSlug(data.path)}`;
     }
     return path;
   }

src/BlogArticle.mjs

@@ -9,7 +9,6 @@ import * as Util from "./common/Util.mjs";
 import * as React from "react";
 import * as BlogApi from "./common/BlogApi.mjs";
 import * as DateStr from "./common/DateStr.mjs";
-import * as BlogData from "./BlogData.mjs";
 import * as Markdown from "./components/Markdown.mjs";
 import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
 import * as MainLayout from "./layouts/MainLayout.mjs";
@@ -111,7 +110,7 @@ function BlogArticle$BlogHeader(Props) {
 
 function $$default(props) {
   var path = props.path;
-  var module_ = require("../_blogposts/" + (path + ".mdx"));
+  var module_ = require("../_blogposts/" + path);
   var archived = path.startsWith("archive/");
   var component = module_.default;
   var fm = BlogFrontmatter.decode(frontmatter(component));
@@ -194,10 +193,10 @@ function $$default(props) {
 
 function getStaticProps(ctx) {
   var params = ctx.params;
-  var slug = BlogData.data.find(function (path2) {
-        return BlogApi.blogPathToSlug(path2) === params.slug;
+  var match = BlogApi.getAllPosts(undefined).find(function (param) {
+        return BlogApi.blogPathToSlug(param.path) === params.slug;
       });
-  var path = slug !== undefined ? slug : params.slug;
+  var path = match !== undefined ? match.path : params.slug;
   var props = {
     path: path
   };

src/BlogArticle.res

@@ -126,7 +126,7 @@ module BlogHeader = {
 let default = (props: props) => {
   let {path} = props
 
-  let module_ = BlogComponent.require("../_blogposts/" ++ (path ++ ".mdx"))
+  let module_ = BlogComponent.require("../_blogposts/" ++ path)
 
   let archived = Js.String2.startsWith(path, "archive/")
 
@@ -225,11 +225,11 @@ let getStaticProps: Next.GetStaticProps.t<props, Params.t> = ctx => {
   open Next.GetStaticProps
   let {params} = ctx
 
-  let path = switch BlogData.data->Js.Array2.find(path2 =>
-    BlogApi.blogPathToSlug(path2) == params.slug
+  let path = switch BlogApi.getAllPosts()->Js.Array2.find(({path}) =>
+    BlogApi.blogPathToSlug(path) == params.slug
   ) {
   | None => params.slug
-  | Some(slug) => slug
+  | Some({path}) => path
   }
 
   let props = {path: path}

src/BlogData.mjs

@@ -4,34 +4,43 @@ import * as Fs from "fs";
 import * as Path from "path";
 import * as DateStr from "./DateStr.mjs";
 import * as Process from "process";
-import * as BlogData from "../BlogData.mjs";
 import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
 import * as Belt_Option from "rescript/lib/es6/belt_Option.js";
 import * as Caml_option from "rescript/lib/es6/caml_option.js";
 import GrayMatter from "gray-matter";
 import * as BlogFrontmatter from "./BlogFrontmatter.mjs";
 
 function blogPathToSlug(path) {
-  return path.replace(/(archive\/)?\d\d\d\d-\d\d-\d\d-/, "");
+  return path.replace(/^(archive\/)?\d\d\d\d-\d\d-\d\d-(.+)\.mdx$/, "$2");
 }
 
 function getAllPosts(param) {
-  var postsDirectory = Path.join(Process.cwd(), "./_blogposts");
-  return Belt_Array.keepMap(BlogData.data, (function (path) {
-                var fullPath = Path.join(postsDirectory, path + ".mdx");
-                if (!Fs.existsSync(fullPath)) {
-                  return ;
-                }
-                var fileContents = Fs.readFileSync(fullPath, "utf8");
-                var match = GrayMatter(fileContents);
-                var archived = fullPath.includes("/archive/");
-                return {
-                        content: match.content,
-                        path: path,
-                        archived: archived,
-                        frontmatter: match.data
-                      };
-              }));
+  var postsDirectory = Path.join(Process.cwd(), "_blogposts");
+  var archivedPostsDirectory = Path.join(postsDirectory, "archive");
+  var mdxFiles = function (dir) {
+    return Fs.readdirSync(dir).filter(function (path) {
+                return Path.extname(path) === ".mdx";
+              });
+  };
+  var nonArchivedPosts = mdxFiles(postsDirectory).map(function (path) {
+        var match = GrayMatter(Fs.readFileSync(Path.join(postsDirectory, path), "utf8"));
+        return {
+                content: match.content,
+                path: path,
+                archived: false,
+                frontmatter: match.data
+              };
+      });
+  var archivedPosts = mdxFiles(archivedPostsDirectory).map(function (path) {
+        var match = GrayMatter(Fs.readFileSync(Path.join(archivedPostsDirectory, path), "utf8"));
+        return {
+                content: match.content,
+                path: Path.join("archive", path),
+                archived: true,
+                frontmatter: match.data
+              };
+      });
+  return nonArchivedPosts.concat(archivedPosts);
 }
 
 function dateToUTCString(date) {

src/BlogData.res

@@ -40,33 +40,42 @@ type postData = {
 }
 
 let blogPathToSlug = path => {
-  path->Js.String2.replaceByRe(%re(`/(archive\/)?\d\d\d\d-\d\d-\d\d-/`), "")
+  path->Js.String2.replaceByRe(%re(`/^(archive\/)?\d\d\d\d-\d\d-\d\d-(.+)\.mdx$/`), "$2")
 }
 
-let getAllPosts = () => {
-  let postsDirectory = Node.Path.join2(Node.Process.cwd(), "./_blogposts")
+@module("path") external extname: string => string = "extname"
 
-  BlogData.data->Belt.Array.keepMap((path) => {
-    let fullPath = Node.Path.join2(postsDirectory, path ++ ".mdx")
+let getAllPosts = () => {
+  let postsDirectory = Node.Path.join2(Node.Process.cwd(), "_blogposts")
+  let archivedPostsDirectory = Node.Path.join2(postsDirectory, "archive")
 
-    if Node.Fs.existsSync(fullPath) {
-      let fileContents = Node.Fs.readFileSync(fullPath, #utf8)
-      let {GrayMatter.data: data, content} = GrayMatter.matter(fileContents)
+  let mdxFiles = dir => {
+    Node.Fs.readdirSync(dir)->Js.Array2.filter(path => extname(path) === ".mdx")
+  }
 
-      // We currently derive the archived state from the directory hierarchy
-      // TODO: We need to handle archived files differently later on
-      let archived = Js.String2.includes(fullPath, "/archive/")
+  let nonArchivedPosts = mdxFiles(postsDirectory)->Js.Array2.map(path => {
+    let {GrayMatter.data: data, content} =
+      Node.Path.join2(postsDirectory, path)->Node.Fs.readFileSync(#utf8)->GrayMatter.matter
+    {
+      path: path,
+      content: content,
+      frontmatter: data,
+      archived: false,
+    }
+  })
 
-      Some({
-        path: path,
-        content: content,
-        frontmatter: data,
-        archived: archived,
-      })
-    } else {
-      None
+  let archivedPosts = mdxFiles(archivedPostsDirectory)->Js.Array2.map(path => {
+    let {GrayMatter.data: data, content} =
+      Node.Path.join2(archivedPostsDirectory, path)->Node.Fs.readFileSync(#utf8)->GrayMatter.matter
+    {
+      path: Node.Path.join2("archive", path),
+      content: content,
+      frontmatter: data,
+      archived: true,
     }
   })
+
+  Js.Array2.concat(nonArchivedPosts, archivedPosts)
 }
 
 module RssFeed = {