flex-template-web/docs/static-pages.md

# Static pages

If you want to create simple pages that just show static content without need for data fetches,
you can create a static page.

Steps for creating a static page:
1) [Create a new folder under `src/containers/`](#1-creating-a-new-folder)
2) [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file)
3) [Create a new CSS file using the same name.](#3-creating-a-css-file)
4) [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component)
5) [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file)
6) [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory)
7) [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page)

## 1. Creating a new folder

Create a new folder under `src/containers/` with the name of your static page. E.g. "about" page should be named as `AboutPage`.

## 2. Creating a JavaScript file

Create a new JavaScript file using the folder name. The path should look like `src/containers/AboutPage/AboutPage.js`.

## 3. Creating a CSS file

Create a new CSS file using the folder name. The path should look like `src/containers/AboutPage/AboutPage.css`.

## 4. Creating the component

Template for a single column static page (AboutPage.js):
(We'll go through this line-by-line below.)

```jsx
import React from 'react';
import { StaticPage, TopbarContainer } from '../../containers';
import {
  LayoutSingleColumn,
  LayoutWrapperTopbar,
  LayoutWrapperMain,
  LayoutWrapperFooter,
  Footer,
  NamedLink,
  ExternalLink
} from '../../components';

import css from './AboutPage.css';
import image from './path/to/image.png';

const AboutPage = () => {
  return (
    <StaticPage
      className={css.root}
      title="About"
      schema={{
        "@context": "http://schema.org",
        "@type": "AboutPage",
        "description": "Description of this page",
        "name": "About page",
      }}
    >
      <LayoutSingleColumn>
        <LayoutWrapperTopbar>
          <TopbarContainer />
        </LayoutWrapperTopbar>
        <LayoutWrapperMain>
          <h1>Some content</h1>
          <img src={image} alt="My first ice cream." />
          <div>
            <NamedLink name="LandingPage">Go to home page</NamedLink> or
            <ExternalLink href="https://google.com">Go to Google</ExternalLink>
          </div>
        </LayoutWrapperMain>
        <LayoutWrapperFooter>
          <Footer />
        </LayoutWrapperFooter>
      </LayoutSingleColumn>
    </StaticPage>
  );
}

export default AboutPage;

```

We are using [React](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html) to create components and pages. Therefore, we need to import React to our new component which is done in the first line.
```jsx
import React from 'react';
```

In the second line we are importing two containers:
- `StaticPage`: helps in creating static pages
- `TopbarContainer`: creates our Topbar component and fetches the data it needs.

```jsx
import { StaticPage, TopbarContainer } from '../../containers';
```

After that we need to import some components:
- `LayoutSingleColumn` and wrappers that it needs to position content
- `Footer` component (to be added inside LayoutWrapperFooter)
- `NamedLink` makes it easier to point to different pages inside Starter app
- `ExternalLink` can be used to link outside of Starter app. It creates a normal `<a>`link with extra attributes `target="_blank" rel="noopener noreferrer"` that add some security to these outbound links.

`LayoutSingleColumn` (and other layouts like LayoutSideNavigation) need to understand what the content is about. Therefore, different parts of the page need to be wrapped with specific components - in this case: `LayoutWrapperTopbar`, `LayoutWrapperMain`, and `LayoutWrapperFooter`.

```jsx
import {
  LayoutSingleColumn,
  LayoutWrapperTopbar,
  LayoutWrapperMain,
  LayoutWrapperFooter,
  Footer,
  NamedLink,
  ExternalLink
} from '../../components';
```

Then we need to import styles and possible other files from current folder. With CSS we are using [CSS Modules](https://github.com/css-modules/css-modules) to tackle possible classhes of different class names. [Read more.](#5-creating-the-css-file)

```jsx
import css from './AboutPage.css';
```

Then we also import an image which is used later (`<img src={image} alt="My first ice cream." />`). 

```jsx
import image from './path/to/image.png';
```

Then after all the imports we are finally getting into phase were we define the component.
`const AboutPage = props => { return <div></div>}` defines a component called AboutPage with content defined in return part. This is a [functional component](https://reactjs.org/docs/components-and-props.html).

In the template above we are using StaticPage component with some attributes:
```jsx
    <StaticPage
      className={css.root}
      title="About"
      schema={{
        "@context": "http://schema.org",
        "@type": "AboutPage",
        "description": "Description of this page",
        "name": "About page",
      }}
    >
```

- `className` is JSX name for `class` attribute used in plain HTML.
- `title="About"` creates `<title>About</title>` element to `<head>` section of the page. (That title is also used in OpenGraph meta tags). You could also add `description="This is about page description"`
- Then we have `schema` tag that defines some data for search engines in JSON-LD format. Check [schema.org](http://schema.org/docs/full.html) for more information.

Inside `StaticPage` component we define layout (`LayoutSingleColumn`) and add other components inside semantic content wrappers so that the layout is able to understand where to render those blocks.

```jsx
      <LayoutSingleColumn>
        <LayoutWrapperTopbar>
          <TopbarContainer />
        </LayoutWrapperTopbar>
        <LayoutWrapperMain>
          <h1>Some content</h1>
          <img src={image} alt="My first ice cream." />
          <div>
            <NamedLink name="LandingPage">Go to home page</NamedLink> or
            <ExternalLink href="https://google.com">Go to Google</ExternalLink>
          </div>
        </LayoutWrapperMain>
        <LayoutWrapperFooter>
          <Footer />
        </LayoutWrapperFooter>
      </LayoutSingleColumn>
```

And as a final step we need to export the component. `export default AboutPage;`. See more from [babeljs.org](https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules)

## 5. Adding some styles to the CSS file

Here's an example what your AboutPage.css file could look like:
```css
@import '../../marketplace.css';

.root {
  padding: 24px;

  /* Use CSS variable imported from marketplace.css */
  background-color: var(--marketplaceColor);
}
```


## 6. Adding the component to the component directory

New component needs to be added to `src/containers/index.js` file or if it's a presentational component (not page or form) it should be inside components folder and therefore added to `src/components/index.js`

Inside that index.js you need to add line `export { default as AboutPage } from './AboutPage/AboutPage';`. This helps other parts of the app to import new components easily with `import { AboutPage } from '../../components'`.


## 7. Adding a route to the page

As a last step you need to add the newly created static page to Starter apps routing. This can be done in `src/routeConfiguration.js`.

Inside routeConfiguration function you should add a URL path, a page name (it should not conflicting with other pages), and the component itself.

Add it as first to the list of imported pages in alphabetical order (2nd line):
```jsx
import {
  AboutPage,
  AuthenticationPage,
  CheckoutPage,
```

and after that add the route configuration to your newly created page:
(In this example we created about page so '/about' would work well as a path.)
```javascript
    {
      path: '/about',
      name: 'AboutPage',
      component: AboutPage,
    },
```

## Read more

We are using several libraries in this example. If you want to read more, here's some pointers:
- [ES2015](https://babeljs.io/learn-es2015/): imports, exports, arrow functions
- [React](https://reactjs.org/): for creating components
- [JSX](https://reactjs.org/docs/introducing-jsx.html): for getting HTML-like markup syntax for own components
- [CSS Modules](https://github.com/css-modules/css-modules)
- [React Router](https://reacttraining.com/react-router/web/guides/philosophy): routing inside Starter app pages.