af/pages/cookies.vue

<template><NuxtLayout name="default">
    <template #headline>{{ headline }}</template>
    <template #tagline>{{ tagline }}</template>

    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
        <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
            <section class="col-span-1 sm:col-span-2">
                <p class="noindent">Cookies are not always bad. Sometimes they are bad, sometimes they are useful.</p>
                <p><strong>Good cookies</strong> are, for example, the ones that a website uses to store some useful
                    information, like the fact that you logged in as a registered user, or decisions you made regarding
                    your use of the site, like whether you prefer dark mode or light mode, or whether you are OK with the
                    website using performance monitoring cookies. Good cookies are generally useful, helpful, and are
                    <strong>not</strong> used to track you across the web and build a profile to be sold to advertisers.</p>
                <p><strong>Bad cookies</strong> cookies do not have to be harmful or problematic, but can be. Such cookies
                    can be, for example, tracking cookies used by a performance monitoring system to record how you use
                    the website you are on, and can give important information to the manager of the website as to what
                    works, what does not work, and how to improve.</p>
                <p><strong>On this website</strong>, I use these:</p>
                <p><strong>Consent</strong>: I record your preferences in the browser's local storage. This is tecnically
                    not even a cookie but a better option with none of the bad side-effects of cookies. You can change
                    your preferences at any time using the cookie dialog box that you can open clicking on the cookie
                    icon in a corner at the bottom of the screen.</p>
            </section>
        </article>
    </div>
</NuxtLayout></template>

<script lang="ts" setup>
definePageMeta({
    layout: false
});

const headline = "Cookies";
const tagline = "They have them in the dark side";

const title = `${headline} ••• Andrea Franceschini, PhD`;
const description = "Everything you need to know to get in touch with me.";
const keywords = "cookies, tracking, good, bad";

useState('pageClasses', () => ['colophon', 'page']);
useHead({
    title,
    meta: [
        { property: 'keywords', content: keywords },
        { property: 'DC.Title', content: title },
        { property: 'twitter:title', content: title },
        { property: 'og:title', content: title },
        { property: 'description', content: description },
        { property: 'DC.Description', content: description },
        { property: 'twitter:description', content: description },
        { property: 'og:description', content: description },
    ]
});
</script>