serverlessdays-virtual-new

New ServerlessDays Virtual website. Built with Gatsby and GraphCMS. Based on the Gatsby Strapi boilerplate.

Run locally

1. clone the repo
2. hit npm i
3. set up GraphCMS and gatsby-config.js. Documentation
4. start local development environment by gatsby develop

Hooks

Since hooks has been introduced to react, let's aim to use them.

For example:

import React, { useState } from 'react'

const [isVisible, setIsVisible] = useState(false)

and when you need to set its value

setIsVisible(true)

Read more about react-hooks in its documentation

For hooks follow the naming conventions, as in the example above. If a variable needs to be set to a specific value, use the set in the naming, so it will be consequent, and readable.

Project structure

Each component have to be in components folder.

1. in src/components/<component-name>, if it's a core component.

2. in pages/<page-name>, if it's a page.

Naming conventions

We are using camelCase naming conventions for both variable names, and classNames, for example:

TopHeader, isVisible, etc.

styled-component are part if this repository also, use it if a component requires styles related props, such as color, width, etc.

Example:

import styled from 'styled-components`

const DemoStyledComponent = styled.span`
    display: flex;
    &:before {
        content: '';
        width: ${props =>  props.width}px;
        ...
        ...
        ...
    }
`

And then referencing them as the following:

<DemoStyledComponent width={200} />

Dependencies

Here's a list of important dependencies we are using in this project:

• gatsbyJS
• Bootstrap
• Reactstrap
• Reactstrap-form-fields
• React Icons
• Google Tag Manager
• gatsby-plugin-netlify
• gatsby-plugin-google-tagmanager
• gatsby-plugin-facebook-pixel
• gatsby-plugin-manifest
• gatsby-plugin-styled-components

Please read the documentation of these packages if you are not familiar with them.