added the cookiebar

.eslintrc

@@ -4,7 +4,8 @@
     "plugin:import/typescript",
     "plugin:import/errors",
     "airbnb-typescript",
-    "@mastermindzh/eslint-config"
+    "@mastermindzh/eslint-config",
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

README.md

@@ -10,5 +10,5 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 - migrate resume
 - migrate projects
 - migrate some example blogs
-- set up cookiebar + page
+- set up cookie page
 - release to sftp or gh-pages

package.json

@@ -71,6 +71,7 @@
     "gatsby-transformer-sharp": "^4.20.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
+    "react-cookie-consent": "^8.0.1",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0"
   },

src/components/Cookiebar/CookieBar.module.scss

@@ -0,0 +1,47 @@
+@import "../../assets/scss/variables";
+
+$shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
+
+.cookieBar {
+  align-items: baseline;
+  background: #fff;
+  border-top: 1px solid #808080;
+  bottom: 0px;
+
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  box-shadow: $shadow;
+  color: #000;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  left: 0px;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+}
+
+.content {
+  flex: 1 0 300px;
+  margin: 15px;
+}
+
+.button {
+  background: #fff;
+  border: 1px solid $color-gray-border;
+  border-radius: $button-border-radius;
+  color: $color-base;
+  cursor: pointer;
+  flex: 0 0 auto;
+  font-size: $typographic-base-font-size;
+  font-weight: normal;
+  height: $button-height;
+  margin: 15px;
+  padding: 5px 10px;
+  text-align: center;
+
+  &:hover,
+  &:focus {
+    color: $color-primary;
+  }
+}

src/components/Cookiebar/CookieBar.tsx

@@ -0,0 +1,19 @@
+import { Link } from "gatsby";
+import React from "react";
+import CookieConsent from "react-cookie-consent";
+import * as styles from "./CookieBar.module.scss";
+
+export const CookieBar = () => {
+  return (
+    <CookieConsent
+      disableButtonStyles
+      disableStyles
+      contentClasses={styles.content}
+      containerClasses={styles.cookieBar}
+      buttonClasses={styles.button}
+    >
+      This website uses cookies to enhance the user experience.{" "}
+      <small>Click <Link to="/">here</Link> to learn more about cookies.</small>
+    </CookieConsent>
+  );
+};

src/components/Layout/Layout.tsx

@@ -3,6 +3,7 @@ import Helmet from "react-helmet";
 
 import { useSiteMetadata } from "@/hooks";
 
+import { CookieBar } from "../Cookiebar/CookieBar";
 import * as styles from "./Layout.module.scss";
 
 interface Props {
@@ -35,6 +36,7 @@ const Layout: React.FC<Props> = ({
         <meta name="twitter:description" content={description} />
         <meta name="twitter:image" content={metaImageUrl} />
       </Helmet>
+      <CookieBar />
       {children}
     </div>
   );