Skip to content

Commit 6590a66

Browse files
Chasen-ZhangChasen-Zhang
authored
feat: add cookies consent (#2346)
1 parent 8d1a5d1 commit 6590a66

File tree

7 files changed

+281
-23
lines changed

7 files changed

+281
-23
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,15 @@
4646
"docusaurus-plugin-sass": "^0.2.5",
4747
"docusaurus-prince-pdf": "^1.2.1",
4848
"fs-extra": "^11.2.0",
49+
"js-cookie": "^3.0.5",
4950
"prism-react-renderer": "^2.3.0",
5051
"react": "^19.1.0",
5152
"react-dom": "^19.1.0",
5253
"react-markdown": "^9.0.1",
5354
"react-scroll-progress-bar": "^2.0.3",
5455
"sass": "^1.77.8",
5556
"sass-resources-loader": "^2.2.5",
57+
"vanilla-cookieconsent": "^3.1.0",
5658
"xml2js": "^0.6.2"
5759
},
5860
"devDependencies": {

‎src/components/Config/CookieConsentConfig.ts

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
2+
import type { CookieConsentConfig } from 'vanilla-cookieconsent';
3+
import { isChinaArea } from '@site/src/utils/tools';
4+
const isCn = isChinaArea();
5+
6+
const pluginConfig: CookieConsentConfig = {
7+
guiOptions: {
8+
consentModal: {
9+
layout: 'box wide',
10+
position: 'bottom left',
11+
equalWeightButtons: true,
12+
flipButtons: false,
13+
},
14+
preferencesModal: {
15+
layout: 'bar',
16+
position: 'right',
17+
equalWeightButtons: true,
18+
flipButtons: false,
19+
},
20+
},
21+
onFirstConsent: function () {
22+
console.log('onFirstAction fired');
23+
},
24+
25+
onConsent: function ({ cookie }) {
26+
console.log('onConsent fired ...');
27+
},
28+
29+
onChange: function ({ changedCategories, cookie }) {
30+
console.log('onChange fired ...');
31+
},
32+
onModalReady: ({ modalName, modal }) => {
33+
console.log('onModalReady fired ...', modalName, modal);
34+
},
35+
36+
categories: {
37+
necessary: {
38+
enabled: true,
39+
readOnly: true,
40+
},
41+
analytics: {
42+
enabled: true,
43+
44+
},
45+
},
46+
47+
language: {
48+
default: isCn ? 'zh' : 'en',
49+
translations: {
50+
en: {
51+
consentModal: {
52+
title: "Hello traveller, it's cookie time!",
53+
description:
54+
'Our website uses tracking cookies to understand how you interact with it. The tracking will be enabled only if you accept explicitly. <a href="#privacy-policy" data-cc="show-preferencesModal" class="cc__link">Manage preferences</a>',
55+
acceptAllBtn: 'Accept all',
56+
acceptNecessaryBtn: 'Reject all',
57+
showPreferencesBtn: 'Manage preferences',
58+
//closeIconLabel: 'Close',
59+
footer: `
60+
<a href="https://www.databend.com/privacy/" target="_blank">Privacy Policy</a>
61+
<a href="https://www.databend.com/terms-of-service/" target="_blank">Terms of Use</a>
62+
`,
63+
},
64+
preferencesModal: {
65+
title: 'Cookie preferences',
66+
acceptAllBtn: 'Accept all',
67+
acceptNecessaryBtn: 'Reject all',
68+
savePreferencesBtn: 'Save preferences',
69+
closeIconLabel: 'Close',
70+
sections: [
71+
{
72+
title: 'Cookie Usage',
73+
description:
74+
`We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a target="_blank" href="https://www.databend.com/privacy/" class="cc__link">privacy policy</a>.`,
75+
},
76+
{
77+
title: 'Strictly necessary cookies',
78+
description: 'These cookies are essential for the website to function properly and cannot be switched off in our systems. They are usually set in response to actions made by you, such as setting your privacy preferences, logging in, or filling in forms.',
79+
linkedCategory: 'necessary',
80+
},
81+
{
82+
title: 'Performance and Analytics cookies',
83+
linkedCategory: 'analytics',
84+
cookieTable: {
85+
headers: {
86+
name: 'Name',
87+
domain: 'Service',
88+
description: 'Description',
89+
expiration: 'Expiration',
90+
},
91+
body: [
92+
{
93+
name: '_ga',
94+
domain: 'Google Analytics',
95+
description:
96+
'Cookie set by <a target="_blank" href="https://developers.google.com/analytics">Google Analytics</a>.',
97+
expiration: 'Expires after 15 days',
98+
},
99+
{
100+
name: '_gid',
101+
domain: 'Google Analytics',
102+
description:
103+
'Cookie set by <a target="_blank" href="https://developers.google.com/analytics">Google Analytics</a>',
104+
expiration: 'Session',
105+
},
106+
{
107+
name: 'ko_id',
108+
domain: 'Koala Analytics',
109+
description:
110+
'Cookie set by <a target="_blank" href="https://getkoala.com/">Koala Analytics</a>',
111+
expiration: 'Session',
112+
},
113+
{
114+
name: 'ko_sid',
115+
domain: 'Koala Analytics',
116+
description:
117+
'Cookie set by <a target="_blank" href="https://getkoala.com/">Koala Analytics</a>',
118+
expiration: 'Expires after 1 days',
119+
},
120+
],
121+
},
122+
},
123+
{
124+
title: 'More information',
125+
description:
126+
'For any queries in relation to my policy on cookies and your choices, please <a class="cc__link" href="mailto:[email protected]">contact us</a>.',
127+
},
128+
],
129+
},
130+
},
131+
zh: {
132+
consentModal: {
133+
title: "探索我们的 Cookie 使用，轻松管理您的选择！",
134+
description:
135+
'我们的网站使用跟踪 cookie 来了解您与网站的互动。只有在您明确同意的情况下，跟踪功能才会启用。<a href="#privacy-policy" data-cc="show-preferencesModal" class="cc__link">管理偏好</a>',
136+
acceptAllBtn: '全部接受',
137+
acceptNecessaryBtn: '全部拒绝',
138+
showPreferencesBtn: '管理偏好',
139+
footer: `
140+
<a href="https://www.databend.cn/privacy/" target="_blank">隐私政策</a>
141+
<a href="https://www.databend.cn/terms-of-service/" target="_blank">使用条款</a>
142+
`,
143+
},
144+
preferencesModal: {
145+
title: 'Cookie 偏好设置',
146+
acceptAllBtn: '全部接受',
147+
acceptNecessaryBtn: '全部拒绝',
148+
savePreferencesBtn: '保存偏好',
149+
closeIconLabel: '关闭',
150+
sections: [
151+
{
152+
title: 'Cookie 使用',
153+
description:
154+
'我们使用 cookie 来确保网站的基本功能并提升您的在线体验。您可以随时选择启用或禁用每个类别。如需了解有关 cookie 和其他敏感数据的更多详情，请阅读完整的<a target="_blank" href="https://www.databend.cn/privacy/" class="cc__link">隐私政策</a>。',
155+
},
156+
{
157+
title: '严格必要的 cookie',
158+
description: '这些 Cookie 是网站正常运行所必需的，无法在我们的系统中被禁用。它们通常在您进行某些操作时设置，例如设置隐私偏好、登录或填写表单。',
159+
linkedCategory: 'necessary',
160+
},
161+
{
162+
title: '性能和分析 cookie',
163+
linkedCategory: 'analytics',
164+
cookieTable: {
165+
headers: {
166+
name: '名称',
167+
domain: '服务',
168+
description: '描述',
169+
expiration: '有效期',
170+
},
171+
body: [
172+
{
173+
name: '_ga',
174+
domain: 'Google Analytics',
175+
description:
176+
'由 <a target="_blank" href="https://developers.google.com/analytics">Google Analytics</a> 设置的 cookie。',
177+
expiration: '15 天后过期',
178+
},
179+
{
180+
name: '_gid',
181+
domain: 'Google Analytics',
182+
description:
183+
'由 <a target="_blank" href="https://developers.google.com/analytics">Google Analytics</a> 设置的 cookie。',
184+
expiration: '会话结束',
185+
},
186+
{
187+
name: 'ko_id',
188+
domain: 'Koala Analytics',
189+
description:
190+
'由 <a target="_blank" href="https://getkoala.com/">Koala Analytics</a> 设置的 cookie。',
191+
expiration: '会话结束',
192+
},
193+
{
194+
name: 'ko_sid',
195+
domain: 'Koala Analytics',
196+
description:
197+
'由 <a target="_blank" href="https://getkoala.com/">Koala Analytics</a> 设置的 cookie。',
198+
expiration: '1 天后过期',
199+
},
200+
],
201+
},
202+
},
203+
{
204+
title: '更多信息',
205+
description:
206+
'如有关于 cookie 政策或您的选择的任何疑问，请<a class="cc__link" href="mailto:[email protected]">联系我们</a>。',
207+
},
208+
],
209+
},
210+
}
211+
},
212+
},
213+
};
214+
215+
export default pluginConfig;

‎src/css/custom.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,3 +365,6 @@ textarea {
365365
.ant-input {
366366
color: var(--color-text-1);
367367
}
368+
#cc-main .cm {
369+
border: 1px solid var(--color-border);
370+
}

‎src/css/theme.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,4 +410,12 @@
410410
--indigo-5: rgb(63, 80, 180);
411411
--prism-color2: #F8F8F2;
412412
--prism-background-color2: #121a2a;
413+
}
414+
415+
.cc--darkmode {
416+
--cc-btn-primary-border-color:rgb(0, 96, 210) !important;
417+
--cc-btn-primary-bg: rgb(0, 96, 210) !important;
418+
--cc-btn-primary-color: #fff !important;
419+
--cc-btn-primary-hover-bg: rgb(0, 96, 210, 0.75) !important;
420+
--cc-btn-primary-hover-color:#fff !important;
413421
}

