add today's event to front page

src/components/Program.astro

@@ -1,16 +1,10 @@
 ---
 import { translations, type Lang } from '@data/i18n';
+import ProgramCard from './ProgramCard.astro';
+
 const { lang = 'no', data } = Astro.props as { lang?: Lang, data: any };
 const t = translations[lang].program;
 
-type ProgramItem = {
-  time: string;
-  event: string;
-  price?: string | null;
-  cost?: string | null;
-  url?: string;
-};
-
 const convertDate = (date: string | Date) => {
   let d = date;
   if (!(d instanceof Date)) {
@@ -30,27 +24,8 @@ const convertDate = (date: string | Date) => {
     <p class="font-bold text-2xl text-center w-full">{convertDate(new Date())}</p>
   </div>
   <div class="flex gap-12 flex-wrap justify-center items-stretch">
-    {Object.entries(data).map(([date, items]) => (
-      <div id="program-list" class="w-125 p-6 rounded-2xl even:bg-slottsblaa even:text-white bg-gyllen-beige flex flex-col gap-2">
-        <h2 class="font-bold text-xl">{convertDate(date)}</h2>
-        <ul>
-          {(items as ProgramItem[]).map((item) => {
-            const price = item.price || item.cost;
-            return (
-              <li class="flex justify-between">
-                <p>
-                {item.time} - {item.event}
-                </p>
-                {item.url ? (
-                  <a href={item.url} target="_blank" rel="noopener noreferrer" class="text-right">{price}</a>
-                ) : (
-                  price
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+    {Object.entries(data).map(([date, items], idx) => (
+      <ProgramCard date={date} items={items} lang={lang} even={idx % 2 === 1} />
     ))}
   </div>
   <div class="flex justify-center">
@@ -59,9 +34,5 @@ const convertDate = (date: string | Date) => {
     </p>
   </div>
 ) : (
-  <div>No program data available.</div>
+  <div>{t.noProgram}</div>
 )}
-
-<style>
-
-</style>

src/components/ProgramCard.astro

@@ -0,0 +1,46 @@
+---
+import { translations, type Lang } from '@data/i18n';
+const { date, items, lang = 'no', even = false } = Astro.props as { date: string | Date, items: ProgramItem[], lang?: Lang, even?: boolean };
+const t = translations[lang].program;
+
+type ProgramItem = {
+  time: string;
+  event: string;
+  price?: string | null;
+  cost?: string | null;
+  url?: string;
+};
+
+const convertDate = (date: string | Date) => {
+  let d = date;
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+---
+
+<div id="program-list" class:list={["w-125 p-6 rounded-2xl flex flex-col gap-2", even ? "bg-slottsblaa text-white" : "bg-gyllen-beige"]}>
+  <h3 class="font-bold text-xl">{convertDate(date)}</h3>
+  <ul>
+    {items.map((item) => {
+      const price = item.price || item.cost;
+      return (
+        <li class="flex justify-between">
+          <p>
+            {item.time} - {item.event}
+          </p>
+          {item.url ? (
+            <a href={item.url} target="_blank" rel="noopener noreferrer" class="text-right">{price}</a>
+          ) : (
+            price
+          )}
+        </li>
+      );
+    })}
+  </ul>
+</div> 

src/components/TodayProgram.astro

@@ -0,0 +1,22 @@
+---
+import ProgramCard from './ProgramCard.astro';
+import programData from '@data/program.json';
+import { translations, type Lang } from '@data/i18n';
+
+const { lang = 'no' } = Astro.props as { lang?: Lang };
+const t = translations[lang].program;
+
+const typedProgramData = programData as Record<string, any>;
+
+const todayStr = new Date().toISOString().slice(0, 10);
+const items = typedProgramData[todayStr];
+---
+
+<section class="flex flex-col gap-6 max-w-prose">
+  <h2 class="font-bold text-2xl">{t.today}</h2>
+  {items ? (
+    <ProgramCard date={todayStr} items={items} lang={lang} />
+  ) : (
+    <p>{t.noProgram}</p>
+  )}
+</section>

src/data/i18n.ts

@@ -36,6 +36,7 @@ export const translations = {
     program: {
       today: "Hva skjer i dag?",
       programMore: "For arrangementer etter Studio trykk her",
+      noProgram: "Ingenting på programmet i dag :(",
     },
     vors: {
       text: "Sett på låta for litt stemning før dere kommer 🔥",
@@ -83,6 +84,7 @@ export const translations = {
     program: {
       today: "What's happening today?",
       programMore: "For events after Studio click here",
+      noProgram: "No events today :(",
     },
     vors: {
       text: "Play the song to get in the mood before you arrive 🔥",

src/pages/en/index.astro

@@ -1,16 +1,16 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import Program from '@components/Program.astro';
 import Links from '@components/Links.astro';
 import FAQ from '@components/FAQ.astro';
 import Hero from '@components/Hero.astro';
+import TodayProgram from '@components/TodayProgram.astro';
 import Vors from '@components/Vors.astro';
 ---
 
 <Layout lang="en">
 	<Hero lang="en" />
 	<Links lang="en" class="text-5xl text-black" />
-	<Program lang="en" />
+	<TodayProgram lang="en" />
 	<FAQ lang="en" />
 	<Vors lang="en" />
 </Layout> 

src/pages/index.astro

@@ -1,16 +1,16 @@
 ---
 import Layout from '@layouts/Layout.astro';
-import Program from '@components/Program.astro';
 import Links from '@components/Links.astro';
 import FAQ from '@components/FAQ.astro';
 import Hero from '@components/Hero.astro';
+import TodayProgram from '@components/TodayProgram.astro';
 import Vors from '@components/Vors.astro';
 ---
 
 <Layout lang="no">
 	<Hero lang="no" />
 	<Links lang="no" class="text-5xl text-black" />
-	<Program lang="no" />
+	<TodayProgram lang="no" />
 	<FAQ lang="no" />
 	<Vors lang="no" />
 </Layout>