context for color, some bugfixes and types

TODO.md

@@ -1,17 +1,7 @@
 # Todo
 
-## Fonts
-
-```js
-// <!-- Google Webfonts -->
-// <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800,700italic,600italic' rel='stylesheet' type='text/css'>
-// <link href='https://fonts.googleapis.com/css?family=Neuton:400,200,300' rel='stylesheet' type='text/css'>
-```
-
 ## Colours and languages (hooks? some state thing..)
 
-## favicon
-
 ## helmet
 
 <!-- code mentions META at some points (e.g disclaimer page) -->
@@ -22,5 +12,3 @@
 
 - maybe transition to markdown loader?
 - add language switcher + download for both
-- add highlight to "languages I like"
-- tech turns red when hovered over link (need to hover on text too)

jsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "./src",
-    "checkJs": true,
-    "jsx": "react"
-  }
-}

package.json

@@ -26,6 +26,7 @@
     "gatsby-transformer-remark": "^5.19.0",
     "gatsby-transformer-sharp": "^4.19.0",
     "html-react-parser": "^3.0.1",
+    "js-cookie": "^3.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
     "react-cookie-consent": "^7.5.0",
@@ -35,6 +36,7 @@
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
+    "@types/js-cookie": "^3.0.2",
     "@typescript-eslint/parser": "^5.30.7",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",

src/components/filters/filter-list.tsx

