Skip to content

Commit cdc72bd

Browse files
TibowlTibowl
committed
Upgrade dependencies, only load GTM when cookie consent is given
1 parent 88adece commit cdc72bd

File tree

5 files changed

+458
-1352
lines changed

5 files changed

+458
-1352
lines changed

‎components/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import FormattedLink from "./FormattedLink"
22

3-
export default function Footer({ location }: { location: string }) {
4-
return <footer className="flex flex-col items-center justify-center w-full border-t text-center">
3+
export default function Footer({ location, marginBottom }: { location: string, marginBottom: number }) {
4+
return <footer className="flex flex-col items-center justify-center w-full border-t text-center" style={({ marginBottom: `${marginBottom}px` })}>
55
<div className="flex items-center justify-center">
66
© All rights reserved by miHoYo. Other properties belong to their respective owners.
77
</div>

‎package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,35 @@
88
"lint": "next lint"
99
},
1010
"dependencies": {
11-
"chart.js": "^3.7.0",
12-
"cookie": "^0.4.1",
11+
"chart.js": "^3.7.1",
12+
"cookie": "^0.4.2",
1313
"git-raw-commits": "^2.0.11",
1414
"jsonwebtoken": "^8.5.1",
15-
"next": "12.0.7",
15+
"next": "12.1.0",
1616
"node-fetch": "2.6.6",
1717
"react": "17.0.2",
1818
"react-chartjs-2": "^4.0.1",
19+
"react-cookie-consent": "^7.3.1",
1920
"react-dom": "17.0.2",
20-
"react-markdown": "^7.1.1",
21+
"react-markdown": "^7.1.2",
2122
"react-modal": "^3.14.4",
22-
"react-toastify": "^8.1.0",
23+
"react-toastify": "^8.2.0",
2324
"sharp": "^0.29.3"
2425
},
2526
"devDependencies": {
2627
"@types/cookie": "^0.4.1",
2728
"@types/git-raw-commits": "^2.0.1",
28-
"@types/jsonwebtoken": "^8.5.6",
29+
"@types/jsonwebtoken": "^8.5.8",
2930
"@types/node": "17.0.5",
30-
"@types/node-fetch": "2",
31+
"@types/node-fetch": "^2.6.1",
3132
"@types/react": "17.0.38",
3233
"@types/react-modal": "^3.13.1",
33-
"autoprefixer": "^10.4.0",
34+
"autoprefixer": "^10.4.2",
3435
"babel-plugin-inline-react-svg": "^2.0.1",
3536
"eslint": "8.5.0",
3637
"eslint-config-next": "12.0.7",
37-
"postcss": "^8.4.5",
38-
"tailwindcss": "^3.0.7",
38+
"postcss": "^8.4.7",
39+
"tailwindcss": "^3.0.23",
3940
"typescript": "4.5.4"
4041
}
4142
}

‎pages/_app.tsx‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,75 @@
11
import type { AppProps } from "next/app"
22
import Head from "next/head"
3-
import { useEffect } from "react"
3+
import { useEffect, useRef, useState } from "react"
4+
import CookieConsent, { getCookieConsentValue } from "react-cookie-consent"
45
import "tailwindcss/tailwind.css"
56
import Footer from "../components/Footer"
67
import NavBar from "../components/NavBar"
78
import "../public/global.css"
89
import * as gtag from "../utils/gtag"
10+
import Script from "next/script"
911

1012
export default function MyApp({ Component, pageProps, router }: AppProps) {
13+
const [consented, setConsented] = useState(null as boolean | undefined | null)
14+
15+
useEffect(() => {
16+
const value = getCookieConsentValue()
17+
if (value == "true")
18+
setConsented(true)
19+
else if (value == "true")
20+
setConsented(false)
21+
else
22+
setConsented(undefined)
23+
}, [])
24+
1125
useEffect(() => {
26+
if (!consented)
27+
return
28+
1229
const handleRouteChange = (url: string) => {
1330
gtag.pageview(url)
1431
}
1532
router.events.on("routeChangeComplete", handleRouteChange)
1633
return () => {
1734
router.events.off("routeChangeComplete", handleRouteChange)
1835
}
19-
}, [router.events])
36+
}, [router.events, consented])
2037

2138
return <div className="bg-slate-50 dark:bg-slate-700 min-h-screen flex flex-col items-center justify-between text-slate-900 dark:text-slate-100">
2239
<Head>
2340
<title>{router.pathname.substring(1).replace(/^\w/, w => w.toUpperCase())} | Hu Tao</title>
2441
<link rel="icon" href="/favicon.ico" />
2542
<meta httpEquiv="content-language" content="en-us"></meta>
43+
44+
{consented && <Script async
45+
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
46+
/>}
2647
</Head>
2748

28-
<div className="w-full">
49+
<div className="w-full flex-1">
50+
<div className="absolute z-10">
51+
<CookieConsent
52+
buttonText="Accept all cookies"
53+
declineButtonText="Refuse non-essential cookies"
54+
enableDeclineButton
55+
onAccept={() => {
56+
setConsented(true)
57+
}}
58+
onDecline={() => {
59+
setConsented(false)
60+
}}
61+
>
62+
This website uses cookies to enhance the user experience.
63+
<div style={{ fontSize: "12px" }}>Currently we only use these for analytic purposes, intended to figure out where to focus our efforts.</div>
64+
</CookieConsent>
65+
</div>
66+
2967
<NavBar location={router.asPath} />
3068
<div className="p-4 flex flex-col w-full flex-1 px-1 lg:px-20 items-center justify-center">
3169
<Component {...pageProps} location={router.asPath} />
3270
</div>
3371

72+
<Footer location={router.asPath} marginBottom={consented || consented == null ? 3 : 80} />
3473
</div>
35-
<Footer location={router.asPath} />
3674
</div>
3775
}

‎pages/_document.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
1-
import Document, { Html, Head, Main, NextScript } from "next/document"
2-
1+
import Document, { Head, Html, Main, NextScript } from "next/document"
32
import { GA_TRACKING_ID } from "../utils/gtag"
43

4+
55
export default class MyDocument extends Document {
66
render() {
77
return (
88
<Html>
9-
<Head>
10-
{/* Global Site Tag (gtag.js) - Google Analytics */}
11-
<script
12-
async
13-
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
14-
/>
9+
<Head lang="en">
1510
<script
1611
dangerouslySetInnerHTML={{
1712
__html: `

0 commit comments

Comments
 (0)