add i18n support
vibe coded. should not be used but I'll commit it to a separate branch just in case
This commit is contained in:
@ -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>
|
||||
@ -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>
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-bold text-xl">Hva skjer i dag?</h2>
|
||||
<p>{currentDate}</p>
|
||||
</div>
|
||||
<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>
|
||||
</li>
|
||||
{data ? (
|
||||
<div class="flex gap-4 flex-col">
|
||||
<div class="flex items-center justify-between">
|
||||
<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>
|
||||
{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>
|
||||
))}
|
||||
</ul>
|
||||
</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>
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user