feat: add footer

.eslintrc.js

@@ -17,8 +17,8 @@ module.exports = {
     'yml/quotes': ['error', { prefer: 'single' }],
   },
   settings: {
-    // 'vue-i18n': {
-    //   localeDir: './locales/*.json',
-    // },
+    'vue-i18n': {
+      localeDir: './locales/*.json',
+    },
   },
 }

components/AppLink.vue

@@ -0,0 +1,64 @@
+<template>
+  <a
+    v-if="to.match(/^((ftp|http(s)?):\/\/|(mailto):)/)"
+    class="items-center inline-flex rounded"
+    :class="{ 'text-link-dark dark:text-link-bright': isColored }"
+    :href="to"
+    :rel="
+      [...(nofollow ? ['nofollow'] : []), 'noopener', 'noreferrer'].join(' ')
+    "
+    target="_blank"
+    @click="$emit('click')"
+  >
+    <FontAwesomeIcon
+      v-if="iconId"
+      :class="{ 'mr-2': $slots.default }"
+      :icon="iconId"
+    />
+    <slot />
+  </a>
+  <nuxt-link
+    v-else
+    :append="append"
+    class="rounded"
+    :class="{ 'text-link-dark dark:text-link-bright': isColored }"
+    :to="to"
+    @click.native="$emit('click')"
+  >
+    <FontAwesomeIcon
+      v-if="iconId"
+      :class="{ 'mr-2': $slots.default }"
+      :icon="iconId"
+    />
+    <slot />
+  </nuxt-link>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    append: {
+      default: false,
+      type: Boolean,
+    },
+    iconId: {
+      default: undefined,
+      type: Array as PropType<string[] | undefined>,
+    },
+    isColored: {
+      default: true,
+      type: Boolean,
+    },
+    nofollow: {
+      default: false,
+      type: Boolean,
+    },
+    to: {
+      required: true,
+      type: String,
+    },
+  },
+})
+</script>

components/loader/LoaderImage.vue

@@ -0,0 +1,61 @@
+<template>
+  <img
+    v-if="srcWhenLoaded"
+    :alt="alt"
+    :class="{ 'rounded-full': rounded }"
+    :src="srcWhenLoaded"
+  />
+  <div v-else>
+    <!-- Wrapping div is required as target for class names defined on the linking element. -->
+    <LoaderIndicatorPing />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    alt: {
+      required: true,
+      type: String,
+    },
+    rounded: {
+      default: undefined,
+      type: Boolean as PropType<boolean | undefined>,
+    },
+    src: {
+      required: true,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      srcWhenLoaded: undefined as string | undefined,
+    }
+  },
+  async fetch() {
+    await this.updateSource()
+  },
+  watch: {
+    async src() {
+      await this.updateSource()
+    },
+  },
+  methods: {
+    async updateSource() {
+      this.srcWhenLoaded = process.server
+        ? this.src
+        : await new Promise<string>((resolve) => {
+            const img = new Image()
+
+            img.onload = () => {
+              resolve(img.src)
+            }
+
+            img.src = this.src
+          })
+    },
+  },
+})
+</script>

components/loader/indicator/LoaderIndicatorPing.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex h-full items-center justify-center">
+    <div
+      class="animate-ping bg-gray-500 h-1/2 rounded-full w-1/2"
+      :title="$t('globalLoading')"
+    />
+  </div>
+</template>

layouts/default.vue

@@ -1,10 +1,5 @@
 <template>
-  <div>
-    <main>
-      <nuxt />
-    </main>
-    <!-- <Footer /> -->
-  </div>
+  <nuxt />
 </template>
 
 <script lang="ts">

nuxt.config.js

@@ -215,10 +215,14 @@ export default {
         },
         locales: LOCALES,
         vueI18n: {
-          // messages: {
-          //   de: localeDe,
-          //   en: localeEn,
-          // },
+          messages: {
+            de: {
+              globalLoading: 'Lade...',
+            },
+            en: {
+              globalLoading: 'Loading...',
+            },
+          },
           silentFallbackWarn: true,
         },
         vueI18nLoader: true,

package.json

@@ -23,6 +23,7 @@
     "@nuxtjs/robots": "2.5.0",
     "@nuxtjs/sitemap": "2.4.0",
     "@tailwindcss/typography": "0.4.1",
+    "consola": "2.15.3",
     "core-js": "3.18.2",
     "nuxt": "2.15.8",
     "nuxt-healthcheck": "1.0.1",