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

import { useState, useEffect, useCallback } from "react";
import { useAsyncStorage } from "@react-native-community/async-storage";

/**
 * @example
 *   const [isReady, setReady, refresh] = usePersistantState(199, "ready")
 */
export default (id, property, defaultValue = null) => {
  const [value, setValue] = useState(defaultValue);
  const { getItem, setItem } = useAsyncStorage(`${id}#${property}`);

coreyward

Introductory information about the space, terms, existing standards, and theory:

• https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
• https://poynton.ca/PDFs/GammaFAQ.pdf
• https://www.w3.org/TR/WCAG20/#contrast-ratiodef
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
• https://en.wikipedia.org/wiki/Luma_(video)
• https://en.wikipedia.org/wiki/Relative_luminance
• https://en.wikipedia.org/wiki/Rec._709

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

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

useStorage React Hook

Similar to useState but with some lightweight behind-the-scenes writing to localStorage; also subscribes to changes in localStorage to allow for cross-tab changes to sync automatically.

Example Usage

The first argument is the name of the local storage property/key you want to control with this hook. The second argument, options, really just has one available directive: bool. Setting bool to true has the effect of evaluating the data

coreyward

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

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())