Id improved, Duplicate work in progress, JSON test

content/test/badges/29c34002-2c38-44d6-ae96-9145618acc93.json

@@ -0,0 +1,4 @@
+{
+  "id": "29c34002-2c38-44d6-ae96-9145618acc93",
+  "title": "Badge A"
+}

content/test/badges/825b97a8-7448-41f0-a035-c294d1870430.json

@@ -0,0 +1,4 @@
+{
+  "id": "825b97a8-7448-41f0-a035-c294d1870430",
+  "title": "Badge B"
+}

content/test/challenges/6b72310b-eb53-4a2d-a489-471bd0398b7f.json

@@ -0,0 +1,12 @@
+{
+  "id": "6b72310b-eb53-4a2d-a489-471bd0398b7f",
+  "title": "CHallenge",
+  "hackathon": "6d6fa758-11a5-4029-bb73-16154550453e",
+  "descriptions": [
+    {
+      "language": "DE",
+      "description": "De"
+    }
+  ],
+  "badges": []
+}

content/test/hackathons/6d6fa758-11a5-4029-bb73-16154550453e.json

@@ -0,0 +1,11 @@
+{
+  "id": "6d6fa758-11a5-4029-bb73-16154550453e",
+  "title": "Hackathon",
+  "active": true,
+  "descriptions": [
+    {
+      "language": "DE",
+      "description": "De"
+    }
+  ]
+}

gridsome.config.js

@@ -136,6 +136,56 @@ module.exports = {
               ]
             }
           }
+      },
+	  {
+        use: '@gridsome/source-filesystem',
+        options: {
+          path: 'content/test/hackathons/**/*.json',
+          typeName: 'HackathonJson',
+          refs: {
+                    // Creates a GraphQL collection from challenges in front-matter and adds a reference.
+                    /*
+                    challenges: {
+                      typeName: 'Challenge'//,
+                      //create: true
+                    } */
+                  },
+          remark: {
+            plugins: [
+              '@gridsome/transformer-json'
+            ]
+          }
+        }
+      },
+	  {
+          use: '@gridsome/source-filesystem',
+          options: {
+            path: 'content/test/challenges/**/*.json',
+            typeName: 'ChallengeJson',
+            refs: {
+                    hackathon: { typeName: 'HackathonJson' },
+					badges: { typeName: 'BadgeJson'}
+                    },
+            remark: {
+              plugins: [
+                '@gridsome/transformer-json'
+              ]
+            }
+          }
+      },
+	  {
+          use: '@gridsome/source-filesystem',
+          options: {
+            path: 'content/test/badges/**/*.json',
+            typeName: 'BadgeJson',
+            refs: {
+                    },
+            remark: {
+              plugins: [
+                '@gridsome/transformer-json'
+              ]
+            }
+          }
       },
       {
           use: 'gridsome-plugin-netlify-cms',

package.json

@@ -10,6 +10,7 @@
     "@gridsome/remark-prismjs": "^0.3.0",
     "@gridsome/source-filesystem": "^0.6.2",
     "@gridsome/source-strapi": "^0.1.0",
+    "@gridsome/transformer-json": "^0.2.1",
     "@gridsome/transformer-remark": "^0.4.0",
     "gridsome": "^0.7.0",
     "gridsome-plugin-netlify-cms": "^1.0.9",

src/admin/config.yml

@@ -2,6 +2,7 @@ backend:
   name: github
   branch: master # Branch to update (optional; defaults to master)
   repo: hackerstolz/netlifyCMS_Test
+  #repo: saschatu/Netlify_Test_Content
 
 # media_folder: "" # Media files will be stored in the repo under images/uploads
 media_folder: "static/images/uploads"
@@ -12,6 +13,7 @@ collections:
     label: "Hackathon" # Used in the UI
     folder: "content/hackathons" # The path to the folder where the documents are stored
     create: true # Allow users to create new documents in this collection
+    #format: json
     slug: "{{slug}}"
     identifier_field: id
     summary: "{{title}} ({{id}})"
@@ -48,6 +50,7 @@ collections:
     label: "Challenge"
     folder: "content/challenges"
     create: true
+    #format: json
     slug: "{{slug}}"
     identifier_field: id
     summary: "{{title}} ({{id}})"
@@ -115,6 +118,7 @@ collections:
     label: "Badge"
     folder: "content/badges"
     create: true
+    #format: json
     slug: "{{slug}}"
     identifier_field: id
     summary: "{{title}} ({{id}})"
@@ -124,6 +128,7 @@ collections:
       - label: "Image"
         name: "image"
         widget: "image"
+        required: false
         media_library:
           config:
             max_file_size: 256000 # 250kb

src/admin/index.js

@@ -1,4 +1,45 @@
 import CMS from "netlify-cms"
-import { UuidControl, UuidPreview } from 'netlify-cms-widget-uuid'
+//import { UuidControl, UuidPreview } from 'netlify-cms-widget-uuid'
 
-CMS.registerWidget('uuid', UuidControl, UuidPreview)
+//CMS.registerWidget('uuid', UuidControl, UuidPreview)
+
+import uuid from 'uuid/v4';
+
+/**
+ * Create the control widget, this will add a form element to the cms UI
+ */
+const IdControl = window.createClass({  
+    getInitialState: function() {    return {};  },
+    componentDidMount: function() {
+        // If this widget doesn't have an ID yet we create one using the UUID package    
+        if (!this.props.value) { 
+            this.props.onChange(uuid());    
+        } 
+    }, 
+    handleChange() { 
+        this.props.onChange(uuid());
+    },  
+    render: function() { 
+        return window.h('p', null, `${this.props.value}`);
+    },
+
+	componentDidUpdate: function() {
+        // If this widget doesn't have an ID yet we create one using the UUID package  
+		if(!this.props.value.includes("NEW")){
+		this.props.onChange(this.props.value + "NEW");
+		}
+    }
+});
+
+/**
+ * Create the preview widget, this will display the widgets value in the NetlifyCMS preview pane
+ */
+const IdPreview = window.createClass({  
+    getInitialState: function() { console.log(this.props); return {}; }, 
+    render: function() { 
+        return window.h('p', null, `ID: ${this.props.value}`);  
+    }
+});
+
+// Register the widget. This lets NetlifyCMS know about our custom widget
+CMS.registerWidget('uuid', IdControl, IdPreview);