lots

astro.config.js

@@ -4,14 +4,18 @@ import react from '@astrojs/react';
 import keystatic from '@keystatic/astro';
 import tailwind from '@astrojs/tailwind';
 import flattenListItems from 'mdast-flatten-listitem-paragraphs';
-import mdx from '@astrojs/mdx';
+import markdoc from '@astrojs/markdoc';
 
 const prod = process.env.NODE_ENV === 'production';
 
 // https://astro.build/config
 export default defineConfig({
   site: import.meta.env.PROD ? 'https://filipesm.eu' : 'http://localhost:1234',
-  integrations: [tailwind(), mdx(), ...(!prod ? [keystatic(), react()] : [])],
+  integrations: [
+    tailwind(),
+    markdoc(),
+    ...(!prod ? [keystatic(), react()] : []),
+  ],
   markdown: {
     remarkPlugins: [flattenListItems],
   },

keystatic.config.ts

@@ -1,19 +1,25 @@
 import { config, fields, collection } from '@keystatic/core';
+import ShowableFigureIcon from './keystatic/content-components/ShowableFigureIcon';
+import ImageInput from './keystatic/content-components/ImageInput';
 
 export default config({
+  ui: {
+    brand: { name: 'Filipe Medeiros CMS' },
+  },
   storage: {
     kind: 'local',
   },
   collections: {
     library: collection({
       label: 'Library items',
-      slugField: 'slug',
+      slugField: 'title',
       path: 'src/content/library/**',
       schema: {
-        slug: fields.slug({ name: { label: 'Slug' } }),
-        title: fields.text({
-          label: 'Title',
-          validation: { isRequired: true },
+        title: fields.slug({
+          name: {
+            label: 'Title',
+            validation: { isRequired: true },
+          },
         }),
         checkedOut: fields.checkbox({ label: 'Checked out?' }),
         link: fields.url({ label: 'Link', validation: { isRequired: true } }),
@@ -22,5 +28,105 @@ export default config({
         mainAuthor: fields.text({ label: 'Main author(s)' }),
       },
     }),
+    posts: collection({
+      label: 'Blog posts',
+      entryLayout: 'content',
+      slugField: 'slug',
+      path: 'src/content/blog/**',
+      format: { contentField: 'body' },
+      schema: {
+        language: fields.select({
+          label: 'Language',
+          options: [
+            { label: 'Português', value: 'pt' },
+            { label: 'English', value: 'en' },
+          ],
+          defaultValue: 'pt',
+        }),
+        slug: fields.slug({
+          name: {
+            label: 'Astro slug',
+            validation: { isRequired: true },
+          },
+          slug: {
+            generate: (astroSlug) => astroSlug,
+          },
+        }),
+        title: fields.text({
+          label: 'Title',
+          validation: { isRequired: true },
+        }),
+        body: fields.mdx({
+          label: 'Body',
+          components: {
+            ShowableFigure: {
+              label: 'Showable figure',
+              kind: 'block',
+              icon: ShowableFigureIcon(),
+              schema: {
+                src: {
+                  label: 'Source',
+                  kind: 'form',
+                  formKind: 'asset',
+                  Input: ImageInput,
+                  defaultValue: () => {},
+                  filename(value, { suggestedFilenamePrefix }) {
+                    return `${suggestedFilenamePrefix}${value?.toString()}`;
+                  },
+                  parse(value, { asset }) {
+                    return asset;
+                  },
+                  serialize(value, { suggestedFilenamePrefix }) {
+                    console.log(value);
+                    return {
+                      value,
+                      asset: {
+                        content: new Uint8Array(),
+                        filename: suggestedFilenamePrefix + '',
+                      },
+                    };
+                  },
+                  validate() {},
+                  reader: {
+                    parse(value) {
+                      return value;
+                    },
+                  },
+                },
+              },
+            },
+          },
+        }),
+        subtitle: fields.text({ label: 'Subtitle' }),
+        summary: fields.text({
+          label: 'Summary',
+          validation: { isRequired: true },
+        }),
+        publishDate: fields.date({
+          label: 'Publish date',
+          validation: { isRequired: true },
+        }),
+        linkPreview: fields.object(
+          {
+            title: fields.text({ label: 'Title' }),
+            description: fields.text({ label: 'Description' }),
+            image: fields.object(
+              {
+                path: fields.image({
+                  label: 'Path',
+                  validation: { isRequired: true },
+                }),
+                altText: fields.text({
+                  label: 'Alt text',
+                  validation: { isRequired: true },
+                }),
+              },
+              { label: 'Image' },
+            ),
+          },
+          { label: 'Link preview' },
+        ),
+      },
+    }),
   },
 });

keystatic/content-components/ImageInput.tsx

@@ -0,0 +1,5 @@
+import type { FormFieldInputProps } from '@keystatic/core';
+
+export default function ImageInput(props: FormFieldInputProps<any>) {
+  return <input type="file" value={props.value} onChange={props.onChange} />;
+}

keystatic/content-components/ShowableFigureIcon.tsx

@@ -0,0 +1,3 @@
+export default function ShowableFigureIcon() {
+  return <>lol</>;
+}

package.json

@@ -13,7 +13,7 @@
     "format:check": "prettier . --check --config ./.prettierrc"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.1.5",
+    "@astrojs/markdoc": "^0.10.0",
     "@astrojs/react": "^3.3.0",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/tailwind": "^5.0.3",

src/content/library/en/mission-economy.yaml

@@ -1,12 +1,13 @@
 title: 'Mission Economy: A Moonshot Guide to Changing Capitalism'
 checkedOut: true
 link: https://www.kobo.com/us/en/ebook/mission-economy-1
+description: >
+  I've read about half of the book (maybe a bit more, if you don't count
+  references, etc). I can't say I was impressed. The book tries to use the case
+  of Nasa's Apolo XIII project to explore how the Srare can and should be a
+  leader in society, guiding investment, picking strategic areas, taking tisks
+  for the common good, etc. However, I felt lost in the middle of the analogy,
+  not being able to make a clear connection to its more general implications. I
+  still haven't finished the book. One day I'll try again.
 date: 2024-03-03
 mainAuthor: Mariana Mazzucato
-description: >
-  I've read about half of the book (maybe a bit more, if you don't count references, etc).
-  I can't say I was impressed. The book tries to use the case of Nasa's Apolo XIII project
-  to explore how the Srare can and should be a leader in society, guiding investment, picking
-  strategic areas, taking tisks for the common good, etc. However, I felt lost in the middle
-  of the analogy, not being able to make a clear connection to its more general implications.
-  I still haven't finished the book. One day I'll try again.