diff --git a/astro.config.mjs b/astro.config.mjs index e77a97e..25c2a34 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -18,4 +18,8 @@ export default defineConfig({ adapter: node({ mode: 'standalone', }), + i18n: { + defaultLocale: 'en', + locales: ['en', 'de'], + }, }); diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue index 96cc0df..3a4edf6 100644 --- a/src/components/Calendar.vue +++ b/src/components/Calendar.vue @@ -31,6 +31,16 @@ import FullCalendar from '@fullcalendar/vue3'; import dayGridPlugin from '@fullcalendar/daygrid'; import iCalendarPlugin from '@fullcalendar/icalendar'; import listPlugin from '@fullcalendar/list'; +import { getUiTranslations } from '../i18n/ui/ui-i18n-helper'; + +const props = defineProps({ + locale: { + type: String, + default: 'en', + }, +}); + +const t = getUiTranslations(props.locale); // --- Popover State & Logic --- @@ -162,13 +172,13 @@ const calendarOptions = computed(() => ({ url: '/api/get-calendar?source=pretix', format: 'ics', color: '#3788d8', - label: 'Workshops', + label: t.calendar.workshops, }, { url: '/api/get-calendar?source=events', format: 'ics', color: '#f89538', - label: 'Open Events', + label: t.calendar.openEvents, }, ], headerToolbar: { diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 0afe0db..040de11 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,5 +1,10 @@ --- import { Icon } from 'astro-icon/components'; +import { getUiTranslations } from '../i18n/ui/ui-i18n-helper'; +import { getRelativeLocaleUrl } from 'astro:i18n'; + +const locale = Astro.currentLocale ?? 'en'; +const t = getUiTranslations(locale); --- diff --git a/src/components/LanguageToggle.vue b/src/components/LanguageToggle.vue new file mode 100644 index 0000000..a3392a8 --- /dev/null +++ b/src/components/LanguageToggle.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 5a7fb48..bc7ffd4 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -4,18 +4,20 @@
+ - +
@@ -24,7 +26,19 @@ import { ref, onMounted } from 'vue'; import Status from './Status.vue'; import ThemeToggle from './ThemeToggle.vue'; +import LanguageToggle from './LanguageToggle.vue'; import HamburgerButton from './HamburgerButton.vue'; +import { getRelativeLocaleUrl } from 'astro:i18n'; +import { getUiTranslations } from '../i18n/ui/ui-i18n-helper'; + +const props = defineProps({ + locale: { + type: String, + required: true, + }, +}); + +const t = getUiTranslations(props.locale); const doorStatus = ref(null); @@ -35,27 +49,27 @@ onMounted(async () => { const links = [ { - name: 'Home', - path: '/', + name: t.navbar.home, + path: `${getRelativeLocaleUrl(props.locale, '/')}`, }, { - name: 'About', - path: '/about', + name: t.navbar.about, + path: `${getRelativeLocaleUrl(props.locale, '/about')}`, }, { - name: 'Visit', - path: '/visit', + name: t.navbar.visit, + path: `${getRelativeLocaleUrl(props.locale, '/visit')}`, }, { - name: 'Contact', - path: '/contact', + name: t.navbar.contact, + path: `${getRelativeLocaleUrl(props.locale, '/contact')}`, }, { - name: 'Events', - path: '/events', + name: t.navbar.events, + path: `${getRelativeLocaleUrl(props.locale, '/events/')}`, }, { - name: 'Wiki', + name: t.navbar.wiki, path: 'https://wiki.munichmakerlab.de/', }, ]; @@ -124,6 +138,11 @@ const toggleCollapse = () => { color: var(--fg); margin-right: 4px; } + + .language-toggle-mobile { + color: var(--fg); + margin-right: 4px; + } } /* Desktop Menu */ @@ -156,13 +175,14 @@ const toggleCollapse = () => { .links { display: flex; - gap: 3vw; + gap: 2vw; } a { text-decoration: none; color: white; align-self: flex-end; + white-space: nowrap; } .theme-toggle { @@ -170,5 +190,11 @@ const toggleCollapse = () => { align-self: flex-end; filter: drop-shadow(1px 1px 0 #333333); } + + .language-toggle { + color: white; + align-self: flex-end; + filter: drop-shadow(1px 1px 0 #333333); + } } diff --git a/src/components/Post.vue b/src/components/Post.vue index 9cdaa6e..eae4c03 100644 --- a/src/components/Post.vue +++ b/src/components/Post.vue @@ -1,7 +1,7 @@