Added Callout Component

src/keystatic/components/general/blockquote.ts

@@ -2,7 +2,7 @@ import { textQuoteIcon } from '@keystar/ui/icon/icons/textQuoteIcon';
 import { block } from '@keystatic/core/content-components';
 import { fields } from '@keystatic/core';
 
-const blockquoteComponents = {
+const blockquoteComponent = {
   Blockquote: block({
     label: 'Blockquote',
     icon: textQuoteIcon,
@@ -31,4 +31,4 @@ const blockquoteComponents = {
   }),
 };
 
-export default blockquoteComponents;
+export default blockquoteComponent;

src/keystatic/components/general/callout.ts

@@ -0,0 +1,47 @@
+import { wrapper } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+import { megaphoneIcon } from '@keystar/ui/icon/icons/megaphoneIcon';
+
+const calloutComponent = {
+  Callout: wrapper({
+    label: 'Callout',
+    icon: megaphoneIcon,
+    schema: {
+      type: fields.select({
+        label: 'Type',
+        defaultValue: 'default',
+        options: [
+          {
+            label: 'Default',
+            value: 'default',
+          },
+          {
+            label: 'Example',
+            value: 'example',
+          },
+          {
+            label: 'Info',
+            value: 'info',
+          },
+          {
+            label: 'Warning',
+            value: 'warning',
+          },
+          {
+            label: 'Tip',
+            value: 'tip',
+          },
+          {
+            label: 'Spoiler',
+            value: 'spoiler',
+          },
+        ],
+      }),
+      title: fields.text({
+        label: 'Title',
+      }),
+    },
+  }),
+};
+
+export default calloutComponent;

src/keystatic/components/general/figure.ts

@@ -0,0 +1,35 @@
+import { imageIcon } from '@keystar/ui/icon/icons/imageIcon';
+import { block } from '@keystatic/core/content-components';
+import { fields } from '@keystatic/core';
+
+const figureComponent = {
+  Figure: block({
+    label: 'Figure',
+    icon: imageIcon,
+    schema: {
+      src: fields.image({
+        label: 'Image',
+        directory: 'public/images/figures',
+        publicPath: '/images/figures',
+      }),
+      alt: fields.text({
+        label: 'Alt Text',
+        validation: {
+          length: {
+            min: 1,
+          },
+        },
+      }),
+      caption: fields.text({
+        label: 'Caption',
+        multiline: true,
+      }),
+      credit: fields.text({
+        label: 'Credit/Attribution',
+        description: 'Photographer, artist, or source',
+      }),
+    },
+  }),
+};
+
+export default figureComponent;

src/keystatic/components/general/index.ts

@@ -2,12 +2,16 @@ import gridComponents from '@/keystatic/components/general/grid';
 import sidenoteComponents from '@/keystatic/components/general/sidenote';
 import definitionlistComponents from '@/keystatic/components/general/definitionlist';
 import accordionComponents from '@/keystatic/components/general/accordion';
-import blockquoteComponents from '@/keystatic/components/general/blockquote';
+import blockquoteComponent from '@/keystatic/components/general/blockquote';
+import figureComponent from '@/keystatic/components/general/figure';
+import calloutComponent from '@/keystatic/components/general/callout';
 
 export const generalComponents = {
   ...gridComponents,
   ...sidenoteComponents,
   ...definitionlistComponents,
   ...accordionComponents,
-  ...blockquoteComponents,
+  ...blockquoteComponent,
+  ...figureComponent,
+  ...calloutComponent,
 };