add content about page

.vscode/settings.json

@@ -2,5 +2,6 @@
   "tailwindCSS.includeLanguages": {
     "vue": "html",
     "vue-html": "html"
-  }
+  },
+  "editor.formatOnSave": true
 }

components/Footer.vue

@@ -1,30 +1,30 @@
 <template>
   <div
-    class="box-content sticky bottom-0 z-40 flex flex-shrink-0 h-12 border-t-3 bg-secondary-100 border-b-3"
+    class="box-content sticky bottom-0 z-40 flex flex-shrink-0 h-12  border-t-3 bg-secondary-100 border-b-3"
   >
     <!-- Theme switcher -->
     <button
-      class="box-content relative flex-shrink-0 w-12 overflow-hidden border-r-3 sm:border-r-0 sm:border-l-3 sm:order-2"
+      class="box-content relative flex-shrink-0 w-12 overflow-hidden  border-r-3 sm:border-r-0 sm:border-l-3 sm:order-2"
       @click="toggleDarkMode"
     >
       <div
-        class="absolute top-0 left-0 flex items-center justify-center w-full h-full transition-transform duration-300 dark:translate-x-12 dark:-translate-y-12 dark:rotate-180"
+        class="absolute top-0 left-0 flex items-center justify-center w-full h-full transition-transform duration-300  dark:translate-x-12 dark:-translate-y-12 dark:rotate-180"
       >
         <SunIcon />
       </div>
       <div
-        class="absolute top-0 left-0 flex items-center justify-center w-full h-full transition-transform duration-300 -rotate-180 -translate-x-12 translate-y-12 dark:translate-x-0 dark:translate-y-0 dark:rotate-0"
+        class="absolute top-0 left-0 flex items-center justify-center w-full h-full transition-transform duration-300 -rotate-180 -translate-x-12 translate-y-12  dark:translate-x-0 dark:translate-y-0 dark:rotate-0"
       >
         <MoonIcon />
       </div>
     </button>
 
     <!-- Language switcher -->
     <div
-      class="box-content relative flex-shrink-0 w-12 overflow-hidden font-semibold border-r-3 sm:border-r-0 sm:border-l-3 sm:order-3 group user-select-none"
+      class="box-content relative flex-shrink-0 w-12 overflow-hidden font-semibold  border-r-3 sm:border-r-0 sm:border-l-3 sm:order-3 group user-select-none"
     >
       <NuxtLink
-        class="w-full h-full uppercase transition-opacity duration-300 hover-hover:opacity-0 hover-hover:group-hover:opacity-100"
+        class="w-full h-full uppercase transition-opacity duration-300  hover-hover:opacity-0 hover-hover:group-hover:opacity-100"
         :to="switchLocalePath($i18n.locale === 'de' ? 'en' : 'de')"
       >
         <transition name="language-switcher-1">
@@ -47,25 +47,25 @@
       </NuxtLink>
 
       <div
-        class="absolute top-0 left-0 flex items-center justify-center w-full h-full transition-opacity duration-300 opacity-0 pointer-events-none hover-hover:opacity-100 hover-hover:group-hover:opacity-0"
+        class="absolute top-0 left-0 flex items-center justify-center w-full h-full transition-opacity duration-300 opacity-0 pointer-events-none  hover-hover:opacity-100 hover-hover:group-hover:opacity-0"
       >
         <GlobeIcon />
       </div>
     </div>
 
     <!-- Footer Links -->
     <ul
-      class="flex items-center w-full h-full px-5 overflow-x-auto font-semibold uppercase sm:order-1 sm:px-3 lg:px-4"
+      class="flex items-center w-full h-full px-5 overflow-x-auto font-semibold uppercase  sm:order-1 sm:px-3 lg:px-4"
     >
-      <li class="mr-4 lg:mr-6 last:mr-0">
-        <NuxtLink :to="localePath('/imprint')">
-          {{ $t('base.imprint') }}
+      <li
+        v-for="link in footerLinks"
+        :key="link.url"
+        class="mr-4 lg:mr-6 last:mr-0"
+      >
+        <NuxtLink :to="localePath(link.url)">
+          {{ $t(link.label) }}
         </NuxtLink>
       </li>
-
-      <li class="mr-4 lg:mr-6 last:mr-0">
-        <NuxtLink :to="localePath('/about')">{{ $t('base.about') }}</NuxtLink>
-      </li>
     </ul>
   </div>
 </template>
@@ -75,6 +75,20 @@ import { SunIcon, MoonIcon, GlobeIcon } from 'vue-feather-icons'
 
 export default {
   components: { SunIcon, MoonIcon, GlobeIcon },
+  data: () => {
+    return {
+      footerLinks: [
+        {
+          label: 'base.about',
+          url: '/about',
+        },
+        // {
+        //   label: 'base.blog',
+        //   url: '/blog',
+        // },
+      ],
+    }
+  },
   methods: {
     toggleDarkMode() {
       document.body.classList.toggle('dark')

content/de/about.md

@@ -0,0 +1,3 @@
+# Über diese Seite
+
+Lipsum

content/en/about.md

@@ -0,0 +1,3 @@
+## About this Page
+
+Lorem Ipsum

lang/de.js

@@ -2,6 +2,7 @@ export default {
   base: {
     imprint: 'Impressum',
     about: 'Infos',
+    blog: 'Blog',
   },
 
   index: {

lang/en.js

@@ -2,6 +2,7 @@ export default {
   base: {
     imprint: 'Imprint',
     about: 'About',
+    blog: 'Blog',
   },
 
   index: {

nuxt.config.js

@@ -52,10 +52,12 @@ export default {
       {
         code: 'en',
         file: 'en.js',
+        name: 'English',
       },
       {
         code: 'de',
         file: 'de.js',
+        name: 'Deutsch',
       },
     ],
     defaultLocale: 'de',

pages/about.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="p-8">
-    <h1>{{ $t('base.about') }}</h1>
-    <p>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet.
-    </p>
+    <nuxt-content :document="article" />
   </div>
 </template>
+
+<script>
+export default {
+  async asyncData({ $content, i18n }) {
+    const article = await $content(`${i18n.locale}/about`).fetch()
+    return {
+      article,
+    }
+  },
+  beforeMount() {
+    setTimeout(async () => {
+      this.$data.article = await this.$content(
+        `${this.$i18n.locale}/about`
+      ).fetch()
+    }, 100)
+  },
+}
+</script>

pages/blog.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Blog</div>
+</template>