static-cms/dev-test/index.html

243 lines
79 KiB
HTML
Raw Normal View History

2018-07-25 08:45:13 -04:00
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Netlify CMS Development Test</title>
<script>
window.repoFiles = {
_posts: {
"2015-02-14-this-is-a-post.md": {
content: "---\ntitle: This is a YAML front matter post\nimage: /nf-logo.png\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n"
},
"2015-02-15-this-is-a-json-frontmatter-post.md": {
content: "{\n\"title\": \"This is a JSON front matter post\",\n\"image\": \"/nf-logo.png\",\n\"date\": \"2015-02-15T00:00:00.000Z\"\n}\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n"
},
"2015-02-16-this-is-a-toml-frontmatter-post.md": {
content: "+++\ntitle = \"This is a TOML front matter post\"\nimage = \"/nf-logo.png\"\n\"date\" = \"2015-02-16T00:00:00.000Z\"\n+++\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n"
},
"2015-02-14-this-is-a-post-with-a-different-extension.other": {
content: "---\ntitle: This post should not appear because the extension is different\nimage: /nf-logo.png\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n"
}
},
_faqs: {
"what-is-netlify-cms.md": {
content: "---\ntitle: What is netlify CMS?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify CMS is Content Manager for Static Site Generators\n\nStatic sites are many times faster, cheaper and safer and traditional dynamic websites.\n\nModern static site generators like Jekyll, Middleman, Roots or Hugo are powerful publishing and development systems, but when we build sites for non-technical users, we need a layer on top of them.\n\nNetlify CMS is there to let your marketing team push new content to your public site, or to let technical writers work on your documentation.\n\nNetlify CMS integrates with Git and turns normal content editors into git comitters.\n\n"
},
"what-is-jam-stack.md": {
content: "---\ntitle: What is the “JAM Stack”?\ndate: 2015-11-02T00:00.000Z\n---\n\n# The JAM stack is a new way of building websites and apps that are fast, secure and simple to work with.\n\nJAM stands for JavaScript, APIs and Markup. It's the fastest growing new stack for building websites and apps: no more servers, host all your front-end on a CDN and use APIs for any moving parts.\n\n"
},
"cache-invalidation.md": {
content: "---\ntitle: What about Cache Invalidation?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify handles cache invalidation automatically\n\nWhen your changes go live, they go live.\n\nNo waiting for cache purges, no cumbersome varnish setup, no API calls to clean your distribution. Netlify handles cache purges within an average of 250ms from your deploy!\n\n"
},
"continuous-deployment.md": {
content: "---\ntitle: Does Netlify support Continuous Deployment?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Yes, Netlify let you Integrate your site or web-app to GitHub, GitLab or BitBucket and run your build tool on our servers.\n\nAutomatically rebuild your site every time your content changes: trigger builds by pushing to git or via webhooks.\n\n"
}
},
_data: {
"settings.json": {
content: '{"site_title": "CMS Demo"}'
},
"authors.yml": {
content: 'authors:\n - name: Mathias\n description: Co-founder @ Netlify\n - name: Chris\n description: Co-founder @ Netlify\n'
}
},
_sink: {
"a-big-entry-with-all-the-things.md": {
content: "---\ntitle: CHAPTER 1. Loomings.\nboolean: true\ntext: >-\n Call me Ishmael. Some years ago—never mind how long precisely—having little or\n no money in my purse, and nothing particular to interest me on shore, I\n thought I would sail about a little and see the watery part of the world. It\n is a way I have of driving off the spleen and regulating the circulation.\n Whenever I find myself growing grim about the mouth; whenever it is a damp,\n drizzly November in my soul; whenever I find myself involuntarily pausing\n before coffin warehouses, and bringing up the rear of every funeral I meet;\n and especially whenever my hypos get such an upper hand of me, that it\n requires a strong moral principle to prevent me from deliberately stepping\n into the street, and methodically knocking peoples hats off—then, I account\n it high time to get to sea as soon as I can. This is my substitute for pistol\n and ball. With a philosophical flourish Cato throws himself upon his sword; I\n quietly take to the ship. There is nothing surprising in this. If they but\n knew it, almost all men in their degree, some time or other, cherish very\n nearly the same feelings towards the ocean with me.\nnumber: '111111'\nmarkdown: \"# Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking peoples hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.\\n\\n## There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.\\n\\n**Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?**\\n\\n*But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand—miles of them—leagues. Inlanders all, they come from lanes and alleys, streets and avenues—north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?*\\n\\n[Once more. Say you are
2018-07-25 08:45:13 -04:00
}
}
}
var ONE_DAY = 60 * 60 * 24 * 1000;
for (var i=1; i<=20; i++) {
var date = new Date();
date.setTime(date.getTime() + ONE_DAY);
var month = ('0' + (date.getMonth()+1)).slice(-2)
var day = ('0' + (date.getDate())).slice(-2)
var dateString = '' + date.getFullYear() + '-' + month + '-' + day;
2018-07-25 08:45:13 -04:00
var slug = dateString + "-post-number-" + i + ".md";
window.repoFiles._posts[slug] = {
content: "---\ntitle: \"This is post # " + i + `\"\ndraft: ${i % 2 === 0}` + "\ndate: " + dateString + "T00:00:00.000Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"
2018-07-25 08:45:13 -04:00
}
}
for (var i=1; i<=5; i++) {
var date = new Date();
date.setTime(date.getTime() + ONE_DAY);
var month = ('0' + (date.getMonth()+1)).slice(-2)
var day = ('0' + (date.getDate())).slice(-2)
var dateString = '' + date.getFullYear() + '-' + month + '-' + day;
2018-07-25 08:45:13 -04:00
var slug = dateString + "-faq-number-" + i + ".md";
window.repoFiles._faqs[slug] = {
2020-07-09 17:19:53 +03:00
content: "---\ntitle: \"This FAQ item # " + i + "\"\ndate: " + dateString + "T00:00:00.000Z\n---\n\n# Loren ipsum dolor sit amet"
2018-07-25 08:45:13 -04:00
}
}
2020-06-18 10:11:37 +03:00
window.repoFiles._pages = {
directory: {
'sub-directory': {
'nested-directory': {
'index.md': {
path: '_pages/directory/sub-directory/nested-directory/index.md',
content: '---\ntitle: "Nested Directory"\n---\n',
},
},
'index.md': {
path: '_pages/directory/sub-directory/index.md',
content: '---\ntitle: "Sub Directory"\n---\n',
},
},
'another-sub-directory': {
'index.md': {
path: '_pages/directory/another-sub-directory/index.md',
content: '---\ntitle: "Another Sub Directory"\n---\n',
},
},
'index.md': {
path: '_pages/directory/index.md',
content: '---\ntitle: "Directory"\n---\n',
},
},
'index.md': {
path: '_pages/index.md',
content: '---\ntitle: "Root Page"\n---\n',
},
};
2018-07-25 08:45:13 -04:00
</script>
</head>
<body>
<script src="dist/netlify-cms.js"></script>
2018-07-25 08:45:13 -04:00
<script>
var PostPreview = createClass({
render: function() {
var entry = this.props.entry;
return h('div', {},
h('div', {className: "cover"},
h('h1', {}, entry.getIn(['data', 'title'])),
this.props.widgetFor('image'),
2018-07-25 08:45:13 -04:00
),
h('p', {},
h('small', {}, "Written " + entry.getIn(['data', 'date']))
),
h('div', {"className": "text"}, this.props.widgetFor('body'))
);
}
});
var GeneralPreview = createClass({
render: function() {
var entry = this.props.entry;
var title = entry.getIn(['data', 'site_title']);
var posts = entry.getIn(['data', 'posts']);
var thumb = posts && posts.get('thumb');
return h('div', {},
h('h1', {}, title),
h('dl', {},
h('dt', {}, 'Posts on Frontpage'),
h('dd', {}, this.props.widgetsFor('posts').getIn(['widgets', 'front_limit']) || 0),
h('dt', {}, 'Default Author'),
h('dd', {}, this.props.widgetsFor('posts').getIn(['data', 'author']) || 'None'),
h('dt', {}, 'Default Thumbnail'),
h('dd', {}, thumb && h('img', {src: this.props.getAsset(thumb).toString()}))
)
);
}
});
var AuthorsPreview = createClass({
render: function() {
return h('div', {},
h('h1', {}, 'Authors'),
this.props.widgetsFor('authors').map(function(author, index) {
return h('div', {key: index},
h('hr', {}),
h('strong', {}, author.getIn(['data', 'name'])),
author.getIn(['widgets', 'description'])
);
})
);
}
});
const RelationKitchenSinkPostPreview = createClass({
render: function() {
// When a post is selected from the relation field, all of it's data
// will be available in the field's metadata nested under the collection
// name, and then further nested under the value specified in `value_field`.
2018-07-25 08:45:13 -04:00
// In this case, the post would be nested under "posts" and then under
// the title of the selected post, since our `value_field` in the config
2018-07-25 08:45:13 -04:00
// is "title".
const { value, fieldsMetaData } = this.props;
const post = fieldsMetaData && fieldsMetaData.getIn(['posts', value]);
2018-07-25 08:45:13 -04:00
const style = { border: '2px solid #ccc', borderRadius: '8px', padding: '20px' };
return post ? h('div', { style: style },
h('h2', {}, 'Related Post'),
h('h3', {}, post.get('title')),
h('img', { src: post.get('image') }),
h('p', {}, post.get('body', '').slice(0, 100) + '...'),
2018-07-25 08:45:13 -04:00
) : null;
}
});
const previewStyles = `
html,
body {
color: #444;
font-size: 14px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
padding: 20px;
}
h1 {
margin-top: 20px;
color: #666;
font-weight: bold;
font-size: 32px;
}
img {
max-width: 100%;
}
`;
CMS.registerPreviewTemplate("posts", PostPreview);
CMS.registerPreviewTemplate("general", GeneralPreview);
CMS.registerPreviewTemplate("authors", AuthorsPreview);
CMS.registerPreviewStyle(previewStyles, { raw: true });
// Pass the name of a registered control to reuse with a new widget preview.
CMS.registerWidget("relationKitchenSinkPost", "relation", RelationKitchenSinkPostPreview);
CMS.registerEditorComponent({
id: "youtube",
label: "Youtube",
fields: [{name: 'id', label: 'Youtube Video ID'}],
pattern: /^{{<\s?youtube (\S+)\s?>}}/,
fromBlock: function(match) {
return {
id: match[1]
};
},
toBlock: function(obj) {
return '{{< youtube ' + obj.id + ' >}}';
},
toPreview: function(obj) {
return (
'<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
);
}
});
</script>
</body>
</html>