chore(demo): load examples async

mocks/config.yml → public/examples/blog.yml

@@ -6,15 +6,16 @@ backend:
 
 publish_mode: editorial_workflow
 
+# Define media and upload paths
 media_folder: "/public/media"
 public_folder: "/public/media"
 
 collections:
   - name: "blog" # Used in routes, e.g., /admin/collections/blog
-    label: "Blog" # Used in the UI
-    folder: "packages/website/src/content/blog" # The path to the folder where the documents are stored
-    create: true # Allow users to create new documents in this collection
-    fields: # The fields for each document, usually in frontmatter
+    label: "Blog"
+    folder: "src/content/blog"
+    create: true
+    fields:
       - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
       - { label: "Title", name: "title", widget: "string" }
       - { label: "Published", name: "published", widget: "boolean" }

public/examples/relation.yml

@@ -0,0 +1,39 @@
+locale: "de"
+
+backend:
+  name: git-gateway
+  branch: main
+
+publish_mode: editorial_workflow
+
+media_folder: "/public/media"
+public_folder: "/public/media"
+
+collections:
+  - name: categories
+    label: Categories
+    folder: "src/content/categories"
+    create: true
+    fields:
+      - name: name
+        label: Name
+        widget: string
+      - name: tags
+        label: Tags
+        widget: relation
+        collection: "tags"
+        search_fields: ["label"]
+        value_field: "{{slug}}"
+        display_fields: ["{{label}} - {{color}}"]
+        multiple: true
+  - name: tags
+    label: Tags
+    folder: "src/content/tags"
+    create: true
+    fields:
+      - name: label
+        label: Label
+        widget: string
+      - name: color
+        label: Color
+        widget: color

src/demo/demo.ts

@@ -7,33 +7,19 @@ import { transformCollection } from '../utils/transform.utils.js';
 declare global {
   interface Window {
     global: Window;
-    handleExample(event: MouseEvent): void;
+    loadExample(path: string): void;
     handleInput(event: InputEvent): Promise<void>;
     updatePreview(config: string, schemas: Record<string, string>): void;
   }
 }
 
 window.global ||= window;
 
-window.handleExample = () => {
+// loads an example from the `examples` folder
+window.loadExample = async (path: string) => {
   const input = document.querySelector('textarea');
-  input.value = `collections:
-  - name: "blog" # Used in routes, e.g., /admin/collections/blog
-    label: "Blog" # Used in the UI
-    folder: "packages/website/src/content/blog" # The path to the folder where the documents are stored
-    create: true # Allow users to create new documents in this collection
-    fields: # The fields for each document, usually in frontmatter
-      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
-      - { label: "Title", name: "title", widget: "string" }
-      - { label: "Published", name: "published", widget: "boolean", required: false }
-      - { label: 'Color' , name: 'color', widget: 'color', enableAlpha: true }
-      - { label: 'Place' , name: 'place', widget: 'map' }
-      - { label: "Publish Date", name: "date", widget: "datetime" }
-      - { label: "Featured Image(s)", name: "thumbnail", widget: "image" }
-      - { label: "Rating (scale of 1-5)", name: "rating", widget: "number", max: 5 }
-      - { label: "Code", name: "code", widget: "code", output_code_only: true }
-      - { label: "Body", name: "body", widget: "markdown" }
-`;
+  const example = await fetch(path);
+  input.value = await example.text();
   input.dispatchEvent(new InputEvent('input'));
 };
 

src/utils/decap.utils.spec.ts

@@ -10,7 +10,7 @@ describe('decap.utils', () => {
     });
 
     it('should return a valid config object', async () => {
-      const path = fileURLToPath(new URL('../../mocks/config.yml', import.meta.url));
+      const path = fileURLToPath(new URL('../../public/examples/blog.yml', import.meta.url));
       const config = await loadDecapConfig(path);
 
       expect(config).toBeDefined();