diff --git a/.nvmrc b/.nvmrc index b6a7d89..209e3ef 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +20 diff --git a/README.md b/README.md index 3a6bf9c..1aa970e 100644 --- a/README.md +++ b/README.md @@ -49,3 +49,17 @@ GraphQL allows our site to request only the data that it needs and only when it - Support Drupal and display badge: https://www.drupal.org/association/campaign/become-a-member-2021 --> + +## Development + +```sh +# Use the correct Node version +nvm install +nvm use + +# Install dependencies +yarn install + +# Run the development server +yarn run start +``` diff --git a/gatsby-browser.js b/gatsby-browser.js index 916e201..a035eaf 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -5,8 +5,8 @@ import "./src/styles/scramble.css"; import "./src/styles/modal.css"; import "./src/styles/imageGlitch.css"; -// @ts-ignores -import wrapPageElement from "./src/utils/wrapPageElement"; +import { wrapPageElement } from "./src/utils/wrapPageElement"; + const onClientEntry = (_args) => { Modal.setAppElement("#___gatsby"); }; diff --git a/package.json b/package.json index ff9c7c4..0e7c634 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "meese.enterprises", + "name": "@meese-enterprises/website", "private": true, "version": "0.0.0", "license": "MIT", @@ -13,44 +13,47 @@ "check-types": "tsc -p . --noEmit" }, "dependencies": { - "@fortawesome/fontawesome-svg-core": "^1.2.36", - "@fortawesome/free-brands-svg-icons": "^5.15.4", - "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@fortawesome/react-fontawesome": "^0.1.15", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@rebass/preset": "^4.0.5", "@tippy.js/react": "^3.1.1", - "assert": "^2.0.0", - "babel-plugin-styled-components": "^2.0.6", - "gatsby": "^4.10.1", - "gatsby-plugin-image": "^2.10.0", - "gatsby-plugin-manifest": "^4.10.1", - "gatsby-plugin-react-helmet": "^5.10.0", - "gatsby-plugin-sharp": "^4.10.1", - "gatsby-plugin-styled-components": "^5.10.0", - "gatsby-plugin-typescript": "^4.10.0", - "gatsby-source-contentful": "^7.8.1", - "gatsby-source-medium": "^4.10.0", - "gatsby-transformer-remark": "^5.10.1", - "react": "^17.0.2", - "react-awesome-reveal": "^3.8.1", - "react-dom": "^17.0.2", - "react-headroom": "^3.2.0", + "assert": "^2.1.0", + "babel-plugin-styled-components": "^2.1.4", + "gatsby": "^5.14.0", + "gatsby-plugin-image": "^3.14.0", + "gatsby-plugin-manifest": "^5.14.0", + "gatsby-plugin-react-helmet": "^6.14.0", + "gatsby-plugin-sharp": "^5.14.0", + "gatsby-plugin-styled-components": "^6.14.0", + "gatsby-plugin-typescript": "^5.14.0", + "gatsby-source-contentful": "^8.14.0", + "gatsby-source-medium": "^5.14.0", + "gatsby-transformer-remark": "^6.14.0", + "react": "^18.3.1", + "react-awesome-reveal": "^4.2.14", + "react-dom": "^18.3.1", + "react-headroom": "^3.2.1", "react-helmet": "^6.1.0", - "react-markdown": "^7.0.0", - "react-modal": "^3.14.4", + "react-markdown": "^9.0.1", + "react-modal": "^3.16.1", "rebass": "^4.0.7", - "styled-components": "^5.3.3" + "styled-components": "^6.1.13" }, "devDependencies": { - "@types/react-headroom": "^2.2.2", - "@types/react-helmet": "^6.1.2", - "@types/react-modal": "^3.13.1", - "@types/rebass": "^4.0.9", - "chalk": "^5.0.1", - "contentful-import": "^8.2.28", + "@types/node": "^20", + "@types/react-headroom": "^3.2.3", + "@types/react-helmet": "^6.1.11", + "@types/react-modal": "^3.16.3", + "@types/rebass": "^4.0.15", + "chalk": "^5.3.0", + "contentful-import": "^9.4.69", "env-cmd": "^10.1.0", - "inquirer": "^8.2.1", - "start-server-and-test": "^1.14.0", - "typescript": "^4.6.2" + "inquirer": "^12.0.1", + "start-server-and-test": "^2.0.8", + "typescript": "^5.6.3" } } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 807df85..78e5f79 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,35 +1,36 @@ import React from "react"; +import SocialLink from "./SocialLink"; import styled from "styled-components"; -import { Text, Box, Flex } from "rebass/styled-components"; +import { Box } from "rebass/styled-components"; import { Fade } from "react-awesome-reveal"; -import SocialLink from "./SocialLink"; -import Link from "./Link"; import { useSiteQuery } from "../queries/useSiteQuery"; const Footer = () => { - const { companyName, socialLinks } = useSiteQuery(); + const { socialLinks } = useSiteQuery(); return ( - + - - - {`© ${companyName} - Powered by `} - Open Source{" "} - - ❤️ - - + + {socialLinks.map((sl) => ( + + + + ))} - - - {socialLinks.map((sl) => ( - - - - ))} - - ); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 1a83012..41ec831 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,14 +1,12 @@ import React from "react"; import Headroom from "react-headroom"; -import { Box, Link as RebassLink, Flex, Image } from "rebass/styled-components"; +import { Link as RebassLink, Flex, Image } from "rebass/styled-components"; import styled from "styled-components"; -import Link from "./Link"; import { useHelmetQuery } from "../queries/useHelmetQuery"; import { useSiteQuery } from "../queries/useSiteQuery"; import { SECTION } from "../utils/constants"; import { getSectionHref } from "../utils/helpers"; -// TODO: Add a light/dark mode toggle const Header = () => { const { logo } = useHelmetQuery(); const { companyName } = useSiteQuery(); @@ -33,17 +31,6 @@ const Header = () => { /> - - {(Object.keys(SECTION) as Array) - .filter((id) => id !== "home") - .map((id) => ( - - - {SECTION[id]} - - - ))} - ); diff --git a/src/sections/About.tsx b/src/sections/About.tsx deleted file mode 100644 index 5945911..0000000 --- a/src/sections/About.tsx +++ /dev/null @@ -1,90 +0,0 @@ -// External imports -import React from "react"; -import ReactMarkdown from "react-markdown"; -import styled from "styled-components"; -import { Box, Image, Flex } from "rebass/styled-components"; -import { Fade } from "react-awesome-reveal"; - -// Internal imports -import Section from "../components/Section"; -import Triangle from "../components/Triangle"; -import components from "../components/MarkdownComponents"; -import { SECTION } from "../utils/constants"; -import { useAboutQuery } from "../queries/useAboutQuery"; - -const About = () => { - const { markdown, logo } = useAboutQuery(); - - /** Prevents the dark triangle from overlapping with the dark text. */ - const customStyles = ` - @media (max-width: 1400px) { - padding-top: 10vh; - } - @media (max-width: 1000px) { - padding-top: 20vh; - } - `; - - return ( - - - - - - - - - - - - - - - - - - ); -}; - -const ProfilePicture = styled(Image)` - border-radius: 50%; - transition: all 0.4s ease-out; - - &:hover { - border-radius: 20%; - } -`; - -const Background = () => ( - <> - - - - - - -); - -export default About; diff --git a/src/sections/Employees.tsx b/src/sections/Employees.tsx deleted file mode 100644 index 5ca2e61..0000000 --- a/src/sections/Employees.tsx +++ /dev/null @@ -1,94 +0,0 @@ -// External imports -import React, { useEffect } from "react"; -import { Fade } from "react-awesome-reveal"; - -// Internal imports -import Section from "../components/Section"; -import Triangle from "../components/Triangle"; -import Employee from "../components/Employee"; -import { CardContainer } from "../components/Card"; -import { SECTION } from "../utils/constants"; -import { useEmployeesQuery } from "../queries/useEmployeesQuery"; - -// @ts-ignore -import { VHSify } from "../utils/imageGlitch"; - -const Employees = () => { - const employees = useEmployeesQuery(); - - // Runs after the render so the DOM elements are available - useEffect(() => { - const images = document.querySelectorAll(".js-vhs-filter"); - images.forEach((image) => VHSify(image)); - }, []); - - return ( - - - - - - {employees.map((info, index) => ( - - ))} - - - - {/* From https://codepen.io/samdbeckham/pen/XBzQeK */} - - - - - - - - - - - - - ); -}; - -const Background = () => ( - <> - - - - - - - - -); - -export default Employees; diff --git a/src/sections/Landing.tsx b/src/sections/Landing.tsx index 3f0aa53..c60d832 100644 --- a/src/sections/Landing.tsx +++ b/src/sections/Landing.tsx @@ -3,11 +3,10 @@ import React, { useEffect } from "react"; import { Text } from "rebass/styled-components"; // Internal imports -import ScrollIcon from "../components/ScrollIcon"; +import Footer from "../components/Footer"; import ScrambleLetters from "../utils/scramble"; import Section from "../components/Section"; import { SECTION } from "../utils/constants"; -import { getSectionHref } from "../utils/helpers"; import { useLandingPageQuery } from "../queries/useLandingPageQuery"; const LandingPage = () => { @@ -21,7 +20,6 @@ const LandingPage = () => { // Runs after the render, so the DOM elements are available useEffect(() => { - // TODO: Try to improve the performance and appearance of this on Linux systems new ScrambleLetters(); }, []); @@ -72,7 +70,7 @@ const LandingPage = () => { {tagline} - +