Browse Source

Bunch of updates

- touch up the cookie monster
- clarify the use of cookies
- actually install @nuxtjs/tailwindcss which apparently wasn't there...
Andrea Franceschini 2 years ago
parent
commit
189283b9e3
5 changed files with 510 additions and 281 deletions
  1. 6 2
      components/CookieMonster.vue
  2. 1 0
      nuxt.config.ts
  3. 22 22
      package.json
  4. 19 16
      pages/cookies.vue
  5. 462 241
      yarn.lock

+ 6 - 2
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>
                 <client-only><fa-icon :icon="['fas', 'circle-xmark']" class="text-error text-4xl float-right" @click="isOpen = false" /></client-only>
                 <div class="pb-4">
                 <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>
                     <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">
                     <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><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>
                         <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>
                     <p class="pt-2">You can read more on how I use cookies on <a href="/cookies">this page</a>.</p>
                 </div>
                 </div>
                 <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                 <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-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>
             </div>
         </div>
         </div>

+ 1 - 0
nuxt.config.ts

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

+ 22 - 22
package.json

@@ -7,36 +7,36 @@
     "preview": "nuxi preview",
     "preview": "nuxi preview",
     "deploy": "nuxi build && rsync -avPz --delete -e ssh .output/* vps:/var/server/htdocs/andreafranceschini.org/www/ && ssh vps docker restart aforg"
     "deploy": "nuxi build && rsync -avPz --delete -e ssh .output/* vps:/var/server/htdocs/andreafranceschini.org/www/ && ssh vps docker restart aforg"
   },
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
   "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",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@nuxtjs/google-fonts": "^3.0.0-0",
     "@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",
     "animejs": "^3.2.1",
-    "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.12",
+    "autoprefixer": "^10.4.8",
+    "cssnano": "^5.1.13",
     "daisyui": "^2.24.0",
     "daisyui": "^2.24.0",
-    "luxon": "^3.0.1",
+    "luxon": "^3.0.3",
     "nuxt": "^3.0.0-rc.8",
     "nuxt": "^3.0.0-rc.8",
     "pinia-plugin-persistedstate": "^2.1.1",
     "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-mixins": "^9.0.3",
     "postcss-nested": "^5.0.6",
     "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"
   }
   }
 }
 }

+ 19 - 16
pages/cookies.vue

@@ -3,23 +3,26 @@
     <template #tagline>{{ tagline }}</template>
     <template #tagline>{{ tagline }}</template>
 
 
     <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
     <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
                     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>
             </section>
         </article>
         </article>
     </div>
     </div>

File diff suppressed because it is too large
+ 462 - 241
yarn.lock


Some files were not shown because too many files changed in this diff