Add keynoters. (#1102)

<!-- readthedocs-preview ep-website start -->
🖼️ Preview available 🖼️ :
https://ep-website--1102.org.readthedocs.build/
<!-- readthedocs-preview ep-website end -->

---------

Co-authored-by: Mia <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 3 people

astro.config.mjs

@@ -24,7 +24,13 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        $: path.resolve(__dirname, "./src"),
+        "@components": path.resolve("./src/components"),
+        "@sections": path.resolve("./src/components/sections"),
+        "@layouts": path.resolve("./src/layouts"),
+        "@ui": path.resolve("./src/components/ui"),
+        "@assets": path.resolve("./src/assets"),
+        "@i18n": path.resolve("./src/i18n"),
+        "@src": path.resolve("./src"),
       },
     },
   },

src/components/BaseHead.astro

@@ -58,3 +58,8 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
+
+<script
+  is:inline
+  src="https://kit.fontawesome.com/14a4971ab3.js"
+  crossorigin="anonymous"></script>

src/components/card/card.astro

@@ -1,7 +1,7 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Image } from "astro:assets";
-import ButtonLink from "../button-link/button-link.astro";
+import Button from "@ui/Button.astro";
 
 export interface Props {
   title: string;
@@ -14,31 +14,26 @@ const { title, subtitle, url, image } = Astro.props;
 ---
 
 <div
-  class="block min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
+  class="min-w-[250px] w-full md:w-[40%] lg:w-[30%] p-4 bg-[#D5D6E6] rounded-2xl text-center flex flex-col"
 >
   <a href={url} class="block">
-    <div class="relative w-full mb-4">
+    <div class="relative w-full">
       <Image
         src={image}
         width={600}
         height={375}
-        alt=""
-        class="rounded-xl aspect-[3/2] w-full"
+          alt=`Card image - ${title}`
+        class="not-prose rounded-xl aspect-[3/2] w-full"
         loading="lazy"
       />
     </div>
   </a>
   <div class="flex items-center flex-col flex-grow mb-2">
     <a href={url} class="block hover:underline">
-      <h3 class="text-2xl text-primary">{title}</h3>
+      <h3 >{title}</h3>
     </a>
     <slot />
   </div>
-  <a
-    class="text-xs px-2 py-1 mt-4 bg-[#141F36] text-white rounded-[10px] inline-block w-fit mx-auto leading-4 hover:bg-button-hover not-prose mt-auto"
-    href={url}
-  >
-    {subtitle}
-    <span class="inline-block ml-1 font-system text-lg leading-4"> ↗ </span>
-  </a>
+
+  <Button secondary url={url}>{subtitle}</Button>
 </div>

src/components/header/header-actions.astro

@@ -1,5 +1,6 @@
 ---
 import ButtonLink from "../button-link/button-link.astro";
+import Button from "@ui/Button.astro";
 import HeaderButton from "./header-button.astro";
 import Search from "astro-pagefind/components/Search";
 
@@ -12,7 +13,7 @@ const { mobile = false }: Props = Astro.props;
 const IS_LIVE = false;
 ---
 
-<div class="ml-auto flex items-center space-x-4">
+<div class="flex items-center justify-end gap-2 w-1/3">
   <Search
     id="search"
     className="pagefind-ui"
@@ -26,15 +27,8 @@ const IS_LIVE = false;
   {
     !mobile ? (
       <>
-        <ButtonLink url="/tickets" className="hidden md:block">
-          <span>Register Now! 🎟️</span>
-        </ButtonLink>
-        {IS_LIVE && (
-          <ButtonLink url="/live">
-            Live
-            <span class="hidden md:inline"> 📺</span>
-          </ButtonLink>
-        )}
+      <Button url="/tickets" icon="ticket">Register Now!</Button>
+        {IS_LIVE && <Button url="/live">Live</Button>}
       </>
     ) : null
   }
@@ -122,7 +116,8 @@ const IS_LIVE = false;
     --pagefind-ui-border: #d8d8d8;
     --pagefind-ui-border-width: 2px;
     --pagefind-ui-border-radius: 0;
-    width: 50%;
+    width:50%;
+    min-width: 10vw;
   }
   .pagefind-ui.yellow {
     --pagefind-ui-background: #efc302;

src/components/header/header.astro

@@ -7,7 +7,7 @@ import HeaderLogo from "./header-logo.astro";
 const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
 ---
 
-<header class="p-6 flex items-center relative z-40">
+<header class="p-6 flex items-center justify-between relative z-40">
   <input
     type="checkbox"
     name="mobile-controls"
@@ -18,7 +18,7 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
 
   <HeaderLogo />
 
-  <nav class="mr-auto hidden xl:block">
+  <nav class="hidden xl:block">
     <NavItems items={links.header} />
   </nav>
 

src/components/hero-section/prague.astro

@@ -1,6 +1,6 @@
 ---
 import Prose from "../prose/prose.astro";
-import ButtonLink from "../button-link/button-link.astro";
+import Button from "@ui/Button.astro";
 import { Title } from "../typography/title";
 import { Image } from "astro:assets";
 
@@ -31,10 +31,10 @@ import venueImage from "./prague.png";
     </Prose>
 
     <div class="space-x-4 mb-5">
-      <ButtonLink url="/where"> Where is EuroPython? </ButtonLink>
+      <Button url="/where"> Where is EuroPython? </Button>
     </div>
     <div class="space-x-12">
-      <ButtonLink url="/explore"> Explore Prague </ButtonLink>
+      <Button url="/explore"> Explore Prague </Button>
     </div>
   </div>
 </article>

src/components/hero2/hero.astro

@@ -1,13 +1,13 @@
 ---
+import { Logo } from "../logo";
 import { Image } from "astro:assets";
 import heroImage from "./conference_photo.jpg";
 
 import IconWithLabel from "./icon-label.astro";
-import ButtonLink from "../../components/button-link/button-link.astro";
+import Button from "@ui/Button.astro";
 
-import HeaderLogo from "../header/header-logo.astro";
-const action1 = "https://ep2025.europython.eu/tickets";
-const action2 = "https://ep2025.europython.eu/sponsorship/sponsor/";
+const action1 = "/tickets";
+const action2 = "/sponsorship/sponsor/";
 ---
 
 <div
@@ -80,16 +80,16 @@ const action2 = "https://ep2025.europython.eu/sponsorship/sponsor/";
       ></svg
     >
   </div>
-  <div class="relative z-10 text-center">
-    <div class="flex items-center space-x-3 p-10 md:mt-20">
-      <div class="w-25 h-25 flex items-center justify-center">
-        <HeaderLogo />
+  <div class="prose-xl relative z-10 text-center">
+    <div class="flex items-center space-x-3 p-10 md:mt-20 justify-center">
+      <div class="w-200 h-200 flex items-center justify-center">
+        <Logo className="h-full block md:w-full lg:w-[200px] pr-3 lg:pr-8" />
       </div>
-      <h1 class="text-5xl md:text-9xl m-0 font-bold text-[#17223A]">
+      <h1 class="text-5xl md:text-8xl lg:text-9xl m-0 font-bold text-[#17223A]">
         EuroPython
       </h1>
     </div>
-    <p class="max-w-2xl mx-10 md:mx-40 text-center text-lg text-gray-700 mt-2">
+    <p class="max-w-2xl mx-10 md:mx-40 text-center text-xl text-gray-700 mt-2">
       Discover the latest Python trends, learn from 180+ expert speakers,
       network with fellow developers, enjoy social events, and explore open
       spaces to spark new ideas.
@@ -106,27 +106,12 @@ const action2 = "https://ep2025.europython.eu/sponsorship/sponsor/";
   </div>
 
   <!-- Second 2x1 Grid with Action Buttons -->
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 m-6">
+  <div class="text-center grid grid-cols-1 md:grid-cols-2 gap-4 m-6">
     <div>
-      <ButtonLink
-        secondary
-        url={action1}
-        className="mb-4 rounded-lg text-xl"
-        isExternal={true}
-      >
-        Register Now
-      </ButtonLink>
+      <Button secondary url={action1}> Register Now </Button>
     </div>
     <div class="btn-outline">
-      <a
-        class="font-bold text-lg px-4 py-4 bg-button rounded-[10px] inline-block leading-4 hover:bg-button-hover not-prose outline-solid outline bg-transparent rounded-xlborder text-xl text-secondary outline-secondary text-black"
-        href={action2}
-      >
-        Call for Sponsors
-        <span class="inline-block ml-1 font-system text-lg leading-4">
-          ↗
-        </span></a
-      >
+      <Button outline url={action2}> Call for Sponsors </Button>
     </div>
   </div>
 </div>

src/components/keynoters/keynoter.astro

@@ -13,6 +13,7 @@ export interface Props {
   tagline?: string;
   image?: ImageMetadata;
   placeholder?: boolean;
+  order?: number;
   class?: string;
 }
 
@@ -22,17 +23,19 @@ const {
   tagline,
   image,
   placeholder,
+  order,
   class: className,
 } = Astro.props;
 
 const placeholders = [Person1, Person2, Person3, Person4, Person5];
 
 const Placeholder =
   placeholders[Math.floor(Math.random() * placeholders.length)];
+
 ---
 
 <li class:list={["list-none rounded-2xl overflow-clip flex group", className]}>
-  <a class="block w-full h-full relative" href={`/speaker/${slug}`}>
+  <a class="block w-full h-full relative " >
     <div class="relative aspect-[9/10] overflow-clip">
       {
         image ? (
@@ -43,24 +46,24 @@ const Placeholder =
             class="object-cover group-hover:scale-105 transition-transform h-full w-full"
           />
         ) : (
-          <div class="bg-keynoter-info w-full h-full group-hover:opacity-90">
+          <div class="bg-keynoter-info w-full h-full">
             <Placeholder />
           </div>
         )
       }
     </div>
 
     <div
-      class="px-5 py-2 pb-4 bg-keynoter-info rounded-t-none h-full group-hover:opacity-90"
+      class="px-5 py-2 pb-4 bg-keynoter-info rounded-t-none h-full "
     >
       {
         placeholder ? (
-          <p class="text-body-inverted font-bold">More keynoters coming soon</p>
+          <p class="text-body-inverted ">More keynoters coming soon</p>
         ) : (
           <>
-            <p class="text-body-inverted font-bold">{name}</p>
+            <p class="text-[#17223A] font-bold">{name}</p>
             {tagline ? (
-              <p class="text-body-light font-bold text-sm italic">{tagline}</p>
+              <p class="text-secondary-hover text-lg italic">{tagline}</p>
             ) : null}
           </>
         )

src/components/keynoters/keynoters.astro

@@ -1,27 +1,27 @@
 ---
-import ButtonLink from "../button-link/button-link.astro";
-import { Title } from "../typography/title";
 import Keynoter from "./keynoter.astro";
+import Headline from "@ui/Headline.astro";
+import Button from "@ui/Button.astro";
 
 import { getCollection } from "astro:content";
 
 const keynoters = await getCollection("keynoters");
 
-const placeholders = Math.max(0, 6 - keynoters.length);
+const placeholders = Math.max(0, 5 - keynoters.length);
 ---
 
-<section class="relative my-12 px-6">
+<section class="prose-xl relative my-12 px-6">
   <svg viewBox="0 0 729 704" class="absolute top-0 left-0 w-full h-full -z-10">
     <g
       stroke="none"
       stroke-width={1}
       fill="none"
       fill-rule="evenodd"
-      opacity={0.4}
+      opacity={0.1}
     >
       <g
         transform="translate(-297.000000, -4131.000000)"
-        class="fill-hero-primary"
+        class="fill-secondary-light"
       >
         <g transform="translate(81.000000, 3688.000000)">
           <g transform="translate(216.000000, 443.000000)">
@@ -79,25 +79,26 @@ const placeholders = Math.max(0, 6 - keynoters.length);
     </g>
   </svg>
 
-  <Title className="text-primary">
-    <a href="/keynoters">Keynote Speakers</a>
-  </Title>
+  <Headline id="keynoters" title="Keynote Speakers" />
 
-  <ul class="mt-12 mb-24 flex gap-6 flex-wrap">
+  <ul class="p-0 mt-12 flex gap-6 flex-wrap justify-center">
     {
-      keynoters.map((keynoter, index) => (
-        <Keynoter
-          name={keynoter.data.name}
-          slug={keynoter.slug}
-          tagline={keynoter.data.tagline}
-          image={keynoter.data.image}
-          placeholder={false}
-          class:list={[
-            "w-full sm:w-[calc(50%-1rem)] md:w-[calc(30%-1rem)]",
-            { "md:ml-[10%]": index === 0 },
-          ]}
-        />
-      ))
+      keynoters
+        .sort((a, b) => a.data.order - b.data.order)
+        .map((keynoter, index) => (
+          <Keynoter
+            name={keynoter.data.name}
+            slug={keynoter.slug}
+            tagline={keynoter.data.tagline}
+            image={keynoter.data.image}
+            placeholder={false}
+            order={keynoter.data.order}
+            class:list={[
+              "w-full sm:w-[calc(50%-1rem)] md:w-[calc(30%-1rem)]",
+              { "md:ml-[10%]": index === 0 },
+            ]}
+          />
+        ))
     }
     {
       new Array(placeholders)
@@ -114,13 +115,16 @@ const placeholders = Math.max(0, 6 - keynoters.length);
     }
   </ul>
 
-  <div class="flex items-end flex-col pr-6">
+  <div class="flex items-center flex-col pr-6">
     <div class="text-center">
       <h3 class="font-bold text-3xl mb-4">
         <span class="text-body-light inline-block mr-2">#</span>
         See other sessions
       </h3>
-      <ButtonLink url="/sessions">List of Sessions</ButtonLink>
+      <Button url="/programme/sessions">See sessions preview</Button>
     </div>
   </div>
 </section>
+<style>
+  .fill-hero-primary {}
+</style>

src/components/sections/prague.astro

@@ -0,0 +1,9 @@
+---
+import PragueComponent from "@components/hero-section/prague.astro";
+import * as venue from "../../data/home/prague.mdx";
+---
+  <div class="mt-12 px-6 pb-32 overflow-visible">
+    <PragueComponent title={venue.frontmatter.title}>
+      <venue.Content />
+    </PragueComponent>
+  </div>