From 014e21f3efbdf822490895c5209f95e5368fb4fc Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 6 Jan 2025 10:32:56 +0000
Subject: [PATCH] sort blogs by date

---
 .../app/(pages)/onboarding/[slug]/page.tsx    |  5 +-
 .../src/components/blogs/BlogArticleCards.tsx | 48 +++++++++++--------
 explorer-nextjs/src/components/blogs/types.ts |  2 +-
 explorer-nextjs/src/data/blog-template-1.json |  2 +-
 explorer-nextjs/src/data/blog-template-2.json |  2 +-
 5 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
index 82b5a252af..c5d19791c4 100644
--- a/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
+++ b/explorer-nextjs/src/app/(pages)/onboarding/[slug]/page.tsx
@@ -7,6 +7,7 @@ import { Link } from "@/components/muiLink";
 import { Wrapper } from "@/components/wrapper";
 import { Box, Stack, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid2";
+import { format } from "date-fns";
 import Image from "next/image";
 
 export default async function BlogPage({
@@ -70,8 +71,8 @@ export default async function BlogPage({
                         ),
                       )}
                     </Box>
-                    <time dateTime={blogArticle?.attributes?.date}>
-                      {blogArticle?.attributes?.date}
+                    <time dateTime={blogArticle?.attributes?.date.toString()}>
+                      {format(blogArticle?.attributes?.date, "MMMM dd, yyyy")}
                     </time>
                   </Typography>
                   <Typography variant="subtitle3">
diff --git a/explorer-nextjs/src/components/blogs/BlogArticleCards.tsx b/explorer-nextjs/src/components/blogs/BlogArticleCards.tsx
index d73326766a..15e76ef84b 100644
--- a/explorer-nextjs/src/components/blogs/BlogArticleCards.tsx
+++ b/explorer-nextjs/src/components/blogs/BlogArticleCards.tsx
@@ -27,26 +27,34 @@ const BlogArticlesCards = async ({ limit }: { limit?: number }) => {
     ? blogArticles.slice(0, limit)
     : blogArticles;
 
-  return limitedBlogArticles.map((blogArticle) => {
-    return (
-      <Grid
-        size={{
-          sm: 12,
-          md: 6,
-        }}
-        key={blogArticle.title}
-      >
-        <ExplorerHeroCard
-          label={blogArticle.label}
-          title={blogArticle.title}
-          description={blogArticle.description}
-          icon={blogArticle.icon}
-          link={blogArticle.link || ""}
-          sx={{ height: "100%" }}
-        />
-      </Grid>
-    );
-  });
+  return limitedBlogArticles
+    .sort((a, b) => {
+      // sort by date
+      return (
+        new Date(a.attributes.date).getTime() -
+        new Date(b.attributes.date).getTime()
+      );
+    })
+    .map((blogArticle) => {
+      return (
+        <Grid
+          size={{
+            sm: 12,
+            md: 6,
+          }}
+          key={blogArticle.title}
+        >
+          <ExplorerHeroCard
+            label={blogArticle.label}
+            title={blogArticle.title}
+            description={blogArticle.description}
+            icon={blogArticle.icon}
+            link={blogArticle.link || ""}
+            sx={{ height: "100%" }}
+          />
+        </Grid>
+      );
+    });
 };
 
 export default BlogArticlesCards;
diff --git a/explorer-nextjs/src/components/blogs/types.ts b/explorer-nextjs/src/components/blogs/types.ts
index bf22dd9be1..4d141e7f0e 100644
--- a/explorer-nextjs/src/components/blogs/types.ts
+++ b/explorer-nextjs/src/components/blogs/types.ts
@@ -8,7 +8,7 @@ type BlogArticle = {
   icon: string;
   attributes: {
     blogAuthors: string[];
-    date: string;
+    date: Date;
     readingTime: number;
   };
   overview: {
diff --git a/explorer-nextjs/src/data/blog-template-1.json b/explorer-nextjs/src/data/blog-template-1.json
index 167cf685ae..018d340119 100644
--- a/explorer-nextjs/src/data/blog-template-1.json
+++ b/explorer-nextjs/src/data/blog-template-1.json
@@ -4,7 +4,7 @@
   "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.",
   "attributes": {
     "blogAuthors": ["Nym"],
-    "date": "August 5, 2021",
+    "date": "Mon Jan 04 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
     "readingTime": 5
   },
   "icon": "/icons/gateway.svg",
diff --git a/explorer-nextjs/src/data/blog-template-2.json b/explorer-nextjs/src/data/blog-template-2.json
index a6085f00e0..060a0ebe6a 100644
--- a/explorer-nextjs/src/data/blog-template-2.json
+++ b/explorer-nextjs/src/data/blog-template-2.json
@@ -4,7 +4,7 @@
   "description": "VPNs can be powerful tools in protecting us from hackers, but not all cyber attacks. dVPNs are even more effective.",
   "attributes": {
     "blogAuthors": ["Nym"],
-    "date": "August 5, 2021",
+    "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)",
     "readingTime": 5
   },
   "icon": "/icons/gateway.svg",