FIx ordering for blog posts

fretchen · Jan 6, 2025 · e318065 · e318065
1 parent b576eef
commit e318065
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/components/BlogList.tsx b/components/BlogList.tsx
@@ -4,12 +4,14 @@ import blogs from "../blog/blogs.json";
 import { Link } from "./Link";
 
 const BlogList: React.FC = function () {
+  // invert the presented order of the blogs
+  const invertedBlogs = blogs.reverse();
   return (
     <div className="BlogList">
-      {blogs.map((blog, index) => (
-        <div key={index} style={{ marginBottom: "20px" }}>
+      {invertedBlogs.map((blog, index) => (
+        <div key={blogs.length - 1 - index} style={{ marginBottom: "20px" }}>
           {blog.publishing_date && <p style={{ marginBottom: "5px" }}>{blog.publishing_date}</p>}
-          <Link href={`/blog/${index}`}>
+          <Link href={`/blog/${blogs.length - 1 - index}`}>
             {" "}
             <h2 style={{ marginTop: "0" }}> {blog.title} </h2>
           </Link>

diff --git a/pages/blog/@id/+Page.tsx b/pages/blog/@id/+Page.tsx
@@ -21,11 +21,8 @@ const App: React.FC = function () {
     <div>
       <Post title={blog.title} content={blog.content} publishing_date={blog.publishing_date} />
       <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
-        {
-          // the labelling in the blogs has to be inverted as we sort the blogs in descending order
-        }
-        {prevBlog && <Link href={`/blog/${id - 1}`}>Next post: {prevBlog.title}</Link>}
-        {nextBlog && <Link href={`/blog/${id + 1}`}>Previous post: {nextBlog.title}</Link>}
+        {prevBlog && <Link href={`/blog/${id - 1}`}>Previous post: {prevBlog.title}</Link>}
+        {nextBlog && <Link href={`/blog/${id + 1}`}>Next post: {nextBlog.title}</Link>}
       </div>
     </div>
   );

diff --git a/utils/getBlogs.ts b/utils/getBlogs.ts
@@ -49,7 +49,7 @@ export const getBlogs = (blogDirectory: string = "./blog"): BlogPost[] => {
   // sort the blogs by publishing date with the most recent first
   blogs.sort((a, b) => {
     if (a.publishing_date && b.publishing_date) {
-      return new Date(b.publishing_date).getTime() - new Date(a.publishing_date).getTime();
+      return new Date(a.publishing_date).getTime() - new Date(b.publishing_date).getTime();
     } else {
       return 0;
     }