Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View SimeonGriggs's full-sized avatar

Simeon Griggs SimeonGriggs

View GitHub Profile
@SimeonGriggs
SimeonGriggs / resolveProductionUrl.js
Created October 25, 2020 10:26
Sanity Preview URL with sanityClient Fetch
import sanityClient from 'part:@sanity/base/client'
const remoteURL = 'https://example.com'
const localURL = 'http://localhost:8000'
const previewURL =
window.location.hostname === 'localhost' ? localURL : remoteURL
export default function resolveProductionUrl (document) {
if (!document.slug) return null
@SimeonGriggs
SimeonGriggs / useCurrentUser.js
Created November 18, 2020 14:37
Sanity useCurrentUser() Custom Hook
import userStore from 'part:@sanity/base/user'
import { useEffect, useState } from 'react'
// Retrieves the current logged-in user details
export function useCurrentUser() {
const [user, setUser] = useState()
useEffect(() => {
userStore.currentUser.subscribe(e => setUser(e.user))
}, [])
@SimeonGriggs
SimeonGriggs / AnnotateAction.js
Created July 15, 2021 14:25
Sanity.io Document Action to automate Annotations from a 'Vocabulary' schema
import {useState} from 'react'
import {randomKey} from '@sanity/util/content'
import sanityClient from 'part:@sanity/base/client'
const apiVersion = `2021-05-19`
const client = sanityClient.withConfig({apiVersion})
export default function AnnotateAction({draft, published}) {
const [isAnnotating, setIsAnnotating] = useState(false)
@SimeonGriggs
SimeonGriggs / SanityImage.js
Created August 11, 2021 14:57
A far-from-feature-complete Component for loading Sanity Images in Next.js
/* eslint-disable @next/next/no-img-element */
import Head from 'next/head'
import PropTypes from 'prop-types'
import React, {useMemo} from 'react'
import {getImageDimensions} from '@sanity/asset-utils'
// eslint-disable-next-line import/no-cycle
import {urlFor} from '../lib/sanity'
function getImageDetails(image, width, height) {
@SimeonGriggs
SimeonGriggs / filteredObject.js
Last active October 5, 2021 11:04
Call Objects using a function that will filter its child fields down to specific keys
const filteredObject = (name, filters = []) => ({
name,
type: 'object',
fields: [
{name: 'size', type: 'string', hidden: () => filters.includes('size')},
{name: 'tone', type: 'string', hidden: () => filters.includes('tone')}
]
})
export default {
@SimeonGriggs
SimeonGriggs / i18n-document-level-unique-slugs.js
Created November 22, 2021 14:22
An `isUnique` function for unique slugs across a schema type but the same across a base document
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
isUnique: async (slug, options) => {
const {document: sanityDocument} = options
// Filter out additional parts of the _id to get the original
@SimeonGriggs
SimeonGriggs / Tabs.js
Last active November 26, 2021 14:22
inputComponent drop-in replacement for `sanity-plugin-tabs`
/* eslint-disable no-negated-condition */
/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
/* eslint-disable max-nested-callbacks */
/**
* inputComponent drop-in replacement for `sanity-plugin-tabs`
* Provided as-is with no explicit or implied future support
* Addresses some UI issues with that plugin, but may introduce others
*
@SimeonGriggs
SimeonGriggs / example.js
Last active December 8, 2021 10:30
A "listening" version of usePreviewSubscription() that re-queries the client. Not yet recommended for Production use.
const { data, loading } = useListeningQuery(
query,
{
params: params ?? {},
initialData: page,
enabled: preview,
delay: 250,
}
);
@SimeonGriggs
SimeonGriggs / ReferenceCustomSearch.js
Created December 10, 2021 11:03
Reference Field Custom Input with Restrained Search
/* eslint-disable react/prop-types */
/**
* This is a Custom Input POC for a Reference field with defined search parameters on the target document
* The built-in reference field currently can filter results but only statically, not using the search query
*
* This custom input is NOT recommended as it lacks some of the amazing features of the built-in reference field
* It's also a bit wonky in terms of the UI, but it's a start
* ...and it does solve this one specific use case
*/
@SimeonGriggs
SimeonGriggs / DecoratedArray.js
Created December 10, 2021 14:19
Sanity.io Custom Input that will still resolve the default UI for field editing
/**
* Custom Input that will resolve Sanity's default UI for field editing
* As well as display some contextual information from the document
* This is example is for an `array` field of `car` type fields
* For which the default UI is shown below an image from the first array item
*
* The implementation is *not* bulletproof and only has basic handling
* of the potential pitfalls of recursive rendering of the
* <FormBuilderInput /> component
*/