Community Digest #33: Status dashboard, color-themed portfolio, and image for Gatsby
Inspect your builds on Vercel without leaving the Studio, get some inspiration from Nik Sharma’s new portfolio, and there's a new way to work with images from Sanity in Gatsby projects.
Knut Melvær
Knut runs developer relations and support at Sanity.io.
This week’s Community Digest features the newest projects and Studio features from the community ecosystem: a build status dashboard for projects on Vercel, an alternative Sanity image implementation for Gatsby, and a slick portfolio site with a neat Studio setup.
Robin Pyon, the creator of the Media plugin, is back with another useful addition for Sanity Studio. A widget for the Dashboard to monitor your projects on Vercel that:
- displays a list of recent builds along with deployment aliases, branch/commit messages, build-age, and creator
- refreshes periodically (every 20 seconds) when the window gains focus and immediately after a manual build is triggered
- optionally displays a button for manual builds
We love the clean design of the portfolio that PBJ shared with us in the #i-made-this channel. Built with Gatsby, it includes color theming as well as Instagram and TikTok embeds in the rich text editor.
Corey Ward has built a lot of websites with Gatsby. He took it upon himself to make a new plugin for using Sanity’s asset pipeline in Gatsby projects. If the built-in support for gatsby-image isn't to your liking, this is definitely worth checking out.
In Corey's own words:
It’s here, it’s here, it’s finally here! It’s the well-considered marriage between Sanity’s image assets and Gatsby that you’ve all been waiting for!
- Outputs a single
<img>tag: no messing with nested DOM structures - Supports low-quality image previews out of the box, without build-time penalties
- Generates a
srcSetautomatically based on thewidthyou specify in your component code (meaning you can change it on the fly!) - Applies Sanity hotspot data as the
object-positionin case you need it - Computes cropped dimensions and drops
srcSetentries that are larger than the source dimensions when appropriate (follows Sanity’s image-url parameters) - Configures image quality, resizing behavior, file format, and more with Sanity’s Image API
Corey also shares a secret trick: You can use this for non-Gatsby projects as well using Webpack’s DefinePlugin configuration.
Come join us in the Slack community; we'd love to meet you in the #introductions channel.
Want to be in this digest? Got a project to share? Head on over to the #i-made-this channel. If you need help along the way, be sure to check out our other channels (#help, #gatsby, etc).