Merge pull request #393 from HoomanDgtl/main

pr 391: review, fix and merge

src/components/CTA.astro

@@ -41,7 +41,7 @@ if (pathname.startsWith("/ecosystem/providers")) {
   mt-10 flex flex-col items-center justify-around bg-white border-y  px-[30px] py-[80px] text-center dark:bg-background2 md:mt-16 lg:py-[160px]`}
 >
   <p
-    class="font-instrument max-w-[1000px] text-3xl text-foreground md:text-5xl md:leading-snug xl:text-6xl 2xl:text-[80px]"
+    class="max-w-[1000px] font-instrument text-3xl text-foreground md:text-5xl md:leading-snug xl:text-6xl 2xl:text-[80px]"
   >
     {title}
   </p>

src/components/community-pages/nav-config.ts

@@ -6,7 +6,7 @@ export const nav: any = [
   },
   {
     label: "Events",
-    link: "/community/events/upcoming",
+    link: "/community/events/",
     enabled: true,
   },
 

src/components/footer/footer.astro

@@ -118,7 +118,7 @@ const links = [
 
       {
         title: "Events",
-        link: "/community/events/upcoming",
+        link: "/community/events",
       },
     ],
   },

src/components/header/popovers/links.tsx

@@ -13,7 +13,7 @@ export const communityItems = [
     icon: CalendarHeart,
     title: "Events",
 
-    link: "/community/events/upcoming/",
+    link: "/community/events/",
   },
   {
     icon: BadgeCheck,

src/content/Community_Page/events/archived.mdx

@@ -0,0 +1,9 @@
+---
+title: Akash Events (Archive)
+description: Here is the list of archived events
+
+pubDate: "2024-10-14"
+disableTableOfContents: true
+---
+
+

src/content/Community_Page/events/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Akash Events
-description: Akash is coming to town! Check out all the upcoming events where you can connect with members of the Akash community IRL.
+description: Explore the list of upcoming events
 
 pubDate: "2020-01-19"
 disableTableOfContents: true

src/pages/community/events/archived.astro

@@ -0,0 +1,79 @@
+---
+import Layout from "@/layouts/layout.astro";
+import { getCollection, getEntry } from "astro:content";
+import ButtonLink from "../../../components/ui/button-link.astro";
+
+import EventCard from "@/components/community-pages/event-card.astro";
+import TopMargin from "@/components/ui/top-margin.astro";
+
+const cards = await getCollection("Community_Akash_Events_Page");
+const { data } = await getEntry("Community_Page", "events/archived");
+
+const allCards = cards.map((card) => card.data);
+
+const eventDurationInMilliSeconds = 864000000;
+const archivePeriodInMilliSeconds = 31449600000;
+const currentOffsetDateTime = new Date(
+  new Date()?.getTime() - eventDurationInMilliSeconds,
+).getTime();
+const cutoffOffsetDateTime = new Date(
+  new Date()?.getTime() - archivePeriodInMilliSeconds,
+).getTime();
+
+const archivedCards = allCards.filter((curr: any) => {
+  if (curr.tbd) {
+    return false;
+  }
+  const eventDate = new Date(curr.eventDate).getTime();
+
+  if (eventDate < cutoffOffsetDateTime) {
+    return false;
+  }
+
+  return eventDate < currentOffsetDateTime;
+});
+
+const sortedCards = archivedCards.sort((a, b) => {
+  return new Date(a.eventDate).getTime() - new Date(b.eventDate).getTime();
+});
+---
+
+<Layout
+  title={data?.title}
+  image="/meta-images/community.png"
+  image="/meta-images/community.png"
+  description={data?.description}
+>
+  <TopMargin>
+    <div class="overflow-hidden">
+      <div>
+        <div class="mx-auto mt-10 text-center md:mt-0">
+          <h1 id="overview" class="text-3xl md:text-4xl lg:text-5xl">
+            {data?.title}
+          </h1>
+          <p class="mt-3 text-base leading-[24px] text-para">
+            {data?.description}
+          </p>
+        </div>
+      </div>
+
+      <div class="overflow-hidden">
+        {
+          (
+            <div class="mt-10 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 2xl:grid-cols-4">
+              {sortedCards.map((card: any) => (
+                <EventCard card={card} />
+              ))}
+            </div>
+          )
+        }
+        <div class="mt-10 flex justify-center">
+          <ButtonLink variant="secondary" size="xs" link={"../events/"}>
+            See current and upcoming events
+          </ButtonLink>
+        </div>
+      </div>
+    </div>
+    <div class="border-b pb-10"></div>
+  </TopMargin>
+</Layout>

src/pages/community/events/index.astro

@@ -1,59 +1,38 @@
 ---
-import Tag from "@/components/ui/tag2.astro";
 import Layout from "@/layouts/layout.astro";
 import { getCollection, getEntry } from "astro:content";
+import ButtonLink from "../../../components/ui/button-link.astro";
 
 import EventCard from "@/components/community-pages/event-card.astro";
 import TopMargin from "@/components/ui/top-margin.astro";
 
 const cards = await getCollection("Community_Akash_Events_Page");
 const { data } = await getEntry("Community_Page", "events");
-
 const allCards = cards.map((card) => card.data);
+const eventDurationInMilliSeconds = 864000000;
+const currentOffsetDateTime = new Date(
+  new Date().getTime() - eventDurationInMilliSeconds,
+).getTime();
 
-const astroUrl = Astro.url;
-
-const monthwise = allCards.reduce((acc: any, curr: any) => {
+const relevantCards = allCards.filter((curr: any) => {
   if (curr.tbd) {
-    if (!acc["TBD"]) {
-      acc["TBD"] = [];
-    }
-    acc["TBD"].push(curr);
-    return acc;
+    return true;
   }
 
-  const month = new Date(curr.eventDate).toLocaleString("default", {
-    month: "long",
-  });
-  if (!acc[month]) {
-    acc[month] = [];
-  }
-  acc[month].push(curr);
+  const eventDate = new Date(curr.eventDate).getTime();
 
-  return acc;
-}, {});
-
-const monthwiseArray = Object.keys(monthwise).map((month) => {
-  return {
-    month,
-    events: monthwise?.[month]?.sort((a: any, b: any) => {
-      return new Date(a.eventDate).getTime() - new Date(b.eventDate).getTime();
-    }),
-  };
+  return eventDate > currentOffsetDateTime;
 });
 
-const sortedMonthwiseArray = monthwiseArray.sort((a, b) => {
-  if (a.month === "TBD") {
+const sortedCards = relevantCards.sort((a, b) => {
+  if (a.tbd) {
     return 1;
   }
-  if (b.month === "TBD") {
+  if (b.tbd) {
     return -1;
   }
 
-  return (
-    new Date(a.events[0].eventDate).getTime() -
-    new Date(b.events[0].eventDate).getTime()
-  );
+  return new Date(a.eventDate).getTime() - new Date(b.eventDate).getTime();
 });
 ---
 
@@ -66,45 +45,33 @@ const sortedMonthwiseArray = monthwiseArray.sort((a, b) => {
   <TopMargin>
     <div>
       <div>
-        <div class="mt-10 md:mt-0">
+        <div class="mx-auto mt-10 text-center md:mt-0">
           <h1 id="overview" class="text-3xl md:text-4xl lg:text-5xl">
             {data?.title}
           </h1>
           <p class="mt-3 text-base leading-[24px] text-para">
             {data?.description}
           </p>
-
-          <div class="my-8 border-b"></div>
-        </div>
-
-        <div class="flex items-center gap-x-4">
-          <Tag
-            active={astroUrl.pathname === "/community/events/"}
-            href={`/community/events/`}
-          >
-            All
-          </Tag>
-
-          <Tag href={`/community/events/upcoming`}>Upcoming</Tag>
         </div>
       </div>
 
       <div>
         {
-          sortedMonthwiseArray?.map((item: any) => (
-            <div class="">
-              <h2 class="mt-10 text-lg font-semibold  md:text-2lg ">
-                {item.month}
-              </h2>
-              <div class=" mt-8 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 2xl:grid-cols-4">
-                {item.events.map((card: any) => (
-                  <EventCard card={card} />
-                ))}
-              </div>
+          (
+            <div class="mt-10 grid grid-cols-1 gap-y-8 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 2xl:grid-cols-4">
+              {sortedCards.map((card: any) => (
+                <EventCard card={card} />
+              ))}
             </div>
-          ))
+          )
         }
+        <div class="mt-10 flex justify-center">
+          <ButtonLink variant="secondary" size="xs" link={"archived"}>
+            See past events in the archive
+          </ButtonLink>
+        </div>
       </div>
     </div>
+    <div class="border-b pb-10"></div>
   </TopMargin>
 </Layout>