Sort blog posts more cleanly (#358)

chenglou · web-flow · commit f6678af52692 · 2021-05-11T22:07:34.000-07:00
Following #355, we can now sort blog posts just using their path, since the date string comes before and in the semantically correct comparison order by nature.
diff --git a/src/Blog.mjs b/src/Blog.mjs
@@ -9,6 +9,7 @@ import * as Curry from "rescript/lib/es6/curry.js";
 import * as React from "react";
 import * as Button from "./components/Button.mjs";
 import * as Footer from "./components/Footer.mjs";
+import * as $$String from "rescript/lib/es6/string.js";
 import * as BlogApi from "./common/BlogApi.mjs";
 import * as DateStr from "./common/DateStr.mjs";
 import * as Markdown from "./components/Markdown.mjs";
@@ -169,19 +170,7 @@ function Blog$FeatureCard(Props) {
                     })));
 }
 
-function orderByDate(posts) {
-  return posts.slice().sort(function (a, b) {
-              var aV = DateStr.toDate(a.frontmatter.date).valueOf();
-              var bV = DateStr.toDate(b.frontmatter.date).valueOf();
-              if (aV === bV) {
-                return 0;
-              } else if (aV > bV) {
-                return -1;
-              } else {
-                return 1;
-              }
-            });
-}
+var Post = {};
 
 var Malformed = {};
 
