Compare commits

...

2 Commits

Author SHA1 Message Date
fa33134ea0 Merge pull request 'add i18n support' (#1) from translation-vibe-code into main
Reviewed-on: #1
2025-07-02 14:42:08 +02:00
782447bb12 add i18n support
vibe coded. should not be used but I'll commit it to a separate branch just in case
2025-06-23 22:50:03 +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">
<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>
STUDiO 2025 er en studentfestival som arrangeres under fadderuka i Oslo fra 11. til 15. august på Chateau Neuf.
</p>
<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>
<p>{t.p1}</p>
<p>{t.p2}</p>
<p>{t.p3}</p>
<p>{t.p4}</p>
</div>
</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">
<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>
<p>På <a href="https://neuf.no/praktisk#adkomst">Chateau Neuf</a>, Majorstuen, Oslo</p>
<strong>{t.q1} </strong>
<p set:html={t.a1}></p>
</li>
<li>
<strong>Hvem er festivalen for?</strong>
<p>Alle nye og gamle studenter, men arrangementene er åpne for alle som ønsker å delta.</p>
<strong>{t.q2}</strong>
<p>{t.a2}</p>
</li>
<li>
<strong>Koster det penger å delta?</strong>
<p>Gratis inngang hver dag og nesten alle arrangementene er gratis. Kun 2 arrangementer krever kjøp av billett.</p>
<strong>{t.q3}</strong>
<p>{t.a3}</p>
</li>
<li>
<strong>Må jeg har med student ID for å komme inn?</strong>
<p>Nei, men generell legitimasjon er påkrevd.</p>
<strong>{t.q4}</strong>
<p>{t.a4}</p>
</li>
<li>
<strong>Hva er alder årsgrensen på festivalen?</strong>
<p>Alt er ID18+</p>
<strong>{t.q5}</strong>
<p>{t.a5}</p>
</li>
</ul>
</section>

View File

@ -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}/>
<p>Studentfestivalen i Oslo 2025</p>
<Image src={logo} alt={t.org} class="hero-logo" width={48} height={48}/>
<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">

View File

@ -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>
<Image src={logo} alt="Studentfestivalen i Oslo Logo" width={250} height={250}/>
<h1 class="text-4xl">{t.title}</h1>
<Image src={logo} alt={t.alt} width={250} height={250}/>
</section>

View File

@ -1,11 +1,7 @@
---
const 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" },
];
import { translations } from '../data/i18n.js';
const { lang = 'no' } = Astro.props;
const links = translations[lang].links;
---
<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">
<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="/program">Program</a></li>
<li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">Bli frivillig</a></li>
<li><a href="/about">Om</a></li>
<li><a href={lang === 'en' ? '/en/' : '/'}>{t.home}</a></li>
<li><a href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</a></li>
<li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</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">
Norsk / English
</button>
<a href={langSwitchPath} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
{t.langSwitch}
</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;

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',
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
});
---
<div class="flex gap-4 flex-col">
{data ? (
<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 => (
<li key={event.id}>
<a href={event.url}>
<h2>{event.title}</h2>
{event.subtitle && <p>{event.subtitle}</p>}
<p>
{event.nextOccurrence.start && formatDate(event.nextOccurrence.start)}{" "}
{event.nextOccurrence.venueCustom || `${event.nextOccurrence.venue.preposition} ${event.nextOccurrence.venue.title}`}
</p>
</a>
{items.map((item) => {
const price = item.price || item.cost;
return (
<li class="item">
{item.time} - {item.event} - {item.url ? (
<a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a>
) : (
price
)}
</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>

View File

@ -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">
Sett på låta for litt stemning før dere kommer🔥
{t.text}
</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>

View File

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

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

View File

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

View File

@ -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>
{Object.entries(data).map(([dayName, items], index) => (
<div class="day">
<h2>{dayName}</h2>
<ul>
{items.map((item, itemIndex) => (
<li class="item">
{item.time} - {item.event} - {item.price}
</li>
))}
</ul>
</div>
))}
<Layout lang="en">
<Program lang="en" data={data} />
</Layout>
<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';
---
<Layout>
<Hero />
<Links />
<Program />
<FAQ />
<Vors />
<Layout lang="no">
<Hero lang="no" />
<Links lang="no" />
<Program lang="no" />
<FAQ lang="no" />
<Vors lang="no" />
</Layout>

View File

@ -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>
{Object.entries(data).map(([dayName, items], index) => (
<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 lang="no">
<Program lang="no" data={data} />
</Layout>
<style>