lipsumar / design-system-framework

9 stars 2 forks source link

Add renderDoc method #30

Closed Macxim closed 8 years ago

Macxim commented 8 years ago

It allows the user to use a Markdown file to write documentation about a component.

Macxim commented 8 years ago

Actually, config.glob.doc would be better instead of config.glob.md.

lipsumar commented 8 years ago

It will eventually become a plugin, so the type name (md or doc or whatever) could even be an option of that plugin !

lipsumar commented 8 years ago

The code changed so much in branch feature/plugins it was simpler to just copy/paste the main functions. It's now a plugin. It looks like this:

var fs = require('fs'),
    MarkdownIt = require('markdown-it'),
    md = new MarkdownIt();

module.exports = function(dsf, registerPlugin, done){
    registerPlugin('dsf-demo-plugin'); // this will probably be gone soon, nevermind

    // register an "inspector plugin". Provide a dsf component ("src/") and a name
    dsf.registerInspectorPlugin('dsf-demo-plugin', {
        'component-path': 'src/',
        name: 'Documentation'
    });

    // register a custom resource type
    // provide a type ("doc") and a function
    // type: is used to "name" this resource type
    // function: is called to render this resource type (was renderDoc in your code)
    dsf.registerResourceType('doc', function(component, callback){
        component.getResourcePaths('doc', function(err, files){
            if(files[0]){
                fs.readFile(files[0], function(err, file){
                    var mdSource = file.toString();
                    callback(null, md.render(mdSource));
                });
            }else{
                callback(null, 'No documentation found for '+component.id);
            }
        });
    });

    done(); // let DSF know we're done
};

The DSF component specified in src/ is this simple JS:

(function(){
    function InspectorPlugin(){}
    // render is called for each component
    InspectorPlugin.prototype.render = function(componentId) {
        var self = this;
        this.el.innerHTML = 'Loading...';
        fetch('build/'+componentId+'/doc') // using window.fetch native API
            .then(function(resp){
                return resp.text() || '';
            })
            .then(function(text){
                self.el.innerHTML = text;
            });
    };

    // Register inspector plugin in the UI
    window.dsf.registerInspectorPlugin('dsf-demo-plugin', InspectorPlugin);

}());

I'll commit the plugin in a separate repo, along with the release of 0.4 today.

Macxim commented 8 years ago

Well done. :+1: