coreyward

import React, { Suspense } from "react";

const componentMap = {
  sectionOne: React.lazy(() => import("./SectionOne")),
  sectionTwo: React.lazy(() => import("./SectionTwo")),
};

const Section = ({ _type, ...sectionProps }) => {
  const SectionComponent = componentMap[_type];

coreyward

/**
 * This script injects JSDoc comments from the JS source files into the type
 * definition files. This is necessary because the type definition files
 * generated by TypeScript do not include JSDoc comments.
 *
 * @see https://github.com/microsoft/TypeScript/issues/14619
 *
 * The strategy is a bit hacky, but straightforward:
 *
 * 1. Recursively walk the output folder looking for .d.ts files

coreyward

const getImageData = async url => {
  const response = await global.fetch(url)
  const contentType = response.headers.get("Content-Type")
  return response.blob().then(imageData => ({ contentType, imageData }))
}

const uploadImage = ({ imageData, contentType }) =>
  client.assets.upload("image", imageData, { contentType })

// usage example

coreyward

// import and configure the client

const oldRef = "abc123"
const newRef = "def456"

client
  .fetch(
    `*[references($oldRef)][0...250] {
    _id,
    _rev,

coreyward

To render the SVG, it's useful to have a wrapper component that allows passing in additional props:

import React from "react"
import { compiler } from "markdown-to-jsx"

const InlineSvg = ({ content, ...props }) => 
  compiler(content, {
    createElement: (type, elProps, children) =>
 React.createElement(type, { ...elProps, ...props }, children),

coreyward

import { useEffect } from "react"
import config from "config:sanity"

const BUNDLE_CHECK_INTERVAL = 60 * 1000
const CHANGES_AVAILABLE_MESSAGE =
  "There are changes to the Studio. For the best results the page will be refreshed to update to the latest version of the Studio."

async function getCurrentHash() {
  const basePath = (config.project && config.project.basePath) || "/"
  const html = await window.fetch(basePath).then((res) => res.text())

coreyward

exports.onPostBuild = ({ graphql }) =>
  graphql(`
    {
      redirects: allSanityRedirect {
        nodes {
          matchPath
          target
          statusCode
        }
      }

coreyward

import { useState, useCallback, useEffect } from "react"

/**
 * Similar to `useState` but with some lightweight behind-the-scenes
 * writing to localStorage; also subscribes to changes in localStorage
 *
 * @param {string} key The string key name to be written to localStorage
 * @param {object} options
 * @param {*} options.initialValue Initial value for setState
 * @param {boolean} options.bool Treat values as boolean types

coreyward

import React from "react"
import { graphql } from "gatsby"

const Page = props => <pre>{JSON.stringify(props, null, 2)}</pre>

export default Page

export const query = graphql`
  {
    sanityPage {

coreyward

const sourceRawField = fieldName => ({
  type: "JSON",
  resolve: (source, args, context, info) => {
    const data = source[fieldName]

    // Resolve top-level references in Portable Text
    if (data && Array.isArray(data)) {
      return data.map(block =>
        block._type === "reference"
          ? {