Bunch of updates

- touch up the cookie monster
- clarify the use of cookies
- actually install @nuxtjs/tailwindcss which apparently wasn't there...

components/CookieMonster.vue

@@ -5,6 +5,10 @@
                 <client-only><fa-icon :icon="['fas', 'circle-xmark']" class="text-error text-4xl float-right" @click="isOpen = false" /></client-only>
                 <div class="pb-4">
                     <p>I use <strong>cookies</strong> for <a href="/cookies">reasons</a>. Please read the reasons before setting your preferences.</p>
+                    <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
+                        <p><input type="checkbox" class="form-control toggle toggle-primary" checked disabled /></p>
+                        <p class="col-span-5 sm:col-span-11"><strong>Consent</strong>: I must use a cookie to keep track of your choices, no way around it.</p>
+                    </div>
                     <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
                         <p><input type="checkbox" class="form-control toggle toggle-primary" v-model="consentStore.analytics" @change="(e: Event) => consentStore.analytics = (e.target as HTMLInputElement).checked" /></p>
                         <p class="col-span-5 sm:col-span-11"><strong>Analytics</strong>: optional, but it'd be great if you agreed 😊</p>
@@ -16,9 +20,9 @@
                     <p class="pt-2">You can read more on how I use cookies on <a href="/cookies">this page</a>.</p>
                 </div>
                 <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                    <button class="btn btn-error" @click="rejectAll">Reject all</button>
-                    <button class="btn btn-info btn-outline" @click="acceptAll">Accept all</button>
                     <button class="btn btn-success" @click="acceptMyChoice">Accept my choice</button>
+                    <button class="btn btn-info btn-outline" @click="acceptAll">Accept all cookies</button>
+                    <button class="btn btn-error" @click="rejectAll">Reject all cookies</button>
                 </div>
             </div>
         </div>

nuxt.config.ts

@@ -72,6 +72,7 @@ export default defineNuxtConfig({
         },
     },
     modules: [
+        '@nuxtjs/tailwindcss',
         '@nuxtjs/google-fonts',
         ['@pinia/nuxt', { autoImports: ['defineStore'] }],
     ],

package.json

@@ -7,36 +7,36 @@
     "preview": "nuxi preview",
     "deploy": "nuxi build && rsync -avPz --delete -e ssh .output/* vps:/var/server/htdocs/andreafranceschini.org/www/ && ssh vps docker restart aforg"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-brands-svg-icons": "^6.1.2",
-    "@fortawesome/free-regular-svg-icons": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@nuxtjs/google-fonts": "^3.0.0-0",
-    "@pinia/nuxt": "^0.4.0",
-    "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/typography": "^0.5.4",
-    "@types/animejs": "^3.1.4",
-    "@types/luxon": "^3.0.0",
-    "@types/three": "^0.143.1",
+    "@nuxtjs/tailwindcss": "^5.3.2",
+    "@pinia/nuxt": "^0.4.1",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.7",
+    "@types/animejs": "^3.1.5",
+    "@types/luxon": "^3.0.1",
+    "@types/three": "^0.144.0",
     "animejs": "^3.2.1",
-    "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.12",
+    "autoprefixer": "^10.4.8",
+    "cssnano": "^5.1.13",
     "daisyui": "^2.24.0",
-    "luxon": "^3.0.1",
+    "luxon": "^3.0.3",
     "nuxt": "^3.0.0-rc.8",
     "pinia-plugin-persistedstate": "^2.1.1",
-    "postcss": "^8.4.14",
-    "postcss-import": "^14.1.0",
+    "postcss": "^8.4.16",
+    "postcss-import": "^15.0.0",
     "postcss-mixins": "^9.0.3",
     "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.7.2",
-    "tailwindcss": "^3.1.3",
-    "three": "^0.143.0",
-    "typescript": "^4.7.4",
-    "vue-tsc": "^0.40.1"
+    "postcss-preset-env": "^7.8.0",
+    "tailwindcss": "^3.1.8",
+    "three": "^0.144.0",
+    "typescript": "^4.8.2",
+    "vue-tsc": "^0.40.5"
   }
 }

pages/cookies.vue

@@ -3,23 +3,26 @@
     <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
+        <article class="grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
+            <section class="col-span-1 sm:col-span-2 pb-8">
+                <p><strong>Cookies are not always bad</strong>. Sometimes they are bad, sometimes they are useful.
+                    <strong>On this website</strong>, I use these.</p>
+                <p><strong>Consent</strong>: I record your preferences regarding cookies in a cookie. 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>
+                    icon in a corner at the bottom of the screen. There are other mechanisms for storing pieces of
+                    information such as this, but a cookie is the most flexible and allows for finer control in a
+                    website's rendering process.</p>
+                <p><strong>Analytics</strong>: these are the cookies that allow me to keep track of your steps through this
+                    website. Analytics give me information like where you are coming from, what you searched to get here,
+                    or what links you followed to get here, what pages you visit on the website, and how you leave the
+                    website. Think about this as kind of a visitor counter that knows if you are new or you've been here
+                    before, and a little survey at the end of what you liked and didn't like during your visit.</p>
+                <p class="mx-8 sm:mx-24">Because <strong>I care a lot about privacy</strong>, I use <a href="https://matomo.org/">Matomo</a> for analytics, and
+                    I host it myself. Matomo is a privacy-conscious analytics platform that doesn't just hoover your data
+                    up and sells it to the highest bidder. What is even more interesting is that you can host Matomo yourself
+                    on your own server so that you know exactly where the visitors' data is stored.</p>
+                <p><strong>Ads</strong>: at the moment, I am not showing any ads. Jury's still out on what the best ads
+                    platform is, but I may end up going back to Google in the future.</p>
             </section>
         </article>
     </div>