static-cms/example/index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />

  <title>This is an example</title>

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="/cms.css"/>
  <script>
  window.repoFiles = {
    _posts: {
      "2015-02-14-this-is-a-post.md": {
        content: "---\ntitle: This is a 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"
      }
    },
    _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'
      }
    }
  }

  var ONE_DAY = 60 * 60 * 24 * 1000;

  for (var i=1; i<=10; i++) {
    var date = new Date();

    date.setTime(date.getTime() + ONE_DAY);
    var dateString = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    var slug = dateString + "-post-number-" + i + ".md";

    window.repoFiles._posts[slug] = {
      content: "---\ntitle: \"This is post # " + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"
    }
  }

  for (var i=1; i<=5; i++) {
    var date = new Date();

    date.setTime(date.getTime() + ONE_DAY);
    var dateString = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    var slug = dateString + "-faq-number-" + i + ".md";

    window.repoFiles._faqs[slug] = {
      content: "---\ntitle: \"This FAQ item # " + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# Loren ipsum dolor sit amet"
    }
  }
  </script>
</head>
<body>

  <script src='/cms.js'></script>
  <script>
    var PostPreview = createClass({
      render: function() {
        var entry = this.props.entry;
        var image = entry.getIn(['data', 'image']);
        var bg = image && this.props.getAsset(image);
        return h('div', {},
          h('div', {className: "cover"},
            h('h1', {}, entry.getIn(['data', 'title'])),
            bg ? h('img', {src: bg.toString()}) : null
          ),
          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', 'front_limit']) || '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'])
            );
          })
        );
      }
    });

    CMS.registerPreviewTemplate("posts", PostPreview);
    CMS.registerPreviewTemplate("general", GeneralPreview);
    CMS.registerPreviewTemplate("authors", AuthorsPreview);
    CMS.registerPreviewStyle("/example.css");
    CMS.registerEditorComponent({
      id: "youtube",
      label: "Youtube",
      icon: 'video',
      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>
Initial commit 2016-02-25 00:45:56 -08:00			`<!doctype html>`
			`<html>`
			`<head>`
Basic editing with some widgets 2016-05-30 16:55:32 -07:00			`<meta charset="utf-8" />`

Initial commit 2016-02-25 00:45:56 -08:00			`<title>This is an example</title>`
AllType card line splitting and scaling 2016-07-12 17:03:22 -03:00
refine font import 2016-07-19 17:10:07 -03:00			`<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>`
extracting css file 2016-07-18 15:07:45 -03:00			`<link rel="stylesheet" href="/cms.css"/>`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`<script>`
			`window.repoFiles = {`
			`_posts: {`
			`"2015-02-14-this-is-a-post.md": {`
Add an example list to the first post in the example 2016-12-27 23:08:23 -08:00			`content: "---\ntitle: This is a 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"`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`}`
			`},`
			`_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"
AllType card line splitting and scaling 2016-07-12 17:03:22 -03:00			`},`
			`"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"`
			`},`
refinments on alltype card 2016-07-13 11:37:00 -03:00			`"cache-invalidation.md": {`
AllType card line splitting and scaling 2016-07-12 17:03:22 -03:00			`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"`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`}`
			`},`
			`_data: {`
			`"settings.json": {`
Single file collections (#132) * Files based collections skeleton * listing file based cards * create new entry with collection * moved lookupEntry to main backend * Editing single page Collections file * List widget basic implementation * Adjustments for test-repo * check if value exists before trying to iterate over 2016-10-21 20:42:14 -02:00			`content: '{"site_title": "CMS Demo"}'`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`},`
			`"authors.yml": {`
Make list widget sortable 2016-10-30 16:01:10 -07:00			`content: 'authors:\n - name: Mathias\n description: Co-founder @ Netlify\n - name: Chris\n description: Co-founder @ Netlify\n'`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`}`
			`}`
			`}`

			`var ONE_DAY = 60 * 60 * 24 * 1000;`

AllType card line splitting and scaling 2016-07-12 17:03:22 -03:00			`for (var i=1; i<=10; i++) {`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`var date = new Date();`

			`date.setTime(date.getTime() + ONE_DAY);`
			`var dateString = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();`
			`var slug = dateString + "-post-number-" + i + ".md";`

			`window.repoFiles._posts[slug] = {`
css refinments 2016-07-12 18:10:26 -03:00			`content: "---\ntitle: \"This is post # " + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"`
AllType card line splitting and scaling 2016-07-12 17:03:22 -03:00			`}`
			`}`

			`for (var i=1; i<=5; i++) {`
			`var date = new Date();`

			`date.setTime(date.getTime() + ONE_DAY);`
			`var dateString = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();`
			`var slug = dateString + "-faq-number-" + i + ".md";`

			`window.repoFiles._faqs[slug] = {`
css refinments 2016-07-12 18:10:26 -03:00			`content: "---\ntitle: \"This FAQ item # " + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# Loren ipsum dolor sit amet"`
Test repo can now be used to list entries 2016-02-25 20:40:35 -08:00			`}`
			`}`
			`</script>`
Initial commit 2016-02-25 00:45:56 -08:00			`</head>`
			`<body>`
extracting css file 2016-07-18 15:07:45 -03:00
Initial commit 2016-02-25 00:45:56 -08:00			`<script src='/cms.js'></script>`
Editor plugin architecture skeleton 2016-08-18 15:13:22 -03:00			`<script>`
Add a custom template to the example 2016-09-12 15:27:45 +02:00			`var PostPreview = createClass({`
			`render: function() {`
			`var entry = this.props.entry;`
			`var image = entry.getIn(['data', 'image']);`
Asset API (#204) Asset API 2017-01-10 22:23:22 -02:00			`var bg = image && this.props.getAsset(image);`
Add a custom template to the example 2016-09-12 15:27:45 +02:00			`return h('div', {},`
			`h('div', {className: "cover"},`
			`h('h1', {}, entry.getIn(['data', 'title'])),`
			`bg ? h('img', {src: bg.toString()}) : null`
			`),`
			`h('p', {},`
			`h('small', {}, "Written " + entry.getIn(['data', 'date']))`
			`),`
			`h('div', {"className": "text"}, this.props.widgetFor('body'))`
			`);`
			`}`
			`});`

Better styling for object controls 2016-10-28 10:21:13 +02:00			`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'),`
add object support to widgetsFor 2017-03-06 13:28:11 -05:00			`h('dd', {}, this.props.widgetsFor('posts').getIn(['widgets', 'front_limit']) \|\| 0),`
Better styling for object controls 2016-10-28 10:21:13 +02:00
			`h('dt', {}, 'Default Author'),`
add object support to widgetsFor 2017-03-06 13:28:11 -05:00			`h('dd', {}, this.props.widgetsFor('posts').getIn(['data', 'front_limit']) \|\| 'None'),`
Better styling for object controls 2016-10-28 10:21:13 +02:00
			`h('dt', {}, 'Default Thumbnail'),`
Asset API (#204) Asset API 2017-01-10 22:23:22 -02:00			`h('dd', {}, thumb && h('img', {src: this.props.getAsset(thumb).toString()}))`
Better styling for object controls 2016-10-28 10:21:13 +02:00			`)`
			`);`
			`}`
			`});`

add widgetsFor helper This allows individual widgets to be accessed from preview templates that handle lists 2017-03-06 12:27:41 -05:00			`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'])`
			`);`
			`})`
			`);`
			`}`
			`});`

Add a custom template to the example 2016-09-12 15:27:45 +02:00			`CMS.registerPreviewTemplate("posts", PostPreview);`
Better styling for object controls 2016-10-28 10:21:13 +02:00			`CMS.registerPreviewTemplate("general", GeneralPreview);`
add widgetsFor helper This allows individual widgets to be accessed from preview templates that handle lists 2017-03-06 12:27:41 -05:00			`CMS.registerPreviewTemplate("authors", AuthorsPreview);`
Add a custom template to the example 2016-09-12 15:27:45 +02:00			`CMS.registerPreviewStyle("/example.css");`
Editor plugin architecture skeleton 2016-08-18 15:13:22 -03:00			`CMS.registerEditorComponent({`
			`id: "youtube",`
			`label: "Youtube",`
			`icon: 'video',`
plugin fields have with distinct name and label 2016-08-18 15:30:28 -03:00			`fields: [{name: 'id', label: 'Youtube Video ID'}],`
Editor plugin architecture skeleton 2016-08-18 15:13:22 -03:00			`pattern: /^{{<\s?youtube (\S+)\s?>}}/,`
			`fromBlock: function(match) {`
			`return {`
plugin fields have with distinct name and label 2016-08-18 15:30:28 -03:00			`id: match[1]`
Editor plugin architecture skeleton 2016-08-18 15:13:22 -03:00			`};`
			`},`
			`toBlock: function(obj) {`
plugin fields have with distinct name and label 2016-08-18 15:30:28 -03:00			`return '{{< youtube ' + obj.id + ' >}}';`
Preview using MarkupIt 2016-08-18 17:26:01 -03:00			`},`
			`toPreview: function(obj) {`
			`return (`
			`'<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'`
			`);`
Editor plugin architecture skeleton 2016-08-18 15:13:22 -03:00			`}`
Add a custom template to the example 2016-09-12 15:27:45 +02:00			`});`
Editor plugin architecture skeleton 2016-08-18 15:13:22 -03:00			`</script>`
Initial commit 2016-02-25 00:45:56 -08:00			`</body>`
			`</html>`