feat: add i18n

app/router.options.ts

@@ -1,14 +1,59 @@
-import type {RouterConfig} from "@nuxt/schema";
+import type {RouterConfig} from '@nuxt/schema'
 
+function findHashPosition(hash: string): { el: any, behavior: ScrollBehavior, top: number } | undefined {
+    const el = document.querySelector(hash)
+    if (el) {
+        const top = 60
+
+        return {
+            el: hash,
+            behavior: 'smooth',
+            top,
+        }
+    }
+}
+
+// https://router.vuejs.org/api/#routeroptions
 export default <RouterConfig>{
-    async scrollBehavior(to, from, savedPosition) {
+    scrollBehavior(to, from, savedPosition) {
+        const nuxtApp = useNuxtApp()
+
+        if (history.state && history.state.stop)
+            return
+
+        if (history.state && history.state.smooth) {
+            return {
+                el: history.state.smooth,
+                behavior: 'smooth',
+            }
+        }
+
+
         if (savedPosition) {
-            return savedPosition;
+
+            return new Promise((resolve) => {
+                nuxtApp.hooks.hookOnce('page:finish', () => {
+                    setTimeout(() => resolve(savedPosition), 250)
+                })
+            })
         }
-        if (to.path.startsWith('/blog/')) {
-            return {top: 0};
-        } else if (to.path.startsWith('/blog')) {
-            return {top: 0};
+
+        if (to.hash) {
+            return new Promise((resolve) => {
+                if (to.path === from.path) {
+                    setTimeout(() => resolve(findHashPosition(to.hash)), 50)
+                } else {
+                    nuxtApp.hooks.hookOnce('page:finish', () => {
+                        setTimeout(() => resolve(findHashPosition(to.hash)), 50)
+                    })
+                }
+            })
         }
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({top: 0})
+            }, 250)
+        })
     },
-};
+}

components/Footer.vue

@@ -1,38 +1,47 @@
 <template>
   <div class="relative bg-jm-secondary-grey-lighter mt-40">
-    <Background height="127px" src="footer-top.svg" position="top" parallax="to-left" />
+    <Background height="127px" parallax="to-left" position="top" src="footer-top.svg"/>
 
     <div class="relative z-10">
 
 
-      <UContainer class="relative py-10 z-10" :ui="{'constrained': 'max-w-2xl'}">
+      <UContainer :ui="{'constrained': 'max-w-2xl'}" class="relative py-10 z-10">
         <div class="flex justify-between items-end">
           <div>
             <address class="not-italic">
               JOTT.MEDIA GmbH<br>
               Bahnhofstraße 33<br>
               31675 Bückeburg<br>
               <br>
-              <nuxt-link href="tel:+4957229184984">+49 5722 9184984</nuxt-link><br>
+              <nuxt-link href="tel:+4957229184984">+49 5722 9184984</nuxt-link>
+              <br>
               <nuxt-link href="mailto:hallo@jott.media">hallo@jott.media</nuxt-link>
             </address>
           </div>
           <div class="text-right">
-            <nuxt-link to="/imprint" class="block font-[800] text-jm-primary-green uppercase">.Impressum</nuxt-link>
-            <nuxt-link to="/privacy" class="block font-[800] text-jm-primary-green uppercase">.Datenschutz</nuxt-link>
+            <nuxt-link :to="localePath({path: 'imprint'})" class="block font-[800] text-jm-primary-green uppercase">.{{
+                t('imprint')
+              }}
+            </nuxt-link>
+            <nuxt-link :to="localePath({path: 'privacy'})" class="block font-[800] text-jm-primary-green uppercase">.{{
+                t('privacy')
+              }}
+            </nuxt-link>
           </div>
         </div>
       </UContainer>
 
-      <Background width="400px" height="400px" src="footer-box.png" position="bottomRight" :out="false" />
+      <Background :out="false" height="400px" position="bottomRight" src="footer-box.png" width="400px"/>
     </div>
 
     <div class="bg-jm-primary-green text-sm py-5">
       <UContainer :ui="{'constrained': 'max-w-2xl'}">
-        <p>© {{ new Date().getFullYear() }} JOTT.MEDIA – Alle Rechte vorbehalten</p>
+        <p>© {{ new Date().getFullYear() }} JOTT.MEDIA – {{ t('rights') }}</p>
       </UContainer>
     </div>
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
+const {t} = useI18n()
+const localePath = useLocalePath()
 </script>

