refactor: Abstract duplicate skip link and favicon code

Author: jackdomleo7

app/app.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page">
-    <a href="#maincontent" class="sr-only sr-only--focusable skip-link">Skip to main content</a>
     <Navigation />
     <main id="maincontent">
       <NuxtLayout />
@@ -12,16 +11,6 @@
 <script lang="ts" setup>
 import Navigation from './components/Navigation.vue';
 import SiteFooter from './components/SiteFooter.vue';
-
-useHead({
-  htmlAttrs: {
-    lang: 'en-GB'
-  },
-  link: [
-    { rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon.ico' },
-    { rel: 'icon', type: 'image/png', href: '/icon.png' }
-  ],
-})
 </script>
 
 <style lang="scss" scoped>
@@ -39,18 +28,4 @@ useHead({
     }
   }
 }
-
-.skip-link {
-  display: block;
-  position: fixed !important;
-  top: 1rem;
-  left: 1rem;
-  z-index: 9999;
-  padding: 0.5rem 1rem !important;
-  background-color: var(--color-fg1);
-  color: var(--color-accent);
-  border-radius: 0.25rem;
-  font-weight: 700;
-  text-decoration: none;
-}
 </style>

app/components/Navigation.vue

@@ -1,4 +1,5 @@
 <template>
+  <a href="#maincontent" class="sr-only sr-only--focusable skip-link">Skip to main content</a>
   <nav 
     class="nav" 
     :class="{ 'nav--sticky': !navIsAtTop || isMobileNavOpen }"
@@ -321,6 +322,19 @@ function toggleMobileNav (open: boolean): void {
 </script>
 
 <style lang="scss" scoped>
+.skip-link.sr-only {
+  position: fixed !important;
+  top: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.5rem 1rem !important;
+  background-color: var(--color-fg1);
+  color: var(--color-accent);
+  border-radius: 0.25rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+
 $navBreak: $responsive-large-tablet;
 $navHeight: 4rem;
 

app/error.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page">
-    <a href="#maincontent" class="sr-only sr-only--focusable skip-link">Skip to main content</a>
     <Navigation />
     <main id="maincontent">
       <div class="container container--thinner error-page">
@@ -27,14 +26,7 @@ defineProps<{
 }>();
 
 useHead({
-  title: '404 — Page Not Found | Jack Domleo',
-  htmlAttrs: {
-    lang: 'en-GB'
-  },
-  link: [
-    { rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon.ico' },
-    { rel: 'icon', type: 'image/png', href: '/icon.png' }
-  ],
+  title: 'Page Not Found',
 });
 
 function handleGoHome() {
@@ -58,20 +50,6 @@ function handleGoHome() {
   }
 }
 
-.skip-link {
-  display: block;
-  position: fixed !important;
-  top: 1rem;
-  left: 1rem;
-  z-index: 9999;
-  padding: 0.5rem 1rem !important;
-  background-color: var(--color-fg1);
-  color: var(--color-accent);
-  border-radius: 0.25rem;
-  font-weight: 700;
-  text-decoration: none;
-}
-
 .error-page {
   display: flex;
   flex-direction: column;

nuxt.config.ts

@@ -10,6 +10,13 @@ export default defineNuxtConfig({
   ssr: true,
   app: {
     head: {
+      htmlAttrs: {
+        lang: 'en-GB'
+      },
+      link: [
+        { rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon.ico' },
+        { rel: 'icon', type: 'image/png', href: '/icon.png' }
+      ],
       meta: [
         {
           // Content-Security-Policy restricts which resources the browser is allowed to load. GitHub Pages does not support custom response headers, so this must be set as a <meta http-equiv> tag instead. Note: frame-ancestors is ignored by browsers when set via a meta tag (it only works as a response header), but all other directives are honoured. Key directives: