Merge pull request #12 from LeoOuyang24/LeoOuyang24-main

Leo ouyang24 main
pull/15/head
LeoOuyang24 2022-04-01 10:28:58 -07:00 committed by GitHub
commit b5e111da5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 297 additions and 8 deletions

163
package-lock.json generated
View File

@ -17,6 +17,7 @@
"fuse.js": "^6.4.6",
"jQuery": "^1.7.4",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
@ -3251,6 +3252,14 @@
"@babel/types": "^7.3.0"
}
},
<<<<<<< HEAD
"node_modules/@types/cookie": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
"integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/@types/eslint": {
"version": "7.28.2",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
@ -3282,6 +3291,18 @@
"@types/node": "*"
}
},
<<<<<<< HEAD
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/@types/html-minifier-terser": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@ -3499,11 +3520,32 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
},
<<<<<<< HEAD
"node_modules/@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/@types/q": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
},
<<<<<<< HEAD
"node_modules/@types/react": {
"version": "17.0.39",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
"integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@ -3512,6 +3554,14 @@
"@types/node": "*"
}
},
<<<<<<< HEAD
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@ -6567,6 +6617,14 @@
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
},
<<<<<<< HEAD
"node_modules/csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -9736,6 +9794,17 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
<<<<<<< HEAD
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -16210,6 +16279,22 @@
"node": ">=10"
}
},
<<<<<<< HEAD
"node_modules/react-cookie": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
"integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
"dependencies": {
"@types/hoist-non-react-statics": "^3.0.1",
"hoist-non-react-statics": "^3.0.0",
"universal-cookie": "^4.0.0"
},
"peerDependencies": {
"react": ">= 16.3.0"
}
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/react-dev-utils": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@ -19251,6 +19336,18 @@
"node": ">=4"
}
},
<<<<<<< HEAD
"node_modules/universal-cookie": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
"integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
"dependencies": {
"@types/cookie": "^0.3.3",
"cookie": "^0.4.0"
}
},
=======
>>>>>>> ae9e6661c93752d3fcc178ab811e19bdf7f73313
"node_modules/universalify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@ -23591,6 +23688,11 @@
"@babel/types": "^7.3.0"
}
},
"@types/cookie": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
"integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
},
"@types/eslint": {
"version": "7.28.2",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.2.tgz",
@ -23622,6 +23724,15 @@
"@types/node": "*"
}
},
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/html-minifier-terser": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@ -23801,11 +23912,26 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
},
"@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"@types/q": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
},
"@types/react": {
"version": "17.0.39",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
"integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@ -23814,6 +23940,11 @@
"@types/node": "*"
}
},
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@ -26251,6 +26382,11 @@
}
}
},
"csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
},
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@ -28659,6 +28795,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -33648,6 +33792,16 @@
"whatwg-fetch": "^3.4.1"
}
},
"react-cookie": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
"integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==",
"requires": {
"@types/hoist-non-react-statics": "^3.0.1",
"hoist-non-react-statics": "^3.0.0",
"universal-cookie": "^4.0.0"
}
},
"react-dev-utils": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@ -36036,6 +36190,15 @@
"crypto-random-string": "^1.0.0"
}
},
"universal-cookie": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
"integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
"requires": {
"@types/cookie": "^0.3.3",
"cookie": "^0.4.0"
}
},
"universalify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

View File

@ -13,6 +13,7 @@
"fuse.js": "^6.4.6",
"jQuery": "^1.7.4",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"

View File

@ -291,6 +291,55 @@ footer {
.sect-drop {
box-sizing: border-box;
background-color: #222222;
color: white;
}
#root {
box-sizing: border-box;
}
.dark-content {
background-color: black;
color: white;
}
.frontPage {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
height: 100;
text-align: center;
justify-content: center;
}
a{
color: inherit;
}
.search-results {
justify-content: center;
align-items: flex-start;
display: flex;
flex-direction: row;
flex-flow: row wrap;
box-sizing: border-box;
/* justify-content: normal ; */
align-content: flex-start;
padding-left: 1em;
padding-right: 1em;
}
.result {
width: 30%;
padding: 0.25em 0.5em;
}
=======
width: 10rem;
align-self: center;
}

