Merge pull request #5 from piber-dev/main

events

src/components/CTA.astro

@@ -38,7 +38,7 @@ if (pathname.startsWith("/ecosystem/providers")) {
       ? "hidden"
       : ""
   }
-  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]`}
+  mt-10 flex flex-col items-center justify-around bg-white border-t  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]"

src/components/community-pages/event-card.astro

@@ -46,7 +46,7 @@ const { card } = Astro.props;
     </h4>
 
     <p
-      class="mt-6 line-clamp-3 text-xs font-medium leading-[24px] text-linkText md:mt-6 md:text-sm"
+      class="mt-6 line-clamp-3 text-xs font-normal leading-[24px] text-linkText md:mt-6 md:text-sm"
     >
       {card.description}{" "}
     </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/layouts/layout.astro

@@ -55,6 +55,7 @@ const pathname = Astro.url.pathname;
     )}
   >
     <CTA />
-    <Footer />
+    <div class="border-b"></div>
+    <Footer/>
   </div>
 </BaseLayout>

src/pages/community/events/archived.astro

@@ -0,0 +1,84 @@
+---
+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/archived");
+
+const allCards = cards.map((card) => card.data);
+
+const eventDurationInMilliSeconds = 864000000; // 10 days
+const archivePeriodInMilliSeconds = 31449600000; // 1 year
+const currentOffsetDateTime = new Date(new Date() - eventDurationInMilliSeconds).getTime(); // offset into the past as event duration can last up to a week
+const cutoffOffsetDateTime = new Date(new Date() - archivePeriodInMilliSeconds).getTime(); // cutoff time set into the past by the archive period variable for when events should not be shown in archive 
+
+const archivedCards = allCards.filter((curr: any) => {
+  // skip all tbd events for the archive as we never went to those or they are in the future
+  if (curr.tbd) {
+    return false;
+  }
+
+  const eventDate = new Date(curr.eventDate).getTime();
+
+  if (eventDate < cutoffOffsetDateTime) {
+    return false;
+  }
+    
+  return eventDate < currentOffsetDateTime;
+});
+
+const astroUrl = Astro.url;
+
+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 md:mt-0 text-center">
+          <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-8 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 key={card.id} card={card} />
+              ))}
+            </div>
+        }
+        <div class="flex justify-center mt-10">
+          <ButtonLink
+            variant="secondary"
+            size="xs"
+            link={"../events/"}
+          >
+            See current and upcoming events
+          </ButtonLink>
+        </div>
+      </div>
+    </div>
+  </TopMargin>
+</Layout>

src/pages/community/events/index.astro

@@ -2,6 +2,7 @@
 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";
@@ -11,48 +12,35 @@ const { data } = await getEntry("Community_Page", "events");
 
 const allCards = cards.map((card) => card.data);
 
-const astroUrl = Astro.url;
+const eventDurationInMilliSeconds = 864000000; // 10 days
+const archivePeriodInMilliSeconds = 31449600000; // 1 year
+const currentOffsetDateTime = new Date(new Date() - eventDurationInMilliSeconds).getTime(); // offset into the past as event duration can last up to a week
+const cutoffOffsetDateTime = new Date(new Date() - archivePeriodInMilliSeconds).getTime(); // cutoff time set into the past by the archive period variable for when events should not be shown in archive 
 
-const monthwise = allCards.reduce((acc: any, curr: any) => {
+const relevantCards = allCards.filter((curr: any) => {
+  // return true for all tbd events under the assumption that tbd events are set in the future don't always have a set date yet
   if (curr.tbd) {
-    if (!acc["TBD"]) {
-      acc["TBD"] = [];
-    }
-    acc["TBD"].push(curr);
-    return acc;
-  }
-
-  const month = new Date(curr.eventDate).toLocaleString("default", {
-    month: "long",
-  });
-  if (!acc[month]) {
-    acc[month] = [];
+    return true;
   }
-  acc[month].push(curr);
-
-  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();
-    }),
-  };
+  const eventDate = new Date(curr.eventDate).getTime();
+    
+  return eventDate > currentOffsetDateTime;
 });
 
-const sortedMonthwiseArray = monthwiseArray.sort((a, b) => {
-  if (a.month === "TBD") {
+const astroUrl = Astro.url;
+
+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()
+    new Date(a.eventDate).getTime() -
+    new Date(b.eventDate).getTime()
   );
 });
 ---
@@ -64,47 +52,37 @@ const sortedMonthwiseArray = monthwiseArray.sort((a, b) => {
   description={data?.description}
 >
   <TopMargin>
-    <div>
+    <div class="overflow-hidden">
       <div>
-        <div class="mt-10 md:mt-0">
+        <div class="mx-auto mt-10 md:mt-0 text-center">
           <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>
+      <div class="overflow-hidden">
         {
-          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-8 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 key={card.id} card={card} />
+              ))}
             </div>
-          ))
         }
+        <div class="flex justify-center mt-10">
+          <ButtonLink
+            variant="secondary"
+            size="xs"
+            link={"archived"}
+          >
+            See past events in the archive
+          </ButtonLink>
+        </div>
       </div>
     </div>
   </TopMargin>
 </Layout>
+<div class="border-b border-[#d9d9d9] pb-[40px] pt-5"></div>