feat: add cookie consent

package.json

@@ -95,6 +95,7 @@
     "stylis": "^4.3.1",
     "unified": "^10.1.1",
     "util": "^0.12.5",
+    "vanilla-cookieconsent": "3.0.1",
     "webpack": "^5.84.1",
     "what-input": "^5.2.12"
   },

src/assets/locales/de/cookie-consent-translations.json

@@ -0,0 +1,31 @@
+{
+  "consentModal": {
+    "title": "Ihre Datenschutzoptionen",
+    "description": "Wir verwenden Cookies, um Ihre Erfahrung zu verbessern, den Datenverkehr zu analysieren und personalisierte Inhalte bereitzustellen. Sie können entweder alle Cookies akzeptieren oder Ihre Präferenzen für verschiedene Kategorien verwalten.",
+    "acceptAllBtn": "Alle Cookies akzeptieren",
+    "acceptNecessaryBtn": "Nur notwendige Cookies akzeptieren",
+    "showPreferencesBtn": "Cookie-Präferenzen verwalten"
+  },
+  "preferencesModal": {
+    "title": "Verwalten Sie Ihre Cookie-Präferenzen",
+    "acceptAllBtn": "Alle Cookies akzeptieren",
+    "acceptNecessaryBtn": "Nur notwendige Cookies akzeptieren",
+    "savePreferencesBtn": "Präferenzen speichern",
+    "closeIconLabel": "Schließen",
+    "sections": [
+      {
+        "title": "Verwendung von Cookies",
+        "description": "Unsere Website verwendet Cookies, um wesentliche Funktionen sicherzustellen, Ihr Surferlebnis zu verbessern und personalisierte Inhalte bereitzustellen. Einige Cookies sind erforderlich, während andere uns helfen, unsere Dienste zu verbessern."
+      },
+      {
+        "title": "Leistungs- und Analyse-Cookies",
+        "description": "Diese Cookies helfen uns zu analysieren, wie Besucher mit unserer Website interagieren, und ermöglichen es uns, die Leistung zu messen und zu verbessern. Sie sammeln Informationen in anonymer Form.",
+        "linkedCategory": "analytics"
+      },
+      {
+        "title": "Weitere Informationen",
+        "description": "Bei Fragen zu unserer Cookie-Richtlinie oder Ihren Auswahlmöglichkeiten wenden Sie sich bitte an <a class=\"cc-link\" href=\"contact/\">uns</a>."
+      }
+    ]
+  }
+}

src/assets/locales/en/cookie-consent-translations.json

@@ -0,0 +1,31 @@
+{
+  "consentModal": {
+    "title": "Your Privacy Choices",
+    "description": "We use cookies to enhance your experience, analyze traffic, and deliver personalized content. You can choose to accept all cookies or manage your preferences for different categories.",
+    "acceptAllBtn": "Accept All Cookies",
+    "acceptNecessaryBtn": "Reject all",
+    "showPreferencesBtn": "Manage Cookie Preferences"
+  },
+  "preferencesModal": {
+    "title": "Manage Your Cookie Preferences",
+    "acceptAllBtn": "Accept All Cookies",
+    "acceptNecessaryBtn": "Reject all",
+    "savePreferencesBtn": "Save Preferences",
+    "closeIconLabel": "Close",
+    "sections": [
+      {
+        "title": "Cookie Usage",
+        "description": "Our website uses cookies to ensure essential functionality, enhance your browsing experience, and provide personalized content. Some cookies are required, while others help us improve our services."
+      },
+      {
+        "title": "Performance and Analytics Cookies",
+        "description": "These cookies help us analyze how visitors interact with our website, allowing us to measure and improve performance. They collect information in an anonymous form.",
+        "linkedCategory": "analytics"
+      },
+      {
+        "title": "More information",
+        "description": "For any queries in relation to our policy on cookies and your choices, please <a class=\"cc-link\" href=\"contact/\">contact us</a>."
+      }
+    ]
+  }
+}

src/components/cookie-consent.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import 'vanilla-cookieconsent/dist/cookieconsent.css';
+import * as CookieConsentLib from 'vanilla-cookieconsent';
+import enCookieConsentTranslations from '../assets/locales/en/cookie-consent-translations.json';
+import deCookieConsentTranslations from '../assets/locales/de/cookie-consent-translations.json';
+import { useTranslation } from 'react-i18next';
+
+export const CookieConsent = () => {
+  const { i18n } = useTranslation();
+
+  React.useEffect(() => {
+    CookieConsentLib.run({
+      categories: {
+        analytics: {
+          services: {
+            youtube: {
+              label: 'YouTube Embeds',
+              onAccept: () => console.log('youtube accepted'),
+              onReject: () => console.log('youtube rejected'),
+            },
+          },
+        },
+      },
+      language: {
+        default: i18n.language,
+        translations: {
+          en: enCookieConsentTranslations,
+          de: deCookieConsentTranslations,
+        },
+      },
+    }).then();
+  }, [i18n.language]);
+
+  return null;
+};

src/components/layout/layout.tsx

@@ -13,10 +13,11 @@ import { up } from '../support/breakpoint';
 import { Breadcrumb, BreadcrumbEntry } from './breadcrumb/breadcrumb';
 import { setPolarityBodyClass } from './set-polarity';
 import { useAnchorTagScrolling } from './use-anchor-tag-scrolling';
+import { CookieConsent } from '../cookie-consent';
 
 /**
  * this container is used to push the footer to the bottom
- * if the page content is to short
+ * if the page content is too short
  */
 const FullHeightContainer = styled.div`
   display: flex;
@@ -123,6 +124,7 @@ export const Layout = ({
 
   return (
     <ThemeProvider theme={theme}>
+      <CookieConsent />
       <GlobalStyle $lightTheme={isLight} />
       <HeaderStickyContainer>
         <Header

tsconfig.json

@@ -11,7 +11,8 @@
     "noUnusedLocals": false,
     "skipLibCheck": true,
     "allowJs": true,
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "resolveJsonModule": true
   },
   "exclude": ["node_modules", "public", ".cache"]
 }

yarn.lock

@@ -15148,6 +15148,11 @@ value-or-promise@^1.0.12:
   resolved "https://registry.yarnpkg.com/value-or-promise/-/value-or-promise-1.0.12.tgz#0e5abfeec70148c78460a849f6b003ea7986f15c"
   integrity sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==
 
+[email protected]:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vanilla-cookieconsent/-/vanilla-cookieconsent-3.0.1.tgz#059d1b2c712476ae4172d4ec7fa9d553a16be12d"
+  integrity sha512-gqc4x7O9t1I4xWr7x6/jtQWPr4PZK26SmeA0iyTv1WyoECfAGnu5JEOExmMEP+5Fz66AT9OiCBO3GII4wDQHLw==
+
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"