sharkcoder7/Gatsby-Sample

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

env variables

gatsby-config

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

Project Steps

• Cover setup
• Styled components global css
• Basic gatsby background image
• Basic navbar
• About
• Airtable
• Connect to airtable