Community Digest #14

It's almost hard to keep up with all the new sites and additions to the Sanity ecosystem each week. In this edition of the community digest, we feature an excellent e-commerce starter, as well as new libraries for creating patches, better Vue, and TypeScript integrations. There are also a bunch of new sites to take inspiration from as well.

Every week there seem to be at least two new e-commerce sites being launched with the Sanity and Shopify combo. It seems to us that leveraging Shopify‘s APIs for the e-commerce part, and Sanity for marketing and product content lets developers build more freely in their favorite frontend framework while providing a unified and custom-tailored editorial experience.

Check out the demo (the password is “spaghetti”)

We have followed New York-based freelance developer Kevin Green work since he launched prima.co (and told us about it), and have kept being impressed by what he has launced.

It's, therefore, a great pleasure to announce Midway, Kevin‘s Sanity + Shopify + Gatsby starter that comes with a bunch of useful features to give you a head start.

The repo has a Sanity instance with the bare bones to accept Shopify schema. The Gatsby instance has lambda functions for syncing products, as well as for handling Headless Shopify accounts.

I've been writing some documentation as well (borrowed some styling from the Sanity docs). Everything is on Github to pick apart, I am working on making it easier to get up and running as there are a lot of moving pieces, and continuing to iterate on the schema etc

The feature list is pretty impressive:

Gatsby site with real integrations into a Shopify Instance

• 👨‍💻 TYPESCRIPT
• 🛒 Shopping Cart create powered by Shopify Buy SDK
• 📡 Real-time content preview in development
• ⏱ Fast & frugal builds
• 🗃 No accidental missing fields/types
• 🧰 Full Render Control with Portable Text
• 📸 gatsby-image support
• 🔧 Minimal configuration
• 💆‍♀️ Headless Account Managements via /accounts/*
• 📹 Headless Preview via /previews/* coming soon
• 💻 Custom lambda function that will create/update products from Shopify, as well as flag deleted items

Sanity Studio with a schema for

• 🖼️ Media Plugin
• 👨‍💻 Vision Plugin
• 🚀 Graphql Deployment Support
• 📹 Preview via panes coming soon
• 🏢 Site settings
  • Menu configuration pattern
  • Basic Footer configuration pattern
• 📃 Pages
  • Meta Card support for SEO with Tabs
  • Common modularity patterns
• 📰 Posts
• 🛍 Products & Variants
  • Products have default settings for title, slug, defaultPrice, id, productId.
  • Variants have default settings for id, productId, variantId, title, variantTitle, sku, and price.
  • The web/src/lambda/shopify file will generate new Sanity documents with these default fields.

Get the starter on GitHub

We wanted to learn a bit more about Kevin, so we sent him some questions. He kept it brief and sweet!

– Who are you, and what do you do?

I'm Kevin, a freelance developer that previously ran an agency called The Couch.

– Tell us about “Midway”

Midway is a starter project getting Headless Ecom up and running, powered by Sanity, Gatsby, and Shopify.

– What is your go-to stack these days?

My goto stack is Sanity + whatever works best (Next, Gatsby, other?)

– Tell us how you discovered Sanity!

I discovered Sanity sort of on accident while I was building Prima, I was struggling with Craft CMS and decided to give it a shot and since then I've not built a site on anything else.

– If you had to pick only one, what is your favourite Sanity feature?

My favorite Sanity feature for clients is the Rich text inline modules combined with the serializer. For me it's the fast local development.

The combination of having a hosted datastore as well as an open-source customizable CMS like Sanity Studio, requires us to offer powerful APIs for document creation and mutations. Of course, the studio comes with this stuff built-in, but if you want to create additional services and interfaces to interact with the backend, you might want to explore the new library that Espen Hovlandsdal (@rexxars) made to generate patches from two document states.

I sometimes see people using createOrReplace to synchronize documents, but I feel better just sending the changes required to transition it from one state to another

// npm install sanity-diff-patch

import {diffPatch} from 'sanity-diff-patch'

const patch = diffPatch(itemA, itemB)
/*
[
  {patch: {id: 'docId', set: {...}}},
  {patch: {id: 'docId', unset: [...]}},
  {patch: {id: 'docId', insert: {...}}}
]
*/

sanity-diff-patch may also be helpful for hands-on learning of how the patch API works. Try it yourself and make sure to give it a star on GitHub if you find it useful.

Daniel Roe made and shared this brilliant library for integrating Sanity content in Vue-frontends.

It features:

