From e939359275f1ce28f07c1cc5d5c6f3c05e64dc90 Mon Sep 17 00:00:00 2001 From: Josh Wong <23216828+josh-wong@users.noreply.github.com> Date: Tue, 10 Dec 2024 09:02:25 +0900 Subject: [PATCH 1/6] Create Root.js --- src/theme/Root.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/theme/Root.js diff --git a/src/theme/Root.js b/src/theme/Root.js new file mode 100644 index 00000000..33ce8cdd --- /dev/null +++ b/src/theme/Root.js @@ -0,0 +1,6 @@ +import React from 'react'; + +// Default implementation, that you can customize +export default function Root({children}) { + return <>{children}; +} From 02d667fda90c71d08260c742de320a1a85e5cc92 Mon Sep 17 00:00:00 2001 From: Josh Wong <23216828+josh-wong@users.noreply.github.com> Date: Tue, 10 Dec 2024 09:04:30 +0900 Subject: [PATCH 2/6] Add Microsoft Clarity code --- src/theme/Root.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/theme/Root.js b/src/theme/Root.js index 33ce8cdd..1294cf34 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -1,6 +1,10 @@ import React from 'react'; +import Clarity from '@microsoft/clarity'; -// Default implementation, that you can customize +const projectId = "p90sis7r0o" +Clarity.init(projectId); + +// Default implementation that can be customized export default function Root({children}) { return <>{children}; } From b1dcce51a7680fea2a8ad0ce5d70fe7cc2464dc2 Mon Sep 17 00:00:00 2001 From: Josh Wong <23216828+josh-wong@users.noreply.github.com> Date: Tue, 10 Dec 2024 09:10:18 +0900 Subject: [PATCH 3/6] Add `react-cookie-consent` --- package-lock.json | 22 ++++++++++++++++++++++ package.json | 1 + 2 files changed, 23 insertions(+) diff --git a/package-lock.json b/package-lock.json index 73b2f91c..568bfdd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "docusaurus-plugin-image-zoom": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", + "react-cookie-consent": "9.0.0", "react-dom": "^18.0.0" }, "devDependencies": { @@ -10286,6 +10287,12 @@ "@sideway/pinpoint": "^2.0.0" } }, + "node_modules/js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==", + "license": "MIT" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -14826,6 +14833,21 @@ "node": ">=0.10.0" } }, + "node_modules/react-cookie-consent": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/react-cookie-consent/-/react-cookie-consent-9.0.0.tgz", + "integrity": "sha512-Blyj+m+Zz7SFHYqT18p16EANgnSg2sIyU6Yp3vk83AnOnSW7qnehPkUe4+8+qxztJrNmCH5GP+VHsWzAKVOoZA==", + "license": "MIT", + "dependencies": { + "js-cookie": "^2.2.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/package.json b/package.json index bddbd982..1dd3dcc1 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "docusaurus-plugin-image-zoom": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", + "react-cookie-consent": "9.0.0", "react-dom": "^18.0.0" }, "devDependencies": { From eb10d903a972c4e9ec087a95608964935427fd24 Mon Sep 17 00:00:00 2001 From: Josh Wong <23216828+josh-wong@users.noreply.github.com> Date: Tue, 10 Dec 2024 09:10:55 +0900 Subject: [PATCH 4/6] Add feature to show cookie consent message --- src/theme/Root.js | 59 ++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 53 insertions(+), 6 deletions(-) diff --git a/src/theme/Root.js b/src/theme/Root.js index 1294cf34..2456f6f8 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -1,10 +1,57 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Clarity from '@microsoft/clarity'; +import CookieConsent from "react-cookie-consent"; -const projectId = "p90sis7r0o" -Clarity.init(projectId); +// Initialize Clarity with the given project ID +const projectId = "p90sis7r0o"; -// Default implementation that can be customized -export default function Root({children}) { - return <>{children}; +export default function Root({ children }) { + useEffect(() => { + if (typeof window !== "undefined") { + // Initialize Clarity only on the client-side + Clarity.init(projectId); + + // Add an event listener for the consent event + window.addEventListener("CookieConsent", () => { + if (window.clarity) { + window.clarity('consent'); + console.log("Clarity consent event triggered."); + } + }); + } + }, []); + + const handleConsentAccept = () => { + // Dispatch a custom "CookieConsent" event when the user accepts cookies + const consentEvent = new Event("CookieConsent"); + window.dispatchEvent(consentEvent); + console.log("CookieConsent event dispatched."); + }; + + return ( + <> + {children} +
+ + This website uses cookies to enhance the visitor experience. By continuing to use this website, you acknowledge that you have read and understood our privacy policy and consent to the use of cookies to help improve your browsing experience and personalize content. + +
+ + ); } From 46cf01098e834bc701a981bd28891a8218ddeebc Mon Sep 17 00:00:00 2001 From: Josh Wong <23216828+josh-wong@users.noreply.github.com> Date: Tue, 17 Dec 2024 12:16:20 +0900 Subject: [PATCH 5/6] Increase font size of `I understand` button --- src/theme/Root.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/Root.js b/src/theme/Root.js index 2456f6f8..57a226f0 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -43,6 +43,7 @@ export default function Root({ children }) { backgroundColor: "#fff", color: "#000", fontWeight: "500", + fontSize: "15px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", }} From 641a3fce30a0db5b8ae9e0f76119e8ddeb6904c3 Mon Sep 17 00:00:00 2001 From: Josh Wong <23216828+josh-wong@users.noreply.github.com> Date: Tue, 17 Dec 2024 17:32:32 +0900 Subject: [PATCH 6/6] Revise cookie banner message --- src/theme/Root.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/Root.js b/src/theme/Root.js index 57a226f0..5666b059 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -50,7 +50,7 @@ export default function Root({ children }) { expires={150} onAccept={handleConsentAccept} > - This website uses cookies to enhance the visitor experience. By continuing to use this website, you acknowledge that you have read and understood our privacy policy and consent to the use of cookies to help improve your browsing experience and personalize content. + This website uses cookies to enhance the visitor experience. By continuing to use this website, you acknowledge that you have read and understood our privacy policy and consent to the use of cookies to help improve your browsing experience and provide you with personalized content.