http://bit.ly/gatsby-developers-gym
draft: organization

Gatsby

JuniorDev.SG

Hi, I'm Wei

@wgao19

Co-Instructor

Nut πŸ‡ΉπŸ‡­

http://bit.ly/gatsby-developers-gym
draft: preface
I like to have full control over the experience.

Add bento

538ac80

export function formatReadingTime(minutes) { 
  let cups = Math.round(minutes / 5); 
  let bowls = 0; 
  if (cups > 5) { 
    return `${new Array(Math.round(cups / Math.E)) 
      .fill('🍱') 
      .join('')} ${minutes} min read`; 
  } else { 
    return `${new Array(cups || 1)
      .fill('β˜•οΈ')
      .join('')} ${minutes} min read`; 
  } 
}

            

References

draft: what is gatsby

What is Gatsby

Static Site Generator

Content pages are pre-built instead of requested from and generated by a server.

based on React + GraphQL

  • Layout, templates, and reusable UI parts are all React components.
  • GraphQL manages all the data and asset queries

original tweet
My website is faster than yours.
Built for the next billion users.
Flexible with the content mesh.
Simple

Building Blocks

References

draft: up and running

Up and running

Environment dependencies

gatsby-cli

$ npm install -g gatsby-cli
$ gatsby --version
            

Gatsby CLI commands


$ gatsby new name-of-your-site url-to-starter # defaults to gatsby-starter-default
$ gatsby develop  # starts a hot reload server
$ gatsby build  # may be run by your deployment service
$ gatsby serve  # serves production build
            

Setting up the site

gatsby-advanced-starter

              
$ gatsby new anyhowly-rocks https://github.com/Vagr9K/gatsby-advanced-starter
              
            

$ cd anyhowly-rocks
$ gatsby develop
            

Package structure


$ tree -L 1 # trimmed 
.   
β”œβ”€β”€ content # blog posts in md
β”œβ”€β”€ data # meta data about the site
β”œβ”€β”€ gatsby-config.js # configurations for gatsby site gen
β”œβ”€β”€ gatsby-node.js # page generation
β”œβ”€β”€ public
β”œβ”€β”€ src
└── static
            

gatsby-config.js

Gatsby Config

gatsby-node.js

Gatsby Node APIs

Learn more at Gatsby's API Reference

  • gatsby-config.js
  • gatsby-node.js
  • gatsby-browser.js
  • gatsby-ssr.js

References

draft: layouts

Layouts


$ tree src -L 2
src
β”œβ”€β”€ components
β”‚Β Β  β”œβ”€β”€ About
β”‚Β Β  β”œβ”€β”€ Disqus
β”‚Β Β  β”œβ”€β”€ Footer
β”‚Β Β  β”œβ”€β”€ PostListing
β”‚Β Β  β”œβ”€β”€ PostTags
β”‚Β Β  β”œβ”€β”€ SEO
β”‚Β Β  β”œβ”€β”€ SocialLinks
β”‚Β Β  β”œβ”€β”€ UserInfo
β”‚Β Β  └── UserLinks
β”œβ”€β”€ favicon.png -> ../static/logos/logo-48.png
β”œβ”€β”€ layout
β”‚Β Β  β”œβ”€β”€ index.css
β”‚Β Β  └── index.jsx
β”œβ”€β”€ pages
β”‚Β Β  β”œβ”€β”€ about.jsx
β”‚Β Β  └── index.jsx
└── templates
    β”œβ”€β”€ b16-tomorrow-dark.css
    β”œβ”€β”€ category.jsx
    β”œβ”€β”€ post.css
    β”œβ”€β”€ post.jsx
    └── tag.jsx
            

Pages

Gatsby core automatically turns React components in src/pages into pages

Create a new page under src/Pages/


// anyhowly.jsx
import React from "react";
export default () => 
anyhowly
;

Page Layout



// src/layout/index.jsx

export default class MainLayout extends React.Component {
  render() {
    const { children } = this.props;
    return (
      
{children}
); } }

Add a header to layout

Use layout at custom page

Add an intro to layout

Go to post listing component

References

Blog Queries

assets optimization

GraphQL

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

Query Language

Rest API

Rest API v.s. GraphQL

Rest API

GET /users/420
GET /users/420/posts
GET /posts/132
GET /posts/132/comments
              
GraphQL

user(id: $userId) {
  name
  posts {
    author {
      avatar
      name
    }
    content
    comments {
      author {
        avatar
        name
      }
    }
  }
}
              

http://localhost:8000/___graphql/

Add excerpt to post listing

Customize GraphQL query

Querying static assets

gatsby-image

  • gatsby-image
  • gatsby-transformer-sharp
  • gatsby-plugin-sharp

// gatsby-config.js

plugins: [
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  // ...
]
            

export const query = graphql`
query IndexQuery {
  allMarkdownRemark() {
    # ... other queries
  }
  file(relativePath: { eq: "logos/logo-1024.png" }) {
    childImageSharp {
      fixed(width: 125, height: 125) {
        ...GatsbyImageSharpFixed
      }
    }
  }
}`
            

References

draft: styling

Styling

  • Plain CSS
  • Sass / Less
  • CSS Modules
  • CSS-in-JS

