updated REadme. Also dark mode is now changed based on browser pref

README.md

@@ -13,6 +13,8 @@ free-programming-books](https://ebookfoundation.github.io/free-programming-books
 	- [NPM Installation](#npm-installation)
 	- [Running the Website](#running-the-website)
 - [Deployment](#deployment)
+- [How It All Works](#how-it-all-works)
+- [FAQ](#faq)
 
 ## Installation
 
@@ -28,7 +30,7 @@ free-programming-books](https://ebookfoundation.github.io/free-programming-books
 1. Make sure you have [Git](https://git-scm.com/downloads) installed. 
 2. Clone the repo from Github with Git.
 3. Navigate to the folder using command line. (easy way is to type "cd" and then drag and drop the folder into command line)
-4. Type `npm install -g`
+4. Type `npm install`
 5. Type `npm install react-scripts`
 6. Type `npm start`. At this point, the commnand prompt should start up the server, and a tab in your default browser should open up to localhost.
 
@@ -40,5 +42,17 @@ MAKE SURE YOU HAVE COMPLETED THE INSTALLATION STEPS FIRST!
 	3. Type `git remote add origin <repo url>`,replacing <repo url> with the url of your github repository.
 2. Now, run `npm install -g gh-pages`.
 3. Run `npm run deploy`.
-4. This should deploy your code to "https:<username>.github.io/free-programming-books-search/"
+4. This should deploy your code to "https:yourusername.github.io/free-programming-books-search/"
+
+## How It All Works
+1. The search function works locally.
+
+## FAQ
+ 
+- What database are we using to store the books?
+	NONE! The books are stored in a json file which is downloaded locally.
+
+- I added a book but it's not showing up on search?
+	Give it some time. The parser is run once a day, so it may tak up to 24 hours for the search to reflect that.
+
 	

package.json

@@ -14,7 +14,7 @@
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
-    "react-markdown": "^8.0.2",
+    "react-markdown": "^8.0.3",
     "react-scripts": "4.0.3",
     "rehype-raw": "^6.1.1",
     "rehype-slug": "^5.0.1",

src/App.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Fuse from "fuse.js";
-import { useCookies } from "react-cookie";
 import queryString  from "query-string";
 
 import LangFilters from "./components/LangFilters";
@@ -69,7 +68,6 @@ function App() {
   const [searchParams, setSearchParams] = useState({ searchTerm: defaultSearch, "lang.code": "" });
   // array of all search results
   const [searchResults, setSearchResults] = useState([]);
-  const [cookies, setCookie, ] = useCookies(["lightMode"]);
   const [queries, setQueries] = useState({ lang: "", subject: "" });
 
   // eslint-disable-next-line
@@ -85,7 +83,6 @@ function App() {
 
   // fetches data the first time the page renders
   useEffect(() => {  
-    swapMode(cookies.lightMode ? themes.lightMode : themes.darkMode);
     async function fetchData() {
       try {
         setQueries(queryString.parse(document.location.search));
@@ -236,7 +233,8 @@ function App() {
     <div className="wrapper">
       <ThemeContext.Consumer>
         {({ changeTheme }) => {
-          let willBeDarkMode = cookies.lightMode && cookies.lightMode.toLowerCase() !== "true"; //whether or not we are currently light mode and will become dark mode
+          let willBeDarkMode = (window.matchMedia && 
+    window.matchMedia('(prefers-color-scheme: dark)').matches); //whether or not we are currently light mode and will become dark mode
           changeTheme(willBeDarkMode ? themes.light : themes.dark);
           return (
             <img

src/components/LangFilters.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { React, useState, useEffect } from "react";
 import queryString from "query-string";
 
 function LangFilters({ changeParameter, data, langCode }) {