feat: initial cookie-consent

wgdotnet · Jan 12, 2024 · 8b8539d · 8b8539d
1 parent 06f9b73
commit 8b8539d
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 3 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -4,6 +4,7 @@ import mdx from '@astrojs/mdx';
 import tailwind from "@astrojs/tailwind";
 import remarkToc from 'remark-toc';
 import remarkMermaid from 'astro-diagram/remark-mermaid';
+import cookieconsent from "@jop-software/astro-cookieconsent";
 
 // https://astro.build/config
 export default defineConfig({
@@ -19,8 +20,23 @@ export default defineConfig({
       // disable default injected base.css
       applyBaseStyles: false,
       configFile: './tailwind.config.cjs'
-    }
-    )],
+    }),
+    cookieconsent({
+      gui_options: {
+          consent_modal: {
+              layout: 'cloud',               // box/cloud/bar
+              position: 'bottom center',     // bottom/middle/top + left/right/center
+              transition: 'slide',           // zoom/slide
+              swap_buttons: false            // enable to invert buttons
+          },
+          settings_modal: {
+              layout: 'box',                 // box/bar
+              // position: 'left',           // left/right
+              transition: 'slide'            // zoom/slide
+          }
+      }
+  })
+  ],
   load: {
     unknown: 'src/pages/404.astro'
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,10 +11,11 @@
     "sync": "astro sync"
   },
   "dependencies": {
+    "@astrojs/cloudflare": "^6.8.1",
     "@astrojs/mdx": "^0.19.7",
     "@astrojs/node": "^5.3.6",
     "@astrojs/tailwind": "^4.0.0",
-    "@astrojs/cloudflare": "^6.8.1",
+    "@jop-software/astro-cookieconsent": "^2.0.0",
     "astro": "^2.10.12",
     "astro-diagram": "^0.7.0",
     "astro-heroicons": "^0.3.0",

diff --git a/public/cookieconsent-config.js b/public/cookieconsent-config.js
@@ -0,0 +1,71 @@
+import 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.umd.js';
+
+// Enable dark mode
+document.documentElement.classList.add('cc--darkmode');
+
+CookieConsent.run({
+    guiOptions: {
+        consentModal: {
+            layout: "box",
+            position: "bottom left",
+            equalWeightButtons: true,
+            flipButtons: false
+        },
+        preferencesModal: {
+            layout: "box",
+            position: "right",
+            equalWeightButtons: true,
+            flipButtons: false
+        }
+    },
+    categories: {
+        necessary: {
+            readOnly: true
+        },
+        analytics: {}
+    },
+    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: "<a href=\"#link\">Privacy Policy</a>\n<a href=\"#link\">Terms and conditions</a>"
+                },
+                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 <span class=\"pm__badge\">Always Enabled</span>",
+                            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: "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 <a class=\"cc__link\" href=\"#yourdomain.com\">contact me</a>."
+                        }
+                    ]
+                }
+            }
+        }
+    }
+});
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -17,6 +17,8 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/favicon2.svg" />
     <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0-rc.17/dist/cookieconsent.css">
+    <script type="module" src="cookieconsent-config.js"></script>
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>