From a474ef6b1844807b44d5b3907b4cbb64003d9725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?= Date: Fri, 2 May 2025 12:23:23 -0300 Subject: [PATCH] add cookie consert --- superpage/package-lock.json | 7 ++ superpage/package.json | 1 + superpage/src/CookieConsentConfig.ts | 102 ++++++++++++++++++ superpage/src/components/CookieConsent.astro | 18 ++++ superpage/src/layouts/Layout.astro | 14 +-- .../src/layouts/_components/Footer.astro | 14 ++- 6 files changed, 148 insertions(+), 8 deletions(-) create mode 100644 superpage/src/CookieConsentConfig.ts create mode 100644 superpage/src/components/CookieConsent.astro diff --git a/superpage/package-lock.json b/superpage/package-lock.json index a8ae2aa..402f5e1 100644 --- a/superpage/package-lock.json +++ b/superpage/package-lock.json @@ -27,6 +27,7 @@ "react-dom": "^19.1.0", "react-hook-form": "^7.56.0", "tailwindcss": "^4.0.13", + "vanilla-cookieconsent": "^3.1.0", "zod": "^3.24.3" } }, @@ -7781,6 +7782,12 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/vanilla-cookieconsent": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vanilla-cookieconsent/-/vanilla-cookieconsent-3.1.0.tgz", + "integrity": "sha512-/McNRtm/3IXzb9dhqMIcbquoU45SzbN2VB+To4jxEPqMmp7uVniP6BhGLjU8MC7ZCDsNQVOp27fhQTM/ruIXAA==", + "license": "MIT" + }, "node_modules/vfile": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", diff --git a/superpage/package.json b/superpage/package.json index e7450ea..edbadbd 100644 --- a/superpage/package.json +++ b/superpage/package.json @@ -28,6 +28,7 @@ "react-dom": "^19.1.0", "react-hook-form": "^7.56.0", "tailwindcss": "^4.0.13", + "vanilla-cookieconsent": "^3.1.0", "zod": "^3.24.3" } } diff --git a/superpage/src/CookieConsentConfig.ts b/superpage/src/CookieConsentConfig.ts new file mode 100644 index 0000000..47d3612 --- /dev/null +++ b/superpage/src/CookieConsentConfig.ts @@ -0,0 +1,102 @@ +import type { CookieConsentConfig } from "vanilla-cookieconsent"; + +export const config: CookieConsentConfig = { + guiOptions: { + consentModal: { + layout: "box inline", + position: "bottom left", + }, + preferencesModal: { + layout: "box", + position: "right", + equalWeightButtons: true, + flipButtons: false, + }, + }, + categories: { + necessary: { + readOnly: true, + }, + functionality: {}, + analytics: { + services: { + ga4: { + label: + 'Google Analytics 4 (dummy)', + onAccept: () => { + console.log("ga4 accepted"); + // TODO: load ga4 + }, + onReject: () => { + console.log("ga4 rejected"); + }, + cookies: [ + { + name: /^_ga/, + }, + ], + }, + another: { + label: "Another one (dummy)", + }, + }, + }, + }, + language: { + default: "en", + autoDetect: "browser", + translations: { + en: { + consentModal: { + title: "Hello traveller, it's cookie time!", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", + acceptAllBtn: "Accept all", + acceptNecessaryBtn: "Reject all", + showPreferencesBtn: "Manage preferences", + footer: + 'Privacy Policy\nTerms and conditions', + }, + preferencesModal: { + title: "Consent Preferences Center", + acceptAllBtn: "Accept all", + acceptNecessaryBtn: "Reject all", + savePreferencesBtn: "Save preferences", + closeIconLabel: "Close modal", + serviceCounterLabel: "Service|Services", + sections: [ + { + title: "Cookie Usage", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + }, + { + title: + 'Strictly Necessary Cookies Always Enabled', + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + linkedCategory: "necessary", + }, + { + title: "Functionality Cookies", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + linkedCategory: "functionality", + }, + { + title: "Analytics Cookies", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + linkedCategory: "analytics", + }, + { + title: "More information", + description: + 'For any query in relation to my policy on cookies and your choices, please contact me.', + }, + ], + }, + }, + }, + }, +}; diff --git a/superpage/src/components/CookieConsent.astro b/superpage/src/components/CookieConsent.astro new file mode 100644 index 0000000..104cacf --- /dev/null +++ b/superpage/src/components/CookieConsent.astro @@ -0,0 +1,18 @@ +--- +import "vanilla-cookieconsent/dist/cookieconsent.css"; +--- + + + + diff --git a/superpage/src/layouts/Layout.astro b/superpage/src/layouts/Layout.astro index 71b65b1..15717be 100644 --- a/superpage/src/layouts/Layout.astro +++ b/superpage/src/layouts/Layout.astro @@ -2,12 +2,6 @@ import "~/styles/app.css"; import Header from "./_components/Header.astro"; import Footer from "./_components/Footer.astro"; - -const buildTime = new Date().toLocaleString("pt-BR", { - timeZone: "America/Sao_Paulo", - dateStyle: "short", - timeStyle: "medium", -}); --- @@ -26,6 +20,7 @@ const buildTime = new Date().toLocaleString("pt-BR", { @@ -37,6 +32,13 @@ const buildTime = new Date().toLocaleString("pt-BR", { } gtag("js", new Date()); + gtag("consent", "default", { + ad_storage: "denied", + ad_user_data: "denied", + ad_personalization: "denied", + analytics_storage: "denied", + }); + gtag("config", "G-GSTQ17E9DJ"); diff --git a/superpage/src/layouts/_components/Footer.astro b/superpage/src/layouts/_components/Footer.astro index dbd609e..63c676d 100644 --- a/superpage/src/layouts/_components/Footer.astro +++ b/superpage/src/layouts/_components/Footer.astro @@ -1,15 +1,25 @@ --- import { Icon } from "astro-icon/components"; import Container from "~/components/Container.astro"; +import CookieConsent from "~/components/CookieConsent.astro"; const year = new Date().getFullYear(); ---