Added Sidenote Component

src/keystatic/components/general/grid.ts

@@ -0,0 +1,61 @@
+import { grid2X2Icon } from '@keystar/ui/icon/icons/grid2X2Icon';
+import { fields } from '@keystatic/core';
+import { repeating, wrapper } from '@keystatic/core/content-components';
+
+export const gridComponents = {
+  Row: repeating({
+    label: 'Row',
+    icon: grid2X2Icon,
+    children: ['Column'], // This defines what can go inside
+    schema: {
+      style: fields.object({
+        cols: fields.integer({
+          label: 'Columns',
+          defaultValue: 2,
+          validation: { min: 2, max: 12 },
+        }),
+        gap: fields.text({
+          label: 'Gap',
+          description: 'Enter a variable or value',
+        }),
+        align: fields.select({
+          label: 'Align Items',
+          defaultValue: 'flex-start',
+          options: [
+            { label: 'Start', value: 'flex-start' },
+            { label: 'End', value: 'flex-end' },
+            { label: 'Center', value: 'center' },
+            { label: 'Baseline', value: 'baseline' },
+            { label: 'Stretch', value: 'stretch' },
+          ],
+        }),
+        justify: fields.select({
+          label: 'Justify Content',
+          defaultValue: 'flex-start',
+          options: [
+            { label: 'Start', value: 'flex-start' },
+            { label: 'End', value: 'flex-end' },
+            { label: 'Center', value: 'center' },
+            { label: 'Space Between', value: 'space-between' },
+            { label: 'Space Around', value: 'space-around' },
+            { label: 'Evenly', value: 'evenly' },
+            { label: 'Stretch', value: 'stretch' },
+            { label: 'Baseline', value: 'baseline' },
+          ],
+        }),
+      }),
+    },
+  }),
+  Column: wrapper({
+    label: 'Column',
+    forSpecificLocations: true,
+    schema: {
+      style: fields.object({
+        colspan: fields.integer({
+          label: 'Colspan',
+          defaultValue: 1,
+        }),
+      }),
+    },
+  }),
+};

src/keystatic/components/general/index.ts

@@ -0,0 +1,4 @@
+import { gridComponents } from '@/keystatic/components/general/grid';
+import { sidenoteComponents } from '@/keystatic/components/general/sidenote';
+
+export const generalComponents = { ...gridComponents, ...sidenoteComponents };

src/keystatic/components/general/sidenote.ts

@@ -0,0 +1,59 @@
+import { panelRightDashedIcon } from '@keystar/ui/icon/icons/panelRightDashedIcon';
+import { fields } from '@keystatic/core';
+import { inline } from '@keystatic/core/content-components';
+
+export const sidenoteComponents = {
+  Sidenote: inline({
+    label: 'Sidenote',
+    icon: panelRightDashedIcon,
+    schema: {
+      id: fields.text({
+        label: 'ID',
+        description: 'Unique Identifier (Auto-generated)',
+      }),
+      marker: fields.text({
+        label: 'Marker',
+        description: 'Number or Glyph for reference',
+        defaultValue: '⋄',
+        validation: {
+          length: {
+            min: 1,
+            max: 3,
+          },
+        },
+      }),
+      content: fields.text({
+        label: 'Note Content',
+        multiline: true,
+        validation: {
+          length: {
+            min: 1,
+          },
+        },
+      }),
+      type: fields.select({
+        label: 'Type',
+        description: 'Visual Style',
+        options: [
+          {
+            label: 'Default',
+            value: 'default',
+          },
+          {
+            label: 'Lore',
+            value: 'lore',
+          },
+          {
+            label: 'Crunch',
+            value: 'crunch',
+          },
+          {
+            label: 'Example',
+            value: 'example',
+          },
+        ],
+        defaultValue: 'default',
+      }),
+    },
+  }),
+};