Bryan Robinson
Sr. DevRel @ Algolia
export default {
name: 'alert',
title: 'Site Alert',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
description: 'For internal use only.'
},
{
name: 'text',
title: 'Alert text',
type: 'text'
},
{
name: 'callToAction',
title: 'Call to action',
type: 'object',
options: {
columns: 2 // Puts the fields side-by-side
},
fields: [
{
name: 'text',
title: 'Link text',
type: 'string'
},
{
name: 'url',
title: 'Link URL',
type: 'url'
}
]
},
{
name: 'style',
title: 'Banner style',
type: 'string',
options: {
// Creates a dropdown to select the strings
list: ['Sale', 'Promo', 'Breaking']
}
}
]
}
// This file contains any global site config
export default {
name: "siteConfig",
type: "document",
title: "Site configuration",
// https://www.sanity.io/docs/experimental/ui-affordances-for-actions
fieldsets: [{ name: "footer", title: "Footer" }],
fields: [
{
name: "title",
type: "string",
title: "Site title",
},
{
title: "URL",
name: "url",
type: "url",
description: "The main site url. Used to create canonical url",
},
{
// Gets a singular alert from the list of alerts
name: 'alert',
title: 'Global alert for site',
type: 'reference',
to: [
{type: 'alert'}
]
},
// ... Anything else you need globally
]
}
*[_id == 'siteSettings']{ // Get the siteSettings Singleton
..., // Get all data
alert->{ // Get the data from the alert reference, and project the data we need
text,
callToAction,
style
}
}
This is a companion snippet for this YouTube tutorial. Watch the video for a full walkthrough.
This set of schema builds the data necessary to do a global "alert" banner for any type of application. Typically, this would work well for an e-commerce website.
The alert.js
file builds the data necessary to allow editors to add as many alerts as they want. In the siteConfig.js
file, we add a reference field to allow them to choose which alert to show on the site. Finally, we can query this with the attached GROQ query.
Sr. DevRel @ Algolia
This is a starting point for the creation of a custom string input. It recreates the basic functionality of the default string input.
Go to Custom Input: Recreated String Field StarterA query to pull the rich color data associated with an image from the Sanity Asset Pipeline
Go to GROQ query to pull data for image palette informationFind new connections in a dataset by filtering a second time on dereferenced data
Go to GROQ query to find all movie screenings with a specific actor