Add videos page (#310)

Co-authored-by: Yoann Fleury <yoann.fleury@yahoo.com>

Author: houssembaltii

package.json

@@ -22,7 +22,7 @@
     "@astrojs/sitemap": "3.4.2",
     "@astrojs/tailwind": "6.0.2",
     "@astrojs/vercel": "8.2.5",
-    "@bearstudio/astro-typed-routes": "0.1.1",
+    "@bearstudio/astro-typed-routes": "0.1.3",
     "@bearstudio/lunalink": "0.3.1",
     "@fontsource-variable/inter": "5.2.6",
     "@fontsource/tomorrow": "5.2.6",

pnpm-lock.yaml

@@ -0,0 +1,46 @@
+---
+import { lang } from "@/lib/lang";
+import { Image } from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import { IoLanguageSharp } from "react-icons/io5";
+
+interface Props {
+  talk: CollectionEntry<"talks">;
+}
+const { talk } = Astro.props;
+---
+
+<a
+  href={`https://www.youtube.com/embed/${talk.data.vod?.youtubeId}`}
+  class="group relative z-10 flex h-full flex-col overflow-hidden rounded-lg bg-white/5 backdrop-blur-md transition duration-500 hover:bg-white/10"
+  target="_blank"
+  rel="noreferrer"
+>
+  <div class="aspect-video">
+    {
+      talk.data.vod?.type === "youtube" && (
+        <Image
+          src={`https://img.youtube.com/vi/${talk.data.vod.youtubeId}/maxresdefault.jpg`}
+          alt={talk.data.title}
+          class="h-full w-full object-cover"
+          width={480}
+          height={320}
+        />
+      )
+    }
+  </div>
+  <div class="flex flex-1 flex-col justify-between p-4">
+    <h3
+      class="line-clamp-2 text-sm font-medium"
+      lang={lang(talk.data.contentLanguage)}
+    >
+      {talk.data.title}
+    </h3>
+    <div
+      class="mt-4 flex w-fit items-center gap-1.5 rounded-full border border-black/60 bg-black/40 px-2 py-0.5 text-2xs font-bold uppercase leading-none opacity-60 transition group-hover:opacity-100"
+    >
+      <IoLanguageSharp className="text-base" />
+      <span>Talk in {talk.data.language}</span>
+    </div>
+  </div>
+</a>

src/components/VideoCard/index.astro

@@ -9,6 +9,7 @@ import {
   MdPodcasts,
   MdBadge,
   MdOutlineChildCare,
+  MdOndemandVideo,
   MdMic,
   // MdBadge,
   // MdHandshake,
@@ -55,6 +56,13 @@ const MAIN_MENU: Array<{
     scope: "all",
     level: "primary",
   },
+  {
+    label: "Videos",
+    href: "/resources/videos",
+    icon: MdOndemandVideo,
+    scope: "all",
+    level: "secondary",
+  },
   {
     label: "Community members",
     href: "/people",

src/content/menus.ts

@@ -411,3 +411,7 @@ export function without<T extends CollectionEntry<"events">>(
 ) {
   return events.filter((event) => event.data.status !== status);
 }
+
+export function getTalksWithVOD() {
+  return getCollection("talks", (talk) => talk.data.vod?.youtubeId);
+}

src/lib/events.ts

@@ -0,0 +1,115 @@
+---
+import MainLayout from "@/layouts/MainLayout.astro";
+import MainPageTitle from "@/components/MainPageTitle/index.astro";
+import { SEO } from "astro-seo";
+import { getTalksWithVOD } from "@/lib/events";
+import VideoCard from "@/components/VideoCard/index.astro";
+import type { GetStaticPathsOptions } from "astro";
+import { isEmpty } from "remeda";
+import { cn } from "@/lib/utils-client";
+import { buttonVariants } from "@/components/ui/button";
+import { MdArrowBack, MdArrowForward } from "react-icons/md";
+import TiltedCard from "@/components/TiltedCard";
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+  const allTalks = await getTalksWithVOD();
+  return paginate(allTalks, { pageSize: 18 });
+}
+
+const { page } = Astro.props;
+---
+
+<MainLayout>
+  <SEO
+    slot="seo"
+    title="Videos"
+    description="Catch up on past Fork It! talks"
+    noindex={isEmpty(page.data)}
+  />
+  <div class="mx-auto w-full max-w-screen-sm px-4">
+    <MainPageTitle
+      title="Fork it! Vods"
+      subtitle="Watch the community in action"
+      blurImage
+    />
+  </div>
+  <div class="flex flex-1 flex-col">
+    <div class="mx-auto flex w-full max-w-screen-lg flex-col gap-8 px-4 pb-40">
+      {
+        page.currentPage !== 1 && (
+          <div class="flex items-center md:col-span-2">
+            <h3 class="text-balance text-sm uppercase tracking-widest opacity-60">
+              Page {page.currentPage}
+            </h3>
+            <div class="ml-auto flex gap-2">
+              {!!page.url.prev && (
+                <a
+                  href={page.url.prev}
+                  class={cn(
+                    buttonVariants({ size: "xs", variant: "secondary" }),
+                    "size-8 p-0",
+                  )}
+                >
+                  <MdArrowBack className="size-4" />
+                  <span class="sr-only">Newer videos</span>
+                </a>
+              )}
+              {!!page.url.next && (
+                <a
+                  href={page.url.next}
+                  class={cn(
+                    buttonVariants({ size: "xs", variant: "secondary" }),
+                    "size-8 p-0",
+                  )}
+                >
+                  <span class="sr-only">Older videos</span>
+                  <MdArrowForward className="size-4" />
+                </a>
+              )}
+            </div>
+          </div>
+        )
+      }
+
+      <section class="space-y-6">
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {
+            page.data.map((talk) => (
+              <TiltedCard client:visible>
+                <VideoCard talk={talk} />
+              </TiltedCard>
+            ))
+          }
+        </div>
+      </section>
+
+      <div class="flex items-center justify-between md:col-span-2">
+        {
+          !!page.url.prev && (
+            <a
+              href={page.url.prev}
+              class={cn(buttonVariants({ variant: "secondary" }), "gap-2")}
+            >
+              <MdArrowBack />
+              Newer <span class="max-xs:sr-only">videos</span>
+            </a>
+          )
+        }
+        {
+          !!page.url.next && (
+            <a
+              href={page.url.next}
+              class={cn(
+                buttonVariants({ variant: "secondary" }),
+                "ml-auto gap-2",
+              )}
+            >
+              Older <span class="max-xs:sr-only">videos</span>
+              <MdArrowForward />
+            </a>
+          )
+        }
+      </div>
+    </div>
+  </div>
+</MainLayout>

src/pages/resources/videos/[...page].astro

@@ -8,7 +8,7 @@ const ROUTES_CONFIG = {
   about: {},
   "code-of-conduct": {},
   conferences: {
-    "[...page]": {},
+    ":page": {},
   },
   events: {
     ":id": {
@@ -92,7 +92,7 @@ const ROUTES_CONFIG = {
   },
   "llms.txt": {},
   news: {
-    "[...page]": {},
+    ":page": {},
     article: {
       ":id": {
         assets: {
@@ -127,6 +127,11 @@ const ROUTES_CONFIG = {
     },
     "rss.xml": {},
   },
+  resources: {
+    videos: {
+      ":page": {},
+    },
+  },
 } as const;
 
 export const ROUTES = assignPaths(ROUTES_CONFIG);