Ibrahim 404 Page

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+<!--- Provide a general summary of your changes in the Title above -->
+
+# Description
+<!--- Describe your changes in detail -->
+
+# Motivation and Context
+<!--- Why is this change required? What problem does it solve? -->
+<!--- If it fixes an open issue, please link to the issue here. -->
+
+# How has this been tested?
+<!--- Please describe in detail how you tested your changes. -->
+<!--- Include details of your testing environment, tests ran to see how -->
+<!--- your change affects other areas of the code, etc. -->
+
+# Screenshots (if appropriate):
+
+# Types of changes
+<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+
+# Checklist:
+<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+- [ ] My code follows the code style of this project.
+- [ ] My change requires a change to the documentation.
+- [ ] I have updated the documentation accordingly.

README.md

@@ -157,3 +157,7 @@ To run the site locally: `yarn develop`
 #### Note:
 
 Do not write in any files in the `/public` directory. They are being generated by Gatsby and will be written over.
+
+
+# Unit Testing
+This project uses Jest. To run: ```npm test```

__mocks__/file-mock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub"

__mocks__/gatsby.js

@@ -0,0 +1,27 @@
+const React = require("react")
+const gatsby = jest.requireActual("gatsby")
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
+      React.createElement("a", {
+        ...rest,
+        href: to,
+      })
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn(),
+}

gatsby-config.js

@@ -1,10 +1,22 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`
+})
+
 module.exports = {
   siteMetadata: {
     title: `Gatsby Default Starter`,
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
     author: `@gatsbyjs`,
   },
   plugins: [
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: process.env.GA_TRACKING_ID, 
+        head: true,
+        anonymize: true,
+      },
+    },
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,

jest-preprocess.js

@@ -0,0 +1,5 @@
+const babelOptions = {
+    presets: ["babel-preset-gatsby"],
+  }
+
+  module.exports = require("babel-jest").createTransformer(babelOptions)

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    transform: {
+      "^.+\\.jsx?$": `<rootDir>/jest-preprocess.js`,
+    },
+    moduleNameMapper: {
+      ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+      ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico)$": `<rootDir>/__mocks__/file-mock.js`,
+    },
+    testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+    transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
+    globals: {
+      __PATH_PREFIX__: ``,
+    },
+    testURL: `http://localhost`,
+    setupFiles: [`<rootDir>/loadershim.js`],
+  }

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+    enqueue: jest.fn(),
+  }

package.json

@@ -5,23 +5,33 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.19.12",
+    "gatsby": "^2.32.4",
+    "dotenv": "^8.2.0",
+    "gatsby-cli": "^2.15.0",
     "gatsby-image": "^2.2.40",
+    "gatsby-plugin-google-analytics": "^2.11.0",
     "gatsby-plugin-less": "^3.0.19",
     "gatsby-plugin-manifest": "^2.2.41",
     "gatsby-plugin-offline": "^3.0.34",
     "gatsby-plugin-react-helmet": "^3.1.22",
-    "gatsby-plugin-sharp": "^2.4.5",
+    "gatsby-plugin-sharp": "^2.14.1",
     "gatsby-source-filesystem": "^2.1.48",
-    "gatsby-transformer-sharp": "^2.3.14",
+    "gatsby-transformer-sharp": "^2.12.0",
     "less": "^3.10.3",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "webpack": "^5.23.0",
+    "webpack-cli": "^4.5.0"
   },
   "devDependencies": {
-    "prettier": "^1.19.1"
+    "babel-jest": "^26.6.3",
+    "babel-preset-gatsby": "^0.11.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "prettier": "^1.19.1",
+    "react-test-renderer": "^17.0.1"
   },
   "keywords": [
     "gatsby"
@@ -35,7 +45,7 @@
     "serve": "gatsby serve",
     "deploy-staging": "aws s3 rm s3://ilite-staging --recursive && aws s3 cp --cache-control max-age=31536000 public s3://ilite-staging --recursive",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "test": "jest"
   },
   "repository": {
     "type": "git",

src/components/Dropdown/Dropdown.js

@@ -1,9 +1,19 @@
 import React, { Component } from "react"
 import { Link } from "gatsby"
 
+const mouseLeave = (toggleExtended) => {
+  console.log("STOP IT")
+  if(toggleExtended) {
+    toggleExtended();
+  }
+};
+
 class Dropdown extends Component {
 
+
+
   render() {
+    const toggleExtended = this.props.toggleExtended;
     const title = this.props.title
     const extended = this.props.extended ? "show" : ""
     const { links } = this.props
@@ -13,7 +23,7 @@ class Dropdown extends Component {
         <div className="dropdown__button">
           {title} <i className={`fa fa-caret-down`}></i>
         </div>
-        <div className={`dropdown__content ${extended}`}>
+        <div className={`dropdown__content ${extended}`} onMouseLeave={()=>mouseLeave(toggleExtended)}>
           {links.map(link => {
             let filePath = `/${link.section}/${link.file}`
 

src/components/SideMenu/SideMenu.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import Link from "gatsby-link"
+import {Link} from "gatsby"
 
 class SideMenu extends Component {
   constructor(props) {

src/components/Tabs/Tabs.js

@@ -48,4 +48,4 @@ export default class Tabs extends React.Component {
       </div>
     );
   }
-};
+};

src/components/banner/banner.import.less

@@ -70,4 +70,8 @@
 
 .sponsors__banner {
   background-image: url('../../assets/images/frc/background/sponsors-banner.png');
+}
+
+.not__found_banner {
+  background-image: url('../../assets/images/frc/background/FRC-home-banner.png');
 }

src/components/members/members.import.less

@@ -2,15 +2,18 @@
   margin: 20px auto;
   border: none;
   box-shadow: 0px 5px 25px #DDD;
+  display: flex;
   width: 100%;
 
   @media all and (max-width: 990px) {
+    display: block;
     overflow: hidden;
     max-width: 300px;
   }
 
   .member__img {
     display: block;
+    margin-right: 15px;
     max-height: 200px;
     max-width: 300px;
     float: left;
@@ -32,8 +35,9 @@
   }
 
   .member__content {
-    margin-left: 310px;
-    padding-top: 20px;
+    margin-top: auto;
+    margin-bottom: auto;
+    width: calc(100% - 330px);
 
     @media all and (max-width: 990px) {
       float: left;

src/components/navbar/Navbar.js

@@ -146,20 +146,24 @@ class Navbar extends Component {
                 title="Outreach"
                 links={outreachLinks}
                 extended={this.state.outreachDropdown}
+                toggleExtended={this.toggleOutreachDropdown}
               />
             </div>
           </li>
           <li>
             <div
               onClick={() => this.toggleIliteDropdown()}
               onKeyPress={this.handleKeyPress}
+              toggleExtended={this.toggleIliteDropdown}
               role="button"
               tabIndex={0}
             >
               <Dropdown
                 title="About ILITE"
                 links={iliteLinks}
                 extended={this.state.iliteDropdown}
+                toggleExtended={this.toggleIliteDropdown}
+                onfocusout={()=>console.log("Focus out!")}
               />
             </div>
           </li>