feat: add support for multiple content types in index page and sorting functions

.gitea/workflows/debug.yml

@@ -0,0 +1,11 @@
+name: Debug Context
+on: workflow_dispatch
+jobs:
+  debug:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Print Gitea context
+        run: |
+          echo "server_url: ${{ gitea.server_url }}"
+          echo "api_url: ${{ gitea.api_url }}"
+          echo "repository: ${{ gitea.repository }}"

.gitignore

@@ -26,3 +26,4 @@ pnpm-debug.log*
 # pagefind
 
 public/pagefind
+SETUP.md

src/pages/index.astro

@@ -12,11 +12,25 @@ import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
 import { SITE } from "@/config";
 import { SOCIALS } from "@/constants";
 
-const posts = await getCollection("blog");
+const events = await getCollection("events");
+const workshops = await getCollection("workshops");
+const news = await getCollection("news");
+const technical = await getCollection("technical");
 
-const sortedPosts = getSortedPosts(posts);
+const sortedEvents = getSortedPosts(events);
-const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
+const sortedWorkshops = getSortedPosts(workshops);
-const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
+const sortedNews = getSortedPosts(news);
+const sortedTechnical = getSortedPosts(technical);
+
+const featuredEvents = sortedEvents.filter(({ data }) => data.featured);
+const featuredWorkshops = sortedWorkshops.filter(({ data }) => data.featured);
+const featuredNews = sortedNews.filter(({ data }) => data.featured);
+const featuredTechnical = sortedTechnical.filter(({ data }) => data.featured);
+
+const recentEvents = sortedEvents.slice(0, SITE.postPerIndex);
+const recentWorkshops = sortedWorkshops.slice(0, SITE.postPerIndex);
+const recentNews = sortedNews.slice(0, SITE.postPerIndex);
+const recentTechnical = sortedTechnical.slice(0, SITE.postPerIndex);
 ---
 
 <Layout>
@@ -24,7 +38,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
   <main id="main-content" data-layout="index" class="app-layout">
     <section id="hero" class:list={["pt-8 pb-6", "border-b border-border"]}>
       <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
-        Mingalaba
+        Welcome to HEC IA
       </h1>
       <a
         target="_blank"
@@ -42,19 +56,13 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
       </a>
 
       <p>
-        AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro
+        At HEC IA we make AI and technology more accessible to tomorrow's
-        blog theme. This theme follows best practices and provides accessibility
+        managers. Our goal, make people on the campus able to leverage AI to its
-        out of the box. Light and dark mode are supported by default. Moreover,
+        full potential.
-        additional color schemes can also be configured.
       </p>
       <p class="mt-2">