components/Image.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="image-wrapper" :class="{'shine': shine}" :style="parallax ? {perspective: '2000px'} : {}">
-    <img ref="image" :style="imageStyle" :src="getImageAbsolutePath(src)" :alt="alt" class="w-full h-full block m-0 cover bg-center" />
+  <div :class="{'shine': shine}" :style="parallax ? {perspective: '2000px'} : {}" class="image-wrapper">
+    <img ref="image" :alt="alt" :src="getImageAbsolutePath(src)" :style="imageStyle"
+         class="w-full h-full block m-0 cover bg-center"/>
     <UContainer :ui="{'constrained': 'max-w-2xl'}">
       <Paragraph v-if="hint != null" class="text-jm-primary-gre italic text-sm !mb-0">{{ hint }}</Paragraph>
     </UContainer>
   </div>
 </template>
 
-<script setup lang="ts">
-import { useParallax } from '@vueuse/core'
+<script lang="ts" setup>
+import {useParallax} from '@vueuse/core'
 
 const image = ref(null)
 const parallax = reactive(useParallax(image))
 const imageStyle = computed(() => {
-  const style = {};
+  const style: Record<string, string> = {};
 
   if (props.cover) {
     style.objectFit = 'cover';
@@ -59,9 +60,9 @@ const props = defineProps({
   },
 })
 
-const glob = import.meta.glob<Record<string, string>>('@/assets/images/**/*', { eager: true })
+const glob = import.meta.glob<Record<string, string>>('@/assets/images/**/*', {eager: true})
 const getImageAbsolutePath = (imageName: string): string | undefined => {
-  if(!props.publicSrc) {
+  if (!props.publicSrc) {
     return glob[`/assets/images/${imageName}`]['default'];
   }
 
@@ -71,6 +72,7 @@ const getImageAbsolutePath = (imageName: string): string | undefined => {
 
 <style lang="scss">
 @use 'sass:color';
+
 $color: #fff;
 .shine {
   position: relative;
@@ -79,8 +81,8 @@ $color: #fff;
   &::before {
     background: linear-gradient(
             to right,
-            fade_out($color, 1) 0%,
-            fade_out($color, 0.7) 100%
+            color.scale($color, $alpha: -70%) 0%,
+            color.scale($color, $alpha: -30%) 100%
     );
     content: "";
     display: block;

components/Menu.vue

@@ -1,42 +1,53 @@
 <template>
-  <div class="fixed flex flex-col justify-center -bottom-2 sm:bottom-0 right-4 sm:right-8 z-50">
-    <button @click="open = !open"
-            class="h-10 w-10 sm:h-12 sm:w-12 flex justify-center items-center bg-jm-contrast-black transition-all duration-700 bg-opacity-70 hover:bg-opacity-100  rounded-full z-50">
+  <UContainer :ui="{'constrained': 'sm:max-w-6xl', padding: 'space-x-2 sm:space-x-4'}"
+              class="fixed flex flex-col justify-center -bottom-2 sm:bottom-0 right-4 sm:right-8 z-50">
+    <button
+        class="h-10 w-10 sm:h-12 sm:w-12 flex justify-center items-center bg-jm-contrast-black transition-all duration-700 bg-opacity-70 hover:bg-opacity-100  rounded-full z-50"
+        @click="open = !open">
       <UIcon v-if="!open" class="text-lg sm:text-2xl text-jm-primary-brown transition-all z-50" name="i-mdi-menu"/>
       <UIcon v-else class="text-lg sm:text-2xl text-jm-primary-brown transition-all z-50" name="i-mdi-close-thick"/>
     </button>
     <div class="relative py-3 mx-auto ">
       <Center>
-        <transition name="page" mode="in-out">
+        <transition mode="in-out" name="page">
           <div
               v-if="open"
               class="top-0 left-0 w-screen h-screen flex flex-col justify-start  z-30 bg-jm-primary-brown fixed">
-            <UContainer class="my-8" :ui="{'constrained': 'sm:max-w-6xl'}">
+
+
+            <UContainer :ui="{'constrained': 'sm:max-w-8xl'}" class="my-8">
+              <button :class="{ 'font-bold': currentLocale === 'de' }" @click="setLocale('de')">DE</button>
+              |
+              <button :class="{ 'font-bold': currentLocale === 'en' }" @click="setLocale('en')">EN</button>
               <Center>
-                <NuxtLink to="/" @click="open = false" class="inline-block no-underline w-full mt-2 sm:w-[325px] border-0">
-                  <Image src="logo-overlay.svg" alt="JOTT.MEDIA GmbH" class="w-full" :shine="false"
-                         :parallax="false"/>
+                <NuxtLink :to="localePath({path: '/'})"
+                          class="inline-block no-underline w-full mt-2 xl:mr-3 sm:w-[325px] border-0"
+                          @click="open = false">
+                  <Image :parallax="false" :shine="false" alt="JOTT.MEDIA GmbH" class="w-full"
+                         src="logo-overlay.svg"/>
                 </NuxtLink>
               </Center>
             </UContainer>
 
-            <UContainer class="sm:mt-12 flex flex-col sm:flex-row justify-around"
-                        :ui="{'constrained': 'w-full', padding: 'space-x-2 sm:space-x-4'}">
+            <UContainer :ui="{'constrained': 'w-full', padding: 'space-x-2 sm:space-x-4'}"
+                        class="sm:mt-12 flex flex-col sm:flex-row justify-around">
               <ul class="uppercase font-extrabold text-left text-xl xl:text-3xl space-y-4 sm:space-y-8 text-jm-contrast-black">
                 <li>
-                  <NuxtLink @click="open = false" to="/">.Startseite</NuxtLink>
+                  <NuxtLink :to="localePath({ name: 'index' })" @click="open = false">{{ t('menu.home') }}</NuxtLink>
                 </li>
                 <li>
-                  <NuxtLink @click="open = false" to="/blog">.Blog</NuxtLink>
+                  <NuxtLink :to="localePath({name: 'blog'})" @click="open = false">{{ t('menu.blog') }}</NuxtLink>
                 </li>
               </ul>
               <div class="text-left sm:text-right mt-8 sm:mt-0">
-                  <nuxt-link to="/privacy" @click="open = false" class="block font-extrabold text-sm sm:text-base">
-                    Datenschutz
-                  </nuxt-link>
-                  <nuxt-link to="/imprint" @click="open = false" class="block font-extrabold text-sm sm:text-base">
-                    Impressum
-                  </nuxt-link>
+                <nuxt-link :to="localePath({path: 'privacy'})" class="block font-extrabold text-sm sm:text-base"
+                           @click="open = false">
+                  .{{ t('privacy') }}
+                </nuxt-link>
+                <nuxt-link :to="localePath({path: 'imprint'})" class="block font-extrabold text-sm sm:text-base"
+                           @click="open = false">
+                  .{{ t('imprint') }}
+                </nuxt-link>
                 <address class="not-italic text-sm  mt-6 sm:mt-16">
                   JOTT.MEDIA GmbH<br>
                   Bahnhofstraße 33<br>
@@ -48,13 +59,14 @@
                   <br>
                   <br>
                   <div class="text-left sm:text-right flex sm:justify-end items-center space-x-1">
-                    <p class="pr-2">Folge uns:</p>
-                    <NuxtLink href="https://www.instagram.com/jott.media/" target="_blank"
-                              class="inline-block no-underline border-0">
+                    <p class="pr-2"> {{ t('menu.follow') }}</p>
+                    <NuxtLink class="inline-block no-underline border-0" href="https://www.instagram.com/jott.media/"
+                              target="_blank">
                       <UIcon class="text-[#1E1E1E] text-2xl block " name="i-mdi-instagram"/>
                     </NuxtLink>
-                    <NuxtLink href="https://de.linkedin.com/company/jottmedia" target="_blank"
-                              class="inline-block no-underline border-0">
+                    <NuxtLink class="inline-block no-underline border-0"
+                              href="https://de.linkedin.com/company/jottmedia"
+                              target="_blank">
                       <UIcon class="text-[#1E1E1E] text-2xl block" name="i-mdi-linkedin"/>
                     </NuxtLink>
                   </div>
@@ -65,8 +77,13 @@
         </transition>
       </Center>
     </div>
-  </div>
+  </UContainer>
 </template>
-<script setup>
+<script lang="ts" setup>
+const {t, locale, setLocale} = useI18n()
+const localePath = useLocalePath()
 const open = ref(false)
+const currentLocale = computed(() => locale.value)
+
+
 </script>

content.config.ts

@@ -1,14 +1,36 @@
-import {defineCollection, defineContentConfig} from '@nuxt/content'
+import {defineCollection, defineContentConfig, z} from '@nuxt/content';
+
+const locales = ['de', 'en'];
 
 export default defineContentConfig({
-    collections: {
-        blog: defineCollection({
-            type: 'page',
-            source: 'blog/**.md',
-        }),
-        team: defineCollection({
-            type: 'page',
-            source: 'team/**.md',
-        })
-    }
-})
+    collections: Object.fromEntries(
+        locales.flatMap((locale) => [
+            [
+                `team_${locale}`,
+                defineCollection({
+                    source: `${locale}/team/*.md`,
+                    type: 'page',
+                    schema: z.object({
+                        title: z.string(),
+                        description: z.string(),
+                        slug: z.string(),
+                    }),
+                }),
+            ],
+            [
+                `articles_${locale}`,
+                defineCollection({
+                    source: `${locale}/blog/**/*.md`,
+                    type: 'page',
+                    schema: z.object({
+                        title: z.string(),
+                        slug: z.string(),
+                        description: z.string(),
+                        url: z.string().url(),
+                        date: z.date(),
+                    }),
+                }),
+            ]
+        ]),
+    ),
+});