From e00ab6170785a527b623cfc172c7681aeb9afc13 Mon Sep 17 00:00:00 2001
From: David Enke <david@enke.dev>
Date: Mon, 21 Oct 2024 08:50:47 +0200
Subject: [PATCH] chore(demo): load examples async

---
 mocks/config.yml => public/examples/blog.yml |  9 +++--
 public/examples/relation.yml                 | 39 ++++++++++++++++++++
 src/demo/demo.ts                             | 24 +++---------
 src/utils/decap.utils.spec.ts                |  2 +-
 4 files changed, 50 insertions(+), 24 deletions(-)
 rename mocks/config.yml => public/examples/blog.yml (77%)
 create mode 100644 public/examples/relation.yml

diff --git a/mocks/config.yml b/public/examples/blog.yml
similarity index 77%
rename from mocks/config.yml
rename to public/examples/blog.yml
index f9b652b..95091b9 100644
--- a/mocks/config.yml
+++ b/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" }
diff --git a/public/examples/relation.yml b/public/examples/relation.yml
new file mode 100644
index 0000000..d233fe0
--- /dev/null
+++ b/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
diff --git a/src/demo/demo.ts b/src/demo/demo.ts
index ba18a86..6fa8803 100644
--- a/src/demo/demo.ts
+++ b/src/demo/demo.ts
@@ -7,7 +7,7 @@ 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;
   }
@@ -15,25 +15,11 @@ declare global {
 
 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'));
 };
 
diff --git a/src/utils/decap.utils.spec.ts b/src/utils/decap.utils.spec.ts
index ee2809f..6ed81f2 100644
--- a/src/utils/decap.utils.spec.ts
+++ b/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();