Add cookie consent

astro.config.ts

@@ -5,7 +5,9 @@ import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
 import sitemap from "@astrojs/sitemap";
 import { SITE } from "./src/config";
-import remarkReadingTime from './src/utils/remarkReadingTime'
+import remarkReadingTime from "./src/utils/remarkReadingTime";
+import cookieconsent from "@jop-software/astro-cookieconsent";
+
 // https://astro.build/config
 export default defineConfig({
   site: SITE.website,
@@ -15,6 +17,85 @@ export default defineConfig({
     }),
     react(),
     sitemap(),
+    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
+        },
+      },
+      languages: {
+        en: {
+          consent_modal: {
+            title:
+              '<div style="display:flex;flex-direction:column;align-items:center;"><div>Hello, it\'s cookie time!</div></div>',
+            description:
+              'Our website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. Please see our <a href="https://mahasak.com/policy" target="_blank">privacy policy</a>.',
+            primary_btn: {
+              text: "Accept all",
+              role: "accept_all", //'accept_selected' or 'accept_all'
+            },
+            secondary_btn: {
+              text: "Preferences",
+              role: "settings", //'settings' or 'accept_necessary'
+            },
+            revision_message:
+              "<br><br> Dear user, terms and conditions have changed since the last time you visited!",
+          },
+          settings_modal: {
+            title: "Cookie settings",
+            save_settings_btn: "Save current selection",
+            accept_all_btn: "Accept all",
+            reject_all_btn: "Reject all",
+            close_btn_label: "Close",
+            cookie_table_headers: [
+              { col1: "Name" },
+              { col2: "Domain" },
+              { col3: "Expiration" },
+            ],
+            blocks: [
+              {
+                title: "Cookie usage",
+                description:
+                  'Our website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. Please see our <a href="https://mahasak.com/policy" target="_blank">privacy policy</a>.',
+              },
+              {
+                title: "Strictly necessary cookies",
+                description:
+                  "These cookies are strictly necessary for the website to function. They are usually set to handle only your actions in response to a service request, such as setting your privacy preferences, navigating between pages, and setting your preferred version. You can set your browser to block these cookies or to alert you to their presence, but some parts of the website will not function without them. These cookies do not store any personally identifiable information.",
+                toggle: {
+                  value: "necessary",
+                  enabled: true,
+                  readonly: true, //cookie categories with readonly=true are all treated as "necessary cookies"
+                },
+              },
+              {
+                title: "Analytics & Performance cookies",
+                description:
+                  "These cookies are used for analytics and performance metering purposes. They are used to collect information about how visitors use our website, which helps us improve it over time. They do not collect any information that identifies a visitor. The information collected is aggregated and anonymous.",
+                toggle: {
+                  value: "analytics",
+                  enabled: false,
+                  readonly: false,
+                },
+              },
+              {
+                title: "More information",
+                description:
+                  'For more information about cookie usage, privacy, and how we use the data we collect, please refer to our <a href="https://mahasak.com/policy" target="_blank">privacy policy</a> and <a href="https://mahasak.com/terms" target="_blank">terms of use</a>.',
+              },
+            ],
+          },
+        },
+      },
+    }),
   ],
   markdown: {
     remarkPlugins: [

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@astrojs/check": "^0.2.1",
     "@astrojs/rss": "^3.0.0",
+    "@jop-software/astro-cookieconsent": "^2.0.0",
     "@resvg/resvg-js": "^2.4.1",
     "astro": "^3.1.3",
     "fuse.js": "^6.6.2",
@@ -27,12 +28,13 @@
     "remark-toc": "^9.0.0",
     "satori": "^0.10.8",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vanilla-cookieconsent": "^2.9.2"
   },
   "devDependencies": {
     "@astrojs/react": "^3.0.2",
     "@astrojs/sitemap": "^3.0.0",
-    "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/tailwind": "^5.0.3",
     "@divriots/jampack": "^0.20.2",
     "@tailwindcss/typography": "^0.5.10",
     "@types/github-slugger": "^1.3.0",

src/components/GoogleAnalytics.astro

@@ -7,11 +7,22 @@ const { id } = Astro.props;
 
 const gtagUrl = `https://www.googletagmanager.com/gtag/js?id=${id}`;
 ---
+
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src={gtagUrl}></script>
-<script define:vars={{id}}>
+<script
+  data-category="analytics"
+  data-service="Google Analytics"
+  async
+  src={gtagUrl}></script>
+<script
+  data-category="analytics"
+  data-service="Google Analytics"
+  define:vars={{ id }}
+>
   window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', id);
-</script>
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag("js", new Date());
+  gtag("config", id);
+</script>

src/components/Umami.astro

@@ -3,7 +3,12 @@ export interface Props {
   dataId: string;
 }
 
-const { dataId} = Astro.props;
+const { dataId } = Astro.props;
 ---
 
-<script async src="https://us.umami.is/script.js" data-website-id={dataId}></script>
+<script
+  data-category="analytics"
+  data-service="Umami"
+  async
+  src="https://us.umami.is/script.js"
+  data-website-id={dataId}></script>