Pages

All pages are routed via the pages directory /src/pages

Each language has it's own directory structure /src/pages/en this results in a URL and index page of /en for English

A typical page will import components to build up the page, for example:

/src/pages/en/help.js

<Layout>
  <div className={classes.grow}>
    <AppBar className={classes.header} position="sticky">
      <NavBar locale="en"></NavBar>
    </AppBar>
    <Paper elevation={0} className={classes.paper}>
      <Breadcrumbs separator="›" aria-label="breadcrumb">
        <Typography className={classes.breadcrumbs}>Help</Typography>
      </Breadcrumbs>
    </Paper>

    <HelpTopics />
  </div>
</Layout>

The page is wrapped with a Layout component and also contains a NavBar imported from the ../components directory

In this example content for the help topics are pulled in from the ../components/HelpTopic and passed as a prop to the page component.

../components/HelpTopic

import React from "react";
import { StaticQuery, graphql, Link } from "gatsby";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";

const HelpTopics = () => (
  <StaticQuery
    query={graphql`
      query HelpQuery {
        allStrapiHelpSlideshow(filter: { locale: { eq: "en" } }) {
          nodes {
            title
            slug
            id
            locale
            publishedAt
          }
        }
      }
    `}
    render={(data) => (
      <>
        <HelpSlideShowList slides={data.allStrapiHelpSlideshow.nodes} />
      </>
    )}
  />
);

const HelpSlideShowList = ({ slides }) => {
  return slides.map((slide) => {
    return (
      <>
        {slide.publishedAt !== null ? (
          <div className="slide-help">
            <Link
              to={"/en/help/" + slide.slug}
              style={{ textDecoration: "none" }}
            >
              <Card
                className="card-help"
                style={{ background: "rgb(24, 123, 192)" }}
              >
                <CardContent>
                  <div className="center-help">
                    <p className="card-title-help">{slide.title}</p>
                  </div>
                </CardContent>
              </Card>
            </Link>
          </div>
        ) : null}
      </>
    );
  });
};

export default HelpTopics;