Skip to content

Instantly share code, notes, and snippets.

@runeb
runeb / Custom.js
Last active April 22, 2021 00:32
Example of custom document actions on Sanity. See documentation for more https://www.sanity.io/docs/document-actions-api
import React from "react";
import sanityClient from "part:@sanity/base/client";
import userStore from "part:@sanity/base/user";
// A more involved custom action example, doing some queries etc.
export default function Custom(props) {
// const {draft, published, id, type} = props
// Common operation in custom actions are to inspect the document (draft ||
import React, {useState} from "react"
import { PublishAction } from 'part:@sanity/base/document-actions';
const ConfirmDialog = ({onClick, onCancel}) => {
return (
<>
<button onClick={onClick}>Yes</button>
<button onClick={onCancel}>Cancel</button>
</>
)
@runeb
runeb / listen.js
Created April 9, 2021 19:27
Listening for Sanity dataset changes and causing Eleventy rebuild
require("dotenv").config();
const fs = require("fs");
const { groqStore, groq } = require("@sanity/groq-store");
const store = groqStore({
projectId: process.env.SANITY_PROJECT_ID,
dataset: process.env.SANITY_DATASET,
listen: true,
overlayDrafts: true,
token: process.env.SANITY_TOKEN || "",
// Find all nested instances of _type `type`
const findAssets = (object, type, results = []) => {
if (object instanceof Object) {
if (object["_type"] === type) {
results.push(object);
return;
}
for (const key of Object.keys(object)) {
const value = object[key];
// Exif orientation value to css transform mapping
type Rotation = string;
const rotations: Record<number, Rotation> = {
1: "rotate(0deg)",
2: "rotateY(180deg)",
3: "rotate(180deg)",
4: "rotate(180deg) rotateY(180deg)",
5: "rotate(270deg) rotateY(180deg)",
6: "rotate(90deg)",
7: "rotate(90deg) rotateY(180deg)",
{
"Client": {
"scope": "javascript,typescript",
"prefix": "sanity client",
"body": [
"const sanityClient = require('@sanity/client')",
"const client = sanityClient({",
"projectId: '${1:your-project-id}',",
"dataset: '${2:production}',",
"token: 'sanity-auth-token', // or leave blank to be anonymous user",
import React, { useRef } from 'react'
import { map } from 'rxjs/operators'
import { createWeightedSearch } from 'part:@sanity/base/search/weighted'
import client from 'part:@sanity/base/client'
import ExternalReferenceInput from './ExternalReferenceInput'
const ExternalReference = props => {
const { type } = props
const { options } = type
const { dataset } = options
@runeb
runeb / pane.js
Last active January 19, 2021 23:50
Custom control over Desk pane menu items based on user group membership
import React, {
useEffect, useState
} from 'react'
import DefaultPane from '@sanity/components/lib/panes/DefaultPane'
import client from 'part:@sanity/base/client'
const CustomPane = (props) => {
const [groups, setGroups] = useState([])
useEffect(() => {
type SanityClientOptions = {
projectId: string;
dataset: string;
token?: string;
useCdn?: boolean;
};
type QueryParameters = Record<string, string | number>;
const sanityClient = (options: SanityClientOptions) => {
import { FaExternalLinkAlt } from 'react-icons/fa'
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }