Update dependencies + add CookieBanner with Google Analytics (#579)

Author: benface

package.json

@@ -23,11 +23,10 @@
   "devDependencies": {
     "@edgeandnode/eslint-config": "^2.0.3",
     "eslint": "^8.56.0",
-    "eslint-plugin-mdx": "^2.3.2",
+    "eslint-plugin-mdx": "^2.3.3",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-pkg": "^0.18.0",
+    "prettier": "^3.2.1",
     "remark-frontmatter": "^5.0.0",
     "remark-lint-first-heading-level": "^3.1.2",
     "remark-lint-heading-increment": "^3.1.2",

packages/nextra-theme/package.json

@@ -25,8 +25,8 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@edgeandnode/gds": "3.0.0-global-header-1704926172780-5df793a0095123eacaf0e9c364758f71bbc99e44",
-    "@edgeandnode/go": "4.0.0-global-header-1704926172780-5df793a0095123eacaf0e9c364758f71bbc99e44",
+    "@edgeandnode/gds": "3.0.0-analytics-1705101818074-6d04831782c9934b65ca3d72f8fdd32eb1025b86",
+    "@edgeandnode/go": "4.0.0-analytics-1705101818074-6d04831782c9934b65ca3d72f8fdd32eb1025b86",
     "@emotion/react": "^11.11",
     "next": "^13",
     "next-seo": "^6",
@@ -43,8 +43,8 @@
     "react-use": "^17.4.2"
   },
   "devDependencies": {
-    "@edgeandnode/gds": "3.0.0-global-header-1704926172780-5df793a0095123eacaf0e9c364758f71bbc99e44",
-    "@edgeandnode/go": "4.0.0-global-header-1704926172780-5df793a0095123eacaf0e9c364758f71bbc99e44",
+    "@edgeandnode/gds": "3.0.0-analytics-1705101818074-6d04831782c9934b65ca3d72f8fdd32eb1025b86",
+    "@edgeandnode/go": "4.0.0-analytics-1705101818074-6d04831782c9934b65ca3d72f8fdd32eb1025b86",
     "@emotion/react": "^11.11.3",
     "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.47",

pnpm-lock.yaml

@@ -4,8 +4,4 @@ module.exports = {
   semi: false,
   printWidth: 120,
   proseWrap: 'never',
-  plugins: [
-    // for sort fields in package.json
-    require('prettier-plugin-pkg'),
-  ],
 }

prettier.config.js

@@ -13,6 +13,7 @@ const env = {
         ? 'cfeac8baf33c9b4d255f28d57f3c9148' // production
         : 'e57a9892339b2acfd02943c86b746d32' // staging
       : '', // local dev (no tracking)
+  GOOGLE_ANALYTICS_MEASUREMENT_ID: process.env.NODE_ENV === 'production' ? 'G-5MK48LFNKY' : '',
 }
 
 const withNextra = nextra({

website/next.config.js

@@ -13,9 +13,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@edgeandnode/common": "^5.29.2",
-    "@edgeandnode/gds": "3.0.0-global-header-1704926172780-5df793a0095123eacaf0e9c364758f71bbc99e44",
-    "@edgeandnode/go": "4.0.0-global-header-1704926172780-5df793a0095123eacaf0e9c364758f71bbc99e44",
+    "@edgeandnode/common": "^5.30.0",
+    "@edgeandnode/gds": "3.0.0-analytics-1705101818074-6d04831782c9934b65ca3d72f8fdd32eb1025b86",
+    "@edgeandnode/go": "4.0.0-analytics-1705101818074-6d04831782c9934b65ca3d72f8fdd32eb1025b86",
     "@emotion/react": "^11.11.3",
     "@graphprotocol/nextra-theme": "workspace:*",
     "mixpanel-browser": "^2.48.1",
@@ -25,6 +25,7 @@
     "nextra": "^2.13.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "theme-ui": "^0.16.1",
     "unist-util-visit": "^5.0.0"
   },
@@ -34,7 +35,7 @@
     "@types/mixpanel-browser": "^2.48.1",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "fast-xml-parser": "^4.3.2",
+    "fast-xml-parser": "^4.3.3",
     "graphql": "^16.8.1",
     "tsx": "^4.7.0",
     "unified": "^11.0.4"

website/package.json

@@ -2,9 +2,10 @@ import mixpanel from 'mixpanel-browser'
 import { AppProps } from 'next/app'
 import NextLink from 'next/link'
 import { DefaultSeo } from 'next-seo'
+import googleAnalytics from 'react-ga4'
 
 import { AnalyticsProvider, ButtonOrLinkProps, GDSProvider, I18nProvider, Layout } from '@edgeandnode/gds'
-import { GlobalFooter, GlobalHeader } from '@edgeandnode/go'
+import { CookieBanner, GlobalFooter, GlobalHeader } from '@edgeandnode/go'
 
 import { supportedLocales, translations, useI18n } from '@/i18n'
 
@@ -74,7 +75,11 @@ function MyAppWithLocale({ Component, router, pageProps }: AppProps) {
           clientRouter={router}
           mixpanel={{
             sdk: mixpanel,
-            token: process.env.MIXPANEL_TOKEN || null,
+            token: process.env.MIXPANEL_TOKEN ?? null,
+          }}
+          googleAnalytics={{
+            sdk: googleAnalytics,
+            measurementId: process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID ?? null,
           }}
         >
           <div sx={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, overflow: 'hidden' }}>
@@ -101,6 +106,7 @@ function MyAppWithLocale({ Component, router, pageProps }: AppProps) {
             headerSticky
             footer={<GlobalFooter showLogo={true} showLocaleSwitcher={!hideLocaleSwitcher} />}
           >
+            <CookieBanner />
             <Component {...pageProps} />
           </Layout>
         </AnalyticsProvider>