Create Plugins

You can create your own plugins to give your touch to the sites it's very easy and basic if you creating plugins for chulbul please make it availble for public via npm or github so that others can get benifit from your hard work and time.

Create a directory for your plugin

npm init -y

add all the dependecy of your plugin to package.json file and then install all depenceices.

Basic structure of plugin looks like below:

function MyPlugin(config) {
  // site config is provided so that you can use it here
  // utils function and variable goes here
  return function(chulbul, done) {
     // chulbul instance is supplied by which you have access to all APIs
      // code goes here
      done();
  };
};

As you can see config has been passed as parameter so that your plugin can use site configs for more specific kind of results to give. then you might have notice that this function is returing an anomys function which later gonna call by chulbul in which we have two parameter first is the chulbul instance by which we have all the apis in hand and the second is done which you have to call on the end of your code.

Let's create a quick plugin we call it CodePlugin.

Create a directory with name CodePlugin inside it initlazied npm and install prismjs by doing npm install prismjs Create a new index.js inside it we will write the behaviour of our plugin.

const path = require("path");
const fs = require("fs");

const prismjs = require("prismjs");
const prismCSS = fs.readFileSync(p.resolve(__dirname, "./node_modules/prismjs/themes/prism-okaidia.css"))

function CodePlugin(config) {
    const code = (language, code) => {
	if(prismjs.languages[language]){
	        return <code>&lt;pre&gt;&lt;button class=&quot;copy-btn&quot;&gt;copy&lt;/button&gt;&lt;code class=&quot;language-${language}&quot;&gt;${prismjs.highlight(code, prismjs.languages[language] , language)}&lt;/code&gt;&lt;/pre&gt;</code>
	}

	return <code>&lt;pre&gt;&lt;button class=&quot;copy-btn&quot;&gt;copy&lt;/button&gt;&lt;code class=&quot;language&quot;&gt;${code}&lt;/code&gt;&lt;/pre&gt;</code>
    }

    return function(chulbul, done) {
       chulbul.processor.renderer.addGlobal(&quot;prismCss&quot;, prismCSS)
       chulbul.processor.renderer.addGlobal(&quot;code&quot;, code);
    };
};

module.exports = CodePlugin
Remember don't forget to export your plugin.

Now it's time to use this plugin to use this plugin import it and call use function and as a parameter pass your plugin and done.

const CodePlugin = require(../CodePlugin);
...

Chulbul(__dirname, config)
.use(CodePlugin)
.listen(5000)

And That's how we crate plugins for chulbul it is simple and easy try to make plugins and make it public so that others can get benifit from it.

Last Updated: 16/01/2021 Next Article