added the cookiebar

This commit is contained in:
Rick van Lieshout 2022-09-06 23:48:00 +02:00
parent 799229e0cc
commit d537d80b83
8 changed files with 644 additions and 133 deletions

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 49 KiB

703
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -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;
}
}

View File

@ -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>
);
};

View File

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