DEV Community

Cover image for Creating a plugin for Cogear.JS
Dmitriy Belyaev for Cogear.JS

Posted on

Creating a plugin for Cogear.JS

Cogear.JS is a modern static websites generator built with Node.JS and based on Webpack.

If you have missed introduction to Cogear.JS article series, you're welcome:



It's time to talk about crafting plugins.

Let’s start from giving a definition to a plugin.

Plugin is a module which can hook into the system core to change its behavior.

Node.JS has first-party EventEmitter – a huge API surface with synchronous event emitting, magic error event and flawed memory leak detected. Cogear.JS uses the small library called Emittery, which has none of that.

Cogear.JS core is built from modules. Take a look at the main script file in the repository and all modules it has plugged in.

Source of ./lib/cogear.js

Source of ./lib/cogear.js

Moreover Cogear.JS main object class is globally available and extends Emittery, so events can be called throughout the entire code.

Cogear.JS as an inheritor of Emittery has two methods – on and emit. With on method you can add callback function for named event. And with emit method you call this event with or without arguments.

Read more at the Emittery docs.

Arguments can be easily fetched from the context of globally available cogear instance. Or you can pass them manually.

Cogear on ane emit methods

To look through all the events use search on GitHub repository. It will show all the event which you can hook into.

So what is a plugin in Cogear.JS environment? It’s a simple object with only one method required – which is called apply.

To engage you in further learning I encourage you to see a new video from our YouTube-channel:

It will reveal the topic of plugin crafting.

You can also dive into proper docs section:
https://cogearjs.org/docs/plugins

And discover plugins in awesome-cogear repository:

GitHub logo dbelyaeff / awesome-cogear

List of best plugins, themes, etc.

awesome-cogear

Best plugins and themes for Cogear.JS

Plugins

Assets

Video

  • YouTube – Embed youtube videos by links.

Frontend frameworks

  • Vue – Brings Vue SFC import to entry points.

Blogging

  • Blog – Simple blog with pagination and tags.
  • Blog-RSS – Adds RSS to blog.

Themes

  • Default – Default theme. To learn how to.
  • Blog – Blog theme with no framework. Clone it and edit for your needs.
  • Bootstrap 4 - Various Bootstrap 4 themes. Best used for responsive design (mobile, tablet, etc.)
  • Bootstrap 4 in ejs — Bootstrap 4 theme based on EJS, provided by @dtslvr

Presets

If you like this video, please, subscribe Cogear.JS YouTube-channel and giva a star to the projects repository:

GitHub logo dbelyaeff / cogear.js

Modern static websites generator (Node.JS/Webpack)

THE PROJECT IS DEPRECTATED

Cogear.JS – modern static websites generator

Requirements | Installation | Usage | Options | Website

About

Cogear.JS is a static site generator built with Node.JS and based on Webpack (v4.6).

It's inspired by Jekyll and others, but built on the top of the latest frontend technologies.

Providing awesome experience of on-the-fly hot reloading to instantly implementing any changes.

Introduction video

Introduction to Cogear.JS

Features

  • 🖥 Modern stack technologies Build modern static websites with bundled scripts and styles.Rapidly prototype and instantly deploy to the server. Use any modern frontend stack (webpack bundled) – Vue.JS, React, Angular, Ember, etc.
  • 🚀 Blazing fast and reliable Performs nearly 1.000 pages per second (depends on the pages content and raw computer processor power). Being online. Server can handle thousands requests per seconds to serve static files (even on tiny VPS).
  • 📦 For any hosting Doesn't requires any database

Join the Social Impact Hacktoberfest Challenge

Join the Social Impact Hacktoberfest Challenge

Learn how to win a cool t-shirt taking part in Hacktoberfest via contributing to Cogear.JS.

Right now we encourage developers to:

  1. Create a plugin for React (just add a loader to Webpack).
  2. Create a Bootstrap 4 theme.

Top comments (0)