sort blogs by date

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">

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;

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: {

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",

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",