From 0418315f4de6d8257222fb97479242a127fe424c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Fri, 6 Jan 2023 15:46:20 +0100
Subject: [PATCH] Add error page

---
 app.vue                   | 101 +++++++++-----------------------------
 components/AppError.vue   |  19 +++++++
 composables/useAppHead.js |  77 +++++++++++++++++++++++++++++
 error.vue                 |  50 +++++++++++++++++++
 nuxt.config.ts            |   7 +--
 pages/index.vue           |   4 +-
 6 files changed, 171 insertions(+), 87 deletions(-)
 create mode 100644 components/AppError.vue
 create mode 100644 composables/useAppHead.js
 create mode 100644 error.vue

diff --git a/app.vue b/app.vue
index dda2ee9..fdb8ffe 100644
--- a/app.vue
+++ b/app.vue
@@ -1,103 +1,42 @@
 <template>
 
     <div class="app">
-        <NuxtPage class="app__main"/>
-        <AppFooter class="app__footer"/>
+        <NuxtPage class="app__main" />
+        <AppFooter class="app__footer" />
     </div>
 
 </template>
 
 <script setup>
 
-    // ----------------------------------------------------------------------------
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const pageTitleChunk = useRoute().meta.pageTitleChunk;
+
+    // --------------------------------------------------
     // HEAD
-    // ----------------------------------------------------------------------------
+    // --------------------------------------------------
 
-    const siteTitle = 'Paul Nicoué';
-    const siteUrl = 'https://paulnicoue.com';
-    const pageTitle = useRoute().meta.pageTitleChunk ? `${siteTitle} | ${useRoute().meta.pageTitleChunk}` : siteTitle;
-    const pageUrl = siteUrl + useRoute().path;
-    const metaDescription = 'Intégrateur web et développeur full stack.';
-    const metaImageUrl = `${siteUrl}/images/paul-nicoue-logo-1200x675px.png`;
-
-    useHead({
-        title: pageTitle,
-        meta: [
-            /* Basic metadata */
-            {charset: 'utf-8'},
-            {name: 'viewport', content: 'width=device-width'},
-            /* Name */
-            {id: 'schema_name', itemprop: 'name', content: siteTitle},
-            /* Description */
-            {name: 'description', content: metaDescription},
-            {id: 'schema_description', itemprop: 'description', content: metaDescription},
-            /* Author */
-            {name: 'author', content: siteTitle},
-            /* Image */
-            {id: 'schema_image', itemprop: 'image', content: metaImageUrl},
-            /* Open Graph */
-            {property: 'og:title', content: pageTitle},
-            {property: 'og:description', content: metaDescription},
-            {property: 'og:image', content: metaImageUrl},
-            {property: 'og:image:width', content: '1200'},
-            {property: 'og:image:height', content: '675'},
-            {property: 'og:url', content: pageUrl},
-            {property: 'og:type', content: 'website'},
-            /* Twitter Card */
-            {name: 'twitter:card', content: 'summary_large_image'},
-            {name: 'twitter:title', content: siteTitle},
-            {name: 'twitter:description', content: metaDescription},
-            {name: 'twitter:image', content: metaImageUrl}
-        ],
-        link: [
-            /* Canonical URL */
-            {rel: 'canonical', href: pageUrl},
-            /* Favicon */
-            {rel: 'icon', sizes: 'any', href: 'favicon/paul-nicoue-favicon.ico'},
-            {rel: 'icon', type: 'image/svg+xml', href: 'favicon/paul-nicoue-favicon.svg'},
-            {rel: 'apple-touch-icon', href: 'favicon/paul-nicoue-apple-touch-icon.png'},
-            {rel: 'manifest', href: 'favicon/paul-nicoue.webmanifest'}
-        ],
-        style: [
-            /* Schema */
-            {itemscope: true, itemtype: 'https://schema.org/WebSite', itemref: 'schema_name schema_description schema_image'}
-        ],
-        script: [
-            /* Matomo tracking code */
-            {children: `
-                var _paq = window._paq = window._paq || [];
-                _paq.push(["disableCookies"]);
-                _paq.push(['trackPageView']);
-                _paq.push(['enableLinkTracking']);
-                (function() {
-                    var u="https://matomo.paulnicoue.com/";
-                    _paq.push(['setTrackerUrl', u+'matomo.php']);
-                    _paq.push(['setSiteId', '4']);
-                    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-                    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-                })();
-            `}
-        ]
-    })
+    useAppHead(pageTitleChunk);
     
 </script>
 
 <style lang="scss">
 
-    // ----------------------------------------------------------------------------
+    // --------------------------------------------------
     // MODULES
-    // ----------------------------------------------------------------------------
+    // --------------------------------------------------
 
     @use 'minireset.css';
     @use '~/assets/styles/fonts';
     @use '~/assets/styles/variables';
     @use '~/assets/styles/animations';
 
-    // ----------------------------------------------------------------------------
-    // GENERALITIES
-    // ----------------------------------------------------------------------------
-
-    // Fonts and colors
+    // --------------------------------------------------
+    // FONTS AND COLORS
+    // --------------------------------------------------
 
     body {
         font-family: var(--text-font-family);
@@ -137,7 +76,9 @@
         font-style: italic;
     }
 
-    // Link style
+    // --------------------------------------------------
+    // LINK STYLE
+    // --------------------------------------------------
 
     a {
         color: white;
@@ -158,7 +99,9 @@
         }
     }
 
