Created
April 23, 2018 19:29
-
-
Save marksteele/04ad004a7a276b067f271856c7de4def to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Content Manager</title> | |
<!-- Include the styles for the Netlify CMS UI, after your own styles --> | |
<link rel="stylesheet" href="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.css" /> | |
</head> | |
<body> | |
<!-- Include the script that builds the page and powers Netlify CMS --> | |
<script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script> | |
<script> | |
CMS.registerEditorComponent({ | |
// Internal id of the component | |
id: "youtube", | |
// Visible label | |
label: "Youtube", | |
// Fields the user need to fill out when adding an instance of the component | |
fields: [{name: 'id', label: 'Youtube Video ID', widget: 'string'}], | |
// Pattern to identify a block as being an instance of this component | |
pattern: /^{{< youtube (\S+) >}}$/, | |
// Function to extract data elements from the regexp match | |
fromBlock: function(match) { | |
return { | |
id: match[1] | |
}; | |
}, | |
// Function to create a text block from an instance of this component | |
toBlock: function(obj) { | |
return `{{< youtube ${obj.id} >}}`; | |
}, | |
// Preview output for this component. Can either be a string or a React component | |
// (component gives better render performance) | |
toPreview: function(obj) { | |
return ( | |
`<img src="https://img.youtube.com/vi/${obj.id}/maxresdefault.jpg" alt="Youtube Video"/>` | |
); | |
} | |
}); | |
CMS.registerEditorComponent({ | |
// Internal id of the component | |
id: "figure", | |
// Visible label | |
label: "Figure", | |
// Fields the user need to fill out when adding an instance of the component | |
fields: [ | |
{name: 'src', label: 'Image', widget: 'image'}, | |
{name: 'link', label: 'Link', widget: 'string'}, | |
{name: 'target', label: 'Target window', widget: 'string'}, | |
{name: 'rel', label: 'Rel (optional if link set)', widget: 'string'}, | |
{name: 'alt', label: 'Image alternate text', widget: 'string'}, | |
{name: 'title', label: 'Figure title', widget: 'string'}, | |
{name: 'caption', label: 'Figure caption', widget: 'string'}, | |
{name: 'className', label: 'HTML class', widget: 'string'}, | |
{name: 'height', label: 'Image height', widget: 'number', min: 1}, | |
{name: 'width', label: 'Image width', widget: 'string', min: 1}, | |
{name: 'attr', label: 'Figure attribution text', widget: 'string'}, | |
{name: 'attrlink', label: 'Figure attribution link', widget: 'string'} | |
], | |
// Pattern to identify a block as being an instance of this component | |
pattern: /^{{< figure (.*?) >}}$/, | |
// Function to extract data elements from the regexp match | |
fromBlock: function(matchIn) { | |
var match = matchIn[1].match(/(?:(\b\w+\b)\s*=\s*("[^"]*"|'[^']*'|[^"'<>\s]+)\s*)/g); | |
let results = {}; | |
for (i=0; i < match.length; i++) { | |
const pair = match[i].match(/(\b\w+\b)\s*=\s*("[^"]*"|'[^']*'|[^"'<>\s]+)\s*/); | |
results[pair[1]] = pair[2].replace(/['"]+/g,''); | |
} | |
return results; | |
}, | |
// Function to create a text block from an instance of this component | |
toBlock: function(obj) { | |
let results = '{{< figure '; | |
Object.keys(obj).forEach((e) => { | |
results += `${e}="${obj[e]}" `; | |
}); | |
results += '>}}'; | |
return results; | |
}, | |
// Preview output for this component. Can either be a string or a React component | |
// (component gives better render performance) | |
toPreview: function(obj) { | |
return ( | |
` | |
<figure> | |
<h3>${obj.title || ''}</h3> | |
<a href="${obj.link || ''}" rel="${obj.rel || ''}" target="${obj.target || ''}"> | |
<img src="${obj.src}" alt="${obj.alt || ''}" width="${obj.width}" height="${obj.height}" /> | |
</a> | |
<figcaption> | |
<h4 class="${obj.className}">${obj.caption || ''}</h4> | |
</figcaption> | |
<small><a href="${obj.attrlink || ''}">${obj.attr || ''}</a></small> | |
</figure> | |
` | |
); | |
} | |
}); | |
CMS.registerEditorComponent({ | |
// Internal id of the component | |
id: "instagram", | |
// Visible label | |
label: "Instagram", | |
// Fields the user need to fill out when adding an instance of the component | |
fields: [{name: 'id', label: 'ID', widget: 'string'}], | |
// Pattern to identify a block as being an instance of this component | |
pattern: /^{{< instagram (\S+) >}}$/, | |
// Function to extract data elements from the regexp match | |
fromBlock: function(match) { | |
return { | |
id: match[1] | |
}; | |
}, | |
// Function to create a text block from an instance of this component | |
toBlock: function(obj) { | |
return `{{< instagram ${obj.id} >}}`; | |
}, | |
// Preview output for this component. Can either be a string or a React component | |
// (component gives better render performance) | |
toPreview: function(obj) { | |
return ( | |
`<h4>No preview</h4> | |
<a href="https://www.instagram.com/p/{$obj.id}/">Click here</a>` | |
); | |
} | |
}); | |
CMS.registerEditorComponent({ | |
// Internal id of the component | |
id: "vimeo", | |
// Visible label | |
label: "Vimeo", | |
// Fields the user need to fill out when adding an instance of the component | |
fields: [{name: 'id', label: 'Video ID', widget: 'string'}], | |
// Pattern to identify a block as being an instance of this component | |
pattern: /^{{< vimeo (\S+) >}}$/, | |
// Function to extract data elements from the regexp match | |
fromBlock: function(match) { | |
return { | |
id: match[1] | |
}; | |
}, | |
// Function to create a text block from an instance of this component | |
toBlock: function(obj) { | |
return `{{< vimeo ${obj.id} >}}`; | |
}, | |
// Preview output for this component. Can either be a string or a React component | |
// (component gives better render performance) | |
toPreview: function(obj) { | |
return ( | |
`<h4>No preview</h4>` | |
); | |
} | |
}); | |
CMS.registerEditorComponent({ | |
// Internal id of the component | |
id: "gist", | |
// Visible label | |
label: "Gist", | |
// Fields the user need to fill out when adding an instance of the component | |
fields: [{name: 'id', label: 'Gist ID', widget: 'string'}], | |
// Pattern to identify a block as being an instance of this component | |
pattern: /^{{< gist (\S+) >}}$/, | |
// Function to extract data elements from the regexp match | |
fromBlock: function(match) { | |
return { | |
id: match[1] | |
}; | |
}, | |
// Function to create a text block from an instance of this component | |
toBlock: function(obj) { | |
return `{{< gist ${obj.id} >}}`; | |
}, | |
// Preview output for this component. Can either be a string or a React component | |
// (component gives better render performance) | |
toPreview: function(obj) { | |
return ( | |
`<h4>No preview</h4>` | |
); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment