Add error page
This commit is contained in:
Paul Nicoué
parent
81bfed6710
commit
0418315f4d
6 changed files with 171 additions and 87 deletions
101
app.vue
101
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;
|
||||
|
|
|
|||
19
components/AppError.vue
Normal file
19
components/AppError.vue
Normal file
|
|
@ -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>
|
||||
77
composables/useAppHead.js
Normal file
77
composables/useAppHead.js
Normal file
|
|
@ -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);
|
||||
})();
|
||||
`}
|
||||
]
|
||||
})
|
||||
}
|
||||
50
error.vue
Normal file
50
error.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
|
||||
<script setup>
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// --------------------------------------------------
|
||||
// HEAD
|
||||
// ----------------------------------------------------------------------------
|
||||
// --------------------------------------------------
|
||||
|
||||
definePageMeta({
|
||||
pageTitleChunk: null
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue