From 6778ed487d15c28a696993d0059d8e3c9e632126 Mon Sep 17 00:00:00 2001
From: GeckoEidechse <40122905+GeckoEidechse@users.noreply.github.com>
Date: Sun, 9 Feb 2025 03:15:45 +0100
Subject: [PATCH] feat: Cluster trailers by year (#130)

Cluster the different trailers by year based on the date manually added to each entry
---
 src/components/Community.astro | 41 +++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/Community.astro b/src/components/Community.astro
index 1bcdd28..58bc6ac 100644
--- a/src/components/Community.astro
+++ b/src/components/Community.astro
@@ -5,19 +5,34 @@ import { community_videos } from "../data/community-videos.ts";
 
 <div class="community-videos">
     {
-        community_videos.map((item) => (
-            <div class="video-item">
-                {/* <span class="comment">{item.comment}</span> */}
-                {/* <span class="creator">{item.creator}</span> */}
-                <iframe
-                    class="community-video-youtube-iframe"
-                    src={`https://www.youtube-nocookie.com/embed/${item.youtube_id}`}
-                    title="YouTube video player"
-                    frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin"
-                    allowfullscreen
-                />
+        Object.entries(
+            community_videos.reduce(
+                (acc: { [key: number]: typeof community_videos }, item) => {
+                    const year = new Date(item.date).getFullYear();
+                    if (!acc[year]) acc[year] = [];
+                    acc[year].push(item);
+                    return acc;
+                },
+                {},
+            ),
+        ).map(([year, videos]) => (
+            <div class="year-group">
+                <h2>{year}</h2>
+                {videos.map((item) => (
+                    <div class="video-item">
+                        {/* <span class="comment">{item.comment}</span> */}
+                        {/* <span class="creator">{item.creator}</span> */}
+                        <iframe
+                            class="community-video-youtube-iframe"
+                            src={`https://www.youtube-nocookie.com/embed/${item.youtube_id}`}
+                            title="YouTube video player"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                            referrerpolicy="strict-origin-when-cross-origin"
+                            allowfullscreen
+                        />
+                    </div>
+                ))}
             </div>
         ))
     }