diff options
| author | vjeantet <valere.jeantet@gmail.com> | 2020-08-21 20:24:37 +0300 |
|---|---|---|
| committer | vjeantet <valere.jeantet@gmail.com> | 2020-08-21 20:24:37 +0300 |
| commit | d686c7e291f1f64c09e9f62e3a5d2d3b9dbafd01 (patch) | |
| tree | 097cc8640cc0afd8324eda16fa03563e05a20ecb | |
| parent | b3f9f57d4246c58ab8b6c48379d9159a86c16504 (diff) | |
netlify cms : add widgets
| -rw-r--r-- | exampleSite/static/admin/config.yml | 6 | ||||
| -rw-r--r-- | exampleSite/static/admin/index.html | 4 | ||||
| -rw-r--r-- | exampleSite/static/admin/shortcode/alert.js | 44 | ||||
| -rw-r--r-- | exampleSite/static/admin/shortcode/button.js | 45 | ||||
| -rw-r--r-- | exampleSite/static/admin/shortcode/expand.js | 33 | ||||
| -rw-r--r-- | exampleSite/static/admin/shortcode/panel.js | 49 |
6 files changed, 178 insertions, 3 deletions
diff --git a/exampleSite/static/admin/config.yml b/exampleSite/static/admin/config.yml index c7166a4..5d382bb 100644 --- a/exampleSite/static/admin/config.yml +++ b/exampleSite/static/admin/config.yml @@ -27,7 +27,8 @@ collections: - { label: 'Title', name: 'title', widget: 'string', default: '' } - { label: 'Description', name: 'description', widget: 'string' } - { label: 'Publish Date', name: 'date', widget: 'datetime' } - - { label: 'Order', name: 'weight', widget: 'number',required: false } + - { label: 'Order', name: 'weight', widget: 'number', default: 10,required: false } + - { label: 'Body', name: 'body', widget: 'markdown' } - { label: 'Display As', name: 'layout', widget: 'select',required: false, hint: 'Choose how to layout your content', options: [{ label: "Default (empty value)", value: "" },{ label: "Simple - hide right bar and breadcrumb ", value: "simple" }, { label: "Full - hide left nav, right nav and breadcrumb", value: "full" }, { label: "Raw - only the content will be displayed (usefull for homepage)", value: "raw" }]} - { label: 'Is Subpage ?', name: 'subpage', widget: 'boolean',required: false, default: false, hint: 'Display this page as subcontent' } - { label: 'Is Hidden ?', name: 'hidden', widget: 'boolean',required: false, default: false, hint: 'Hide this page from any menu' } @@ -35,6 +36,5 @@ collections: - { label: 'Menu label Prefix', name: 'pre', widget: 'string', required: false, hint: 'Display something before menu label' } - { label: 'Menu label Suffix', name: 'post', widget: 'string', required: false, hint: 'Display something after menu label' } - { label: 'Menu - Always open', name: 'alwaysopen', widget: 'boolean', required: false, default: false, hint: 'Open menu by default' } - - { label: 'Body', name: 'body', widget: 'markdown' } meta: { path: { widget: string, label: 'Path', index_file: '_index', pattern: ['.*', "Error"] } } - + diff --git a/exampleSite/static/admin/index.html b/exampleSite/static/admin/index.html index 26462aa..bf5704b 100644 --- a/exampleSite/static/admin/index.html +++ b/exampleSite/static/admin/index.html @@ -9,5 +9,9 @@ <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> + <script src="./shortcode/alert.js"></script> + <script src="./shortcode/expand.js"></script> + <script src="./shortcode/panel.js"></script> + <script src="./shortcode/button.js"></script> </body> </html>
\ No newline at end of file diff --git a/exampleSite/static/admin/shortcode/alert.js b/exampleSite/static/admin/shortcode/alert.js new file mode 100644 index 0000000..2c3a471 --- /dev/null +++ b/exampleSite/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/exampleSite/static/admin/shortcode/button.js b/exampleSite/static/admin/shortcode/button.js new file mode 100644 index 0000000..458df1b --- /dev/null +++ b/exampleSite/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/exampleSite/static/admin/shortcode/expand.js b/exampleSite/static/admin/shortcode/expand.js new file mode 100644 index 0000000..e665254 --- /dev/null +++ b/exampleSite/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/exampleSite/static/admin/shortcode/panel.js b/exampleSite/static/admin/shortcode/panel.js new file mode 100644 index 0000000..cf63dbe --- /dev/null +++ b/exampleSite/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 |