Enhancements. (#6)

* install packages and update yarn

* add srcry css

* add color variables

* create page layout component

* create SvgSymbol component

* add logo primatives

* create milwaukee wordmark

* create meetups wordmark

* create full logo

* create navbar component

* add gatsby-plugin-manifest package and favicon

* migrate color definitions into their own file

* update for adding gatsby-plugin-manifest package to project

* build navbar

* add navbar and place to render children

* add styles to navbar

* create footer component

* add footer component to layout

* add roboto font

* create hero component

* add skyline photo for hero

* markup and style hero component

* remove unused code

* improve box shadow effect

* create organization card

* markup and style organization component

* change main section element into a header

* make overflow of main container visible for sticky nav bar

* create modal component

* add close button

* create event list component

* create location component

* create date component

* markup and style location component

* markup and style date component

* markup and style event list component

* markup and style modal component

* add functionality to update selected group

* correct styling on close button and remove duplicate styles

* add barebone styling to footer component

* comment all code to prevent interferenc with new code

* recreate home page

* create stylesheet for index.js

* comment existing code for clean slate

* add @emotion package

* correct filename and comment code for clean slate

* create ssr file and add srcry

* remove unused code

* fix inconsistent container width

* fix typo in container class name

* modify wording of description and delete unused styling

* change color of count text, visit button and view button

* remove import of global stylesheet

* comment graphql query for old logo file

* create stylesheet for calendar page

* modify layout and responsiveness of the calendar

* create function for comparing dates

* add variable for events sorted by days

* create functionality for shaping and displaying new calendar data

* modify handleEventClick to update a list of events for the day

* add modal for showing event data when user clicks date

* add styling for main element back

* remove unused styling

* make page container full width

* create group filter component

* add group filter to calendar page

* create function that returns a list of group names

* create function for filtering selected companies

* connect GroupFilter to filtering functions

* create name button for group filter

* add name button to Group Filter

* add light indicator and style name button

* add logic to toggle active and inactive states and update list of selected groups

* handle logic for updating list of selected groups

* create a component for breadcrumbs

* add breadcrumbs component to filter

* add crumb component to breadcrumb component

* add functionality for deleting group from selection

* make crumbs responsive for mobile

* make text in name button more responsive

* migrate name list into its own component

* create and add search bar component to filter

* markup and style search bar

* pass user input and search term up to filter component

* filter groups and search for groups to match user input

* give the name container a height

* add framer motion package to project

* create animation for search filter

* add updated combined.json file

* create logic for loading filtered names

* adjust breadcrumb styling

* adjust size of logo area of navbar

* add keyUp method to detect enter key

* remove unused import

* create functionality for filtering events on calendar

* format event text in calendar

* migrate date, day and time functions into their own file

* format time and switch event title for company name in event text

* specify overflowY when toggling scroll and add more margin to dropdown

* add key property to list item

* fix typo in article tag

* add functionality for opening event list when user clicks calendar

* migrate filter button and animation out into calendar page

* give page layout a  min height 100vh

* adjust responsiveness of calendar to stop content from overlapping and squishing together

* change search filter animation

* improve scaling and readability of calendar

* add hover animation to event listing

* hide overflow x on page layout

* create animation for breadcrumbs

* create click animation for name button

* make selected organizations pesistent in search filter

* create fade in / out animation for modal

* change colors of buttons on hover

* formate code in modal

* create util file for shared animations

* change hover color on join event button

* adjust scrolling toggle to only effect overflowY

* clean up home page code and add comments

* delete unused code on calendar page

* remove un used prop and clean up code

* clean up code in navbar

* clean up location component code

* clean and comment code in DateComponent

* remove unused prop and clean up code in EventList

* clean up code in crumb component

* clean up code in breadcrumbs component

* clean up code in name button component

* clean NameContainer code

* clean and comment code in search bar component

* clean and comment code in group filter component

* clean code in hero component

* remove unused components

* fix responsiveness of navbar

* remove helmet plugin and use Head API to add a title and description to pages

* add html-attributes plugin and set lang property to english

* change p tag into a div

* add resultList to useEffect hook

* add rel attribute to anchor tag

* add rel attribute to anchor tag

* add defaults to switch cases

* format code to improve readability

* add optimized skyline images

* move skyline images to static folder

* add optimized skyline photos to hero component

* add comments to describe props

* fix responsiveness of hero component

---------

Co-authored-by: Optiq01 <[email protected]>

web/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

web/gatsby-browser.js

@@ -0,0 +1,12 @@
+import './src/styles/global.css';
+/*import React from "react";
+import { ThemeProvider } from '@mui/material/styles';
+import theme from './src/theme.js';*/
+
+/*export const wrapRootElement = ({ element }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      {element}
+    </ThemeProvider>
+  );
+}*/

web/gatsby-config.js

@@ -18,11 +18,24 @@ module.exports = {
         path: path.join(__dirname, `src`, `images`),
       },
     },
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options:{
+        "icon": 'src/images/favicon.svg'
+      }
+    },
+    {
+      resolve: 'gatsby-plugin-html-attributes',
+      options:{
+        lang: 'en'
+      }
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-material-ui`,
-    `gatsby-plugin-react-helmet`,
+    `@emotion/react`,
+    `@emotion/styled`
   ],
 };
 

web/gatsby-ssr.js

@@ -0,0 +1 @@
+import './src/styles/global.css';

web/package.json

@@ -20,28 +20,31 @@
     "@fullcalendar/interaction": "^6.1.10",
     "@fullcalendar/react": "^6.1.10",
     "@fullcalendar/timegrid": "^6.1.10",
+    "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.5",
     "@mui/styles": "^5.2.5",
-    "@mui/icons-material": "^5.2.5",
     "dayjs": "^1.11.10",
+    "framer-motion": "^11.3.28",
     "gatsby": "^5.12.11",
     "gatsby-image": "^3.11.0",
-    "gatsby-source-filesystem": "^5.11.0",
-    "gatsby-transformer-sharp": "^5.13.0",
+    "gatsby-plugin-css": "^2.1.0",
+    "gatsby-plugin-html-attributes": "^1.0.5",
     "gatsby-plugin-image": "^3.13.0",
-    "gatsby-plugin-sharp": "^5.13.0",
+    "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-material-ui": "^4.1.0",
-    "gatsby-plugin-css": "^2.1.0",
-    "gatsby-plugin-react-helmet": "^5.12.0",
+    "gatsby-plugin-sharp": "^5.13.0",
+    "gatsby-source-filesystem": "^5.11.0",
+    "gatsby-transformer-sharp": "^5.13.0",
     "react": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/mitobyte/greetup.git"
   },
   "bugs": {
     "url": "https://github.com/mitobyte/greetup/issues"
-  }
+  },
+  "packageManager": "[email protected]"
 }