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

Reviewed-on: #1
This commit is contained in:
2025-07-02 14:42:08 +02:00
18 changed files with 331 additions and 194 deletions

View File

@ -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"> <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"> <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> </div>
</main> </main>

View File

@ -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"> <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"> <ul class="flex flex-col gap-2">
<li> <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>
<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>
<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>
<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>
<li> <li>
<strong>Hva er alder årsgrensen på festivalen?</strong> <strong>{t.q5}</strong>
<p>Alt er ID18+</p> <p>{t.a5}</p>
</li> </li>
</ul> </ul>
</section> </section>

View File

@ -3,16 +3,19 @@ import { Image } from 'astro:assets';
import logo from '@assets/logo.png'; import logo from '@assets/logo.png';
import DNS from '@assets/DNS-logo-hvit.png'; import DNS from '@assets/DNS-logo-hvit.png';
import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa'; 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"> <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"> <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>
<div class="flex gap-2 items-center justify-center"> <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"> <div class="flex flex-col items-center justify-center gap-2">
<address>Slemdalsveien 15, 0369 Oslo</address> <address>{t.address}</address>
<div> <div>
<div class="flex gap-4"> <div class="flex gap-4">
<a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook"> <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">

View File

@ -1,9 +1,12 @@
--- ---
import logo from '@assets/logo.png'; import logo from '@assets/logo.png';
import { Image } from 'astro:assets'; 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"> <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> </section>

View File

@ -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"> <div class="flex gap-4 justify-center items-center">

View File

@ -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"> <nav class="flex justify-between items-center px-10 py-4 bg-accent mb-4">
<h1 class="text-xl font-bold text-white"> <h1 class="text-xl font-bold text-white">
<a href="/">STUDiO 2025</a> <a href={lang === 'en' ? '/en/' : '/'}>{t.title}</a>
</h1> </h1>
<ul class="flex space-x-4 text-white"> <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> <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> </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> </ul>
</nav> </nav>
<style> <style>
nav a { nav a {
padding: 0.5em 0.5em; padding: 0.5em 0.5em;

View File

@ -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', weekday: 'long',
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric' 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"> <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> <p>{currentDate}</p>
</div> </div>
{Object.entries(data).map(([dayName, items]) => (
<div class="day">
<h2>{dayName}</h2>
<ul> <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> </li>
))} );
})}
</ul> </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>

View File

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

View File

@ -11,13 +11,23 @@
{ "time": "22:00", "event": "Silent Disco", "cost": "free" } { "time": "22:00", "event": "Silent Disco", "cost": "free" }
], ],
"Wednesday 13th": [ "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": "18:00", "event": "Hits for Quiz", "cost": "free" },
{ "time": "21:00", "event": "Karaoke", "cost": "free" }, { "time": "21:00", "event": "Karaoke", "cost": "free" },
{ "time": "22:00", "event": "Silent Disco", "cost": "free" } { "time": "22:00", "event": "Silent Disco", "cost": "free" }
], ],
"Thursday 14th": [ "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": "19:00", "event": "Shrek 2 Screening", "cost": "free" },
{ "time": "20:00", "event": "Live Karaoke", "cost": "free" }, { "time": "20:00", "event": "Live Karaoke", "cost": "free" },
{ "time": "22:00", "event": "Silent Disco", "cost": "free" } { "time": "22:00", "event": "Silent Disco", "cost": "free" }

115
src/data/i18n.js Normal file
View File

@ -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",
},
},
};

View File

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

View File

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

View File

@ -1,21 +1,11 @@
--- ---
import data from '/src/data/en-program.json';
import Layout from '@layouts/Layout.astro'; 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> </Layout>
<style> <style>

8
src/pages/en/about.astro Normal file
View File

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

16
src/pages/en/index.astro Normal file
View File

@ -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>

View File

@ -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>

View File

@ -7,10 +7,10 @@ import Hero from '@components/Hero.astro';
import Vors from '@components/Vors.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> </Layout>

View File

@ -1,25 +1,11 @@
--- ---
import data from '/src/data/program.json';
import Layout from '@layouts/Layout.astro'; 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> </Layout>
<style> <style>