Using SASS with Gatsby

gatsby-plugin-sass


$ yarn add sass gatsby-plugin-sass
$ # or
$ npm install --save sass gatsby-plugin-sass
            

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      implementation: require("sass"),
    },
  },
]
            

CSS Modules

CSS Modules is a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped.

Using CSS Modules with Gatsby

Add styling to layout

  • Container max-width
  • Font for headings

Pause to add more styling

Using a style guide

Style Guide from Huijing's site

Markdown Post

"Dark Mode" 🌚🌝

References

Styling

Typography

Although many books define the purpose of typography as enhancing the readability of the written word, one of design’s most humane functions is, in actuality, to help readers avoid reading.
A Type Primer by John Kane

Typography.js

  • A selection of existing typography themes
  • Highly customizable

Installation


$ yarn add gatsby-plugin-typography react-typography typography
$ # or
$ npm install --save gatsby-plugin-typography react-typography typography
            

Configuration


// gatsby-config.js

plugins: [
  // ... other plugins
  {
    resolve: `gatsby-plugin-typography`,
    options: {
      pathToConfigModule: `src/utils/typography`
    }
  },
]
            

Using an existing theme

Browse at Typography.js's demo site


// src/utils/typography.js

import Typography from "typography";
import themeElkGlen from "typography-theme-elk-glen"; // need to add dependency
export default new Typography(themeElkGlen);
            
Restart dev server if haven't.

Customizing Typographyjs theme


// src/utils/typography.js

import Typography from "typography";

themeElkGlen.overrideThemeStyles = ({ rhythm }, options) => ({
  'h1': {
    marginBottom: rhythm(1/2),
    marginTop: rhythm(2),
  }
})
export default new Typography(AnyhowlyRocksTheme);
            
TypographJS API docs

Setting Baselines

  • baseFontSize
  • baseLineHeight
  • scaleRatio

Google Fonts


googleFonts: [
  {
    name: "Bevan",
    styles: ["400"]
  }
],
headerFontFamily: ["Bevan", "Futura", "sans-serif"],
            
More Options

Style picker tool at demo site

`overrideStyles`

Imperative API for directly adding to or overriding auto-generated styles. It’s called with a Vertical Rhythm object, the options object, and the algorithmically generated styles.

overrideStyles: () => ({
  "*": {
    background: "#222",
    color: "#eee"
  },
  "@media and (min-width: 35rem)": {
    maxWidth: "35rem"
  },
  "blockquote > :last-child": {
    marginBottom: 0,
  },
})
            

Vertical Rhythm

Compass Vertical Rhythm

overrideThemeStyles: ({ rhythm, adjustFontSizeTo }, options, styles) => ({
  'h2,h3': {
    marginBottom: rhythm(1/2),
    marginTop: rhythm(2),
  },
  blockquote: {
    ...adjustFontSizeTo('19px'),
    color: gray(41),
    fontStyle: 'italic',
    paddingLeft: rhythm(13/16),
    marginLeft: rhythm(-1),
    borderLeft: `${rhythm(3/16)} solid ${gray(10)}`,
  },
})
            

References

Plugins

  • Source: gatsby-source-*,
  • Transformer: gatsby-transformer-*,
  • Helpers: gatsby-[plugin-name]-*,
  • Others: gatsby-plugin-*,

what type are the following plugins

  • gatsby-source-filesystem
  • gatsby-transformer-remark
  • gatsby-plugin-web-font-loader
  • gatsby-remark-oembed

RSS Feed

Embedding Instagram Post πŸ™ˆ

We need gatsby-remark-oembed

Installation

gatsby-remark-oembed

$ yarn add @raae/gatsby-remark-oembed 
$ # or
$ npm install @raae/gatsby-remark-oembed
            

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `@raae/gatsby-remark-oembed`,
          options: {
            // ... next slide
          }
        }
      ]
    }
  }
];
            

{
  resolve: `@raae/gatsby-remark-oembed`,
  options: {
    // defaults to false
    usePrefix: true,
    providers: {
      include: [
        'Twitter',
        'Instagram',
      ],
      settings: {
        // Ex. Show all Twitter embeds with the dark theme
        Twitter: { theme: 'dark' },
        // Ex. Hide all Instagram comments by default
        Instagram: { hidecaption: true },
      },
    }
  }
}
            

# in your post markdown file

`oembed: https://www.instagram.com/p/Bqr_-MuBdbK/`

            
draft: reaches

Reaches

Google Analytics

SEO

Putting SEO First with Gatsby

Deploy with Netlify

Site demo

draft: community

Community

In our community

Getting help

Contributing

Do chefs

cook at home?

After cooking non-stop for 10/15 hours per day, the last thing you want to do as home is cook your own meal.
A Quora Answer
Waking up to a healthy breakfast of #puffedrice #chiaseeds #figs #grapes and #yogurt :))))
We eat well at home. But that's not because Rene cooks. I cook.
(quote not exact, taken out from Rene's episode of Chef's Table) Nadine Levy Redzepi, cookbook author, wife of Rene Redzepi, Danish chef and co-owner of a Michelin 2-star restaurant

πŸ₯˜β“πŸ’©β‰οΈ

create some nonsense this weekend❣️