Add cookiebot consent functionality (#76)

* Add cookiebot consent functionality * fixed slideshow overflow * Link underline in cookiebot * fixup buttons * Fixup home page path function
SU-SWS · Oct 31, 2024 · 1ed6ff0 · 1ed6ff0
1 parent d67bc54
commit 1ed6ff0
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 18 deletions.
diff --git a/app/api/revalidate/route.tsx b/app/api/revalidate/route.tsx
@@ -1,18 +1,9 @@
 import {NextRequest, NextResponse} from "next/server"
-import {revalidateTag, unstable_cache as nextCache} from "next/cache"
-import {getEntityFromPath} from "@lib/gql/gql-queries"
+import {revalidateTag} from "next/cache"
+import {getHomePagePath} from "@lib/gql/gql-queries"
 
 export const revalidate = 0
 
-export const getHomePagePath = nextCache(
-  async () => {
-    const {entity} = await getEntityFromPath("/")
-    return entity?.path
-  },
-  [],
-  {tags: ["paths:/"]}
-)
-
 export const GET = async (request: NextRequest) => {
   const secret = request.nextUrl.searchParams.get("secret")
   if (secret !== process.env.DRUPAL_REVALIDATE_SECRET)

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,6 +9,7 @@ import UserAnalytics from "@components/elements/user-analytics"
 import clsx from "clsx"
 import Editori11y from "@components/tools/editorially"
 import localFont from "next/font/local"
+import Cookiebot from "@components/elements/cookiebot"
 
 const appleIcons: Icon[] = [60, 72, 76, 114, 120, 144, 152, 180].map(size => ({
   url: `https://www-media.stanford.edu/assets/favicon/apple-touch-icon-${size}x${size}.png`,
@@ -48,11 +49,12 @@ const RootLayout = ({children, modal}: {children: React.ReactNode; modal: React.
 
   return (
     <html lang="en" className={clsx(sourceSans3.className, roboto.variable, stanford.variable)}>
-      <UserAnalytics />
-      <DrupalWindowSync />
-      {isDevMode && <Editori11y />}
-
       <body className="text-archway-dark">
+        <Cookiebot />
+        <UserAnalytics />
+        <DrupalWindowSync />
+        {isDevMode && <Editori11y />}
+
         <nav aria-label="Skip Links">
           <a href="#main-content" className="skiplink">
             Skip to main content

diff --git a/app/sitemap.tsx b/app/sitemap.tsx
@@ -1,7 +1,7 @@
 import {MetadataRoute} from "next"
 import {graphqlClient} from "@lib/gql/gql-client"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
-import {getHomePagePath} from "./api/revalidate/route"
+import {getHomePagePath} from "@lib/gql/gql-queries"
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 export const revalidate = 604800

diff --git a/next.config.js b/next.config.js
@@ -4,7 +4,7 @@ const nextConfig = {
   experimental: {},
   typescript: {
     // Disable build errors since dev dependencies aren't loaded on prod. Rely on GitHub actions to throw any errors.
-    ignoreBuildErrors: process.env.CI !== 'true',
+    // ignoreBuildErrors: process.env.CI !== 'true',
   },
   images: {
     remotePatterns: [

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "postcss": "^8.4.47",
     "qs": "^6.13.0",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
+    "react-cookiebot": "^1.0.10",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "react-error-boundary": "^4.1.2",
     "react-focus-lock": "^2.13.2",
@@ -65,6 +66,7 @@
     "@storybook/nextjs": "^8.3.6",
     "@storybook/react": "^8.3.6",
     "@storybook/testing-library": "^0.2.2",
+    "@types/react-cookiebot": "^1.0.5",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^9.0.1",
     "encoding": "^0.1.13",

diff --git a/src/components/elements/cookiebot.tsx b/src/components/elements/cookiebot.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import ReactCookieBot from "react-cookiebot"
+
+const Cookiebot = () => {
+  return <ReactCookieBot domainGroupId="bcda1e2f-63c7-4cad-81b4-04a49e30b05f" />
+}
+
+export default Cookiebot
diff --git a/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx b/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx
@@ -53,7 +53,7 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
       )}
 
       {paragraph.sumCarouselSlides && (
-        <div className="relative left-1/2 mb-32 mt-0 w-screen -translate-x-1/2">
+        <div className="relative left-1/2 mb-32 mt-0 w-screen -translate-x-1/2 overflow-x-hidden">
           <Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
             {paragraph.sumCarouselSlides.map((slide, slideIndex) => {
               return (

diff --git a/src/lib/gql/gql-queries.tsx b/src/lib/gql/gql-queries.tsx
@@ -174,3 +174,12 @@ export const getAlgoliaCredential = nextCache(
   ["algolia"],
   {tags: ["algolia"]}
 )
+
+export const getHomePagePath = nextCache(
+  async () => {
+    const {entity} = await getEntityFromPath("/")
+    return entity?.path
+  },
+  [],
+  {tags: ["paths:/"]}
+)
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -107,3 +107,9 @@ body button:focus {
     padding-right: 59px;
   }
 }
+
+#CybotCookiebotDialog {
+  a:hover, a:focus-visible, button:hover, button:focus-visible {
+    text-decoration: underline;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -6470,6 +6470,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-cookiebot@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@types/react-cookiebot@npm:1.0.5"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10c0/963ae31e3dfe2c94ca29df9676a8404e8c788a9daced47afa46d24a0d9491628b0bd3337ffc16c212d6ce38ceb60c89925a9393b77a532821d2c2c2f458cb367
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:[email protected]":
   version: 19.0.0-rc.1
   resolution: "types-react-dom@npm:19.0.0-rc.1"
@@ -14806,6 +14815,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-cookiebot@npm:^1.0.10":
+  version: 1.0.10
+  resolution: "react-cookiebot@npm:1.0.10"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/f40848be28c24e1103373e6f78a1793c90054c96ccd213b43712c2c1dc43a4bcd35e6d76bd2c460b9b5602670d331baee07b45d23c96d04c518bdf9241fb7797
+  languageName: node
+  linkType: hard
+
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
@@ -16662,6 +16683,7 @@ __metadata:
     "@tailwindcss/container-queries": "npm:^0.1.1"
     "@types/node": "npm:^22.8.4"
     "@types/react": "npm:^19.0.0-rc.1"
+    "@types/react-cookiebot": "npm:^1.0.5"
     "@types/react-dom": "npm:19.0.0-rc.1"
     "@types/react-slick": "npm:^0.23.13"
     algoliasearch: "npm:^5.12.0"
@@ -16687,6 +16709,7 @@ __metadata:
     prettier-plugin-tailwindcss: "npm:^0.6.8"
     qs: "npm:^6.13.0"
     react: "npm:19.0.0-rc-fb9a90fa48-20240614"
+    react-cookiebot: "npm:^1.0.10"
     react-docgen: "npm:^7.1.0"
     react-dom: "npm:19.0.0-rc-fb9a90fa48-20240614"
     react-error-boundary: "npm:^4.1.2"