personal-website/keystatic.config.ts

137 lines
4.2 KiB
TypeScript

import { config, fields, collection } from '@keystatic/core';
import ShowableFigureIcon from './keystatic/content-components/ShowableFigureIcon';
import { mark, wrapper } from '@keystatic/core/content-components';
import ShowableFigureView from './keystatic/content-components/ShowableFigure';
import FootnoteIcon from 'keystatic/content-components/FootnoteIcon';
export default config({
ui: {
brand: { name: 'Filipe Medeiros CMS' },
},
// customCSS: `
// .footnote-content::before {
// content: '^';
// font-size: initial;
// }
// .footnote-content {
// font-size: 0rem;
// }
// .footnote-content:hover, .footnote-content:focus {
// font-size: smaller;
// }
// .footnote-content:hover::before, .footnote-content:focus::before {
// content: '> ';
// }
// `,
storage: {
kind: 'local',
},
collections: {
library: collection({
label: 'Library items',
slugField: 'title',
path: 'src/content/library/**',
columns: ['title', 'date'],
schema: {
title: fields.slug({
name: {
label: 'Title',
validation: { isRequired: true },
},
}),
subtitle: fields.text({ label: 'Subtitle' }),
checkedOut: fields.checkbox({ label: 'Checked out?' }),
link: fields.url({ label: 'Link', validation: { isRequired: true } }),
description: fields.text({ label: 'Description', multiline: true }),
date: fields.date({ label: 'Date', validation: { isRequired: true } }),
mainAuthors: fields.array(fields.text({ label: 'Author' }), {
label: 'Main author(s)',
}),
},
}),
posts: collection({
label: 'Blog posts',
columns: ['title', 'published'],
entryLayout: 'content',
slugField: 'slug',
path: 'src/content/blog/**',
format: { contentField: 'body' },
schema: {
slug: fields.slug({
name: {
label: 'Astro slug',
validation: { isRequired: true },
},
slug: {
generate: (astroSlug) => `pt/${astroSlug}`,
},
}),
title: fields.text({
label: 'Title',
validation: { isRequired: true },
}),
body: fields.mdx({
label: 'Body',
components: {
ShowableFigure: wrapper({
label: 'Showable figure',
ContentView: ShowableFigureView,
icon: ShowableFigureIcon(),
schema: {
image: fields.image({
label: 'Image',
directory: 'src/assets/images/blog',
publicPath: '/src/assets/images/blog/',
}),
altText: fields.text({
label: 'Alt text',
validation: { isRequired: true },
}),
},
}),
Footnote: mark({
label: 'Footnote',
icon: FootnoteIcon(),
tag: 'sup',
className: 'footnote-content',
schema: {},
}),
},
}),
subtitle: fields.text({ label: 'Subtitle' }),
summary: fields.text({
label: 'Summary',
validation: { isRequired: true },
}),
publishDate: fields.date({
label: 'Publish date',
validation: { isRequired: true },
}),
published: fields.checkbox({ label: 'Published' }),
linkPreview: fields.object(
{
title: fields.text({ label: 'Title' }),
description: fields.text({ label: 'Description' }),
image: fields.object(
{
image: fields.image({
label: 'Image',
directory: 'src/assets/images/blog',
publicPath: '@assets/images/blog/',
validation: { isRequired: true },
}),
altText: fields.text({
label: 'Alt text',
validation: { isRequired: true },
}),
},
{ label: 'Image' },
),
},
{ label: 'Link preview' },
),
},
}),
},
});