View File

@ -1,12 +1,15 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import Fuse from "fuse.js";
import React, { useState, useEffect, createContext } from "react";
import LangDropdown from "./components/LangDropdown";
import LangFilters from "./components/LangFilters";
import SectDropdown from "./components/SectDropdown";
import SearchBar from "./components/SearchBar";
import SearchResult from "./components/SearchResult";
import LightSwitch from "./components/LightSwitch";
import axios from "axios";
import Fuse from "fuse.js";
import { ThemeContext, themes, swapMode } from './darkMode';
import { useCookies } from 'react-cookie';
import Default from "./components/Default";
import SunImg from "./img/sun.png";
@ -111,6 +114,8 @@ function App() {
const [searchParams, setSearchParams] = useState({ searchTerm: "" });
const [searchResults, setSearchResults] = useState([]);
const [sectionResults, setSectionResults] = useState([]);
const [cookies, setCookie, removeCookie] = useCookies(['lightMode']);
const [lightMode, setLightMode] = useState(true);
// eslint-disable-next-line
@ -126,6 +131,7 @@ function App() {
// fetches data the first time the page renders
useEffect(() => {
swapMode(cookies.lightMode ? themes.lightMode : themes.darkMode)
async function fetchData() {
try {
setLoading(true);
@ -287,8 +293,31 @@ function App() {
// });
}
return (
<div className="wrapper">
<div
className="wrapper"
// style={{
// color: lightMode ? "black" : "white",
// backgroundColor: lightMode ? "white" : "black",
// }}
>
<ThemeContext.Consumer>
{ ({ changeTheme }) => {
let willBeDarkMode = (cookies.lightMode && cookies.lightMode.toLowerCase() !== "true") //whether or not we are currently light mode and will become dark mode
changeTheme(willBeDarkMode ? themes.light : themes.dark)
return (<img src={willBeDarkMode ? MoonImg : SunImg}
onClick = {()=>{
setCookie("lightMode",willBeDarkMode);
changeTheme(willBeDarkMode ? themes.light : themes.dark)
}}
style={{width: "20px", height: "20px",display: "block",
marginLeft: "auto"
}}
/>)}
}
</ThemeContext.Consumer>
<header className="header">
<h1>
<a href="https://ebookfoundation.github.io/free-programming-books/" target="_blank" rel="noreferrer">
free-programming-books

41
src/darkMode.js Normal file
View File

@ -0,0 +1,41 @@
import React, { useState, useEffect, createContext } from "react";
//https://levelup.gitconnected.com/dark-mode-in-react-533faaee3c6e
export const themes = {
dark: "",
light: "dark-content",
};
export const swapMode = (theme) => {
switch (theme) {
case themes.light:
document.body.classList.add('dark-content');
break;
case themes.dark:
default:
document.body.classList.remove('dark-content');
break;
}
}
export const ThemeContext = createContext({
theme: themes.dark,
changeTheme: () => {},
});
export default function ThemeContextWrapper(props) {
const [theme, setTheme] = useState(props.theme);
function changeTheme(theme) {
setTheme(theme);
}
// console.log(theme)
swapMode(theme)
return (
<ThemeContext.Provider value={{ theme: theme, changeTheme: changeTheme }}>
{props.children}
</ThemeContext.Provider>
);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
src/img/sun.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 285 KiB

After

Width:  |  Height:  |  Size: 85 KiB

View File

@ -2,12 +2,18 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './App';
import ThemeContextWrapper from './darkMode';
import reportWebVitals from './reportWebVitals';
import { CookiesProvider } from 'react-cookie';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
<CookiesProvider>
<ThemeContextWrapper>
<React.StrictMode>
<App />
</React.StrictMode>
</ThemeContextWrapper>
</CookiesProvider>,
document.getElementById('root')
);