-        Read the blog posts or check
+        Explore our events, workshops, latest news, and technical deep dives to
-        <LinkButton
+        stay up-to-date with the latest in AI and in the tech world.
-          class="underline decoration-dashed underline-offset-4 hover:text-accent"
-          href="https://github.com/satnaing/astro-paper#readme"
-        >
-          README
-        </LinkButton> for more info.
       </p>
       {
         // only display if at least one social link is enabled
@@ -68,44 +76,111 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
     </section>
 
     {
-      featuredPosts.length > 0 && (
+      (featuredEvents.length > 0 || recentEvents.length > 0) && (
         <section
-          id="featured"
+          id="events"
-          class:list={[
+          class:list={["pt-12 pb-6", "border-b border-border"]}
-            "pt-12 pb-6",
-            { "border-b border-border": recentPosts.length > 0 },
-          ]}
         >
-          <h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
+          <h2 class="text-2xl font-semibold tracking-wide">Events</h2>
           <ul>
-            {featuredPosts.map(data => (
+            {featuredEvents.map(data => (
               <Card variant="h3" {...data} />
             ))}
+            {recentEvents
+              .slice(0, SITE.postPerIndex - featuredEvents.length)
+              .map(data => (
+                <Card variant="h3" {...data} />
+              ))}
           </ul>
+          <div class="my-4 text-center">
+            <LinkButton href="/events/1">
+              All Events
+              <IconArrowRight class="inline-block rtl:-rotate-180" />
+            </LinkButton>
+          </div>
         </section>
       )
     }
 
     {
-      recentPosts.length > 0 && (
+      (featuredWorkshops.length > 0 || recentWorkshops.length > 0) && (
-        <section id="recent-posts" class="pt-12 pb-6">
+        <section
-          <h2 class="text-2xl font-semibold tracking-wide">Recent Posts</h2>
+          id="workshops"
+          class:list={["pt-12 pb-6", "border-b border-border"]}
+        >
+          <h2 class="text-2xl font-semibold tracking-wide">Workshops</h2>
           <ul>
-            {recentPosts.map(
+            {featuredWorkshops.map(data => (
-              (data, index) =>
+              <Card variant="h3" {...data} />
-                index < SITE.postPerIndex && <Card variant="h3" {...data} />
+            ))}
-            )}
+            {recentWorkshops
+              .slice(0, SITE.postPerIndex - featuredWorkshops.length)
+              .map(data => (
+                <Card variant="h3" {...data} />
+              ))}
           </ul>
+          <div class="my-4 text-center">
+            <LinkButton href="/workshops/1">
+              All Workshops
+              <IconArrowRight class="inline-block rtl:-rotate-180" />
+            </LinkButton>
+          </div>
         </section>
       )
     }
 
-    <div class="my-8 text-center">
+    {
-      <LinkButton href="/posts/">
+      (featuredNews.length > 0 || recentNews.length > 0) && (
-        All Posts
+        <section
-        <IconArrowRight class="inline-block rtl:-rotate-180" />
+          id="news"
-      </LinkButton>
+          class:list={["pt-12 pb-6", "border-b border-border"]}
-    </div>
+        >
+          <h2 class="text-2xl font-semibold tracking-wide">Latest News</h2>
+          <ul>
+            {featuredNews.map(data => (
+              <Card variant="h3" {...data} />
+            ))}
+            {recentNews
+              .slice(0, SITE.postPerIndex - featuredNews.length)
+              .map(data => (
+                <Card variant="h3" {...data} />
+              ))}
+          </ul>
+          <div class="my-4 text-center">
+            <LinkButton href="/news/1">
+              All News
+              <IconArrowRight class="inline-block rtl:-rotate-180" />
+            </LinkButton>
+          </div>
+        </section>
+      )
+    }
+
+    {
+      (featuredTechnical.length > 0 || recentTechnical.length > 0) && (
+        <section id="technical" class="pt-12 pb-6">
+          <h2 class="text-2xl font-semibold tracking-wide">
+            Technical Deep Dives
+          </h2>
+          <ul>
+            {featuredTechnical.map(data => (
+              <Card variant="h3" {...data} />
+            ))}
+            {recentTechnical
+              .slice(0, SITE.postPerIndex - featuredTechnical.length)
+              .map(data => (
+                <Card variant="h3" {...data} />
+              ))}
+          </ul>
+          <div class="my-4 text-center">
+            <LinkButton href="/technical/1">
+              All Technical Articles
+              <IconArrowRight class="inline-block rtl:-rotate-180" />
+            </LinkButton>
+          </div>
+        </section>
+      )
+    }
   </main>
   <Footer />
 </Layout>

src/utils/getSortedPosts.ts

@@ -1,7 +1,11 @@
 import type { CollectionEntry } from "astro:content";
 import postFilter from "./postFilter";
 
-const getSortedPosts = (posts: CollectionEntry<"blog">[]) => {
+const getSortedPosts = <
+  T extends "blog" | "events" | "workshops" | "news" | "technical",
+>(
+  posts: CollectionEntry<T>[]
+) => {
   return posts
     .filter(postFilter)
     .sort(

src/utils/postFilter.ts

@@ -1,7 +1,11 @@
 import type { CollectionEntry } from "astro:content";
 import { SITE } from "@/config";
 
-const postFilter = ({ data }: CollectionEntry<"blog">) => {
+const postFilter = <
+  T extends "blog" | "events" | "workshops" | "news" | "technical",
+>({
+  data,
+}: CollectionEntry<T>) => {
   const isPublishTimePassed =
     Date.now() >
     new Date(data.pubDatetime).getTime() - SITE.scheduledPostMargin;