‎src/theme/Footer/index.tsx

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,16 @@ import Head from "@docusaurus/Head";
1010
import useBaseUrl from "@docusaurus/useBaseUrl";
1111
import Link from "@docusaurus/Link";
1212
import { useThemeConfig } from "@docusaurus/theme-common";
13-
import CookiesConsent from "../../components/CookiesConsent";
1413
import styles from "./index.module.scss";
1514
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
15+
import { useMount } from "ahooks";
16+
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
17+
import "vanilla-cookieconsent/dist/cookieconsent.css";
18+
import * as CookieConsent from "vanilla-cookieconsent";
19+
import pluginConfig from "@site/src/components/Config/CookieConsentConfig";
20+
import { shouldShowConsent } from "@site/src/utils/tools";
1621
// import ProgressBar from "react-scroll-progress-bar";
22+
const COOKIES_CLASS = "show--consent";
1723

1824
function Footer() {
1925
const year = new Date().getFullYear();
@@ -23,6 +29,36 @@ function Footer() {
2329
customFields: { isChina },
2430
},
2531
} = useDocusaurusContext() as any;
32+
useMount(() => {
33+
if (ExecutionEnvironment.canUseDOM) {
34+
CookieConsent.run(pluginConfig);
35+
const html = document.documentElement;
36+
const updateHtmlClass = () => {
37+
const shouldShow = shouldShowConsent();
38+
if (shouldShow && !html.classList.contains(COOKIES_CLASS)) {
39+
html.classList.add(COOKIES_CLASS);
40+
// html.classList.add("cc--darkmode");
41+
} else if (!shouldShow && html.classList.contains(COOKIES_CLASS)) {
42+
html.classList.remove(COOKIES_CLASS);
43+
}
44+
};
45+
updateHtmlClass();
46+
const observer = new MutationObserver((mutations) => {
47+
for (const mutation of mutations) {
48+
if (
49+
mutation.type === "attributes" &&
50+
mutation.attributeName === "class"
51+
) {
52+
updateHtmlClass();
53+
}
54+
}
55+
});
56+
observer.observe(html, { attributes: true, attributeFilter: ["class"] });
57+
return () => {
58+
observer.disconnect();
59+
};
60+
}
61+
});
2662
return (
2763
<footer className={clsx("footer", styles.footer)}>
2864
<Head>
@@ -162,20 +198,6 @@ function Footer() {
162198
</Link>
163199
);
164200
})}
165-
{/* <span>|</span>
166-
{(footer.links[1].items as any[])?.map((item, index) => {
167-
const Icon = icons[item.label];
168-
return (
169-
<Link to={item.href} key={index}>
170-
<h6>
171-
<span className={clsx("icon", styles.icon)}>
172-
<Icon size={20} />
173-
</span>
174-
{item.label}
175-
</h6>
176-
</Link>
177-
);
178-
})} */}
179201
</div>
180202
<div className={styles.footerCopyright}>
181203
<p>
@@ -184,14 +206,6 @@ function Footer() {
184206
Software Foundation.
185207
</p>
186208
</div>
187-
<CookiesConsent />
188-
{/* <div className={styles.ProgressBar}>
189-
<ProgressBar
190-
height="2px"
191-
bgcolor="var(--ifm-color-primary)"
192-
duration="0.2"
193-
/>
194-
</div> */}
195209
</footer>
196210
);
197211
}

