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/layout/footer.tsx

@@ -6,10 +6,14 @@ 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 (
+    <SettingsContext.Consumer>
+      {(context: Settings) => (
         <footer>
           <div className="row">
             <div className="col-md-7">
@@ -23,6 +27,15 @@ export const Footer: FunctionComponent<{}> = () => {
             </div>
             <div className="col-md-5">
               <ul className="social">
+                <li>
+                  <button
+                    onClick={() => {
+                      context.changeColor("body-red");
+                    }}
+                  >
+                    red!
+                  </button>
+                </li>
                 {/* <li>
                   <ButtonToolbar>
                     <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">
@@ -61,6 +74,8 @@ export const Footer: FunctionComponent<{}> = () => {
             </div>
           </div>
         </footer>
+      )}
+    </SettingsContext.Consumer>
   );
 };
 

src/layout/layout.tsx

@@ -1,16 +1,22 @@
+import { Link } from "gatsby";
 import React, { FunctionComponent, ReactNode } from "react";
-// import CookieConsent from "react-cookie-consent";
-// import { Link } from "gatsby"
+import CookieConsent from "react-cookie-consent";
+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>
+      <SettingsContext.Consumer>
+        {(context: Settings) => (
+          <div className={context.color}>
             <div className="main-content">
               <div className="container no-padding">
                 <div className="row">
@@ -33,7 +39,7 @@ export const Layout: FunctionComponent<Props> = ({ children }) => {
                 </div>
               </div>
             </div>
-      {/* <CookieConsent
+            <CookieConsent
               style={{ background: "#2B373B" }}
               buttonStyle={{
                 background: "#e74c3c",
@@ -45,10 +51,13 @@ export const Layout: FunctionComponent<Props> = ({ children }) => {
                 This website uses cookies to enhance the user experience.
                 <span style={{ fontSize: "10px" }}>
                   {" "}
-                Click <Link to="/cookies">here</Link> to learn more about cookies.
+                  Click <Link to="/legal/cookies">here</Link> to learn more about cookies.
                 </span>
               </span>
-      </CookieConsent> */}
+            </CookieConsent>
           </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,9 +39,13 @@ $colours: (
     color: $colour !important;
   }
 
-  .#{$element} #filter-list li:hover {
+  .#{$element} #filter-list {
+    li {
+      &:hover {
         background: $colour !important;
       }
+    }
+  }
 
   .#{$element} #filter-list li.active {
     background: $colour !important;

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"]
+}