diff --git a/.gitignore b/.gitignore index 3038f2d..b99961d 100644 --- 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 index ffb95cf..4bee90d 100644 --- 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 index 6651c4c..4d45c95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,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", @@ -35,6 +36,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", @@ -9434,6 +9436,22 @@ "node": ">=0.8.0" } }, + "node_modules/gatsby-plugin-gdpr-cookies": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/gatsby-plugin-gdpr-cookies/-/gatsby-plugin-gdpr-cookies-2.0.9.tgz", + "integrity": "sha512-rU4O5oJ+ace0B6D4CG6dG5oOLYRQT3LEb+I5XjCieYVkk1KB0QgqhzsgkV8K6JO18EOExE0Y4HyHQHj3hF6uGg==", + "dependencies": { + "@babel/runtime": "^7.11.2" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "gatsby": "^2.24.77 || ^3.0.0 || ^4.0.0", + "react": "^16.13.1 || ^17.0.1", + "react-dom": "^16.13.1 || ^17.0.1" + } + }, "node_modules/gatsby-plugin-google-fonts": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz", @@ -11558,6 +11576,11 @@ "@sideway/pinpoint": "^2.0.0" } }, + "node_modules/js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -14697,6 +14720,20 @@ "node": ">=0.10.0" } }, + "node_modules/react-cookie-consent": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/react-cookie-consent/-/react-cookie-consent-8.0.1.tgz", + "integrity": "sha512-4A2jzPQDFfBhtxIz4hYX+vJ0QnOknGdOXpEoetXzgwUrMtxVJVow8YgBsGerNt5rJI7WhKkHwr8LmxekxgVejg==", + "dependencies": { + "js-cookie": "^2.2.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -25148,6 +25185,14 @@ } } }, + "gatsby-plugin-gdpr-cookies": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/gatsby-plugin-gdpr-cookies/-/gatsby-plugin-gdpr-cookies-2.0.9.tgz", + "integrity": "sha512-rU4O5oJ+ace0B6D4CG6dG5oOLYRQT3LEb+I5XjCieYVkk1KB0QgqhzsgkV8K6JO18EOExE0Y4HyHQHj3hF6uGg==", + "requires": { + "@babel/runtime": "^7.11.2" + } + }, "gatsby-plugin-google-fonts": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz", @@ -26644,6 +26689,11 @@ "@sideway/pinpoint": "^2.0.0" } }, + "js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -28871,6 +28921,14 @@ "loose-envify": "^1.1.0" } }, + "react-cookie-consent": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/react-cookie-consent/-/react-cookie-consent-8.0.1.tgz", + "integrity": "sha512-4A2jzPQDFfBhtxIz4hYX+vJ0QnOknGdOXpEoetXzgwUrMtxVJVow8YgBsGerNt5rJI7WhKkHwr8LmxekxgVejg==", + "requires": { + "js-cookie": "^2.2.1" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/package.json b/package.json index 50e7c3b..48d90cd 100644 --- 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 index 648f42c..deddee4 100644 --- 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 ( -
+
{children}
+ { + initializeAndTrack(location); + }} + > +
+ I'm thrilled to have you here at{' '} + Berta Codes! By clicking{' '} + 'Accept', you're giving me the green light + to use cookies and work my magic in creating a personalized + experience just for you!{' '} + + Cookie Policy. + +
+
); }; diff --git a/src/pages/404.js b/src/pages/404.js index 9673fec..f54a48d 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -5,8 +5,17 @@ import Seo from '../components/Seo'; const NotFoundPage = () => ( -

NOT FOUND

-
You just hit a route that doesn't exist... the sadness:(
+
+ 404 - You just hit a route that doesn't exist... the sadness:( +
);