Dark mode, example environmental keys, updated contribution section

.env.example

@@ -0,0 +1,4 @@
+GATSBY_ALGOLIA_APP_ID=
+GATSBY_ALGOLIA_SEARCH_KEY=
+ALGOLIA_ADMIN_KEY=
+GOOGLE_SERVICE_ACCOUNT_CREDENTIALS=

docs/setup-dev.md

@@ -79,8 +79,8 @@ You only have to do below if you want to add new functionality with Javascript!
 
 We recommend using VSCode and these extensions https://marketplace.visualstudio.com/items?itemName=jawandarajbir.react-vscode-extension-pack
 
-1. Download Node https://nodejs.org/en/
-  - run `node -v` to make sure it installed
+1. Download Node version 16.20.2 https://nodejs.org/en/ (Versions above 16.20.2 will not work!)
+  - run `node -v` to make sure it installed AND that you are using the correct version of Node
 2. Download yarn: `npm install -g yarn`
 3. Clone this directory - `git clone https://github.com/PittCSWiki/pittcswiki.github.io.git`
 4. `yarn install`
@@ -105,6 +105,15 @@ the page defined in `src/page/courses.js`.
 
 Markdown files are converted to HTML pages with the `src/components/templates/guides-template` file.
 
+While building you might get stuck on 
+
+```
+⠋ onPostBootstrap
+⠏ Build manifest and related icons
+```
+
+in the console. To fix this is very simple! Just use the shortcut key Ctrl+C to cancel this command and try running it again. 
+
 If you are curious about how this project works and want to become a serious contributor - [read and follow these tutorials](https://www.gatsbyjs.org/tutorial/).
 
 Thanks for contributing!

google_api_secret.json.example

@@ -0,0 +1,12 @@
+{
+  "type": "",
+  "project_id": "",
+  "private_key_id": "",
+  "private_key": "",
+  "client_email": "",
+  "client_id": "",
+  "auth_uri": "",
+  "token_uri": "",
+  "auth_provider_x509_cert_url": "",
+  "client_x509_cert_url": ""
+}

package.json

@@ -45,10 +45,12 @@
     "request": "^2.88.0",
     "request-promise": "^4.2.4",
     "sass": "^1.49.0",
-    "tailwindcss": "^1.4.1"
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.17",
     "jest": "^24.9.0",
+    "postcss": "^8.4.35",
     "prettier": "2.0.3"
   },
   "keywords": [

src/pages/courses.js

@@ -15,7 +15,7 @@ const CoursesPage = () => (
     <h1>Courses</h1>
     <p>
       If you are new to the CS classes,
-      <span className="ml-2 bg-yellow-300 px-2 py-1">
+      <span className="ml-2 bg-yellow-300 dark:bg-yellow-800 px-2 py-1">
         we suggest viewing our{" "}
         <Link to="/academics/scheduling">scheduling guide</Link>!
       </span>

src/pages/index.js

@@ -5,11 +5,6 @@ import Layout from "../components/layout"
 import SEO from "../components/seo"
 import logo from "../images/logo.svg"
 import campusBackground from "../images/pittcampus.jpg"
-import coursesIcon from "../images/icons/courses.svg"
-import academicsIcon from "../images/icons/academic.svg"
-import careerIcon from "../images/icons/career.svg"
-import guidesIcon from "../images/icons/guides.svg"
-import sitemapIcon from "../images/icons/sitemap.svg"
 
 const IndexPage = () => (
   <Layout>
@@ -20,7 +15,7 @@ const IndexPage = () => (
       </div>
       <div className="max-w-4xl mx-auto">
         <div className="md:mt-24 flex">
-          <div className="hidden md:block self-end h-64 bg-white p-6 shadow-2xl w-1/2 border">
+          <div className="hidden md:block self-end h-64 bg-white dark:bg-black p-6 shadow-2xl w-1/2 border dark:border-black">
             <h1>The Pitt CS Wiki</h1>
             <p>
               A collection of course testimonials, guides, career prep
@@ -78,11 +73,14 @@ const LinkPanel = () => {
         role="button"
         tabIndex={0}
       >
-        <img
-          className="w-16 mx-auto"
-          alt="Courses from the Noun Project"
-          src={coursesIcon}
-        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"
+          className="w-16 mx-auto fill-current"
+          alt="Chalkboard user icon by Font Awesome"
+        >
+          <path d="M160 64c0-35.3 28.7-64 64-64H576c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H336.8c-11.8-25.5-29.9-47.5-52.4-64H384V320c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v32h64V64L224 64v49.1C205.2 102.2 183.3 96 160 96V64zm0 64a96 96 0 1 1 0 192 96 96 0 1 1 0-192zM133.3 352h53.3C260.3 352 320 411.7 320 485.3c0 14.7-11.9 26.7-26.7 26.7H26.7C11.9 512 0 500.1 0 485.3C0 411.7 59.7 352 133.3 352z" />
+        </svg>
         <h3>Course Explorer</h3>
         <p>
           Find the right course for you! Professor reviews, course testimonials,
@@ -100,7 +98,14 @@ const LinkPanel = () => {
         role="button"
         tabIndex={0}
       >
-        <img src={guidesIcon} alt="guide by Youmena from the Noun Project" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          className="w-16 mx-auto fill-current"
+          alt="Sign post icon by Font Awesome"
+        >
+          <path d="M224 32H64C46.3 32 32 46.3 32 64v64c0 17.7 14.3 32 32 32H441.4c4.2 0 8.3-1.7 11.3-4.7l48-48c6.2-6.2 6.2-16.4 0-22.6l-48-48c-3-3-7.1-4.7-11.3-4.7H288c0-17.7-14.3-32-32-32s-32 14.3-32 32zM480 256c0-17.7-14.3-32-32-32H288V192H224v32H70.6c-4.2 0-8.3 1.7-11.3 4.7l-48 48c-6.2 6.2-6.2 16.4 0 22.6l48 48c3 3 7.1 4.7 11.3 4.7H448c17.7 0 32-14.3 32-32V256zM288 480V384H224v96c0 17.7 14.3 32 32 32s32-14.3 32-32z" />
+        </svg>
         <h3>Guides</h3>
         <p>
           View all of our articles organized by topic. Check out popular ones
@@ -118,10 +123,14 @@ const LinkPanel = () => {
         role="button"
         tabIndex={0}
       >
-        <img
-          src={careerIcon}
-          alt="career by Thuy Nguyen from the Noun Project"
-        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+          className="w-16 mx-auto fill-current"
+          alt="User wearing tie icon by Font Awesome"
+        >
+          <path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7H162.5c0 0 0 0 .1 0H168 280h5.5c0 0 0 0 .1 0H417.3c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2H224 204.3c-12.4 0-20.1 13.6-13.7 24.2z" />
+        </svg>
         <h3>Career</h3>
         <p>
           Read our carefully curated tips on how to land job offers and succeed
@@ -139,10 +148,14 @@ const LinkPanel = () => {
         role="button"
         tabIndex={0}
       >
-        <img
-          src={academicsIcon}
-          alt="academic by pam pyke from the Noun Project"
-        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 512"
+          className="w-16 mx-auto fill-current"
+          alt="Graduation cap icon by Font Awesome"
+        >
+          <path d="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z" />
+        </svg>
         <h3>Academics</h3>
         <p>
           Thinking about a double major? Not sure what classes to take when?
@@ -161,10 +174,14 @@ const LinkPanel = () => {
         role="button"
         tabIndex={0}
       >
-        <img
-          src={sitemapIcon}
-          alt="Sitemap by Adrien Coquet from the Noun Project"
-        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+          className="w-16 mx-auto fill-current"
+          alt="Sitemap icon by Font Awesome"
+        >
+          <path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z" />
+        </svg>
         <h3>Sitemap</h3>
         <p>
           We have a lot of content and its growing. Click here to see a list of

src/styles/components.scss

@@ -243,7 +243,6 @@ header {
   .quick-blurb {
     display: flex;
     flex: 1 1 30%;
-    color: black;
     flex-direction: column;
     @apply p-4 pt-6 m-3 max-w-xs text-center text-sm;
 

src/styles/post.scss

@@ -21,7 +21,7 @@
     .blog-post-content {
 
       blockquote {
-        @apply pl-4 py-2 ml-0 bg-gray-100 border-l-8
+        @apply pl-4 py-2 ml-0 bg-gray-100 dark:bg-gray-700 border-l-8
       }
 
       ol {

src/styles/tailwind.scss

@@ -96,3 +96,18 @@ a {
     @apply mr-2;
   }
 }
+
+body {
+  color: var(--bg-base-content);
+  background-color: var(--bg-base);
+}
+
+body.dark {
+  --bg-base: #000000;
+  --bg-base-content: #ffffff;
+}
+
+body.light {
+  --bg-base: #ffffff;
+  --bg-base-content: #000000;
+}

tailwind.config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   purge: {
     enabled:
@@ -6,4 +7,5 @@ module.exports = {
     content: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.jsx"],
   },
   theme: {},
+  darkMode: 'selector',
 }