‎src/utils/tools.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import dayjs from "dayjs";
22
import React from "react";
3+
import Cookie from "js-cookie";
34
import { translate } from "@docusaurus/Translate";
45
import Translate from "@docusaurus/Translate";
56
import generatedInfo from "@generated/i18n";
@@ -25,6 +26,11 @@ export function getReleaseVersion() {
2526
);
2627
}
2728

29+
export function shouldShowConsent() {
30+
const cookie = Cookie.get("cc_cookie");
31+
return !cookie;
32+
}
33+
2834
function $t(text: string, isText = true): string | any {
2935
if (isText) {
3036
return translate({

‎yarn.lock

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7955,6 +7955,11 @@ js-cookie@^2.x.x:
79557955
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
79567956
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
79577957

7958+
js-cookie@^3.0.5:
7959+
version "3.0.5"
7960+
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
7961+
integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
7962+
79587963
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
79597964
version "4.0.0"
79607965
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -12261,6 +12266,11 @@ value-equal@^1.0.1:
1226112266
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
1226212267
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
1226312268

12269+
vanilla-cookieconsent@^3.1.0:
12270+
version "3.1.0"
12271+
resolved "https://registry.yarnpkg.com/vanilla-cookieconsent/-/vanilla-cookieconsent-3.1.0.tgz#0f430f4788e9a09e22e795088889b0679a88a263"
12272+
integrity sha512-/McNRtm/3IXzb9dhqMIcbquoU45SzbN2VB+To4jxEPqMmp7uVniP6BhGLjU8MC7ZCDsNQVOp27fhQTM/ruIXAA==
12273+
1226412274
vary@~1.1.2:
1226512275
version "1.1.2"
1226612276
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

0 commit comments

Comments
 (0)