• 🗄 Caching: Query results are cached.
• 💪 TypeScript: Written in TypeScript.
• 📡 Real-time: Supports previews using Sanity listening mode.
• 🖇 Composition API: Vue3 support coming soon.
• 📝 SSR support: Compatible with server-side rendering with Nuxt and vanilla Vue.

<template>
  <div>
    <h1>
      {{ title }}
    </h1>
  </div>
</template>

<script>
// npm install vue-sanity
import { useSanityFetcher } from 'vue-sanity'

export default {
  setup() {
    const { data: title } = useSanityFetcher(
      () => `*[_type == "article"][0].title`
    )

    return { title }
  },
}
</script>

The aforementioned Daniel also published this library for typed queries, which makes TypeScript integration more effortless by using the Studio schema to build queries and type interfaces. Pretty nifty stuff! Check it out on GitHub and give it a star if you find it useful.

import { builder as authorBuilder } from './cms/schema/author.js'

const [query, type] = authorBuilder.pick('name').first().use()

// *[_type == 'author'][0].name
const queryString = query

// string
type AuthorName = typeof type

Andrew Zeller has shipped two new themes for Sanity Studio: Light and Dark Blue. Follow the links for installation instructions and to check out the source. If you want to make your own theme, here's how to do it, and let us know in the #i-made-this channel on Slack if you have published one on npm.

Raymond Julin shared this post and plugin with us that lets you make Mermaid.js diagrams within Sanity Studio. Really useful if you use Sanity for documentation and more technical or scientific content.

Tweet by:

Raymond Julin

@Nervetattoo

Recently published sanity-plugin-mermaid that gives you MermaidJS diagrams as an input type in @sanity_io. Useful if you write technical content. https://t.co/3RAwsR6H4n

Tweet published on: Mar 26, 2020, 7:27 PM

Liam Martens shared an exciting teaser with us on twitter of upcoming features in his localization plugin. This validates why you want localization to be an aspect of your content model and not a “one size fits all” kind of solution.

Tweet by:

Liam Martens

@LiamMartens9512

with v3 of my intl plugin for @sanity_io I am introducing document wide translations 😮

A few interesting features

* Dynamic languages based on GROQ query

* Automatic detection of missing translation for document

* Single time copy of data from original document upon translating https://t.co/qspGVV6zyR

Tweet published on: Apr 3, 2020, 9:57 AM

Ahmed Meer and his team over at Nightjar has shipped a smooth new e-commerce site for Queen Garnet, and even got an FWA for it! Warning: You might crave some delicious plum after browsing this site. We believe it is intended.

This simple real-estate site built by Francisco Vieria is a great example of how you can start super simple with Sanity, and evolve the project over time. As of now, it's a landing page, but it's easy to imagine how one could add more content types as the project evolves. Ship early, iterate quickly.

Hello everyone! We just launched a one page real-estate website using Sanity, Gatsby and hosted on Netlify. Client was really happy with the CMS experience! Thank you Sanity for making this so easy!

Marius Nettum built this nice index for concerts by artists in Norway that streams during these COVID-19 times. Built with Next.js and hosted on ZEIT‘s Now.

There's another Gatsby.js starter on the horizon! If you're looking to refresh your developer portfolio, you might want to check out the one that Jacob Neterer shared with us. Comes packaged with TypeScript, Tailwind, and Sass:

Wanted to be able to make changes to my website without having to push code... so I made an open source Developer Portfolio using Gatsby + Sanity! Love using Sanity!! Here is the github link to the open source repo: https://github.com/jneterer/gatsby-sanity-developer-portfolio-starter and if you want to check out a demo you can see it here! https://jacobneterer.com

Tweet by:

Jacob Neterer

@jacobneterer

Just finished my second @gatsbyjs starter! This time, it is a Developer Portfolio starter using @sanity_io, @typescript, @tailwindcss, and @SassCSS!

Repo: https://t.co/86EHFbQKUp

Demo: https://t.co/nDygwdnRoC

Gatsby Starter: https://t.co/ILWmdjXWTh https://t.co/Fs7uI3L1g9

Tweet published on: Mar 30, 2020, 9:51 PM

Max Karlsson and the team over at DotDev wen live with the new e-commerce experience for brides to be at One Day Bridal. They also shared a lot of Studio screenshots with us to be inspired from, and it seems like they have really taken “customization” to heart! We say yes!

Our team at DotDev finally went live with our Shopify + Sanity + Gatsby + Firebase project on Wednesday last week. We’ve had lots of challenges, among those a mid-project switch from Prismic to Sanity which turned out to be the best decision I made on that project. We have custom dashboard plugins to trigger Shopify -> Sanity sync, trigger Gitlab CI pipelines, CSV bulk import/export updates to products, collections and redirects.