42 |
55 | )
56 | }
57 | }
58 |
59 | export default CustomStringListInput
60 |
--------------------------------------------------------------------------------
/snippets/structureForAssetDocs.js:
--------------------------------------------------------------------------------
1 | /*
2 | This is an example of how to use Structure Builder to organize image assets.
3 | Usage:
4 |
5 | import assetsStructure from './assetsStructure'
6 |
7 | export default () => S.list()
8 | .title('Content')
9 | .items([
10 | // other list items,
11 | assetsStructure
12 | ])
13 | */
14 | import React from 'react'
15 | import S from '@sanity/desk-tool/structure-builder'
16 |
17 | const AssetPreview = ({ document }) => {
18 | const { displayed } = document
19 | return (
20 | displayed.url && (
21 | {type.title}
43 |{type.description}
44 | 54 |
22 | 
23 |
24 | )
25 | )
26 | }
27 | const AssetDoc = assetId =>
28 | S.document()
29 | .documentId(assetId)
30 | .views([
31 | S.view.component(AssetPreview).title('Image preview'),
32 | S.view.form().title('Meta-information')
33 | ])
34 |
35 | const assetsStructure = S.listItem()
36 | .title('Assets')
37 | .child(
38 | S.list()
39 | .title('Assets')
40 | .items([
41 | S.listItem()
42 | .title('All images')
43 | .child(S.documentTypeList('sanity.imageAsset').child(AssetDoc)),
44 | // List images with width over 1000px
45 | S.listItem()
46 | .title('Large images (1000px+)')
47 | .child(
48 | S.documentList()
49 | .title('Large images')
50 | .filter(
51 | '_type == "sanity.imageAsset" && metadata.dimensions.width > 1000'
52 | )
53 | .child(AssetDoc)
54 | ),
55 | // List images with the file extension of “gif”
56 | S.listItem()
57 | .title('GIFs')
58 | .child(
59 | S.documentList()
60 | .title('GIFs')
61 | .filter('_type == "sanity.imageAsset" && extension == "gif"')
62 | .child(AssetDoc)
63 | ),
64 | // List images that has been uploaded with the unsplash asset selector
65 | S.listItem()
66 | .title('From Unsplash')
67 | .child(
68 | S.documentList()
69 | .title('From Unsplash')
70 | .filter(
71 | '_type == "sanity.imageAsset" && source.name == "unsplash"'
72 | )
73 | .child(AssetDoc)
74 | )
75 | ])
76 | )
77 |
78 | export default assetsStructure
79 |
--------------------------------------------------------------------------------
/snippets/test-images/image01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image01.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image02.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image03.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image04.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image05.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image06.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image07.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image08.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image09.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image10.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image11.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image12.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image13.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image14.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image15.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image16.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image17.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image18.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image19.jpg
--------------------------------------------------------------------------------
/snippets/test-images/image20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanity-io/sanity-recipes/b41cfae4b73808b88ee3bce64adec44a07ff89ff/snippets/test-images/image20.jpg
--------------------------------------------------------------------------------
/snippets/uploadImageFromURLandCreateNewDocument.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | require('dotenv').config()
4 | const got = require('got')
5 | const SanityClient = require('@sanity/client')
6 |
7 | const client = SanityClient({
8 | projectId: process.env.SANITY_PROJECT_ID,
9 | dataset: process.env.SANITY_DATASET,
10 | token: process.env.SANITY_WRITE_TOKEN.
11 | useCdn: false
12 | })
13 |
14 | async createADocumentWithAsset(imageURL) {
15 | const {_id} = await client.upload('image', got(imageURL)).catch(error => console.error(error))
16 | const newDoc = await client.create({
17 | _type: 'someType',
18 | mainImage: {
19 | _type: 'mainImage',
20 | asset: {
21 | _type: 'reference',
22 | _ref: _id
23 | }
24 | }
25 | }).catch(error => console.error(error))
26 |
27 | return newDoc
28 | }
29 |
30 | const URL_TO_KITTEN_IMAGE = 'https://placekitten.com/g/2000/3000'
31 |
32 | createADocumentWithAsset(URL_TO_KITTEN_IMAGE).then(doc => console.log('This is your new doc:\n', JSON.stringify(doc, null, 2)))
33 |
--------------------------------------------------------------------------------
/snippets/uploadImagesConcurrently.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable id-length, no-console */
2 | const sanityClient = require('@sanity/client')
3 | const path = require('path')
4 | const pMap = require('p-map')
5 | const {
6 | createReadStream,
7 | promises: {readdir, stat}
8 | } = require('fs')
9 |
10 | const client = sanityClient({
11 | projectId: 'PROJECT_ID',
12 | dataset: 'DATASET',
13 | useCdn: false,
14 | token: 'TOKEN'
15 | })
16 |
17 | const IMAGES_FOLDER = `${__dirname}/test-images`
18 | const CONCURRENCY = 10
19 |
20 | function round(num) {
21 | return Number(num.toFixed(2))
22 | }
23 |
24 | async function uploadImage(filename, i) {
25 | const filepath = path.join(IMAGES_FOLDER, filename)
26 | const size = (await stat(filepath)).size
27 | const start = new Date()
28 |
29 | await client.assets
30 | .upload('image', createReadStream(filepath), {
31 | filename
32 | })
33 | .catch(err => console.log('unable to upload ', filename, err.message))
34 |
35 | const elapsed = new Date().getTime() - start.getTime()
36 |
37 | console.log(
38 | `Upload file #${i} ${filename} [SIZE: ${round(size / 1000)} KB --- TIME: ${round(
39 | elapsed / 1000
40 | )} s --- SPEED: ${round(size / elapsed)} KB/s]`
41 | )
42 | }
43 |
44 | async function run() {
45 | const files = (await readdir(IMAGES_FOLDER)).filter(f => path.extname(f).toLowerCase() === '.jpg')
46 | const globalStart = new Date()
47 |
48 | await pMap(files, uploadImage, {concurrency: CONCURRENCY})
49 |
50 | const elapsed = new Date().getTime() - globalStart.getTime()
51 | console.log(`All done in ${round(elapsed / 1000)} seconds`)
52 | }
53 |
54 | run()
55 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "node": true,
4 | "jest": true
5 | },
6 | "rules": {
7 | "no-sync": 0,
8 | "max-nested-callbacks": ["error", 4]
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/test/__snapshots__/blocksToText.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`converts blocks to text while adding placeholders for non-text blocks 1`] = `
4 | "The idea behind our query language GROQ is to be able to describe exactly what information your application needs, potentially joining together information from several sets of documents, then stitching together a very specific response with only the exact fields you need.
5 |
6 | If you need help setting up a client to perform these queries in your front end, you should check out the documentation for the client for javascript or PHP.
7 |
8 | [image block]
9 |
10 | Introduction
11 |
12 | There are loads of advanced topics to cover, but let us start with the basics. We will take this simple query and pick it apart:
13 |
14 | [code block]
15 |
16 | A query typically starts with *. This asterisk represents every document in your dataset. To do any useful work this is typically followed by a filter in brackets. The filter above has two terms:
17 |
18 | The filter
19 |
20 | First we filter by document type. Every document in Sanity is required to have a type, and the type is always in the _type field. (We prefix any Sanity-specific fields with an underscore in an attempt to avoid clashing with any of your field names.) So _type == 'movie' limits this query to documents of the type ‘movie’. && is the operator “and” of course.
21 |
22 | The second term releaseYear > 1979 assumes that the movies have a field called releaseYear contain numbers. It will match any document where this number is larger than or equal to 1979.
23 |
24 | Projections
25 |
26 | So if we run this query, the result will be an array containing all movies from the year 1979 onwards in the dataset. Nice! However in a typical application movies might be huge documents containing information on actors, staff, posters, tag-lines, show-times, ratings and what not. If our goal is to render a list of movies in an overview, we are wasting bandwidth. Projections to the rescue.
27 |
28 | The typical projection is wrapped in braces and describe the data we want to see for each movie. A nice and simple projection for this query would give us the id, title and release year for each movie. It could look like this: {_id, title, releaseYear}. Putting it all together:
29 |
30 | [code block]
31 |
32 | Basic sorting
33 |
34 | Now there is another problem. Our movies appear in some unspecified order. Let’s say we want to sort our movies by year. For this we use the order-function. Order takes a number of fields and sort directions and orders your documents accordingly. We wanted to sort our movies by releaseYear. This is easily accomplished with order(releaseYear), like this:
35 |
36 | [code block]
37 |
38 | (We need the | operator here in front of the order()-function, we'll discuss that more later.)
39 |
40 | We think of GROQ statements as describing a data flow from left to right. First everything (*) flows through the filter [_type == 'movie' && …], then all those movies flow through the order()-function which are then all mapped through the projection {_id, title, ...} which picks out the bits we want returned.
41 |
42 | The order-function accepts a list of fields, and optionally you can specify the sort direction for each field. If you wanted to sort the movies by year, and then within each year we want them alphabetical by title, we could use this ordering: order(releaseYear, title) And if we wanted the newest movies first, we could reverse the direction like this: order(releaseYear desc, title).
43 |
44 | (asc means “ascending” and desc means descending in this context. If you leave out the sort-direction, Sanity will assume you want the ascending order.)
45 |
46 | Slicing the result set
47 |
48 | This brings us to our final problem for this query: There are many movies in the world. Maybe our dataset contains tens of thousands. We need a way to describe which slice of that list we want to show. This is done using a selector. Let’s say we just wanted the first movie, we could add a [0] at the end. This works exactly like an array accessor and would return only the first element. If we want a slice, we can add the range operator like this: [0...100] this would return the first hundred movies from index 0 through 99. Obviously we can just as well ask for [1023...1048] or any other slice we desire. So there we are, our first basic query with filtering, ordering, projections and selector:
49 |
50 | [code block]
51 |
52 | References and joins
53 |
54 | A reference in Sanity is a link from one document to another. Standard references are “hard” meaning when a document references another document, the target document must exist, and is actually prevented from being deleted until the reference is removed. (There is also weak-references that do not \\"hold on to\\" the target. You make them by adding a _weak-key to the reference object like this: {_ref: \\"