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
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.
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:
codemotion / awesome-cogear
List of best plugins, themes, etc.
awesome-cogear
Best plugins and themes for Cogear.JS
Plugins
Assets
- Compressor – Compress pages and assets with gzip for faster loading.
-
Pages JSON – Stores pages into
pages.json. Can be fetched and used on site with React, Vue.JS, Angular, etc.
Video
- YouTube – Embed youtube videos by links.
Frontend frameworks
- Vue – Brings Vue SFC import to entry points.
Blogging
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
- Blog – Simple blog preset with responsive theme.
- Bootstrap 4 blog in ejs — Bootstrap 4 blog preset, provided by…
If you like this video, please, subscribe Cogear.JS YouTube-channel and giva a star to the projects repository:
codemotion / cogear.js
Modern static websites generator (Node.JS/Webpack)
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
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 (data stored in flat…
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:
- Create a plugin for React (just add a loader to Webpack).
- Create a Bootstrap 4 theme.
Top comments (0)