Merge pull request #45 from bertamatu/update-gdpr

update cookie consent
bertamatu · Jun 30, 2023 · 239e337 · 239e337
2 parents d140c4a + 4abeb57
commit 239e337
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 55 deletions.
diff --git a/.gitignore b/.gitignore
@@ -54,6 +54,7 @@ typings/
 # dotenv environment variable files
 .env
 .env.development
+.env.production
 
 # gatsby files
 .cache

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -7,61 +7,60 @@ require('dotenv').config({
 module.exports = {
     trailingSlash: `always`,
     siteMetadata: {
-          title: `berta.codes`,
-          titleTemplate: 'berta.codes',
-          description: `PORTFOLIO. Front-end software developer.`,
-          author: `@berta.codes`,
-          url: 'https://www.berta.codes',
-          menuLinks: [
-              {
-                  name: 'HOME',
-                  link: '/',
-              },
-              {
-                  name: 'ABOUT',
-                  link: '/about',
-              },
-              {
-                  name: 'PROJECTS',
-                  link: '/projects',
-              },
-              {
-                  name: 'GALLERY',
-                  link: '/gallery',
-              },
-              {
-                  name: 'BLOG',
-                  link: '/blog',
-              },
-              {
-                  name: 'LINKS',
-                  link: '/links',
-              },
-              {
-                  name: 'SETUP',
-                  link: '/setup',
-              },
-              {
+        title: `berta.codes`,
+        titleTemplate: 'berta.codes',
+        description: `PORTFOLIO. Front-end software developer.`,
+        author: `@berta.codes`,
+        url: 'https://www.berta.codes',
+        menuLinks: [
+            {
+                name: 'HOME',
+                link: '/',
+            },
+            {
+                name: 'ABOUT',
+                link: '/about',
+            },
+            {
+                name: 'PROJECTS',
+                link: '/projects',
+            },
+            {
+                name: 'GALLERY',
+                link: '/gallery',
+            },
+            {
+                name: 'BLOG',
+                link: '/blog',
+            },
+            {
+                name: 'LINKS',
+                link: '/links',
+            },
+            {
+                name: 'SETUP',
+                link: '/setup',
+            },
+            {
                 name: 'SUPPORT',
                 link: '/support',
-              },
-              {
-                  name: 'CONTACT',
-                  link: '/contact',
-              },
-          ],
+            },
+            {
+                name: 'CONTACT',
+                link: '/contact',
+            },
+        ],
     },
     plugins: [
         {
-          resolve: `gatsby-plugin-google-gtag`,
-          options: {
-            trackingIds: [ 
-              process.env.GATSBY_GA4
-            ],
-            pluginConfig: {
-              head: true,
-            },
-          },
+            resolve: `gatsby-plugin-gdpr-cookies`,
+            options: {
+                googleAnalytics: {
+                    trackingId: process.env.GATSBY_GA4,
+                    anonymize: true,
+                },
+                environments: ['production', 'development'],
+            },
         },
         `gatsby-plugin-react-helmet`,
         `gatsby-plugin-catch-links`,
@@ -127,7 +126,7 @@ module.exports = {
                     'Yeseva One',
                     'Vidaloka',
                     'Major Mono Display',
-                    'Oswald'
+                    'Oswald',
                 ],
                 display: 'swap',
             },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "gatsby-background-image": "^1.6.0",
     "gatsby-image": "^3.11.0",
     "gatsby-plugin-catch-links": "^5.7.0",
+    "gatsby-plugin-gdpr-cookies": "^2.0.9",
     "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-google-gtag": "^5.11.0",
     "gatsby-plugin-image": "^3.7.0",
@@ -31,6 +32,7 @@
     "gatsby-transformer-sharp": "^5.7.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-cookie-consent": "^8.0.1",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.8.0",

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useStaticQuery, graphql } from 'gatsby';
 import Header from './Header';
 import '../style/layout.css';
+import CookieConsent from 'react-cookie-consent';
+import { useLocation } from '@reach/router';
+import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies';
 
 const Layout = ({ children }) => {
     const data = useStaticQuery(graphql`
@@ -19,10 +22,87 @@ const Layout = ({ children }) => {
         }
     `);
 
+    const location = useLocation();
+    const [isMobileView, setIsMobileView] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobileView(window.innerWidth < 768);
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const sectionStyle = {
+        marginTop: '5vh',
+    };
+
+    const cookieConsentStyle = {
+        backgroundColor: '#e3e3e3',
+        fontSize: '0.7rem',
+        color: '#000',
+        transform: 'translateY(-20%)',
+        boxShadow:
+            'rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px',
+        width: '100%',
+        border: '1px solid white',
+        borderRadius: '4px',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: `${isMobileView ? '0 30px' : '0 100px'}`,
+    };
+
+    const buttonStyle = {
+        background: '#a6f7d3',
+        borderRadius: '4px',
+        fontWeight: 'bold',
+    };
+
+    const declineButtonStyle = {
+        backgroundColor: 'transparent',
+        borderRadius: '4px',
+        color: '#919191',
+    };
+
     return (
-        <section style={{ marginTop: '5vh' }}>
+        <section style={sectionStyle}>
             <Header siteTitle={data.site.siteMetadata.title} />
             <main>{children}</main>
+            <CookieConsent
+                location="bottom"
+                buttonText="Accept"
+                declineButtonText="Reject"
+                cookieName="gatsby-gdpr-google-analytics"
+                enableDeclineButton
+                expires={150}
+                style={cookieConsentStyle}
+                buttonStyle={buttonStyle}
+                declineButtonStyle={declineButtonStyle}
+                onAccept={() => {
+                    initializeAndTrack(location);
+                }}
+            >
+                <div style={{ textAlign: 'justify' }}>
+                    I'm thrilled to have you here at{' '}
+                    <strong>Berta Codes</strong>! By clicking{' '}
+                    <strong>'Accept'</strong>, you're giving me the green light
+                    to use cookies and work my magic in creating a personalized
+                    experience just for you!{' '}
+                    <a
+                        style={{ color: '#4287db' }}
+                        href="https://www.iubenda.com/privacy-policy/96553161/cookie-policy"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        Cookie Policy.
+                    </a>
+                </div>
+            </CookieConsent>
         </section>
     );
 };

diff --git a/src/pages/404.js b/src/pages/404.js
@@ -5,8 +5,17 @@ import Seo from '../components/Seo';
 const NotFoundPage = () => (
     <Layout>
         <Seo title="404: Not found" />
-        <h1>NOT FOUND</h1>
-        <div>You just hit a route that doesn&#39;t exist... the sadness:(</div>
+        <div
+            style={{
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                marginTop: '200px',
+            }}
+        >
+            404 - You just hit a route that doesn&#39;t exist... the sadness:(
+        </div>
     </Layout>
 );