separate path for archived posts

The previous approach (tabs) doesn't preserve URL path for archived posts
and therefore doesn't provide basic web browsing experiences such as history-back.

While improving this, it also removes various duplications used to filter posts.

Also, this makes the blog page faster because less initial data is loaded for entry.

Author: cometkim

pages/blog.js

@@ -1,6 +1,6 @@
 import BlogRes from "src/Blog.mjs";
 
-export { getStaticProps } from "src/Blog.mjs";
+export { getStaticProps_All as getStaticProps } from "src/Blog.mjs";
 
 export default function Blog(props) {
   return <BlogRes {...props} />

pages/blog/archived.js

@@ -0,0 +1,7 @@
+import BlogRes from "src/Blog.mjs";
+
+export { getStaticProps_Archived as getStaticProps } from "src/Blog.mjs";
+
+export default function Blog(props) {
+  return <BlogRes {...props} />
+}

src/Blog.res

@@ -39,44 +39,34 @@ module Badge = {
     </div>
   }
 }
-module CategorySelector = {
-  type selection =
-    | All
-    | Archived
 
-  let renderTab = (~text: string, ~isActive: bool, ~onClick) => {
-    let active = "bg-gray-20 text-gray-80 rounded py-1"
-    <div
-      key=text
-      onClick
-      className={(
-        isActive ? active : "hover:cursor-pointer bg-white hover:text-gray-80"
-      ) ++ "  px-4 inline-block"}>
-      {React.string(text)}
-    </div>
-  }
+type category =
+  | /** Actually only unarchived */ All
+  | Archived
 
+module CategorySelector = {
   @react.component
-  let make = (~selected: selection, ~onSelected: selection => unit) => {
+  let make = (~selected: category) => {
     let tabs = [All, Archived]
 
     <div className="text-16 w-full flex items-center justify-between text-gray-60">
-      {Belt.Array.map(tabs, tab => {
-        let onClick = evt => {
-          evt->ReactEvent.Mouse.preventDefault
-          onSelected(tab)
-        }
-
+      {tabs
+      ->Belt.Array.map(tab => {
         // Deep comparison here!
         let isActive = selected == tab
-
-        let text = switch tab {
-        | All => "All"
-        | Archived => "Archived"
+        let text = (tab :> string)
+        let href = switch tab {
+        | All => "/blog"
+        | Archived => "/blog/archived"
         }
-
-        renderTab(~isActive, ~text, ~onClick)
-      })->React.array}
+        let className =
+          switch isActive {
+          | true => "bg-gray-20 text-gray-80 rounded py-1"
+          | false => "hover:cursor-pointer bg-white hover:text-gray-80"
+          } ++ " px-4 inline-block"
+        <Link key=text href className> {React.string(text)} </Link>
+      })
+      ->React.array}
     </div>
   }
 }
@@ -209,15 +199,10 @@ module FeatureCard = {
 
 type params = {slug: string}
 
-type props = {
-  posts: array<BlogApi.post>,
-  archived: array<BlogApi.post>,
-}
+type props = {posts: array<BlogApi.post>, category: category}
 
 let default = (props: props): React.element => {
-  let {posts, archived} = props
-
-  let (currentSelection, setSelection) = React.useState(() => CategorySelector.All)
+  let {posts, category} = props
 
   let content = if Belt.Array.length(posts) === 0 {
     /* <div> {React.string("Currently no posts available")} </div>; */
@@ -226,16 +211,11 @@ let default = (props: props): React.element => {
       <Markdown.Warn> {React.string("This blog is currently in the works.")} </Markdown.Warn>
     </div>
   } else {
-    let filtered = switch currentSelection {
-    | All => posts
-    | Archived => archived
-    }
-
-    let result = switch Belt.Array.length(filtered) {
+    let result = switch Belt.Array.length(posts) {
     | 0 => <div> {React.string("No posts for this category available...")} </div>
     | _ =>
-      let first = Belt.Array.getExn(filtered, 0)
-      let rest = Js.Array2.sliceFrom(filtered, 1)
+      let first = Belt.Array.getExn(posts, 0)
+      let rest = Js.Array2.sliceFrom(posts, 1)
 
       let featureBox =
         <div className="w-full mb-24 lg:px-8 xl:px-0">
@@ -280,9 +260,7 @@ let default = (props: props): React.element => {
     <>
       <div className="hidden sm:flex justify-center ">
         <div className="my-16 w-full" style={ReactDOMStyle.make(~maxWidth="12rem", ())}>
-          <CategorySelector
-            onSelected={selection => setSelection(_ => selection)} selected=currentSelection
-          />
+          <CategorySelector selected=category />
         </div>
       </div>
       result
@@ -316,12 +294,19 @@ let default = (props: props): React.element => {
   </>
 }
 
-let getStaticProps: Next.GetStaticProps.t<props, params> = async _ctx => {
-  let (archived, nonArchived) = BlogApi.getAllPosts()->Belt.Array.partition(data => data.archived)
+let getStaticProps_All: Next.GetStaticProps.t<props, params> = async _ctx => {
+  let props = {
+    posts: BlogApi.getLivePosts(),
+    category: All,
+  }
+
+  {"props": props}
+}
 
+let getStaticProps_Archived: Next.GetStaticProps.t<props, params> = async _ctx => {
   let props = {
-    posts: nonArchived,
-    archived,
+    posts: BlogApi.getArchivedPosts(),
+    category: Archived,
   }
 
   {"props": props}

src/Blog.resi

@@ -3,6 +3,9 @@ let defaultPreviewImg: string
 type params
 type props
 
+type category = All | Archived
+
 let default: props => React.element
 
-let getStaticProps: Next.GetStaticProps.t<props, params>
+let getStaticProps_All: Next.GetStaticProps.t<props, params>
+let getStaticProps_Archived: Next.GetStaticProps.t<props, params>

src/common/BlogApi.res

@@ -42,14 +42,14 @@ let blogPathToSlug = path => {
   path->Js.String2.replaceByRe(%re(`/^(archive\/)?\d\d\d\d-\d\d-\d\d-(.+)\.mdx$/`), "$2")
 }
 
+let mdxFiles = dir => {
+  Node.Fs.readdirSync(dir)->Js.Array2.filter(path => Node.Path.extname(path) === ".mdx")
+}
+
 let getAllPosts = () => {
   let postsDirectory = Node.Path.join2(Node.Process.cwd(), "_blogposts")
   let archivedPostsDirectory = Node.Path.join2(postsDirectory, "archive")
 
-  let mdxFiles = dir => {
-    Node.Fs.readdirSync(dir)->Js.Array2.filter(path => Node.Path.extname(path) === ".mdx")
-  }
-
   let nonArchivedPosts = mdxFiles(postsDirectory)->Js.Array2.map(path => {
     let {GrayMatter.data: data} =
       Node.Path.join2(postsDirectory, path)->Node.Fs.readFileSync->GrayMatter.matter
@@ -81,6 +81,49 @@ let getAllPosts = () => {
   })
 }
 
+let getLivePosts = () => {
+  let postsDirectory = Node.Path.join2(Node.Process.cwd(), "_blogposts")
+
+  let livePosts = mdxFiles(postsDirectory)->Js.Array2.map(path => {
+    let {GrayMatter.data: data} =
+      Node.Path.join2(postsDirectory, path)->Node.Fs.readFileSync->GrayMatter.matter
+    switch BlogFrontmatter.decode(data) {
+    | Error(msg) => Js.Exn.raiseError(msg)
+    | Ok(d) => {
+        path,
+        frontmatter: d,
+        archived: false,
+      }
+    }
+  })
+
+  livePosts->Js.Array2.sortInPlaceWith((a, b) => {
+    String.compare(Node.Path.basename(b.path), Node.Path.basename(a.path))
+  })
+}
+
+let getArchivedPosts = () => {
+  let postsDirectory = Node.Path.join2(Node.Process.cwd(), "_blogposts")
+  let archivedPostsDirectory = Node.Path.join2(postsDirectory, "archive")
+
+  let archivedPosts = mdxFiles(archivedPostsDirectory)->Js.Array2.map(path => {
+    let {GrayMatter.data: data} =
+      Node.Path.join2(archivedPostsDirectory, path)->Node.Fs.readFileSync->GrayMatter.matter
+    switch BlogFrontmatter.decode(data) {
+    | Error(msg) => Js.Exn.raiseError(msg)
+    | Ok(d) => {
+        path: Node.Path.join2("archive", path),
+        frontmatter: d,
+        archived: true,
+      }
+    }
+  })
+
+  archivedPosts->Js.Array2.sortInPlaceWith((a, b) => {
+    String.compare(Node.Path.basename(b.path), Node.Path.basename(a.path))
+  })
+}
+
 module RssFeed = {
   // Module inspired by
   // https://gist.github.com/fredrikbergqvist/36704828353ebf5379a5c08c7583fe2d

src/common/BlogApi.resi

@@ -5,6 +5,8 @@ type post = {
 }
 
 let getAllPosts: unit => array<post>
+let getLivePosts: unit => array<post>
+let getArchivedPosts: unit => array<post>
 let blogPathToSlug: string => string
 
 module RssFeed: {