From 0957c33fcd3471bd09d305ef3fef8f42f625d5d2 Mon Sep 17 00:00:00 2001 From: yellowCrimsonGator Date: Tue, 30 Jan 2024 22:24:58 +0800 Subject: [PATCH] feat: adds simpleanalytics and cookie consent --- package.json | 3 +- pnpm-lock.yaml | 46 ++++++++++++ src/components/CookieConsent/CookieBanner.jsx | 18 +++++ src/components/CookieConsent/index.jsx | 42 +++++++++++ src/css/custom.scss | 73 ++++++++++++++++++- src/theme/Root.js | 11 +++ 6 files changed, 188 insertions(+), 5 deletions(-) create mode 100644 src/components/CookieConsent/CookieBanner.jsx create mode 100644 src/components/CookieConsent/index.jsx create mode 100644 src/theme/Root.js diff --git a/package.json b/package.json index 3169f445..ddeb80a1 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "sass": "^1.59.3", "sass-loader": "^13.2.1", "typescript": "^5.0.2", - "webpack": "^5.76.3" + "webpack": "^5.76.3", + "react-cookie": "7.0.2" }, "browserslist": { "production": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1d8dfdd..94073f9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@algolia/client-search': specifier: ^4.15.0 @@ -43,6 +47,9 @@ dependencies: react: specifier: ^17.0.1 version: 17.0.2 + react-cookie: + specifier: 7.0.2 + version: 7.0.2(react@17.0.2) react-dom: specifier: ^17.0.1 version: 17.0.2(react@17.0.2) @@ -1584,6 +1591,7 @@ packages: /@docusaurus/core@2.4.0(@docusaurus/types@2.4.0)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.2): resolution: {integrity: sha512-J55/WEoIpRcLf3afO5POHPguVZosKmJEQWKBL+K7TAnfuE7i+Y0NPLlkKtnWCehagGsgTqClfQEexH/UT4kELA==} engines: {node: '>=16.14'} + hasBin: true peerDependencies: react: ^16.8.4 || ^17.0.0 react-dom: ^16.8.4 || ^17.0.0 @@ -2766,6 +2774,10 @@ packages: '@types/node': 18.15.5 dev: false + /@types/cookie@0.6.0: + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + dev: false + /@types/eslint-scope@3.7.4: resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==} dependencies: @@ -2811,6 +2823,13 @@ packages: resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==} dev: false + /@types/hoist-non-react-statics@3.3.5: + resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==} + dependencies: + '@types/react': 17.0.48 + hoist-non-react-statics: 3.3.2 + dev: false + /@types/html-minifier-terser@6.1.0: resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==} dev: false @@ -3289,6 +3308,7 @@ packages: /autoprefixer@10.4.14(postcss@8.4.21): resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==} engines: {node: ^10 || ^12 || >=14} + hasBin: true peerDependencies: postcss: ^8.1.0 dependencies: @@ -3840,6 +3860,11 @@ packages: engines: {node: '>= 0.6'} dev: false + /cookie@0.6.0: + resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} + engines: {node: '>= 0.6'} + dev: false + /copy-text-to-clipboard@3.1.0: resolution: {integrity: sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==} engines: {node: '>=12'} @@ -6871,6 +6896,17 @@ packages: pure-color: 1.3.0 dev: false + /react-cookie@7.0.2(react@17.0.2): + resolution: {integrity: sha512-UnW1rZw1VibRdTvV8Ksr0BKKZoajeUxYLE89sIygDeyQgtz6ik89RHOM+3kib36G9M7HxheORggPoLk5DxAK7Q==} + peerDependencies: + react: '>= 16.3.0' + dependencies: + '@types/hoist-non-react-statics': 3.3.5 + hoist-non-react-statics: 3.3.2 + react: 17.0.2 + universal-cookie: 7.0.2 + dev: false + /react-dev-utils@12.0.1(typescript@5.0.2)(webpack@5.76.3): resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==} engines: {node: '>=14'} @@ -8093,6 +8129,13 @@ packages: unist-util-visit-parents: 3.1.1 dev: false + /universal-cookie@7.0.2: + resolution: {integrity: sha512-EC9PA+1nojhJtVnKW2Z7WYah01jgYJApqhX+Y8XU97TnFd7KaoxWTHiTZFtfpfV50jEF1L8V5p64ZxIx3Q67dg==} + dependencies: + '@types/cookie': 0.6.0 + cookie: 0.6.0 + dev: false + /universalify@2.0.0: resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} engines: {node: '>= 10.0.0'} @@ -8105,6 +8148,7 @@ packages: /update-browserslist-db@1.0.10(browserslist@4.21.5): resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==} + hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: @@ -8328,6 +8372,7 @@ packages: /webpack-dev-server@4.13.1(webpack@5.76.3): resolution: {integrity: sha512-5tWg00bnWbYgkN+pd5yISQKDejRBYGEw15RaEEslH+zdbNDxxaZvEAO2WulaSaFKb5n3YG8JXsGaDsut1D0xdA==} engines: {node: '>= 12.13.0'} + hasBin: true peerDependencies: webpack: ^4.37.0 || ^5.0.0 webpack-cli: '*' @@ -8391,6 +8436,7 @@ packages: /webpack@5.76.3: resolution: {integrity: sha512-18Qv7uGPU8b2vqGeEEObnfICyw2g39CHlDEK4I7NK13LOur1d0HGmGNKGT58Eluwddpn3oEejwvBPoP4M7/KSA==} engines: {node: '>=10.13.0'} + hasBin: true peerDependencies: webpack-cli: '*' peerDependenciesMeta: diff --git a/src/components/CookieConsent/CookieBanner.jsx b/src/components/CookieConsent/CookieBanner.jsx new file mode 100644 index 00000000..5a2a7bab --- /dev/null +++ b/src/components/CookieConsent/CookieBanner.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const CookieBanner = ({ onClick }) => { + return ( +
+
+
+ This site uses cookies.
+
+ +
+
+ ); +}; + +export default CookieBanner; diff --git a/src/components/CookieConsent/index.jsx b/src/components/CookieConsent/index.jsx new file mode 100644 index 00000000..24577376 --- /dev/null +++ b/src/components/CookieConsent/index.jsx @@ -0,0 +1,42 @@ +import React from "react"; +import { useCookies } from "react-cookie"; +import CookieBanner from "./CookieBanner"; + +const COOKIES_CONSENT_NAME = "cookie-consent-given"; +const COOKIES_CONSENT_VALUE = 1; + +export default function CookiesConsent() { + const [cookies, setCookie] = useCookies(); + const [consentGiven, setIsConsentGiven] = React.useState( + cookies?.[COOKIES_CONSENT_NAME] === COOKIES_CONSENT_VALUE + ); + + return consentGiven ? ( + <> + + + + ) : ( + { + const yearFromNow = new Date( + new Date().setFullYear(new Date().getFullYear() + 1) + ); + setCookie(COOKIES_CONSENT_NAME, COOKIES_CONSENT_VALUE, { + expires: yearFromNow, + }); + setIsConsentGiven(true); + }} + /> + ); +} diff --git a/src/css/custom.scss b/src/css/custom.scss index 3e297923..577f8af6 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -23,17 +23,17 @@ padding: 0 var(--ifm-pre-padding); } -html[data-theme='dark'] .docusaurus-highlight-code-line { +html[data-theme="dark"] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } body { - font-family: 'IBM Plex Sans', sans-serif; + font-family: "IBM Plex Sans", sans-serif; } code, pre { - font-family: 'IBM Plex Mono', monospace; + font-family: "IBM Plex Mono", monospace; } p { @@ -45,7 +45,7 @@ p { } h1 { - font-family: 'IBM Plex Mono', monospace; + font-family: "IBM Plex Mono", monospace; font-style: normal; } @@ -127,3 +127,68 @@ h6 { height: 15px; } } + +.cookie-consent { + position: fixed; + bottom: 0; + left: 0; + z-index: 50; + padding: 0 24px 24px 24px; +} + +@media screen and (max-width: 640px) { + .cookie-consent { + width: 100%; + padding: 0 16px 16px 16px; + } +} + +.cookie-consent__wrapper { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + overflow: hidden; + padding: 14px; + background: var(--ifm-navbar-background-color); + border-radius: 12px; + box-shadow: 0 0px 2px rgba(0, 0, 0, 0.25); + color: var(--ifm-font-color-base); + font-weight: 500; + font-size: 15px; +} + +.cookie-consent__confirm { + padding-top: 0.625rem; + padding-bottom: 0.625rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + border-radius: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + cursor: pointer; + border: none; + font-weight: 600; +} + +html[data-theme="dark"] .cookie-consent__confirm { + background: white; + color: rgb(0, 0, 0, 0.8); +} +html[data-theme="dark"] .cookie-consent__confirm:hover { + background: rgb(255, 255, 255, 0.9); +} +html[data-theme="dark"] .cookie-consent__confirm:active { + outline: 2px solid rgb(255, 255, 255, 0.6); +} + +html[data-theme="light"] .cookie-consent__confirm { + background: black; + color: rgb(255, 255, 255); +} +html[data-theme="light"] .cookie-consent__confirm:hover { + background: rgb(0, 0, 0, 0.8); +} +html[data-theme="light"] .cookie-consent__confirm:active { + outline: 2px solid rgb(0, 0, 0, 0.6); +} diff --git a/src/theme/Root.js b/src/theme/Root.js new file mode 100644 index 00000000..a19beb76 --- /dev/null +++ b/src/theme/Root.js @@ -0,0 +1,11 @@ +import React from "react"; +import CookiesConsent from "../components/CookieConsent"; + +export default function Root({ children }) { + return ( + <> + {children} + + + ); +}