feat: fist version of the subpage

Author: JeanneGrenet

src/components/OrganizersList/index.astro

@@ -11,14 +11,25 @@ interface Props {
 }
 
 const { organizers, title = "Organized by" } = Astro.props;
+
+const { countryId } = Astro.params;
 ---
 
 {
   organizers.length > 0 && (
     <div class="flex flex-col gap-3 md:max-w-xs">
-      <h3 class="text-xs font-medium uppercase tracking-widest opacity-60">
-        {title}
-      </h3>
+      <a
+        href={lunalink(
+          ROUTES["events"].locations[":countryId"]["organizers"].__path,
+          {
+            countryId: countryId ?? "",
+          },
+        )}
+      >
+        <h3 class="text-xs font-medium uppercase tracking-widest opacity-60">
+          {title}
+        </h3>
+      </a>
       <div class="flex flex-wrap gap-2">
         {organizers.map((organizer) => (
           <a

src/components/PeopleWithDescription/index.astro

@@ -0,0 +1,82 @@
+---
+import { Image } from "astro:assets";
+import SpeakerPlaceholder from "@/assets/images/people-placeholder.jpeg";
+import type { CollectionEntry } from "astro:content";
+import { lunalink } from "@bearstudio/lunalink";
+import { ROUTES } from "@/routes.gen";
+import { SOCIALS_TYPE_MAP } from "@/content/socials";
+import { render } from "astro:content";
+import Prose from "@/components/Prose/index.astro";
+
+interface Props {
+  organizer: CollectionEntry<"people">;
+}
+
+const { organizer } = Astro.props;
+
+const { Content } = await render(organizer);
+---
+
+<div class="group flex h-fit w-fit items-start gap-4">
+  <a
+    href={lunalink(ROUTES.people[":id"].__path, {
+      id: organizer.id,
+    })}
+  >
+    <div class="aspect-square overflow-hidden rounded-lg">
+      <Image
+        src={organizer.data.avatar ?? SpeakerPlaceholder}
+        alt={organizer.data.name}
+        width={160}
+        height={160}
+      />
+    </div>
+  </a>
+  <div class="flex flex-col gap-2">
+    <a
+      href={lunalink(ROUTES.people[":id"].__path, {
+        id: organizer.id,
+      })}
+      class="flex flex-col gap-0.5"
+    >
+      <p
+        class="line-clamp-3 font-heading text-xl font-medium tracking-wide text-primary"
+      >
+        {organizer.data.name}
+      </p>
+      {
+        !!organizer.data.job && (
+          <p class="line-clamp-3 text-sm tracking-wide opacity-60">
+            {organizer.data.job}
+          </p>
+        )
+      }
+    </a>
+
+    {
+      !!organizer.data.socials && (
+        <ul class="flex flex-row gap-4">
+          {organizer.data.socials.map((social) => {
+            const Icon = SOCIALS_TYPE_MAP[social.type];
+
+            return (
+              <li>
+                <a
+                  href={social.href}
+                  class="text-lg opacity-60 transition hover:text-primary hover:opacity-100"
+                  target="_blank"
+                >
+                  <span class="sr-only">{social.type}</span>
+                  <Icon />
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      )
+    }
+    <Prose class="prose-sm hidden md:block">
+      <Content />
+    </Prose>
+  </div>
+</div>

src/pages/events/locations/[countryId]/organizers/assets/[__image].[__type].ts

@@ -0,0 +1,8 @@
+import { apiImageEndpoint } from "@/generated-assets/api";
+import type { APIRoute } from "astro";
+
+export const prerender = false;
+
+export const GET: APIRoute = apiImageEndpoint(
+  import.meta.glob("./_*.tsx", { eager: true }),
+);

src/pages/events/locations/[countryId]/organizers/assets/_og-image.tsx

@@ -0,0 +1,74 @@
+import { Frame } from "@/generated-assets/components/Frame";
+import {
+  getAstroImageBase64,
+  type AssetImageConfig,
+} from "@/generated-assets/image";
+import { BgImage } from "@/generated-assets/components/BgImage";
+import { Logo } from "@/components/Logo";
+import { getCountryData } from "@/pages/events/locations/[countryId]/[cityId]/assets/_utils";
+import type { ExtractParams } from "@bearstudio/lunalink";
+import type { ROUTES } from "@/routes.gen";
+import { OG_IMAGE } from "@/assets/consts";
+
+export const config: AssetImageConfig = OG_IMAGE;
+
+export default async function ({
+  params,
+}: {
+  params: ExtractParams<
+    (typeof ROUTES.events.locations)[":countryId"]["organizers"]["__path"]
+  >;
+}) {
+  const country = await getCountryData(params.countryId);
+  const postCover = await getAstroImageBase64(country.data.cover.media);
+
+  return (
+    <Frame {...config} style={{ padding: 128 }}>
+      <BgImage src={postCover} width={config.width} height={config.height} />
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 128,
+          width: "100%",
+          justifyContent: "center",
+          zIndex: 100,
+        }}
+      >
+        <Logo style={{ width: 169 * 3, height: 18 * 3 }} />
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              fontSize: 148,
+              fontWeight: 500,
+              marginLeft: -6, // Visual alignment
+            }}
+          >
+            {country.data.name}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              fontSize: 80,
+              fontWeight: 500,
+              opacity: 0.6,
+              marginTop: -16,
+              marginLeft: -2, // Visual alignment
+            }}
+          >
+            All the organizers in {country.data.name}
+          </div>
+        </div>
+      </div>
+    </Frame>
+  );
+}

src/pages/events/locations/[countryId]/organizers/assets/_utils.ts

@@ -0,0 +1,12 @@
+import { NotFoundAssetError } from "@/generated-assets/api";
+import { getEntry } from "astro:content";
+
+export const getCountryData = async (id: string) => {
+  const country = await getEntry("countries", id);
+
+  if (!country) {
+    throw new NotFoundAssetError();
+  }
+
+  return country;
+};

src/pages/events/locations/[countryId]/organizers/index.astro

@@ -0,0 +1,93 @@
+---
+import MainLayout from "@/layouts/MainLayout.astro";
+import SEO from "@/components/SEO/index.astro";
+import { getEntry } from "astro:content";
+import { getCollection } from "astro:content";
+import ImageBackgroundHero from "@/components/ImageBackgroundHero/index.astro";
+import { getPeopleFromReference } from "@/lib/people";
+import { BackButton } from "@/components/BackButton";
+import { lunalink } from "@bearstudio/lunalink";
+import { ROUTES } from "@/routes.gen";
+import PeopleWithDescription from "@/components/PeopleWithDescription/index.astro";
+
+export async function getStaticPaths() {
+  const countries = await getCollection("countries");
+
+  return countries.map((country) => ({
+    params: { countryId: country.id },
+  }));
+}
+const { countryId } = Astro.params;
+
+const country = await getEntry("countries", countryId);
+
+if (!country) {
+  return new Response(null, {
+    status: 404,
+    statusText: "Not found",
+  });
+}
+
+const ogImage = new URL(
+  Astro.url.pathname + "/assets/og-image.jpg",
+  Astro.site,
+);
+
+const organizers = await getPeopleFromReference(country.data.organizers ?? []);
+---
+
+<MainLayout>
+  <SEO
+    slot="seo"
+    title={`All the organizers in ${country.data.name}`}
+    description={country.data.description ?? ""}
+    image={ogImage.toString()}
+  />
+  <ImageBackgroundHero
+    src={country.data.cover.media}
+    alt={country.data.cover.alt}
+  />
+  <div class="mx-auto w-full max-w-screen-lg px-4 py-4">
+    <BackButton
+      href={lunalink(ROUTES["events"].locations[":countryId"].__path, {
+        countryId,
+      })}
+      client:load
+      contextLabel={`Fork It! Events in ${country.data.name}`}
+    />
+    <div
+      class="flex w-full flex-col justify-between gap-8 py-12 md:min-h-[40svh] md:flex-row"
+    >
+      <div class="flex flex-1 flex-col gap-8">
+        <div class="flex w-full flex-col gap-2">
+          <h1
+            class="w-full text-balance text-left font-heading text-4xl font-medium uppercase tracking-wider md:text-5xl"
+          >
+            {country.data.name}
+          </h1>
+          <h2
+            class="w-full text-balance text-left text-base tracking-widest md:text-lg"
+          >
+            All the Fork it! events organizers in {country.data.name}
+          </h2>
+          <p
+            class="max-w-[60ch] text-sm tracking-wide [text-shadow:0_2px_30px_rgba(0,0,0,0.4)]"
+          >
+            Fork it! Community is the result of the hard work of four
+            experienced professionals who have combined their strengths and
+            skills to create a dynamic and innovative community. This community
+            is determined to share real experiences, inspire innovation and
+            connect creative minds in the tech world.
+          </p>
+        </div>
+        <div class="flex flex-col gap-6">
+          {
+            organizers.map((organizer) => (
+              <PeopleWithDescription organizer={organizer} />
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</MainLayout>

src/routes.gen.ts

@@ -90,6 +90,13 @@ const ROUTES_CONFIG = {
           ":__image.:__type": {},
           "_og-image": {},
           "_utils": {}
+        },
+        "organizers": {
+          "assets": {
+            ":__image.:__type": {},
+            "_og-image": {},
+            "_utils": {}
+          }
         }
       }
     },