DSchau

jest.mock('../local-eslint-config-finder', () => jest.fn())
jest.mock('../eslint-config', () => jest.fn())
jest.mock('../api-runner-node', () => jest.fn())
jest.mock('../../redux', () => ({
  store: {
    dispatch: jest.fn(),
    getState: jest.fn().mockImplementation(() => ({
      program: {
        extensions: []
      }

DSchau

Building an authentication layer

My absolute favorite way to build in authentication in a React application is with the [Context API][react-context]. This enables any component nested beneath an authenticated child to be able to grab authentication data, methods, etc. in a clean, intuitive way. You better believe this works with Gatsby too; it is just a React application after all!

For these examples, presume that we have some third-party JavaScript library that implements helpful authentication features and provides API methods to check authentication status and perform logins and logouts. Of course, you can roll this yourself, as well, but I merely want to introduce the general idea! We use this library, and provide it in a utils folder like so:

import Auth from 'some-auth-library';

export default new Auth({

DSchau

#!/usr/bin/env node
const fs = require('fs-extra')
const Promise = require('bluebird')
const exec = require('execa')
const path = require('path')

async function main() {
  const cwd = process.cwd()
  const base = path.resolve('packages')
  const packages = fs.readdirSync(base)

DSchau

markdown|gatsby/cache⚡ ⇒ time yarn build
yarn run v1.9.4
$ gatsby build
success open and validate gatsby-config — 0.006 s
success load plugins — 0.095 s
success onPreInit — 0.577 s
success delete html and css files from previous builds — 3.203 s
success initialize cache — 0.008 s
success copy gatsby files — 0.028 s
success onPreBootstrap — 0.002 s

DSchau

markdown|gatsby/cache⚡ ⇒ time yarn build
yarn run v1.9.4
$ gatsby build
success open and validate gatsby-config — 0.006 s
success load plugins — 0.095 s
success onPreInit — 0.367 s
success delete html and css files from previous builds — 3.642 s
success initialize cache — 0.006 s
success copy gatsby files — 0.025 s
success onPreBootstrap — 0.005 s

DSchau

import { Link } from 'gatsby';

export default function IndexPage() {
  return (
    <Link to="/about">About</Link>
  )
}

DSchau

query GetLatestRepositories {
  user(login:"dschau") {
    repositories(first:6, isFork:false, orderBy:{field:STARGAZERS, direction:DESC}) {
      edges {
        node {
          id
          name
          descriptionHTML
          createdAt
          url

DSchau

var presentations = {};
(async function() {
  document.querySelector('.schedule-button').click();

  const rows = Array.from(document.querySelector('modal-content').querySelector('div.active').querySelectorAll('tr'))
    .filter(row => !row.classList.contains('table-active'));
  const rooms = rows.splice(0, 1);

  const delay = duration => new Promise(resolve => setTimeout(resolve, duration));

DSchau

const crypto = require('crypto');
const get = require('lodash.get');

const setNullToEmpty = data =>
  Object.keys(data).reduce((merged, key) => {
    if (key !== 'null') {
      merged[key] = data[key] === null ? '' : data[key];
    }
    return merged;
  }, {});

DSchau

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
        author
      }
    }
    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
      edges {