paulnicoue/app.vue

<template>

    <div class="app">
        <NuxtPage class="app__main"/>
        <AppFooter class="app__footer"/>
    </div>

</template>

<script setup>

    // ----------------------------------------------------------------------------
    // 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);
                })();
            `}
        ]
    })
    
</script>

<style lang="scss">

    // ----------------------------------------------------------------------------
    // MODULES
    // ----------------------------------------------------------------------------

    @use 'minireset.css';
    @use '~/assets/styles/fonts';
    @use '~/assets/styles/variables';
    @use '~/assets/styles/animations';

    // ----------------------------------------------------------------------------
    // GENERALITIES
    // ----------------------------------------------------------------------------

    // Fonts and colors

    body {
        font-family: var(--text-font-family);
        font-size: var(--text-font-size);
        font-weight: var(--regular-font-weight);
        line-height: var(--text-line-height);
        color: white;
        background-color: var(--eerie-black);
    }

    h1 {
        font-family: var(--title-font-family);
        font-size: var(--h1-font-size);
        font-weight: var(--medium-font-weight);
        line-height: var(--h1-line-height);
    }

    h2 {
        font-family: var(--title-font-family);
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
        margin: 0 0 4rem 0;
    }

    h3 {
        font-family: var(--text-font-family);
        font-size: var(--h3-font-size);
        line-height: var(--h3-line-height);
        margin: 2rem 0 1rem 0;
    }

    strong {
        font-weight: var(--bold-font-weight);
    }

    em {
        font-style: italic;
    }

    // Link style

    a {
        color: white;
        text-decoration: underline var(--emerald);
        border-radius: 2px;
        transition: color 200ms ease-in-out;

        &:hover,
        &:focus,
        &:active {
            color: var(--emerald);
        }

        &:focus-visible {
            outline: 1px dashed var(--emerald);
            outline-offset: 2px;
            animation: expand-outline 200ms ease-in-out;
        }
    }

    // Layout

    .app {
        min-height: 100vh;
        display: grid;
        grid:
            'app-main' 1fr
            'app-footer' auto
            / 1fr;
        place-items: center;
    
        &__main {
            grid-area: app-main;
        }

        &__footer {
            grid-area: app-footer;
        }
    }


</style>