From 3a0ddc1e47f2a7661076b8da73806d3e924a9280 Mon Sep 17 00:00:00 2001 From: MarianKijewski Date: Wed, 8 Jul 2026 09:54:31 +0200 Subject: [PATCH 1/6] Install cookie consent node module `npm i vanilla-cookieconsent@3.1.0` --- package-lock.json | 10 ++++++++-- package.json | 3 ++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2ae9b1..36ec1e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,7 +4,6 @@ "requires": true, "packages": { "": { - "name": "integration-docs", "dependencies": { "@docusaurus/core": "^3.10.1", "@docusaurus/faster": "^3.10.1", @@ -17,7 +16,8 @@ "prism-react-renderer": "^2.3.0", "react": "^19.2.7", "react-dom": "^19.2.7", - "react-player": "^3.3.3" + "react-player": "^3.3.3", + "vanilla-cookieconsent": "^3.1.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.10.1", @@ -20335,6 +20335,12 @@ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==", "license": "MIT" }, + "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/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index b1da717..b4e15d9 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "prism-react-renderer": "^2.3.0", "react": "^19.2.7", "react-dom": "^19.2.7", - "react-player": "^3.3.3" + "react-player": "^3.3.3", + "vanilla-cookieconsent": "^3.1.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "^3.10.1", From 154d8d8c2a6a4641729d8b016afb50cbab0a2f2b Mon Sep 17 00:00:00 2001 From: MarianKijewski Date: Wed, 8 Jul 2026 17:02:55 +0200 Subject: [PATCH 2/6] Introduce default cookie banner Configuration generated using playground: https://playground.cookieconsent.orestbida.com/ --- src/scripts/cookie_consent.js | 80 +++++++++++++++++++++++++++++++++++ src/theme/Root.js | 12 ++++++ 2 files changed, 92 insertions(+) create mode 100644 src/scripts/cookie_consent.js create mode 100644 src/theme/Root.js diff --git a/src/scripts/cookie_consent.js b/src/scripts/cookie_consent.js new file mode 100644 index 0000000..1870a53 --- /dev/null +++ b/src/scripts/cookie_consent.js @@ -0,0 +1,80 @@ +import { useEffect } from "react"; + +import "vanilla-cookieconsent/dist/cookieconsent.css"; +import * as CookieConsent from "vanilla-cookieconsent"; + +export default function CookieConsentBanner() { + console.log("module is executed") + useEffect(() => { + /** + * All config. options available here: + * https://cookieconsent.orestbida.com/reference/configuration-reference.html + */ + CookieConsent.run({ + guiOptions: { + consentModal: { + layout: "bar inline", + position: "bottom", + equalWeightButtons: true, + flipButtons: false + }, + preferencesModal: { + layout: "box", + position: "right", + equalWeightButtons: false, + flipButtons: false + } + }, + categories: { + necessary: { + readOnly: true + }, + analytics: {} + }, + language: { + default: "en", + 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: "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." + } + ] + } + } + } + }, + disablePageInteraction: true + }); + }, []); +} diff --git a/src/theme/Root.js b/src/theme/Root.js new file mode 100644 index 0000000..d0743d4 --- /dev/null +++ b/src/theme/Root.js @@ -0,0 +1,12 @@ +import React from 'react'; +import CookieConsentBanner from "../scripts/cookie_consent"; +import BrowserOnly from "@docusaurus/BrowserOnly"; + +export default function Root({children}) { + return <> + + {() => } + + {children} + ; +} From c0d16c71881847f15fdce727ba79639135c9c251 Mon Sep 17 00:00:00 2001 From: MarianKijewski Date: Wed, 8 Jul 2026 18:26:03 +0200 Subject: [PATCH 3/6] Move to Layout component swizzle This is done in order to have access to ColorModeProvider, which allows to use `useColorMode` method. All of that just to have cookie banner in same color mode. --- package-lock.json | 1 + package.json | 1 + src/scripts/cookie_consent.js | 11 ++++++----- src/theme/Layout/index.js | 15 +++++++++++++++ src/theme/Root.js | 12 ------------ 5 files changed, 23 insertions(+), 17 deletions(-) create mode 100644 src/theme/Layout/index.js delete mode 100644 src/theme/Root.js diff --git a/package-lock.json b/package-lock.json index 36ec1e0..b12a3e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "@docusaurus/core": "^3.10.1", "@docusaurus/faster": "^3.10.1", "@docusaurus/preset-classic": "^3.10.1", + "@docusaurus/theme-common": "^3.10.1", "@docusaurus/theme-mermaid": "^3.10.1", "@easyops-cn/docusaurus-search-local": "^0.52.2", "@mdx-js/react": "^3.0.0", diff --git a/package.json b/package.json index b4e15d9..0d84d51 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@docusaurus/core": "^3.10.1", "@docusaurus/faster": "^3.10.1", "@docusaurus/preset-classic": "^3.10.1", + "@docusaurus/theme-common": "^3.10.1", "@docusaurus/theme-mermaid": "^3.10.1", "@easyops-cn/docusaurus-search-local": "^0.52.2", "@mdx-js/react": "^3.0.0", diff --git a/src/scripts/cookie_consent.js b/src/scripts/cookie_consent.js index 1870a53..11fb60d 100644 --- a/src/scripts/cookie_consent.js +++ b/src/scripts/cookie_consent.js @@ -2,14 +2,15 @@ import { useEffect } from "react"; import "vanilla-cookieconsent/dist/cookieconsent.css"; import * as CookieConsent from "vanilla-cookieconsent"; +import { useColorMode } from '@docusaurus/theme-common'; export default function CookieConsentBanner() { - console.log("module is executed") + const { colorMode } = useColorMode(); + useEffect(() => { - /** - * All config. options available here: - * https://cookieconsent.orestbida.com/reference/configuration-reference.html - */ + if (colorMode === "dark") + document.documentElement.classList.add('cc--darkmode'); + CookieConsent.run({ guiOptions: { consentModal: { diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js new file mode 100644 index 0000000..dbf9c7b --- /dev/null +++ b/src/theme/Layout/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Layout from '@theme-original/Layout'; +import CookieConsentBanner from "../../scripts/cookie_consent"; +import BrowserOnly from "@docusaurus/BrowserOnly"; + +export default function LayoutWrapper({children, ...props}) { + return ( + + + {() => } + + {children} + + ); +} diff --git a/src/theme/Root.js b/src/theme/Root.js deleted file mode 100644 index d0743d4..0000000 --- a/src/theme/Root.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import CookieConsentBanner from "../scripts/cookie_consent"; -import BrowserOnly from "@docusaurus/BrowserOnly"; - -export default function Root({children}) { - return <> - - {() => } - - {children} - ; -} From dcb8c70a1953f2766d09e004e71b546da8bb229d Mon Sep 17 00:00:00 2001 From: MarianKijewski Date: Thu, 9 Jul 2026 11:28:58 +0200 Subject: [PATCH 4/6] Add a link to display and alter cookie preferences Required in order to stay compliant. --- docusaurus.config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docusaurus.config.js b/docusaurus.config.js index f10ed9d..e67a794 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -90,6 +90,14 @@ const config = { }, ], }, + { + title: "Legal", + items: [ + { + html: '', + } + ], + }, { title: 'More', items: [ From cf52b9236981899fb8956cfcdc794647b24fecd3 Mon Sep 17 00:00:00 2001 From: MarianKijewski Date: Thu, 9 Jul 2026 11:57:29 +0200 Subject: [PATCH 5/6] Add copy from wire.com adjusted for our use The styling is added to preserve newlines in description. --- src/css/custom.css | 4 ++++ src/scripts/cookie_consent.js | 34 ++++++++++++++-------------------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 6f6c3a1..118eff0 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -46,3 +46,7 @@ width: 1px; white-space: nowrap; } + +#cc-main .cm__desc { + white-space: pre-line; +} diff --git a/src/scripts/cookie_consent.js b/src/scripts/cookie_consent.js index 11fb60d..dd3ecac 100644 --- a/src/scripts/cookie_consent.js +++ b/src/scripts/cookie_consent.js @@ -37,38 +37,32 @@ export default function CookieConsentBanner() { 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" + description: "This website stores cookies on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.\n\n" + + "If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference not to be tracked.", + acceptAllBtn: "Accept", + acceptNecessaryBtn: "Decline", + showPreferencesBtn: "Cookie settings", + footer: "Privacy Policy" }, preferencesModal: { - title: "Consent Preferences Center", - acceptAllBtn: "Accept all", - acceptNecessaryBtn: "Reject all", - savePreferencesBtn: "Save preferences", + title: "About Cookies", + acceptAllBtn: "Accept All", + savePreferencesBtn: "Save settings", 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." + description: "This site uses cookies. We use cookies mainly to improve and analyze your experience on our websites. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change your default settings." }, { - 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.", + title: "Necessary Always active", + description: "These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences or filling in forms", 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.", + title: "Analytics", + description: "These cookies help us to understand how visitors engage with the website. We may use a set of cookies to collect information and report site usage statistics.", linkedCategory: "analytics" - }, - { - title: "More information", - description: "For any query in relation to my policy on cookies and your choices, please contact me." } ] } From 0941db2b84955caf3aebfe6422aca7dce77dd3c1 Mon Sep 17 00:00:00 2001 From: MarianKijewski Date: Thu, 9 Jul 2026 16:09:26 +0200 Subject: [PATCH 6/6] Register CookieConsentBanner as client module so it loads on every page This is needed because the button to show cookie preferences needs to work on every page. --- docusaurus.config.js | 5 ++++- src/scripts/client_module.js | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/scripts/client_module.js diff --git a/docusaurus.config.js b/docusaurus.config.js index e67a794..f7ce94e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -145,7 +145,10 @@ const config = { }), ], ], - clientModules: [require.resolve('./src/scripts/mermaid_icons.js')], + clientModules: [ + require.resolve('./src/scripts/client_module.js'), + require.resolve('./src/scripts/mermaid_icons.js') + ], headTags: [ { tagName: "link", diff --git a/src/scripts/client_module.js b/src/scripts/client_module.js new file mode 100644 index 0000000..4d1afd9 --- /dev/null +++ b/src/scripts/client_module.js @@ -0,0 +1,5 @@ +import CookieConsentBanner from "./cookie_consent"; + +export function onRouteDidUpdate() { + return CookieConsentBanner +} \ No newline at end of file