feat: Showcase community trailers on webpage (#129)

Showcase trailers made for Northstar on the main web page
R2Northstar · Feb 9, 2025 · d8b0bb5 · d8b0bb5
1 parent 9a2bb53
commit d8b0bb5
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 2 deletions.
diff --git a/src/components/Community.astro b/src/components/Community.astro
@@ -0,0 +1,48 @@
+---
+import { Image } from "astro:assets";
+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
+                />
+            </div>
+        ))
+    }
+</div>
+
+<style>
+    .community-videos {
+        display: flex;
+        justify-content: center;
+        width: fit-content;
+        max-width: calc(100% - 5rem);
+        margin: auto;
+        gap: 2rem;
+        flex-wrap: wrap;
+    }
+    .video-item {
+        font-size: 0.9em;
+        pointer-events: none;
+        text-decoration: none;
+    }
+
+    .community-video-youtube-iframe {
+        width: 300px;
+        height: 160px;
+        border: none;
+        border-radius: 1rem;
+    }
+</style>
diff --git a/src/data/community-videos.ts b/src/data/community-videos.ts
@@ -0,0 +1,51 @@
+export interface VideoItem {
+    comment: string;
+    youtube_id: string;
+    creator: string;
+    date: Date;
+}
+
+export const community_videos: VideoItem[] = [
+    {
+        comment: "Original Northstar Trailer",
+        youtube_id: "en06Y6CPMQg",
+        creator: "Smurfson",
+        date: new Date("2021-12-31"),
+    },
+    {
+        comment: "Return to the Frontier Gameplay Trailer",
+        youtube_id: "suhBGqzDbNA",
+        creator: "Smurfson",
+        date: new Date("2022-05-01"),
+    },
+    {
+        comment: "Back in the Game Gameplay Trailer",
+        youtube_id: "vyUxAwobY60",
+        creator: "Smurfson",
+        date: new Date("2022-10-28"),
+    },
+    {
+        comment: "Happy Holidays (Northstar 1.21) Trailer",
+        youtube_id: "jixxGZ-NVZo",
+        creator: "TrinityDusk",
+        date: new Date("2023-12-18"),
+    },
+    {
+        comment: "Parkour Mode Gameplay Trailer",
+        youtube_id: "1DSNwdV8ahA",
+        creator: "P3NG00Nlol",
+        date: new Date("2024-01-10"),
+    },
+    {
+        comment: "3rd Anniversary Gameplay Trailer",
+        youtube_id: "jMME2ngNfRg",
+        creator: "Smurfson",
+        date: new Date("2025-01-08"),
+    },
+    {
+        comment: "Parkour Mode Update (Gameplay Trailer)",
+        youtube_id: "BUahnN_UKRc",
+        creator: "P3NG00Nlol",
+        date: new Date("2025-01-08"),
+    },
+];
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,6 +6,7 @@ import Installers from "../components/Installers.astro";
 import { ContributorType } from "../data/contributors";
 import Layout from "../layouts/Layout.astro";
 import Roadmap from "../components/Roadmap.astro";
+import Community from "../components/Community.astro";
 ---
 
 <Layout title="Northstar">
@@ -83,7 +84,7 @@ import Roadmap from "../components/Roadmap.astro";
             </a>
         </div>
     </div>
-    
+
     <div class="pane" id="roadmap">
         <div class="section">Roadmap</div>
         <p style="text-align: center">
@@ -92,7 +93,18 @@ import Roadmap from "../components/Roadmap.astro";
         <Roadmap />
     </div>
 
-    <div class="pane dark" id="support">
+    <div class="pane dark" id="community-trailers">
+        <div class="section">Community Trailers</div>
+        <Community />
+        <p style="text-align: center">
+            Missing your trailer from this list? Feel free to <a
+                href="https://github.com/R2Northstar/NorthstarTF/"
+                >open a pull request</a
+            > to add it.
+        </p>
+    </div>
+
+    <div class="pane" id="support">
         <div class="section">Support</div>
         <p style="text-align: center" class="supporttext">
             If you're having issues with running or setting up the Northstar