john-smilga/gatsby-airtable-design-project

Setup

Styled Components

VS-Extension

vscode-styled-components

Regural 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

Algolia

algolia;

Project Steps

• cover setup
• styled components global css
• basic gatsby background image
• basic navbar
• about
• airtable
• connect to airtable
• env vars