feat(02-02): create AppFooter, default layout, update app.vue with useLocaleHead
- AppFooter with copyright + Gitea/LinkedIn/Fiverr social icons (rel=noopener noreferrer) - Default layout wraps header + slot + footer with min-h-screen flex - app.vue uses NuxtLayout + useLocaleHead for global hreflang/canonical - Fixed a11y.github -> a11y.gitea in both locale files
This commit is contained in:
+6
-3
@@ -1,13 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { locale } = useI18n()
|
const { locale } = useI18n()
|
||||||
|
const head = useLocaleHead({ addSeoAttributes: true })
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
htmlAttrs: { lang: locale },
|
htmlAttrs: { lang: locale },
|
||||||
|
link: computed(() => head.value.link || []),
|
||||||
|
meta: computed(() => head.value.meta || []),
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<NuxtLayout>
|
||||||
<NuxtRouteAnnouncer />
|
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
</div>
|
</NuxtLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const socialLinks = [
|
||||||
|
{ name: 'gitea', url: 'https://gitea.kamisama.ovh/kayjaydee', icon: 'simple-icons:gitea', ariaKey: 'a11y.gitea' },
|
||||||
|
{ name: 'linkedin', url: 'https://linkedin.com/in/killian-dal-cin', icon: 'simple-icons:linkedin', ariaKey: 'a11y.linkedin' },
|
||||||
|
{ name: 'fiverr', url: 'https://www.fiverr.com/users/mr_kayjaydee', icon: 'simple-icons:fiverr', ariaKey: 'a11y.fiverr' },
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<footer class="py-6 bg-gray-100 dark:bg-gray-800">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{{ t('footer.copyright') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<a
|
||||||
|
v-for="link in socialLinks"
|
||||||
|
:key="link.name"
|
||||||
|
:href="link.url"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
:aria-label="t(link.ariaKey)"
|
||||||
|
class="min-w-11 min-h-11 inline-flex items-center justify-center rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 transition-colors"
|
||||||
|
>
|
||||||
|
<UIcon :name="link.icon" class="w-5 h-5 text-gray-500 dark:text-gray-400 hover:text-primary-500 transition-colors duration-150" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen flex flex-col">
|
||||||
|
<AppHeader />
|
||||||
|
<main class="flex-1">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
<AppFooter />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
+1
-1
@@ -28,7 +28,7 @@
|
|||||||
"langToggle": "Change language \u2014 currently English",
|
"langToggle": "Change language \u2014 currently English",
|
||||||
"themeDark": "Switch to light mode",
|
"themeDark": "Switch to light mode",
|
||||||
"themeLight": "Switch to dark mode",
|
"themeLight": "Switch to dark mode",
|
||||||
"github": "Killian Dalcin on GitHub (opens in new tab)",
|
"gitea": "Killian Dalcin on Gitea (opens in new tab)",
|
||||||
"linkedin": "Killian Dalcin on LinkedIn (opens in new tab)",
|
"linkedin": "Killian Dalcin on LinkedIn (opens in new tab)",
|
||||||
"fiverr": "Killian Dalcin on Fiverr (opens in new tab)"
|
"fiverr": "Killian Dalcin on Fiverr (opens in new tab)"
|
||||||
},
|
},
|
||||||
|
|||||||
+1
-1
@@ -28,7 +28,7 @@
|
|||||||
"langToggle": "Changer la langue \u2014 actuellement Francais",
|
"langToggle": "Changer la langue \u2014 actuellement Francais",
|
||||||
"themeDark": "Activer le mode clair",
|
"themeDark": "Activer le mode clair",
|
||||||
"themeLight": "Activer le mode sombre",
|
"themeLight": "Activer le mode sombre",
|
||||||
"github": "GitHub de Killian Dalcin (nouvelle fenetre)",
|
"gitea": "Gitea de Killian Dalcin (nouvelle fenetre)",
|
||||||
"linkedin": "LinkedIn de Killian Dalcin (nouvelle fenetre)",
|
"linkedin": "LinkedIn de Killian Dalcin (nouvelle fenetre)",
|
||||||
"fiverr": "Fiverr de Killian Dalcin (nouvelle fenetre)"
|
"fiverr": "Fiverr de Killian Dalcin (nouvelle fenetre)"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user