@@ -315,7 +304,9 @@ function $$default(props) {
 }
 
 function getStaticProps(_ctx) {
-  var match = Belt_Array.reduce(BlogApi.getAllPosts(undefined), [
+  var match = Belt_Array.reduce(BlogApi.getAllPosts(undefined).sort(function (a, b) {
+            return $$String.compare(b.path, a.path);
+          }), [
         [],
         [],
         []
@@ -356,8 +347,8 @@ function getStaticProps(_ctx) {
                   archived
                 ];
         }));
-  var props_posts = orderByDate(match[0]);
-  var props_archived = orderByDate(match[2]);
+  var props_posts = match[0];
+  var props_archived = match[2];
   var props_malformed = match[1];
   var props = {
     posts: props_posts,
@@ -369,8 +360,6 @@ function getStaticProps(_ctx) {
             });
 }
 
-var Post = {};
-
 export {
   Post ,
   Malformed ,
diff --git a/src/Blog.res b/src/Blog.res
@@ -212,21 +212,6 @@ module Post = {
     id: string,
     frontmatter: BlogFrontmatter.t,
   }
-
-  let orderByDate = (posts: array<t>): array<t> =>
-    posts
-    ->Js.Array.copy
-    ->Js.Array2.sortInPlaceWith((a, b) => {
-      let aV = a.frontmatter.date->DateStr.toDate->Js.Date.valueOf
-      let bV = b.frontmatter.date->DateStr.toDate->Js.Date.valueOf
-      if aV === bV {
-        0
-      } else if aV > bV {
-        -1
-      } else {
-        1
-      }
-    })
 }
 
 module Malformed = {
@@ -367,34 +352,36 @@ let default = (props: props): React.element => {
 }
 
 let getStaticProps: Next.GetStaticProps.t<props, params> = _ctx => {
-  let (posts, malformed, archived) = BlogApi.getAllPosts()->Belt.Array.reduce(([], [], []), (
-    acc,
-    postData,
-  ) => {
-    let (posts, malformed, archived) = acc
-    let id = BlogApi.blogPathToSlug(postData.path)
-
-    let decoded = BlogFrontmatter.decode(postData.frontmatter)
-
-    switch decoded {
-    | Error(message) =>
-      let m = {Malformed.id: id, message: message}
-      let malformed = Belt.Array.concat(malformed, [m])
-      (posts, malformed, archived)
-    | Ok(frontmatter) =>
-      if postData.archived {
-        Js.Array2.push(archived, {Post.id: id, frontmatter: frontmatter})->ignore
-      } else {
-        Js.Array2.push(posts, {Post.id: id, frontmatter: frontmatter})->ignore
+  let (posts, malformed, archived) =
+    BlogApi.getAllPosts()
+    ->Js.Array2.sortInPlaceWith((a, b) => {
+      String.compare(b.path, a.path)
+    })
+    ->Belt.Array.reduce(([], [], []), (acc, postData) => {
+      let (posts, malformed, archived) = acc
+      let id = BlogApi.blogPathToSlug(postData.path)
+
+      let decoded = BlogFrontmatter.decode(postData.frontmatter)
+
+      switch decoded {
+      | Error(message) =>
+        let m = {Malformed.id: id, message: message}
+        let malformed = Belt.Array.concat(malformed, [m])
+        (posts, malformed, archived)
+      | Ok(frontmatter) =>
+        if postData.archived {
+          Js.Array2.push(archived, {Post.id: id, frontmatter: frontmatter})->ignore
+        } else {
+          Js.Array2.push(posts, {Post.id: id, frontmatter: frontmatter})->ignore
+        }
+        (posts, malformed, archived)
       }
-      (posts, malformed, archived)
-    }
-  })
+    })
 
   let props = {
-    posts: Post.orderByDate(posts),
+    posts: posts,
     malformed: malformed,
-    archived: Post.orderByDate(archived),
+    archived: archived,
   }
 
   Js.Promise.resolve({"props": props})
diff --git a/src/common/BlogApi.mjs b/src/common/BlogApi.mjs
@@ -2,6 +2,7 @@
 
 import * as Fs from "fs";
 import * as Path from "path";
+import * as $$String from "rescript/lib/es6/string.js";
 import * as DateStr from "./DateStr.mjs";
 import * as Process from "process";
 import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
@@ -51,34 +52,26 @@ function dateToUTCString(date) {
 function getLatest(maxOpt, baseUrlOpt, param) {
   var max = maxOpt !== undefined ? maxOpt : 10;
   var baseUrl = baseUrlOpt !== undefined ? baseUrlOpt : "https://rescript-lang.org";
-  return Belt_Array.reduce(getAllPosts(undefined), [], (function (acc, next) {
-                    var fm = BlogFrontmatter.decode(next.frontmatter);
-                    if (fm.TAG !== /* Ok */0) {
-                      return acc;
-                    }
-                    var fm$1 = fm._0;
-                    var description = Belt_Option.getWithDefault(Caml_option.null_to_opt(fm$1.description), "");
-                    var item_title = fm$1.title;
-                    var item_href = baseUrl + ("/blog/" + blogPathToSlug(next.path));
-                    var item_pubDate = DateStr.toDate(fm$1.date);
-                    var item = {
-                      title: item_title,
-                      href: item_href,
-                      description: description,
-                      pubDate: item_pubDate
-                    };
-                    return Belt_Array.concat(acc, [item]);
-                  })).sort(function (item1, item2) {
-                var v1 = item1.pubDate.valueOf();
-                var v2 = item2.pubDate.valueOf();
-                if (v1 === v2) {
-                  return 0;
-                } else if (v1 > v2) {
-                  return -1;
-                } else {
-                  return 1;
-                }
-              }).slice(0, max);
+  return Belt_Array.reduce(getAllPosts(undefined).sort(function (a, b) {
+                    return $$String.compare(Path.basename(b.path), Path.basename(a.path));
+                  }), [], (function (acc, next) {
+                  var fm = BlogFrontmatter.decode(next.frontmatter);
+                  if (fm.TAG !== /* Ok */0) {
+                    return acc;
+                  }
+                  var fm$1 = fm._0;
+                  var description = Belt_Option.getWithDefault(Caml_option.null_to_opt(fm$1.description), "");
+                  var item_title = fm$1.title;
+                  var item_href = baseUrl + "/blog/" + blogPathToSlug(next.path);
+                  var item_pubDate = DateStr.toDate(fm$1.date);
+                  var item = {
+                    title: item_title,
+                    href: item_href,
+                    description: description,
+                    pubDate: item_pubDate
+                  };
+                  return Belt_Array.concat(acc, [item]);
+                })).slice(0, max);
 }
 
 function toXmlString(siteTitleOpt, siteDescriptionOpt, items) {
diff --git a/src/common/BlogApi.res b/src/common/BlogApi.res
@@ -110,13 +110,16 @@ module RssFeed = {
   let getLatest = (~max=10, ~baseUrl="https://rescript-lang.org", ()): array<item> => {
     let items =
       getAllPosts()
+      ->Js.Array2.sortInPlaceWith((a, b) => {
+        String.compare(Node.Path.basename(b.path), Node.Path.basename(a.path))
+      })
       ->Belt.Array.reduce([], (acc, next) =>
         switch BlogFrontmatter.decode(next.frontmatter) {
         | Ok(fm) =>
           let description = Js.Null.toOption(fm.description)->Belt.Option.getWithDefault("")
           let item = {
             title: fm.title,
-            href: baseUrl ++ ("/blog/" ++ blogPathToSlug(next.path)),
+            href: baseUrl ++ "/blog/" ++ blogPathToSlug(next.path),
             description: description,
             pubDate: DateStr.toDate(fm.date),
           }
@@ -125,17 +128,6 @@ module RssFeed = {
         | Error(_) => acc
         }
       )
-      ->Js.Array2.sortInPlaceWith((item1, item2) => {
-        let v1 = item1.pubDate->Js.Date.valueOf
-        let v2 = item2.pubDate->Js.Date.valueOf
-        if v1 === v2 {
-          0
-        } else if v1 > v2 {
-          -1
-        } else {
-          1
-        }
-      })
       ->Js.Array2.slice(~start=0, ~end_=max)
     items
   }
