Skip to content

Instantly share code, notes, and snippets.

@marksteele

marksteele/index.html

Created April 23, 2018 19:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marksteele/04ad004a7a276b067f271856c7de4def to your computer and use it in GitHub Desktop.
Save marksteele/04ad004a7a276b067f271856c7de4def to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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