netlify cms support

4 files changed, 171 insertions, 0 deletions

diff --git a/static/admin/shortcode/alert.js b/static/admin/shortcode/alert.js
new file mode 100644
index 0000000..2c3a471
--- /dev/null
+++ b/static/admin/shortcode/alert.js
@@ -0,0 +1,44 @@
+CMS.registerEditorComponent({
+  // Internal id of the component
+  id: "alert",
+  // Visible label
+  label: "Alert",
+  hint:"",
+  // Fields the user need to fill out when adding an instance of the component
+  fields: [
+  		{
+  		name: 'theme', 
+  		label: 'Theme', 
+  		widget: 'select',
+      default:'info', 
+  		options: [
+  			{ label: "info", value: "info" },
+  			{ label: "success ", value: "success" }, 
+  			{ label: "warning", value: "warning" }, 
+  			{ label: "danger", value: "danger" }
+  			]
+  		},
+  		{ label: 'Text', name: 'text', widget: 'markdown' }
+  	],
+  // Pattern to identify a block as being an instance of this component
+  pattern: /{{% alert theme="(\w+)" %}}(.*?){{% \/alert %}}/s,
+
+  // Function to extract data elements from the regexp match
+  fromBlock: function(match) {
+    return {
+      theme: match[1],
+      text: match[2]
+    };
+  },
+  // Function to create a text block from an instance of this component
+  toBlock: function(obj) {
+    return '{{% alert theme="'+obj.theme+'" %}}'+obj.text+'{{% /alert %}}';
+  },
+  // Preview output for this component. Can either be a string or a React component
+  // (component gives better render performance)
+  toPreview: function(obj) {
+    return (
+      '<strong> alert '+obj.theme+' -- '+obj.text+'</strong>'
+    );
+  }
+});
\ No newline at end of file
diff --git a/static/admin/shortcode/button.js b/static/admin/shortcode/button.js
new file mode 100644
index 0000000..458df1b
--- /dev/null
+++ b/static/admin/shortcode/button.js
@@ -0,0 +1,45 @@
+CMS.registerEditorComponent({
+  // Internal id of the component
+  id: "button",
+  // Visible label
+  label: "Button",
+  // Fields the user need to fill out when adding an instance of the component
+  fields: [
+    	{
+  		label: 'Theme', 
+  		name: 'theme', 
+  		widget: 'select',
+      	default:'info', 
+  		options: [
+  			{ label: "info", value: "info" },
+  			{ label: "success ", value: "success" }, 
+  			{ label: "warning", value: "warning" }, 
+  			{ label: "danger", value: "danger" }
+  			]
+  		},
+  		{ label: 'Link', name: 'href', widget: 'string' },
+  		{ label: 'Text to display', name: 'label', widget: 'string' }
+  	],
+  // Pattern to identify a block as being an instance of this component
+  pattern: /^{{\< button href="(.*?)" theme="(\w+)" \>}}(.*?){{\< \/button \>}}/s,
+
+  // Function to extract data elements from the regexp match
+  fromBlock: function(match) {
+    return {
+      href: match[1],
+      theme: match[2],
+      label: match[3]
+    };
+  },
+  // Function to create a text block from an instance of this component
+  toBlock: function(obj) {
+    return '{{< button href="'+obj.href+'" theme="'+obj.theme+'" >}}'+obj.label+'{{< /button >}}'
+  },
+  // Preview output for this component. Can either be a string or a React component
+  // (component gives better render performance)
+  toPreview: function(obj) {
+    return (
+      '<strong> button['+obj.label+'] --> '+obj.href+'</strong><br/>'
+    );
+  }
+});
\ No newline at end of file
diff --git a/static/admin/shortcode/expand.js b/static/admin/shortcode/expand.js
new file mode 100644
index 0000000..e665254
--- /dev/null
+++ b/static/admin/shortcode/expand.js
@@ -0,0 +1,33 @@
+CMS.registerEditorComponent({
+  // Internal id of the component
+  id: "expand",
+  // Visible label
+  label: "Expand",
+  // Fields the user need to fill out when adding an instance of the component
+  fields: [
+  		{ label: 'Label', name: 'label', default:'Expand me !', widget: 'string' },
+  		{ label: 'Text to expand', name: 'text', widget: 'markdown' }
+  	],
+  // Pattern to identify a block as being an instance of this component
+  pattern: /^{{% expand "(\w+)" %}}(.*?){{% \/expand %}}/s,
+
+
+  // Function to extract data elements from the regexp match
+  fromBlock: function(match) {
+    return {
+      label: match[1],
+      text: match[2]
+    };
+  },
+  // Function to create a text block from an instance of this component
+  toBlock: function(obj) {
+    return '{{% expand "'+obj.label+'" %}}'+obj.text+'{{% /expand %}}';
+  },
+  // Preview output for this component. Can either be a string or a React component
+  // (component gives better render performance)
+  toPreview: function(obj) {
+    return (
+      '<strong> expand : '+obj.label+' -- '+obj.text+'</strong>'
+    );
+  }
+});
\ No newline at end of file
diff --git a/static/admin/shortcode/panel.js b/static/admin/shortcode/panel.js
new file mode 100644
index 0000000..cf63dbe
--- /dev/null
+++ b/static/admin/shortcode/panel.js
@@ -0,0 +1,49 @@
+CMS.registerEditorComponent({
+  // Internal id of the component
+  id: "panel",
+  // Visible label
+  label: "Panel",
+  // Fields the user need to fill out when adding an instance of the component
+  fields: [
+  		{
+  		name: 'theme', 
+  		label: 'Theme', 
+  		widget: 'select', 
+  		default:'info', 
+  		options: [
+  			{ label: "info", value: "info" },
+  			{ label: "success ", value: "success" }, 
+  			{ label: "warning", value: "warning" }, 
+  			{ label: "danger", value: "danger" }
+  			]
+  		},
+  		{ label: 'Header', name: 'header', default:'', widget: 'string' },
+  		{ label: 'Footer', name: 'footer', default:'', widget: 'string' },
+  		{ label: 'Text to expand', name: 'text', widget: 'markdown' }
+  	],
+  // Pattern to identify a block as being an instance of this component
+  // pattern: /^{{% expand "(\w+)" %}}(.*?){{% \/expand %}}/s,
+  pattern: /^{{% panel theme="(\w+)" header="(\w+)" footer="(\w+)" %}}(.*?){{% \/panel %}}/s,
+
+
+  // Function to extract data elements from the regexp match
+  fromBlock: function(match) {
+    return {
+      theme: match[1],
+      header: match[2],
+      footer: match[3],
+      text: match[4]
+    };
+  },
+  // Function to create a text block from an instance of this component
+  toBlock: function(obj) {
+	return '{{% panel theme="'+obj.theme+'" header="'+obj.header+'" footer="'+obj.footer+'" %}}'+obj.text+'{{% /panel %}}';
+  },
+  // Preview output for this component. Can either be a string or a React component
+  // (component gives better render performance)
+  toPreview: function(obj) {
+    return (
+      '<strong> panel : '+obj.header+' -- '+obj.text+'</strong>'
+    );
+  }
+});
\ No newline at end of file