douknowccy / gatsby-airtable-design-site

Setup

• folders/files/imports
• css (styled components)
• error page, footer, seo

Styled Components

VS-Extension

vscode-styled-components

Regular Setup

import styled from "styled-components"
const NameOfElement = styled.htmlElement`
your
styles
go
here
`

Global Styles

import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
your
global
styles
go here
`
// wrap root element
export const wrapRootElement = ({ element }) => {
  return (
    <>
      <GlobalStyle />
      {element}
    </>
  )
}

Both files
- gatsby-browser.js
- gatsby-ssr.js

Gatsby Background Image

npm install --save gatsby-background-image

Airtable

airtable

env variables

gatsby-config

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

ROOT!!!!!!!!!!!!!!!

.env.development .env.production

Algolia

algolia;