A collection of resources to help developers create better screencasts, and level-up their overall video content creation game.
Better Dev Screencasts was possibly the very first Keystatic website in production. In early 2023, Simon from the Thinkmill Labs team used this site to "dogfood" Keystatic as it was being developed.
To this date, Keystatic powers the site's posts content types, which support custom components for YouTube videos and Tweet embeds.
Keystatic config
Here's what the config for the posts collection looks like in this project:
posts: collection({
label: 'Posts',
path: 'content/posts/*',
slugField: 'title',
format: {
contentField: 'content',
},
entryLayout: 'content',
schema: {
title: fields.slug({ name: { label: 'Title' } }),
date: fields.date({
label: 'Date',
validation: { isRequired: true }
}),
excerpt: fields.text({ label: 'Excerpt' }),
coverImage: fields.image({
label: 'Cover image',
directory: 'public/images/posts',
publicPath: '/images/posts',
}),
content: fields.document({
label: 'Post copy',
layouts: [[1, 1]],
formatting: true,
dividers: true,
links: true,
componentBlocks,
}),
},
}),☝️
The API for the componentBlocks is slightly outdated and likely to change in the future, so we won't share the code snippet here — but you can find it on the project's GitHub repo which is public!