Add error page

This commit is contained in:
Paul Nicoué 2023-01-06 15:46:20 +01:00
parent 81bfed6710
commit 0418315f4d
6 changed files with 171 additions and 87 deletions

101
app.vue
View file

@ -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;