@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 
-type Props = {};
+type Props = { children?: ReactNode };
 
 export const FilterList: FunctionComponent<Props> = ({ children }) => {
   return (

src/context/SettingsContext.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const SettingsContext = React.createContext(undefined);

src/context/SettingsProvider.tsx

@@ -0,0 +1,24 @@
+import Cookies from "js-cookie";
+import React, { FunctionComponent, ReactNode, useState } from "react";
+import { Settings } from "./settings";
+import { SettingsContext } from "./SettingsContext";
+
+type Props = { children?: ReactNode };
+
+export const SettingsProvider: FunctionComponent<Props> = ({ children }) => {
+  const cookieValue = Cookies.get("color");
+  const [color, setColor] = useState(cookieValue ?? "body-yellow");
+
+  const defaultSettings: Settings = {
+    color,
+    language: "en",
+    changeColor: (newColor: string) => {
+      // eslint-disable-next-line no-console
+      console.log(newColor);
+      setColor(newColor);
+      Cookies.set("color", newColor);
+    },
+  };
+
+  return <SettingsContext.Provider value={defaultSettings}>{children}</SettingsContext.Provider>;
+};

src/context/settings.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable no-unused-vars */
+export interface Settings {
+  color: string;
+  language: string;
+  changeColor: (color: string) => void;
+}

src/data/resume/tech.ts

@@ -8,40 +8,40 @@ export const techs = [
   { link: "http://elastic.co/products/kibana", label: "Kibana" },
   { link: "http://nodejs.org", label: "NodeJS" },
   { link: "http://docker.com", label: "Docker" },
-  { link: "http://scala-lang.org/", label: "Scala " },
+  { link: "http://scala-lang.org/", label: "Scala" },
-  { link: "http://nativescript.org/", label: "Nativescript " },
+  { link: "http://nativescript.org/", label: "Nativescript" },
-  { link: "http://php.net/manual/en/intro-whatis.php", label: "PHP " },
+  { link: "http://php.net/manual/en/intro-whatis.php", label: "PHP" },
-  { link: "http://mysql.com", label: "MySQL " },
+  { link: "http://mysql.com", label: "MySQL" },
   {
     link: "http://microsoft.com/en-us/sql-server/sql-server-2016",
     label: "SQL Server ",
   },
-  { link: "http://en.wikipedia.org/wiki/Linux", label: "Linux " },
+  { link: "http://en.wikipedia.org/wiki/Linux", label: "Linux" },
-  { link: "http://java.com/en/", label: "Java " },
+  { link: "http://java.com/en/", label: "Java" },
-  { link: "http://angular.io/", label: "Angular " },
+  { link: "http://angular.io/", label: "Angular" },
-  { link: "http://facebook.github.io/react/", label: "React " },
+  { link: "http://facebook.github.io/react/", label: "React" },
-  { link: "http://typescriptlang.org/", label: "Typescript " },
+  { link: "http://typescriptlang.org/", label: "Typescript" },
   { link: "https://sass-lang.com/", label: "HTML / CSS / SASS / Web tools" },
   { link: "http://python.org/", label: "Python" },
   { link: "http://transfollow.org/en", label: "Transfollow" },
-  { link: "http://golang.org/", label: "Golang " },
+  { link: "http://golang.org/", label: "Golang" },
   {
     link: "http://docs.microsoft.com/en-us/dotnet/visual-basic/",
     label: "Visual basic ",
   },
-  { link: "http://en.wikipedia.org/wiki/C_(programming_language)", label: "C " },
+  { link: "http://en.wikipedia.org/wiki/C_(programming_language)", label: "C" },
-  { link: "http://cplusplus.com/", label: "C++ " },
+  { link: "http://cplusplus.com/", label: "C++" },
-  { link: "http://electron.atom.io", label: "Electron " },
+  { link: "http://electron.atom.io", label: "Electron" },
-  { link: "http://en.wikipedia.org/wiki/Unified_Modeling_Language", label: "UML " },
+  { link: "http://en.wikipedia.org/wiki/Unified_Modeling_Language", label: "UML" },
-  { link: "http://atlassian.com/software/jira", label: "JIRA " },
+  { link: "http://atlassian.com/software/jira", label: "JIRA" },
-  { link: "http://atlassian.com/software/confluence", label: "Confluence " },
+  { link: "http://atlassian.com/software/confluence", label: "Confluence" },
-  { link: "http://github.com/mastermindzh", label: "Git " },
+  { link: "http://github.com/mastermindzh", label: "Git" },
-  { link: "http://hginit.com/", label: "Mercurial " },
+  { link: "http://hginit.com/", label: "Mercurial" },
   {
     link: "http://en.wikipedia.org/wiki/Scrum_(software_development)",
     label: "Scrum ",
   },
-  { link: "http://javascript.com/", label: "Javascript " },
+  { link: "http://javascript.com/", label: "Javascript" },
   { link: "http://docs.microsoft.com/en-us/dotnet/csharp/csharp", label: "C#" },
   { link: "http://www.gnu.org/software/bash/", label: "Bash" },
   { link: "http://jenkins.io/doc/", label: "Jenkins" },

src/layout/footer.tsx

@@ -6,61 +6,76 @@ import { Link } from "gatsby";
 
 // import COLOR from "./../../constants/colors";
 import { ROUTES } from "../constants/routes";
+import { SettingsContext } from "../context/SettingsContext";
+import { Settings } from "../context/settings";
 // import { blue, green, lime, orange, pink, purple, red, yellow } from './../../assets/images/colors'
 
 export const Footer: FunctionComponent<{}> = () => {
   return (
-    <footer>
+    <SettingsContext.Consumer>
-      <div className="row">
+      {(context: Settings) => (
-        <div className="col-md-7">
+        <footer>
-          <p className="footerText">
+          <div className="row">
-            &copy; 2021 Rick van Lieshout
+            <div className="col-md-7">
-            <span className="links">
+              <p className="footerText">
-              <Link to={ROUTES.cookies}>cookies</Link> /{" "}
+                &copy; 2021 Rick van Lieshout
-              <Link to={ROUTES.disclaimer}> disclaimer</Link>
+                <span className="links">
-            </span>
+                  <Link to={ROUTES.cookies}>cookies</Link> /{" "}
-          </p>
+                  <Link to={ROUTES.disclaimer}> disclaimer</Link>
-        </div>
+                </span>
-        <div className="col-md-5">
+              </p>
-          <ul className="social">
+            </div>
-            {/* <li>
+            <div className="col-md-5">
-            <ButtonToolbar>
+              <ul className="social">
-              <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
+                <li>
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} >   <img src={red} alt="icon to change color to red" />    {colors.red}</MenuItem>
+                  <button
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
+                    onClick={() => {
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" />  {colors.green}</MenuItem>
+                      context.changeColor("body-red");
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} >  <img src={lime} alt="icon to change color to lime" />   {colors.lime}</MenuItem>
+                    }}
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} >  <img src={pink} alt="icon to change color to pink" />   {colors.pink}</MenuItem>
+                  >
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
+                    red!
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
+                  </button>
-                <MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} >  <img src={blue} alt="icon to change color to blue" />   {colors.blue}</MenuItem>
+                </li>
-              </DropdownButton>
+                {/* <li>
-            </ButtonToolbar>
+                  <ButtonToolbar>
-          </li> */}
+                    <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
-            <li>
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} >   <img src={red} alt="icon to change color to red" />    {colors.red}</MenuItem>
-              <a href="https://github.com/mastermindzh" id="github-footer-image">
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
-                <i className="fa fa-github" />
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" />  {colors.green}</MenuItem>
-              </a>
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} >  <img src={lime} alt="icon to change color to lime" />   {colors.lime}</MenuItem>
-            </li>
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} >  <img src={pink} alt="icon to change color to pink" />   {colors.pink}</MenuItem>
-            <li>
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
-              <a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
-                <i className="fa fa-linkedin" />
+                      <MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} >  <img src={blue} alt="icon to change color to blue" />   {colors.blue}</MenuItem>
-              </a>
+                    </DropdownButton>
-            </li>
+                  </ButtonToolbar>
-            <li>
+                </li> */}
-              <a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
+                <li>
-                <i className="fa fa-facebook" />
+                  <a href="https://github.com/mastermindzh" id="github-footer-image">
-              </a>
+                    <i className="fa fa-github" />
-            </li>
+                  </a>
-            <li>
+                </li>
-              <a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
+                <li>
-                <i className="fa fa-twitter" />
+                  <a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
-              </a>
+                    <i className="fa fa-linkedin" />
-            </li>
+                  </a>
-          </ul>
+                </li>
-        </div>
+                <li>
-      </div>
+                  <a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
-    </footer>
+                    <i className="fa fa-facebook" />
+                  </a>
+                </li>
+                <li>
+                  <a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
+                    <i className="fa fa-twitter" />
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </footer>
+      )}
+    </SettingsContext.Consumer>
   );
 };
 

