How to Add a New Page

How to Make a Page

How to add a page to the website as of now.

Example Page Setup

// Example.js

import React from "react";

// example import of svg from React Icons
import { FaHandsHelping } from "@react-icons/all-files/fa/FaHandsHelping";

// example import of an image from local files
import pic from "../assets/images/stock-images/pie-staff.jpg";

// example import of components
import { TimelineOne } from "../components/Timelines";
import Header from "../components/Header";
import Layout from "../components/Layout";
import CustomizedContainer from "../components/CustomizedContainer";
import AlternativeButton from "../components/AlternativeButton";
import HelmetWrapper from "../components/HelmetWrapper";

// needed to use Styled Components
import styled from "styled-components";

// example import of theme to get at the "css variables" for the project
import theme from "../../assets/themes/theme";

// needed for a Contentful graphql query
import { useStaticQuery, graphql } from "gatsby";

// example query
const query = graphql`
  {
    allContentfulRecruitingTimeline(
    ) {
      nodes {
        content {
          raw
        }
        event
        time
        internalTime
      }
    }
  }
`;

const Example = () => {
  // get out a json object from the query
  // helps to print data to see object structure (expect lots of nesting)
  const data = useStaticQuery(query);
  const events = data.allContentfulRecruitingTimeline.nodes;
  return (
    // wrap everything in Layout
    <Layout>
      {/* add page meta data */}
      <HelmetWrapper
        title="Get Involved"
        description="Want to help out? Here at PiE, we don't have an application process."
      />

      {/* this is the hero component that I will figure out at some point */}
      <HeroWrapper>
        <div className="placeholder"></div>
        <div className="hero-image">
          <div>
            <h1>Get Involved</h1>
          </div>
        </div>
      </HeroWrapper>

      {/* after the hero wrap each "section" in a CustomizedContainer */}
      <CustomizedContainer color={theme.colors.grey100}>
        {/* Pie header */}
        <Header type={"blue"}>Join Us For Fall Recruiting</Header>
        ...
        {/* example use of svg from React Icons */}
        <BiGroup />
        {/* example button */}
        <AlternativeButton link="/getInvolved/Forms">Join Us</AlternativeButton>
      </CustomizedContainer>

      <CustomizedContainer>...</CustomizedContainer>
    </Layout>
  );
};

const HeroWrapper = styled.div`
  .hero-image {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
      url(${pic}) center/cover fixed no-repeat;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: ${theme.colors.white};
    top: 0;
    position: absolute;
    z-index: -1;
    padding: 1rem;
  }
  .placeholder {
    height: 100vh;
    width: 100%;
  }
`;

export default Example;