-    // Layout
+    // --------------------------------------------------
+    // LAYOUT
+    // --------------------------------------------------
 
     .app {
         min-height: 100vh;
diff --git a/components/AppError.vue b/components/AppError.vue
new file mode 100644
index 0000000..89e9a45
--- /dev/null
+++ b/components/AppError.vue
@@ -0,0 +1,19 @@
+<template>
+
+    <main>
+        <button class="app__error" @click="$emit('handleError')">Clear errors</button>
+    </main>
+
+</template>
+
+<script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const emit = defineEmits([
+        'handleError'
+    ]);
+
+</script>
diff --git a/composables/useAppHead.js b/composables/useAppHead.js
new file mode 100644
index 0000000..e41cff4
--- /dev/null
+++ b/composables/useAppHead.js
@@ -0,0 +1,77 @@
+export const useAppHead = (pageTitleChunk) => {
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const siteTitle = 'Paul Nicoué';
+    const siteUrl = 'https://paulnicoue.com';
+    const pageTitle = pageTitleChunk ? `${siteTitle} | ${pageTitleChunk}` : siteTitle;
+    const pageUrl = siteUrl + useRoute().path;
+    const metaDescription = 'Intégrateur web et développeur full stack.';
+    const metaImageUrl = `${siteUrl}/images/paul-nicoue-logo-1200x675px.png`;
+
+    // --------------------------------------------------
+    // HEAD
+    // --------------------------------------------------
+
+    return useHead({
+        title: pageTitle,
+        meta: [
+            /* Basic metadata */
+            {charset: 'utf-8'},
+            {name: 'viewport', content: 'width=device-width'},
+            /* Name */
+            {id: 'schema_name', itemprop: 'name', content: siteTitle},
+            /* Description */
+            {name: 'description', content: metaDescription},
+            {id: 'schema_description', itemprop: 'description', content: metaDescription},
+            /* Author */
+            {name: 'author', content: siteTitle},
+            /* Image */
+            {id: 'schema_image', itemprop: 'image', content: metaImageUrl},
+            /* Open Graph */
+            {property: 'og:title', content: pageTitle},
+            {property: 'og:description', content: metaDescription},
+            {property: 'og:image', content: metaImageUrl},
+            {property: 'og:image:width', content: '1200'},
+            {property: 'og:image:height', content: '675'},
+            {property: 'og:url', content: pageUrl},
+            {property: 'og:type', content: 'website'},
+            /* Twitter Card */
+            {name: 'twitter:card', content: 'summary_large_image'},
+            {name: 'twitter:title', content: siteTitle},
+            {name: 'twitter:description', content: metaDescription},
+            {name: 'twitter:image', content: metaImageUrl}
+        ],
+        link: [
+            /* Canonical URL */
+            {rel: 'canonical', href: pageUrl},
+            /* Favicon */
+            {rel: 'icon', sizes: 'any', href: 'favicon/paul-nicoue-favicon.ico'},
+            {rel: 'icon', type: 'image/svg+xml', href: 'favicon/paul-nicoue-favicon.svg'},
+            {rel: 'apple-touch-icon', href: 'favicon/paul-nicoue-apple-touch-icon.png'},
+            {rel: 'manifest', href: 'favicon/paul-nicoue.webmanifest'}
+        ],
+        style: [
+            /* Schema */
+            {itemscope: true, itemtype: 'https://schema.org/WebSite', itemref: 'schema_name schema_description schema_image'}
+        ],
+        script: [
+            /* Matomo tracking code */
+            {children: `
+                var _paq = window._paq = window._paq || [];
+                _paq.push(["disableCookies"]);
+                _paq.push(['trackPageView']);
+                _paq.push(['enableLinkTracking']);
+                (function() {
+                    var u="https://matomo.paulnicoue.com/";
+                    _paq.push(['setTrackerUrl', u+'matomo.php']);
+                    _paq.push(['setSiteId', '4']);
+                    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+                })();
+            `}
+        ]
+    })
+}
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..5ca1af6
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,50 @@
+<template>
+    
+    <div class="app">
+        <AppError class="app__error" @handle-error="handleError" />
+    </div>
+
+</template>
+
+<script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const props = defineProps({
+        error: Object
+    });
+    const pageTitleChunk = `Erreur ${props.error.statusCode}`;
+
+    // --------------------------------------------------
+    // HEAD
+    // --------------------------------------------------
+
+    useAppHead(pageTitleChunk);
+
+    // --------------------------------------------------
+    // LOGIC
+    // --------------------------------------------------
+
+    const handleError = () => {
+        clearError({ redirect: '/' });
+    }
+
+</script>
+
+<style lang="scss">
+
+    // --------------------------------------------------
+    // LAYOUT
+    // --------------------------------------------------
+
+    .app {
+    
+        &__error {
+            grid-area: app-main;
+        }
+    }
+
+
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ebba5a3..126cd12 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,3 @@
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
     modules: [
         '@funken-studio/sitemap-nuxt-3'
@@ -9,10 +8,6 @@ export default defineNuxtConfig({
         }
     },
     sitemap: {
-        hostname: 'https://paulnicoue.com',
-        exclude: [
-            '/200.html',
-            '/404.html'
-        ]
+        hostname: 'https://paulnicoue.com'
     }
 })
diff --git a/pages/index.vue b/pages/index.vue
index ae91a8a..40267e8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,9 +12,9 @@
 
 <script setup>
 
-    // ----------------------------------------------------------------------------
+    // --------------------------------------------------
     // HEAD
-    // ----------------------------------------------------------------------------
+    // --------------------------------------------------
 
     definePageMeta({
         pageTitleChunk: null