Merge pull request 'add i18n support' (#1) from translation-vibe-code into main

Reviewed-on: #1

src/components/About.astro

@@ -1,18 +1,15 @@
+---
+import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props;
+const t = translations[lang].about;
+---
 
 <main class="flex gap-8 flex-col">
-  <h1 class="text-4xl font-bold">Om STUDiO 2025</h1>
+  <h1 class="text-4xl font-bold">{t.title}</h1>
   <div class="flex gap-2 text-lg max-w-prose flex-col">
-    <p>
+    <p>{t.p1}</p>
-        STUDiO 2025 er en studentfestival som arrangeres under fadderuka i Oslo fra 11. til 15. august på Chateau Neuf.
+    <p>{t.p2}</p>
-    </p>
+    <p>{t.p3}</p>
-    <p>
+    <p>{t.p4}</p>
-        Det blir sosiale og spennende arrangementer hver dag! Festivalen er for alle nye og gamle studenter i Oslo. Opplev høydepunktet i semesteret - ta med fadderbarna eller vennegjengen, eller kom alene og møt nye venner.
-    </p>
-    <p>
-        Ikke gå glipp av den største studiekickoffen i Oslo!
-    </p>
-    <p>
-        Flere av arrangementene våre er gratis, og alt er ID 18+.
-    </p>
   </div>
 </main>

src/components/FAQ.astro

@@ -1,25 +1,31 @@
+---
+import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props;
+const t = translations[lang].faq;
+---
+
 <section class="flex flex-col gap-4">
-    <h2 class="text-xl font-bold">Ofte stilte spørsmål</h2>
+    <h2 class="text-xl font-bold">{t.title}</h2>
     <ul class="flex flex-col gap-2">
         <li>
-            <strong>Hvor arrangeres festivalen? </strong>
+            <strong>{t.q1} </strong>
-            <p>På <a href="https://neuf.no/praktisk#adkomst">Chateau Neuf</a>, Majorstuen, Oslo</p>
+            <p set:html={t.a1}></p>
         </li>
         <li>
-            <strong>Hvem er festivalen for?</strong>
+            <strong>{t.q2}</strong>
-            <p>Alle nye og gamle studenter, men arrangementene er åpne for alle som ønsker å delta.</p>
+            <p>{t.a2}</p>
         </li>
         <li>
-            <strong>Koster det penger å delta?</strong>
+            <strong>{t.q3}</strong>
-            <p>Gratis inngang hver dag og nesten alle arrangementene er gratis. Kun 2 arrangementer krever kjøp av billett.</p>
+            <p>{t.a3}</p>
         </li>
         <li>
-            <strong>Må jeg har med student ID for å komme inn?</strong>
+            <strong>{t.q4}</strong>
-            <p>Nei, men generell legitimasjon er påkrevd.</p>
+            <p>{t.a4}</p>
         </li>
         <li>
-            <strong>Hva er alder årsgrensen på festivalen?</strong>
+            <strong>{t.q5}</strong>
-            <p>Alt er ID18+</p>
+            <p>{t.a5}</p>
         </li>
     </ul>
 </section>

src/components/Footer.astro

@@ -3,16 +3,19 @@ import { Image } from 'astro:assets';
 import logo from '@assets/logo.png';
 import DNS  from '@assets/DNS-logo-hvit.png';
 import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa';
+import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props;
+const t = translations[lang].footer;
 ---
 <footer class="flex items-center justify-between bg-red-900 text-white py-16 px-8 mt-20">
     <div class="flex gap-2 items-center justify-center">
-        <Image src={logo} alt="Logo for Studentfestivalen i Oslo" class="hero-logo" width={48} height={48}/>
+        <Image src={logo} alt={t.org} class="hero-logo" width={48} height={48}/>
-        <p>Studentfestivalen i Oslo 2025</p>
+        <p>{t.org}</p>
     </div>
     <div class="flex gap-2 items-center justify-center">
-        <Image src ={DNS} alt="Logo for Det Norske Studentersamfund" class="hero-logo" width={169} height={169}/>
+        <Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={169} height={169}/>
     <div class="flex flex-col items-center justify-center gap-2">
-        <address>Slemdalsveien 15, 0369 Oslo</address>
+        <address>{t.address}</address>
         <div>
             <div class="flex gap-4">
                 <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">

src/components/Hero.astro

@@ -1,9 +1,12 @@
 ---
 import logo from '@assets/logo.png';
 import { Image } from 'astro:assets';
+import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props;
+const t = translations[lang].hero;
 ---
 
 <section class="flex flex-col items-center justify-center h-[75vh] gap-4">
-    <h1 class="text-4xl">Studentfestivalen i Oslo 2025</h1>
+    <h1 class="text-4xl">{t.title}</h1>
-    <Image src={logo} alt="Studentfestivalen i Oslo Logo" width={250} height={250}/>
+    <Image src={logo} alt={t.alt} width={250} height={250}/>
 </section>

src/components/Links.astro

@@ -1,11 +1,7 @@
 ---
-const links = [
+import { translations } from '../data/i18n.js';
-    { href: "https://www.neuf.no", text: "Chateau Neuf" },
+const { lang = 'no' } = Astro.props;
-    { href: "https://forms.gle/PvEh37nvRyicLFXn6", text: "Bli frivillig!" },
+const links = translations[lang].links;
-    { href: "https://www.instagram.com/studentfestivalenioslo/", text: "Instagram" },
-    { href: "https://www.facebook.com/studentfestivalen", text: "Facebook" },
-    { href: "https://www.tiktok.com/@studentersamfund", text: "TikTok" },
-];
 ---
 
 <div class="flex gap-4 justify-center items-center">

src/components/Nav.astro

@@ -1,38 +1,40 @@
+---
+import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props;
+const t = translations[lang].nav;
+const { pathname } = Astro.url;
+
+function getLangSwitchPath(path, lang) {
+  if (lang === 'no') {
+    if (path === '/') return '/en/';
+    if (path.startsWith('/en/')) return path.replace('/en/', '/');
+    return '/en' + path;
+  } else {
+    if (path === '/en/' || path === '/en') return '/';
+    if (path.startsWith('/en/')) return path.replace('/en', '');
+    return path;
+  }
+}
+
+const langSwitchPath = getLangSwitchPath(pathname, lang);
+---
 <nav class="flex justify-between items-center px-10 py-4 bg-accent mb-4">
     <h1 class="text-xl font-bold text-white">
-        <a href="/">STUDiO 2025</a>
+        <a href={lang === 'en' ? '/en/' : '/'}>{t.title}</a>
     </h1>
     <ul class="flex space-x-4 text-white">
-        <li><a href="/">Hjem</a></li>
+        <li><a href={lang === 'en' ? '/en/' : '/'}>{t.home}</a></li>
-        <li><a href="/program">Program</a></li>
+        <li><a href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</a></li>
-        <li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">Bli frivillig</a></li>
+        <li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</a></li>
-        <li><a href="/about">Om</a></li>
+        <li><a href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</a></li>
         <li>
-            <button onclick={() => toggleLanguage()} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
+            <a href={langSwitchPath} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
-                Norsk / English
+                {t.langSwitch}
-            </button>
+            </a>
         </li>
-
-        <script>
-            let currentLanguage = 'no';
-
-            function toggleLanguage() {
-                currentLanguage = currentLanguage === 'no' ? 'en' : 'no';
-                const links = document.querySelectorAll('nav ul li a');
-                links.forEach(link => {
-                    const href = link.getAttribute('href');
-                    if (currentLanguage === 'en') {
-                        link.setAttribute('href', `/en-${href.slice(1)}`);
-                    } else {
-                        link.setAttribute('href', `/${href.replace('/en-', '')}`);
-                    }
-                });
-            }
-        </script>
     </ul>
 </nav>
 
-
 <style>
   nav a {
     padding: 0.5em 0.5em;

src/components/Program.astro

@@ -1,65 +1,59 @@
 ---
-const currentDate = new Date().toLocaleDateString("nb-NO", {
+import { translations } from '../data/i18n.js';
+const { lang = 'no', data } = Astro.props;
+const t = translations[lang].program;
+const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
   weekday: 'long',
   year: 'numeric',
   month: 'long',
   day: 'numeric'
 });
-
-const events = [
-  {
-    id: "9882",
-    slug: "magic-the-gathering-monday",
-    title: "Magic: The Gathering Monday",
-    subtitle: "",
-    nextOccurrence: {
-      id: "9326",
-      start: "2025-06-16 15:00:00+00:00",
-      end: null,
-      venue: {
-        id: "52",
-        slug: "galleriet",
-        title: "Galleriet",
-        preposition: "i",
-        url: "/lokaler/galleriet/",
-      },
-      venueCustom: "",
-    },
-    url: "https://neuf.no/arrangementer/magic-the-gathering-monday",
-    futureOccurrencesCount: 2,
-  },
-  // ...other events
-];
-
-function formatDate(dateString) {
-  const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-  return new Date(dateString).toLocaleDateString('no-NO', options);
-}
-
-// Filter events for Monday
-const mondayEvents = events.filter(event => {
-  const eventDate = new Date(event.nextOccurrence.start);
-  return eventDate.getDay() === 1; // Monday is represented by 1
-});
 ---
-
+{data ? (
-<div class="flex gap-4 flex-col">
+  <div class="flex gap-4 flex-col">
     <div class="flex items-center justify-between">
-    <h2 class="font-bold text-xl">Hva skjer i dag?</h2>
+      <h2 class="font-bold text-xl">{t.today}</h2>
       <p>{currentDate}</p>
     </div>
+    {Object.entries(data).map(([dayName, items]) => (
+      <div class="day">
+        <h2>{dayName}</h2>
         <ul>
-    {events.map(event => (
+          {items.map((item) => {
-      <li key={event.id}>
+            const price = item.price || item.cost;
-        <a href={event.url}>
+            return (
-          <h2>{event.title}</h2>
+              <li class="item">
-          {event.subtitle && <p>{event.subtitle}</p>}
+                {item.time} - {item.event} - {item.url ? (
-          <p>
+                  <a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a>
-            {event.nextOccurrence.start && formatDate(event.nextOccurrence.start)}{" "}
+                ) : (
-            {event.nextOccurrence.venueCustom || `${event.nextOccurrence.venue.preposition} ${event.nextOccurrence.venue.title}`}
+                  price
-          </p>
+                )}
-        </a>
               </li>
-    ))}
+            );
+          })}
         </ul>
-</div>
+      </div>
+    ))}
+  </div>
+) : (
+  <div>No program data available.</div>
+)}
+
+<style>
+.day {
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+.day:nth-child(odd) {
+  background-color: #F8BC90;
+}
+.day:nth-child(even) {
+  background-color: #0A0F6D;
+  color: #fff;
+}
+.item {
+  margin: 5px 0;
+}
+</style>

src/components/Vors.astro

@@ -1,18 +1,19 @@
 ---
 const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY";
+import { translations } from '../data/i18n.js';
+const { lang = 'no' } = Astro.props;
+const t = translations[lang].vors;
 ---
 
 <div style="width: 560px; height: 315px;">
     <div class="mt-4 text-xl mb-2">
-
+        {t.text}
-        Sett på låta for litt stemning før dere kommer🔥
     </div>
     <iframe 
         width="560" 
         height="315" 
         src={videoUrl.replace("watch?v=", "embed/")} 
         title="YouTube video player" 
-        frameborder="0" 
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
         allowfullscreen>
     </iframe>

src/data/en-program.json

@@ -11,13 +11,23 @@
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }
   ],
   "Wednesday 13th": [
-        { "time": "18:00", "event": "KKK: Comic Comedian Evening", "cost": "tickets out!" },
+    {
+      "time": "18:00",
+      "event": "KKK: Comic Comedian Evening",
+      "cost": "tickets out!",
+      "url": "https://www.ticketmaster.no/event/studio-komisk-komedie-kveld-billetter/920472981"
+    },
     { "time": "18:00", "event": "Hits for Quiz", "cost": "free" },
     { "time": "21:00", "event": "Karaoke", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }
   ],
   "Thursday 14th": [
-        { "time": "18:00", "event": "Drunk Impro 4K, VRØVL", "cost": "tickets out!" },
+    {
+      "time": "18:00",
+      "event": "Drunk Impro 4K, VRØVL",
+      "cost": "tickets out!",
+      "url": "https://www.ticketmaster.no/event/studio-drunk-impro-i-storsalen-med-4k-billetter/912660512"
+    },
     { "time": "19:00", "event": "Shrek 2 Screening", "cost": "free" },
     { "time": "20:00", "event": "Live Karaoke", "cost": "free" },
     { "time": "22:00", "event": "Silent Disco", "cost": "free" }

src/data/i18n.js

@@ -0,0 +1,115 @@
+export const translations = {
+  no: {
+    nav: {
+      home: "Hjem",
+      program: "Program",
+      volunteer: "Bli frivillig",
+      about: "Om",
+      langSwitch: "Norsk / English",
+      title: "STUDiO 2025",
+    },
+    hero: {
+      title: "Studentfestivalen i Oslo 2025",
+      alt: "Studentfestivalen i Oslo Logo",
+    },
+    faq: {
+      title: "Ofte stilte spørsmål",
+      q1: "Hvor arrangeres festivalen?",
+      a1: 'På <a href="https://neuf.no/praktisk#adkomst">Chateau Neuf</a>, Majorstuen, Oslo',
+      q2: "Hvem er festivalen for?",
+      a2: "Alle nye og gamle studenter, men arrangementene er åpne for alle som ønsker å delta.",
+      q3: "Koster det penger å delta?",
+      a3: "Gratis inngang hver dag og nesten alle arrangementene er gratis. Kun 2 arrangementer krever kjøp av billett.",
+      q4: "Må jeg har med student ID for å komme inn?",
+      a4: "Nei, men generell legitimasjon er påkrevd.",
+      q5: "Hva er alder årsgrensen på festivalen?",
+      a5: "Alt er ID18+",
+    },
+    about: {
+      title: "Om STUDiO 2025",
+      p1: "STUDiO 2025 er en studentfestival som arrangeres under fadderuka i Oslo fra 11. til 15. august på Chateau Neuf.",
+      p2: "Det blir sosiale og spennende arrangementer hver dag! Festivalen er for alle nye og gamle studenter i Oslo. Opplev høydepunktet i semesteret - ta med fadderbarna eller vennegjengen, eller kom alene og møt nye venner.",
+      p3: "Ikke gå glipp av den største studiekickoffen i Oslo!",
+      p4: "Flere av arrangementene våre er gratis, og alt er ID 18+.",
+    },
+    links: [
+      { href: "https://www.neuf.no", text: "Chateau Neuf" },
+      { href: "https://forms.gle/PvEh37nvRyicLFXn6", text: "Bli frivillig!" },
+      {
+        href: "https://www.instagram.com/studentfestivalenioslo/",
+        text: "Instagram",
+      },
+      { href: "https://www.facebook.com/studentfestivalen", text: "Facebook" },
+      { href: "https://www.tiktok.com/@studentersamfund", text: "TikTok" },
+    ],
+    program: {
+      today: "Hva skjer i dag?",
+    },
+    vors: {
+      text: "Sett på låta for litt stemning før dere kommer🔥",
+    },
+    footer: {
+      address: "Slemdalsveien 15, 0369 Oslo",
+      org: "Studentfestivalen i Oslo 2025",
+      dnsAlt: "Logo for Det Norske Studentersamfund",
+    },
+  },
+  en: {
+    nav: {
+      home: "Home",
+      program: "Program",
+      volunteer: "Become a volunteer",
+      about: "About",
+      langSwitch: "Norsk / English",
+      title: "STUDiO 2025",
+    },
+    hero: {
+      title: "Student Festival in Oslo 2025",
+      alt: "Student Festival in Oslo Logo",
+    },
+    faq: {
+      title: "Frequently Asked Questions",
+      q1: "Where is the festival held?",
+      a1: 'At <a href="https://neuf.no/praktisk#adkomst">Chateau Neuf</a>, Majorstuen, Oslo',
+      q2: "Who is the festival for?",
+      a2: "All new and returning students, but the events are open to everyone who wants to join.",
+      q3: "Does it cost money to participate?",
+      a3: "Free entry every day and almost all events are free. Only 2 events require a ticket.",
+      q4: "Do I need a student ID to enter?",
+      a4: "No, but general identification is required.",
+      q5: "What is the age limit for the festival?",
+      a5: "Everything is 18+",
+    },
+    about: {
+      title: "About STUDiO 2025",
+      p1: "STUDiO 2025 is a student festival held during the buddy week in Oslo from August 11th to 15th at Chateau Neuf.",
+      p2: "There will be social and exciting events every day! The festival is for all new and returning students in Oslo. Experience the highlight of the semester - bring your buddy group or friends, or come alone and meet new people.",
+      p3: "Don't miss the biggest student kickoff in Oslo!",
+      p4: "Many of our events are free, and everything is 18+.",
+    },
+    links: [
+      { href: "https://www.neuf.no", text: "Chateau Neuf" },
+      {
+        href: "https://forms.gle/PvEh37nvRyicLFXn6",
+        text: "Become a volunteer!",
+      },
+      {
+        href: "https://www.instagram.com/studentfestivalenioslo/",
+        text: "Instagram",
+      },
+      { href: "https://www.facebook.com/studentfestivalen", text: "Facebook" },
+      { href: "https://www.tiktok.com/@studentersamfund", text: "TikTok" },
+    ],
+    program: {
+      today: "What's happening today?",
+    },
+    vors: {
+      text: "Play the song to get in the mood before you arrive🔥",
+    },
+    footer: {
+      address: "Slemdalsveien 15, 0369 Oslo",
+      org: "Student Festival in Oslo 2025",
+      dnsAlt: "Logo for the Norwegian Student Society",
+    },
+  },
+};

src/layouts/Layout.astro

@@ -2,10 +2,11 @@
 import "@styles/global.css";
 import Nav from '@components/Nav.astro';
 import Footer from '@components/Footer.astro';
+const { lang = 'no' } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="no">
+<html lang={lang}>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
@@ -14,10 +15,10 @@ import Footer from '@components/Footer.astro';
 		<title>STUDiO 2025 - Studentfestivalen i Oslo</title>
 	</head>
 	<body class="grid grid-rows-[auto_1fr_auto] jusify-center">
-		<Nav />
+		<Nav lang={lang} />
 		<div class="max-w-7xl grid place-self-center gap-8">
 			<slot />
 		</div>
-		<Footer />
+		<Footer lang={lang} />
 	</body>
 </html>

src/pages/about.astro

@@ -3,6 +3,6 @@ import Layout from '@layouts/Layout.astro';
 import About from '@components/About.astro';
 ---
 
-<Layout>
+<Layout lang="no">
-    <About />
+    <About lang="no" />
 </Layout>

src/pages/en-program.astro

@@ -1,21 +1,11 @@
 ---
-import data from '/src/data/en-program.json';
 import Layout from '@layouts/Layout.astro';
+import Program from '@components/Program.astro';
+import data from '../data/en-program.json';
 ---
 
-<Layout>
+<Layout lang="en">
-        {Object.entries(data).map(([dayName, items], index) => (
+  <Program lang="en" data={data} />
-            <div class="day">
-                <h2>{dayName}</h2>
-                <ul>
-                    {items.map((item, itemIndex) => (
-                        <li class="item">
-                            {item.time} - {item.event} - {item.price}
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        ))}
 </Layout>
 
 <style>

src/pages/en/about.astro

@@ -0,0 +1,8 @@
+---
+import Layout from '@layouts/Layout.astro';
+import About from '@components/About.astro';
+---
+
+<Layout lang="en">
+    <About lang="en" />
+</Layout> 

src/pages/en/index.astro

@@ -0,0 +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 Vors from '@components/Vors.astro';
+---
+
+<Layout lang="en">
+	<Hero lang="en" />
+	<Links lang="en" />
+	<Program lang="en" />
+	<FAQ lang="en" />
+	<Vors lang="en" />
+</Layout> 

src/pages/en/program.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '@layouts/Layout.astro';
+import Program from '@components/Program.astro';
+import data from '../../data/en-program.json';
+---
+
+<Layout lang="en">
+  <Program lang="en" data={data} />
+</Layout> 

src/pages/index.astro

@@ -7,10 +7,10 @@ import Hero from '@components/Hero.astro';
 import Vors from '@components/Vors.astro';
 ---
 
-<Layout>
+<Layout lang="no">
-	<Hero />
+	<Hero lang="no" />
-	<Links />
+	<Links lang="no" />
-	<Program />
+	<Program lang="no" />
-	<FAQ />
+	<FAQ lang="no" />
-	<Vors />
+	<Vors lang="no" />
 </Layout>

src/pages/program.astro

@@ -1,25 +1,11 @@
 ---
-import data from '/src/data/program.json';
 import Layout from '@layouts/Layout.astro';
+import Program from '@components/Program.astro';
+import data from '../data/program.json';
 ---
 
-<Layout>
+<Layout lang="no">
-        {Object.entries(data).map(([dayName, items], index) => (
+  <Program lang="no" data={data} />
-            <div class="day">
-                <h2>{dayName}</h2>
-                <ul>
-                    {items.map((item, itemIndex) => (
-                        <li class="item">
-                            {item.time} - {item.event} - {item.url ? (
-                                <a href={item.url} target="_blank" rel="noopener noreferrer">{item.price}</a>
-                            ) : (
-                                item.price
-                            )}
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        ))}
 </Layout>
 
 <style>