Show the latest videos and articles first on the learn page

apps/website/src/app/learn/page.tsx

@@ -29,6 +29,7 @@ import videos from "../../data/videos.json"
 import VideoCard from "../../components/VideoCard"
 import articles from "../../data/articles.json"
 import ArticleCard from "../../components/ArticleCard"
+import { sortByDate } from "@/utils/sortByDate"
 
 export default function Learn() {
     const infoCardTexts: InfoBlock[][] = [
@@ -364,7 +365,7 @@ await verifyProof(verificationKey, fullProof)`,
                     Videos
                 </Text>
                 <Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto">
-                    {videos.map((video) => (
+                    {sortByDate(videos).map((video) => (
                         <VStack key={video.url}>
                             <Box px="3">
                                 <VideoCard title={video.title} embeddedVideoUrl={video.embeddedUrl} />
@@ -383,7 +384,7 @@ await verifyProof(verificationKey, fullProof)`,
                     Articles
                 </Text>
                 <Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto" mb="66px">
-                    {articles.map((article) => (
+                    {sortByDate(articles).map((article) => (
                         <VStack key={article.url}>
                             <ArticleCard title={article.title} minRead={article.minRead} url={article.url} />
                         </VStack>

apps/website/src/components/Carousel.tsx

@@ -12,6 +12,7 @@ import { getDataLength } from "../utils/getDataLength"
 import ArticleCard from "./ArticleCard"
 import ProjectCard from "./ProjectCard"
 import VideoCard from "./VideoCard"
+import { sortByDate } from "@/utils/sortByDate"
 
 export type CarouselProps = {
     title: string
@@ -96,7 +97,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                         ))}
 
                     {type === "articles" &&
-                        articles.map((article) => (
+                        sortByDate(articles).map((article) => (
                             <Box
                                 visibility={!size ? "hidden" : "visible"}
                                 px="3"
@@ -108,7 +109,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                         ))}
 
                     {type === "videos" &&
-                        videos.map((video) => (
+                        sortByDate(videos).map((video) => (
                             <Box
                                 visibility={!size ? "hidden" : "visible"}
                                 px="3"

apps/website/src/data/articles.json

@@ -2,35 +2,35 @@
     {
         "title": "To Mixers and Beyond: presenting Semaphore, a privacy gadget built on Ethereum",
         "minRead": 8,
-        "date": "Sep 2, 2019",
+        "date": "2019-09-02",
         "authors": ["Koh Wei Jie"],
         "url": "https://medium.com/coinmonks/to-mixers-and-beyond-presenting-semaphore-a-privacy-gadget-built-on-ethereum-4c8b00857c9b"
     },
     {
         "title": "Community Proposal: Semaphore: Zero-Knowledge Signaling on Ethereum (Whitepaper v1)",
         "minRead": 60,
-        "date": "February 2, 2020",
+        "date": "2020-02-02",
         "authors": ["Barry Whitehat", "Kobi Gurkan", "Koh Wei Jie"],
         "url": "https://semaphore.pse.dev/whitepaper-v1.pdf"
     },
     {
         "title": "Release announcement: Semaphore, a zero-knowledge gadget for Ethereum",
         "minRead": 4,
-        "date": "Mar 3, 2020",
+        "date": "2020-03-03",
         "authors": ["Koh Wei Jie"],
         "url": "https://weijiek.medium.com/release-announcement-semaphore-a-zero-knowledge-gadget-for-ethereum-5b671cd360d4"
     },
     {
         "title": "Semaphore v3 Announcement",
         "minRead": 4,
-        "date": "Feb 8, 2023",
+        "date": "2023-02-08",
         "authors": ["PSE"],
         "url": "https://mirror.xyz/privacy-scaling-explorations.eth/Yi4muh-vzDZmIqJIcM9Mawu2e7jw8MRnwxvhFcyfns8"
     },
     {
         "title": "Brief Introduction of Semaphore, a Zero-knowledge Group Membership Protocol",
         "minRead": 7,
-        "date": "Oct 30th 2023",
+        "date": "2023-10-30",
         "authors": ["Laszlo Fazekas"],
         "url": "https://hackernoon.com/brief-introduction-of-semaphore-a-zero-knowledge-group-membership-protocol"
     }

apps/website/src/data/videos.json

@@ -2,95 +2,95 @@
     {
         "title": "Snarks for mixing, signaling and scaling",
         "eventName": "Devcon4",
-        "date": "Dec 10, 2018",
+        "date": "2018-12-10",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/lv6iK9qezBY",
         "embeddedUrl": "https://www.youtube.com/embed/lv6iK9qezBY?si=3HDxcxjELRCjrLJo"
     },
     {
         "title": "Succinct Proofs in Ethereum",
         "eventName": "2nd ZKProof Workshop",
-        "date": "Apr 30, 2019",
+        "date": "2019-04-30",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/TtsDNneTDDY",
         "embeddedUrl": "https://www.youtube.com/embed/TtsDNneTDDY?si=UmRq7i4B0gm7bvfx"
     },
     {
         "title": "Privacy in Ethereum",
         "eventName": "Taipei Ethereum Meetup",
-        "date": "May 21, 2019",
+        "date": "2019-05-21",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/maDHYyj30kg",
         "embeddedUrl": "https://www.youtube.com/embed/maDHYyj30kg?si=vK35YUdbnPHVL_R4"
     },
     {
         "title": "Semaphore Roadmap for Ethereum",
         "eventName": "Zcon1",
-        "date": "Jun 23, 2019",
+        "date": "2019-06-23",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/gOub903iWFs",
         "embeddedUrl": "https://www.youtube.com/embed/gOub903iWFs?si=GTF-LAZMrV6MEzAA"
     },
     {
         "title": "Privacy in Ethereum",
         "eventName": "Devcon5",
-        "date": "Dec 7, 2019",
+        "date": "2019-12-07",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/zBUo7G95wYE",
         "embeddedUrl": "https://www.youtube.com/embed/zBUo7G95wYE?si=lQO9O6l91OR7L8ws"
     },
     {
         "title": "Hands-on Applications of Zero-Knowledge Signaling",
         "eventName": "Devcon5",
-        "date": "Dec 26, 2019",
+        "date": "2019-12-26",
         "speakers": ["Wei Jie Koh"],
         "url": "https://youtu.be/7wd2aAN2jXI",
         "embeddedUrl": "https://www.youtube.com/embed/7wd2aAN2jXI?si=uRaP9QElksTtK6wX"
     },
     {
         "title": "A trustless Ethereum mixer using zero-knowledge signalling",
         "eventName": "Devcon5",
-        "date": "Dec 31, 2019",
+        "date": "2019-12-31",
         "speakers": ["Wei Jie Koh", "Barry WhiteHat"],
         "url": "https://youtu.be/GzVT16lFOHU",
         "embeddedUrl": "https://www.youtube.com/embed/GzVT16lFOHU?si=IfdzI4eD0c-IVFsm"
     },
     {
         "title": "Proposal: Semaphore - Zero-Knowledge Signaling on Ethereum",
         "eventName": "ZKProof Home Edition",
-        "date": "May 25, 2020",
+        "date": "2020-05-25",
         "speakers": ["Kobi Gurkan", "Koh Wei Jie"],
         "url": "https://youtu.be/y5uV9eRb3-w",
         "embeddedUrl": "https://www.youtube.com/embed/y5uV9eRb3-w?si=h5ehHSqWdA50ShbJ"
     },
     {
         "title": "Anonymous Signalling on Ethereum",
         "eventName": "Devcon Bogota",
-        "date": "Oct 18, 2022",
+        "date": "2022-10-18",
         "speakers": ["Cedoor"],
         "url": "https://youtu.be/dxAfL91Sbw4",
         "embeddedUrl": "https://www.youtube.com/embed/dxAfL91Sbw4?si=tYnTFgdTrvlnS_b0"
     },
     {
         "title": "Old & New Primitives",
         "eventName": "EDCON 2023",
-        "date": "Jun 25, 2023",
+        "date": "2023-06-25",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/cbyTXVm9NPI",
         "embeddedUrl": "https://www.youtube.com/embed/cbyTXVm9NPI?si=N1nU6ztt6Y6kmV05"
     },
     {
         "title": "Building zero-knowledge applications using Semaphore",
         "eventName": "ETHShangai",
-        "date": "Jul 19, 2023",
+        "date": "2023-07-19",
         "speakers": ["Vivian Plasencia"],
         "url": "https://youtu.be/_isrY1pXJpY",
         "embeddedUrl": "https://www.youtube.com/embed/_isrY1pXJpY?si=nJkq_gaBUwtHaCyJ"
     },
     {
         "title": "Semaphore",
         "eventName": "zkMonth",
-        "date": "Oct 31, 2023",
+        "date": "2023-10-31",
         "speakers": ["Vivian Plasencia"],
         "url": "https://youtu.be/h4iVFKhAI8g",
         "embeddedUrl": "https://www.youtube.com/embed/h4iVFKhAI8g?si=3V2rJl7nTFYRdW7K"

apps/website/src/utils/sortByDate.ts

@@ -0,0 +1,29 @@
+export type SortType = "asc" | "desc"
+
+function propComparator(propName: string, sortType: SortType) {
+    return (a: any, b: any) => {
+        const elem1 = new Date(a[propName]).valueOf()
+        const elem2 = new Date(b[propName]).valueOf()
+
+        if (elem1 === elem2) {
+            return 0
+        }
+
+        if (sortType === "asc") {
+            return elem1 < elem2 ? -1 : 1
+        }
+
+        return elem1 > elem2 ? -1 : 1
+    }
+}
+
+/**
+ * Sort an array using a specific property and type descending or ascending.
+ * @param elems An array of objects with the property propName.
+ * @param propName A string which represents the property that will be used to sort.
+ * @param sortType The type that will be used to sort, it can be ascending or descending.
+ * @returns The initial array sorted.
+ */
+export function sortByDate(elems: any[], propName: string = "date", sortType: SortType = "desc") {
+    return elems.sort(propComparator(propName, sortType))
+}