docs/keystatic.config.tsx
Rama main · réplica de lectura del repositorio original.
import { config, fields, collection, singleton } from '@keystatic/core'
import { superscriptIcon } from '@keystar/ui/icon/icons/superscriptIcon'
import { mark, wrapper } from '@keystatic/core/content-components'
import { cableIcon } from '@keystar/ui/icon/icons/cableIcon'
import { creditCardIcon } from '@keystar/ui/icon/icons/creditCardIcon'
import { emoji, hint } from './keystatic/content-components.tsx'
import { gradientSelector } from './keystatic/gradient-selector.ts'
export default config({
storage: {
kind: 'local',
},
ui: {
brand: {
name: 'Keystone Website',
},
navigation: {
Pages: ['docs', 'posts', 'examples'],
Config: ['navigation', 'featuredDocs', 'featuredExamples'],
},
},
collections: {
// ------------------------------
// Docs
// ------------------------------
docs: collection({
label: 'Docs Pages',
path: 'content/docs/**',
slugField: 'title',
columns: ['title'],
format: { contentField: 'content' },
entryLayout: 'content',
schema: {
title: fields.slug({ name: { label: 'Title', validation: { isRequired: true } } }),
description: fields.text({ label: 'Description', validation: { isRequired: true } }),
content: fields.markdoc({
label: 'Content',
extension: 'md',
options: {
heading: {
levels: [1, 2, 3, 4],
schema: {
id: fields.text({ label: 'ID' }),
},
},
},
components: {
heading: wrapper({ label: 'Heading', schema: { id: fields.text({ label: 'ID' }) } }),
well: wrapper({
label: 'Well',
icon: creditCardIcon,
schema: {
heading: fields.text({ label: 'Heading' }),
grad: fields.select({
label: 'Gradient',
options: [
{ label: '1', value: 'grad1' },
{ label: '2', value: 'grad2' },
{ label: '3', value: 'grad3' },
{ label: '4', value: 'grad4' },
],
defaultValue: 'grad1',
}),
badge: fields.text({ label: 'Badge' }),
href: fields.text({ label: 'Link href', validation: { isRequired: true } }),
target: fields.select({
label: 'Link target',
description: 'Where should this link open?',
options: [
{ label: 'New tab', value: '_blank' },
{ label: 'Same tab', value: '' },
],
defaultValue: '',
}),
},
/*
Preview below doesn't work properly,
but you can try enable it :)
*/
// ContentView: (data) => <WellPreview {...data} />,
}),
hint: hint(),
'related-content': wrapper({ label: 'Related Content', icon: cableIcon, schema: {} }),
sup: mark({ label: 'Superscript', schema: {}, icon: superscriptIcon, tag: 'sup' }),
emoji: emoji(),
},
}),
},
}),
// ------------------------------
// Blog
// ------------------------------
posts: collection({
label: 'Blog Posts',
path: 'content/blog/*',
slugField: 'title',
columns: ['title'],
format: { contentField: 'content' },
schema: {
title: fields.slug({ name: { label: 'Title' } }),
description: fields.text({ label: 'Description' }),
publishDate: fields.date({ label: 'Publish Date', validation: { isRequired: true } }),
authorName: fields.text({ label: 'Author Name', validation: { isRequired: true } }),
authorHandle: fields.url({ label: 'Author Handle' }),
metaImageUrl: fields.url({ label: 'Meta Image URL' }),
content: fields.markdoc({
label: 'Content',
extension: 'md',
options: {
image: {
directory: 'public/assets/blog/images',
publicPath: '/assets/blog/images',
},
},
components: {
hint: hint('Callout'),
emoji: emoji(),
},
}),
},
}),
// ------------------------------
// Examples
// ------------------------------
examples: collection({
label: 'GitHub Examples',
path: 'content/examples/*',
slugField: 'title',
schema: {
title: fields.slug({ name: { label: 'Title' } }),
kind: fields.select({
label: 'Example Kind',
options: [
{ label: 'Standalone', value: 'standalone' },
{ label: 'End-to-End', value: 'end-to-end' },
{ label: 'Deployment', value: 'deployment' },
],
defaultValue: 'standalone',
}),
url: fields.text({
label: 'URL',
validation: { isRequired: true },
}),
description: fields.markdoc.inline({ label: 'Description' }),
},
}),
},
singletons: {
// ------------------------------
// Navigation
// ------------------------------
navigation: singleton({
label: 'Docs Sidebar Navigation',
path: 'content/navigation',
schema: {
navGroups: fields.array(
fields.object({
groupName: fields.text({ label: 'Group name' }),
items: fields.array(
fields.object({
label: fields.text({
label: 'Label',
description: "Required when using a URL, or overriding the page's title",
}),
link: fields.conditional(
fields.select({
label: 'Link type',
options: [
{ label: 'Page', value: 'page' },
{ label: 'URL', value: 'url' },
],
defaultValue: 'page',
}),
{
page: fields.relationship({
label: 'Docs Page',
collection: 'docs',
}),
url: fields.text({ label: 'URL' }),
}
),
status: fields.select({
label: 'Status',
options: [
{ label: 'Default', value: 'default' },
{ label: 'New', value: 'new' },
{ label: 'Updated', value: 'updated' },
],
defaultValue: 'default',
}),
}),
{
label: 'Navigation items',
itemLabel: props => props.fields.label.value,
}
),
}),
{
label: 'Navigation groups',
itemLabel: props => props.fields.groupName.value,
}
),
},
}),
// ------------------------------
// Featured Docs
// ------------------------------
featuredDocs: singleton({
label: 'Featured Docs',
path: 'content/featured-docs',
schema: {
groups: fields.array(
fields.object({
groupName: fields.text({ label: 'Group name' }),
groupDescription: fields.markdoc.inline({ label: 'Group description' }),
gradient: gradientSelector({ defaultValue: 'grad1' }),
items: fields.array(
fields.object({
label: fields.text({
label: 'Label',
description: "Required when using a URL, or overriding the page's title",
validation: { isRequired: true },
}),
link: fields.conditional(
fields.select({
label: 'Link type',
options: [
{ label: 'Docs Page', value: 'docs' },
{ label: 'URL', value: 'url' },
],
defaultValue: 'docs',
}),
{
docs: fields.object(
{
docPage: fields.relationship({
label: 'Docs Page',
collection: 'docs',
}),
description: fields.markdoc.inline({ label: 'Description' }),
},
{
label: 'Docs Page',
}
),
url: fields.object({
url: fields.text({ label: 'URL' }),
description: fields.markdoc.inline({ label: 'Description' }),
}),
}
),
}),
{
label: 'Featured Items',
itemLabel: props =>
`${props.fields.label.value} — [${props.fields.link.discriminant}]`,
}
),
}),
{
label: 'Featured Groups',
itemLabel: props => props.fields.groupName.value,
}
),
},
}),
featuredExamples: singleton({
label: 'Featured Examples',
path: 'content/featured-examples',
schema: {
label: fields.text({ label: 'Label' }),
description: fields.markdoc.inline({ label: 'Group description' }),
gradient: gradientSelector({ defaultValue: 'grad1' }),
items: fields.multiRelationship({ label: 'Examples List', collection: 'examples' }),
},
}),
},
})