notCMS.js version 2

Recently I've been musing about a modern way to approach super simple web publishing of basic websites & SPAs (single page applications)... an approach way lighter than the traditional/monolithic CMS. Specifically;

notCMS.js v1 (no, I haven't written that up yet) approach was to use a grunt/jade/less/markdown workfklow... which is exactly what I use for this blog. However, I felt that this apporach is too to techy for non-devs... so have tried to simplify it here in version 2.

notCMS.js v2 is effectively a mustache.js/markdown.js frankenstein mashup as follows;

mustache.js

https://github.com/janl/mustache.js/

mustache.js is an implementation of the mustache template system in JavaScript. Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.

A simple mustache example would be;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div id="output"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
    <script>
        var view = {
            title: "Joe",
            calc: function() {
                return 2 + 4;
            }
        };
        var output = Mustache.render("{{title}} spends {{calc}}", view);
        document.getElementById('output').innerHTML = output;
    </script>
</body>

</html>

marked.js

https://github.com/chjj/marked

Marked.js is one of many javascript Markdown parsers that also can be used frontend or backend. A simple example fo marked.js would be;

<!DOCTYPE html>
<html>
<body>
    <textarea id="text-input" oninput="this.editor.update()" rows="6" cols="60">Type **Markdown** here.</textarea>
    <div id="preview"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.0/marked.js"></script>
    <script>
        function Editor(input, preview) {
            this.update = function() {
                preview.innerHTML = marked(input.value);
            };
            input.editor = this;
            this.update();
        }
        var $ = function(id) {
            return document.getElementById(id);
        };
        new Editor($("text-input"), $("preview"));
    </script>
</body>
</html>

notCMS.js example

What it does;

Here's the code;

<!DOCTYPE html>
<html>

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.0/marked.js"></script>
    <script>
        //config the markdown files to load & insert
        var md_files     = ['intro','body']

        $(function() {
            var data        = {};
            var template     = $('body').html();

            // loop through the markdown files
            $.each(md_files, function(index,value) {

                // load the md file
                $.get(value + ".md",function(md){

                    // add it to the data object
                    data[value] = marked(md);

                    // when all markdown  has finished loading
                    if(index+1 == md_files.length){

                        //parse the template with mustache
                        var new_html         = Mustache.render(template, data);

                        // write the new html back to the body
                        $('body').html(new_html);                        
                    }
                });
            });

        });            
    </script>
</head>

<body>

    <h1>Markdown Mustache Demo</h1>
    <!-- note we use triple braces so that mustache doens't escape the HTML -->
    <strong>{{{intro}}}</strong>

    <div>{{{body}}}</div>
</body>

</html>

Click here to see a working verison - http://ianscrivener.com/mustache-markdown-demo/

Sourcecode is here: https://github.com/ianscrivener/mustache-markdown-demo