src/layout/layout.tsx

@@ -1,54 +1,63 @@
+import { Link } from "gatsby";
 import React, { FunctionComponent, ReactNode } from "react";
-// import CookieConsent from "react-cookie-consent";
+import CookieConsent from "react-cookie-consent";
-// import { Link } from "gatsby"
+import { Settings } from "../context/settings";
+import { SettingsContext } from "../context/SettingsContext";
+import { SettingsProvider } from "../context/SettingsProvider";
 import "./../styles/style.scss";
 import { Footer } from "./footer";
 import { NavBar } from "./navigation/navbar";
 import { ProfilePicture } from "./profile-pic";
 
-type Props = { children: ReactNode[] };
+type Props = { children: ReactNode };
 
 export const Layout: FunctionComponent<Props> = ({ children }) => {
   return (
-    <div className="body-red">
+    <SettingsProvider>
-      <div className="main-content">
+      <SettingsContext.Consumer>
-        <div className="container no-padding">
+        {(context: Settings) => (
-          <div className="row">
+          <div className={context.color}>
-            <div className="col-md-3 l-content">
+            <div className="main-content">
-              <ProfilePicture />
+              <div className="container no-padding">
-              <NavBar></NavBar>
+                <div className="row">
-            </div>
+                  <div className="col-md-3 l-content">
+                    <ProfilePicture />
+                    <NavBar></NavBar>
+                  </div>
 
-            <div className="col-md-9 r-content">
+                  <div className="col-md-9 r-content">
-              <div className="flexslider">
+                    <div className="flexslider">
-                <div className="slides">
+                      <div className="slides">
-                  <div className="profile">
+                        <div className="profile">
-                    {children}
+                          {children}
-                    <div className="clearfix" />
+                          <div className="clearfix" />
+                        </div>
+                      </div>
+                    </div>
+                    <Footer />
                   </div>
                 </div>
               </div>
-              <Footer />
             </div>
-          </div>
+            <CookieConsent
-        </div>
+              style={{ background: "#2B373B" }}
-      </div>
+              buttonStyle={{
-      {/* <CookieConsent
+                background: "#e74c3c",
-        style={{ background: "#2B373B" }}
+                color: "white",
-        buttonStyle={{
+                fontWeight: "bolder",
-          background: "#e74c3c",
+              }}
-          color: "white",
+            >
-          fontWeight: "bolder",
+              <span>
-        }}
+                This website uses cookies to enhance the user experience.
-      >
+                <span style={{ fontSize: "10px" }}>
-        <span>
+                  {" "}
-          This website uses cookies to enhance the user experience.
+                  Click <Link to="/legal/cookies">here</Link> to learn more about cookies.
-              <span style={{ fontSize: "10px" }}>
+                </span>
-            {" "}
-                Click <Link to="/cookies">here</Link> to learn more about cookies.
               </span>
-        </span>
+            </CookieConsent>
-      </CookieConsent> */}
+          </div>
-    </div>
+        )}
+      </SettingsContext.Consumer>
+    </SettingsProvider>
   );
 };

src/pages/components/resume/item.tsx

@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 
-type Props = { title: string; start: string; end: string; image: string };
+type Props = { title: string; start: string; end: string; image: string; children: ReactNode };
 
 export const ResumeItem: FunctionComponent<Props> = ({ title, start, end, image, children }) => {
   return (

src/pages/components/resume/list.tsx

@@ -1,7 +1,7 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, ReactNode } from "react";
 import { SectionTitle } from "../../../components/section-title";
 
-type Props = { title: string };
+type Props = { title: string; children: ReactNode };
 
 export const ResumeList: FunctionComponent<Props> = ({ title, children }) => {
   return (

src/styles/colours.scss

@@ -14,6 +14,15 @@ $colours: (
     color: $colour !important;
   }
 
+  .#{$element} .filter {
+    a {
+      &:hover {
+        // &:focus maybe
+        color: white !important;
+      }
+    }
+  }
+
   .#{$element} .navigation li:before {
     background: $colour !important;
   }
@@ -30,8 +39,12 @@ $colours: (
     color: $colour !important;
   }
 
-  .#{$element} #filter-list li:hover {
+  .#{$element} #filter-list {
-    background: $colour !important;
+    li {
+      &:hover {
+        background: $colour !important;
+      }
+    }
   }
 
   .#{$element} #filter-list li.active {

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "baseUrl": "src",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}