Add Keystatic config

keystatic.config.ts

@@ -0,0 +1,48 @@
+// Environment Variables
+const CMS_DASHBOARD_LOGO_DARK = import.meta.env.CMS_DASHBOARD_LOGO_DARK;
+const CMS_DASHBOARD_LOGO_LIGHT = import.meta.env.CMS_DASHBOARD_LOGO_LIGHT;
+
+// Components
+import { Link } from '@iconoir/vue';
+import { config, fields, collection } from '@keystatic/core';
+import { block, inline, wrapper } from '@keystatic/core/content-components'
+
+export default config({
+  // https://keystatic.com/docs/user-interface
+  ui: {
+    brand: {
+      name: 'Document CMS',
+    },
+    mark: ({ colorScheme }) => {
+      let path = colorScheme === 'dark'
+        ? CMS_DASHBOARD_LOGO_DARK // For Dark Theme
+        : CMS_DASHBOARD_LOGO_LIGHT; // For Light Theme
+    },
+    navigation: {
+      'Documents': ['docs']
+    },
+  },
+  // https://keystatic.com/docs/local-mode
+  storage: {
+    kind: 'local',
+  },
+  // https://keystatic.com/docs/collections
+  collections: {
+    docs: collection({
+      label: 'Documents',
+      slugField: 'title',
+      path: 'src/content/docs/*',
+      format: { contentField: 'content' },
+      entryLayout: 'content',
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        content: fields.mdx({
+          label: 'Content',
+          formatting: true,
+          dividers: true,
+          links: true,
+        }),
+      },
+    }),
+  },
+});