pagespace

Plugins

Plugins are associated with includes and used to render and edit include data.

Pagespace factory plugins

Navigation

Renders navigation elements based on the page structure.

npm install pagesapce-nav --save

HTML

Outputs HTML markup which is editable directly as HTML. Useful for copy pasting embed links from Youtube etc.

npm install pagespace-html --save

Web copy

Outputs HTML markup which is editable using a WYSIWYG editor.

npm install pagesapce-webcopy --save

Markdown

Outputs HTML converted from Markdown, which is editable using a Markdown editor.

npm install pagespace-markdown --save

Posts

Blogs can be generated by listing the contents of a given region for a collection of pages.

npm install pagespace-posts --save

Custom plugins

Custom plugins are easy to create.

Steps to create a custom plugin

1. Initialize a Node package

npm init
  • By convention, prefix the module name with pagespace-
  • Include the keyword pagespace-plugin

2. Create the schema

Add a pagesapce block in your package.json file with a schema block. The schema block defines the fields of the plugins configuration:

    "name" : "pagespace-fetch-html",
    "keywords" : [ "pagespace-plugin" ],
    ...
    "pagespace" : {
        "schema" : [{
            "name" : "url",
            "title" : "HTML Source",
            "type" : "string",
            "required" : true
        }, {
            "name" : "heading",
            "title" "Include heading",
            "default" : "Got this HTML",
            "type" : "string"
        }],
        "ttl" : 60000
    }

3. Create the module’s entry point:

touch index.js

and implement the process() method which should return the rendering context for the partial template:

var url = require('url');
var http = require('http')

module.exports = {
    process: function(config) {
        pagesapce.cache.get().then(function(result) {

            if(result) {
                return result;
            }

            var urlParts = url.parse(config.url);
            var requestOpts = {
                hostname: urlParts.hostname,
                port: urlParts.port,
                path: urlParts.path,
                method: 'GET'
            };

            return new Promise(function(resolve) {
                var req = http.request(requestOpts, function(res) {
                    var body = '';

                    res.on('data', function(chunk) {
                        body += chunk;
                    });

                    res.on('end', function() {
                        result = {
                            html: body,
                            heading: config.heading
                        };
                        pagespace.cache.set(result);
                        resolve(result);
                    });
                });

                req.on('error', function(err) {
                    resolve({
                        html: '<!-- Unable to resolve HTML include-->',
                        heading: config.heading
                    });
                });

                req.end();
            });
        }).catch(function(err) {
            pagesapce.logger.warn(err);
        });
    }
};

If the plugin performs an asynchronous operation, it may return a promise.

4. Create the partial template

<div class="html-include">
    <h1>{{heading}}</h1>
    {{{html}}}
</div>

5. Create a static editor (optional)

TBD

6. Install the plugin

You can publish and install your plugin via the NPM registry, but its also easier to get started by installing your module from a local path:

npm install path/to/html-fetch-include

Restart the server for the plugin to be automatically imported.