DEV Community: Dmitriy Belyaev

Livewire Notifier

Dmitriy Belyaev — Sun, 11 Apr 2021 08:23:52 +0000

Greetings!

Let me to introduce new TALL-stack component Livewire Notifier.

It brings modern notifications system both for Frontend and Backend. Messages can be spawned either by JavaScript from browser or by PHP from any Livewire Component or Laravel Controller. It has zero dependencies above TALL-stack itself.

Let's start.

Livewire - Notifier

Livewire Notifier is a simple notifications system with zero dependencies above TALL-stack (Tailwind CSS, Alpine.JS, Laravel and Livewire).

Requirements

Make sure that Livewire and Alpine.JS are installed properly.
The easiest way to do it is to install Laravel Jetstream with Livewire stack (post-install command php artisan jetstream:install livewire).

Alpine.JS must be imported in resources/js/app.js package:

import 'alpinejs'

Livewire scripts and styles tags must be present in the layout file:

…
<head>
…
    <livewire:styles/>
…
</head>
<body>
…
    <livewire:scripts/>
</body>
</html>

Installation

Via Composer

$ composer require codespb/livewire-notifier

Proceed with installation process:

$ php artisan livewire-notifier:install

Afterwards the package config can be found at config/livewire-notifier.php and views at resources/views/vendor/livewire-notifier/.

It's required because of Tailwind config is needed to be extended with new purge paths.

Otherwise you won't see messages styled properly.

Usage

Put Livewire-component <livewire:notifier/> into the app layout.
Make sure to insert it into correct context because it may be positioned absolutely.

Now you can use it from frontend and backend both.

Message options

Message added at backend (from any Livewire component) must have type of array.
Message added at frontend (from JavaScript) must have type of object.

$message = [
        'text' => __('Post is saved!'),
        'title' => '', // Optional
        'type' => 'success', // Optional. By default: success | optional: error (or fail), warning (or warn), info
        // you can find all types options in the config file
        'icon' => '', // Optional. It replaces the default type icon. Can be pure html or svg code

        // Attention! The following options override ones from the config file

        'duration' => 5000, // Optional. The time of message to be shown. To show infinitely set to 0
        'msgClass' =>  'bg-gradient-to-r from-green-200 to-green-300', // Optional. Tailwind class for message container
        'progressClass' =>  'bg-green-500', // Optional. Tailwind class for progress bar. If null progress bar won't be shown
        'closable' => false, // Optional. True by default. Whether message is closable by click on message or Esc key press on window
    ]

let message = {
    text: 'Post is saved!'
}

Backend

Livewire event

From any Livewire component push emit trigger to render new message.

public function save(){
    ...
    $this->emitTo('notifier','message',['text'=>__('The post is saved!')]);
}

Session flash variable

public function save(){
    ...
    session()->flash('notifier',['text'=>__('The post is saved!')]);
    return $this->redirect(route('posts'));
}

Frontend

Add new message from javascript:

Livewire.emitTo('notifier','message',{text:'The post is saved!'})

Example

Try to put the following code (with Laravel Jetstream w/Livewire stack installed):

<div class="flex flex-row space-x-4">
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Success',type:'success'})">Success</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Error',type:'error'})">Error</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Warning',type:'warning'})">Warning</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Info',type:'info'})">Info</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Default',type:'default'})">Default</x-jet-button>
</div>

Config file

After php artisan livewire-notifier:install command is fired, config file will be published to config/livewire-notifier.php. There you can change some value for customization.

<?php
return [
    // Messages container positioning
    'positionClass' => 'absolute top-0 right-0',
    // Default message Tailwind stylinh
    'defaultMsgClass' => 'w-80 rounded-xl shadow-xl',
    // Time of each message to be shown by default
    'duration' => 2200,
    // Messages types
    'types' => [
        'success' => [
            // 'msgClass'=>'bg-green-200',
            'msgClass'=>'bg-gradient-to-r from-green-200 to-green-300',
            'progressClass' => 'bg-green-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.success',
        ],
        'error' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'fail' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warning' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warn' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'info' => [
            // 'msgClass'=>'bg-blue-200',
            'msgClass'=>'bg-gradient-to-r from-blue-200 to-blue-300',
            'progressClass' => 'bg-blue-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ],
        'default' => [
            // 'msgClass'=>'bg-gray-200',
            'msgClass'=>'bg-gradient-to-r from-gray-200 to-gray-300',
            'progressClass' => 'bg-gray-700',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ]
    ]
];

That is all!

P.S. If you would like to support this package, please, give it a star on GitHub:
https://github.com/codespb/livewire-notifier

Creating a plugin for Cogear.JS

Dmitriy Belyaev — Tue, 09 Oct 2018 19:31:23 +0000

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:

Article No Longer Available

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.

dbelyaeff / 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

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

Blog – Simple blog preset with responsive theme.
Bootstrap 4 blog in ejs — Bootstrap 4 blog preset, provided by…

View on GitHub

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

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

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…

View on GitHub

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.

Deploying Cogear.JS-generated site to the Now.sh

Dmitriy Belyaev — Fri, 05 Oct 2018 10:45:29 +0000

Cogear.JS is an open-sourcered static websites generator built with Node.JS and based on the latest Webpack.

Dev.to members previously may read the introduction article and the tutorial about how to create a blog in a minutes with Cogear.JS.

Now it's time to talk about deploy.

When a site is designed in development mode and built-in production or build mode, it's time to deploy it to the remote server.

Basically Cogear.JS can upload it via FTP or SFTP protocols and even use rsync (if installed).

Deploy methods speed comparsion:

Method	Speed
FTP	slowest
SFTP	fast
rsync	fastest

You can read more about standard deploy ops in the docs:
https://cogearjs.org/docs/deploy

But now it's all about Now.sh which provides free hosting for static sites.

Getting Started

You need to download and install desktop Now.sh app. It will provide command line utility called now.

When it has been installed deploy procedure becomes incredibly easy.

Just compile your site (build it):

$ cd ~/Sites/site

$ cogear build

It will be compiled to the output folder which is ./public by default.

Now you are ready to deploy.

$ now --public public

You send the command to Now to upload the folder ./public in --public mode (it's required for non-paid accounts).

Within a few seconds, your site is online!

Site address has been copied to the clipboard.

You may choose an appropriate domain with now alias command.

$ now alias https://public-psuaoefsus.now.sh cogear.now.sh

Done!

You can even use custom domain via DNS management.

Like I do:

$ now alias https://public-psuaoefsus.now.sh cogearjs.org

Cogear.JS official site is hosted at Now.sh absolutely for free.

Build a blog with Cogear.JS

Dmitriy Belyaev — Fri, 28 Sep 2018 09:50:15 +0000

Recently in comments to Cogear.JS introduction post I've been asked about difference between it and Gatsby.

Today I've read the post Build a blog using Gatsby.js & React at Dev.to. I wanna to compare them via doing the same task.

Let's build a blog with Cogear.JS.

First of all you can look at real working example:
https://cogearjs.org/blog

Installation

Make sure to fit the requirements.

To install Cogear.JS do next:

$ npm install -g cogear
# or
$ yarn global add cogear

Blog crafting

We need to transform default site into blog.

It requires two things:

Blog plugin.
Blog theme.

There is a standard way via built in generator:

$ cd ~/Sites
$ cogear new blog

But I've prepared a preset for you which includes both plugin and theme.

dbelyaeff / cogear-preset-blog

Blog preset for Cogear.JS

Cogear.JS preset `blog`

Ready to use site preset. Just clone repository, install dependencies and run cogear in project directory from command line.

Installation

Make sure that Cogear.JS is installed. How to install

Clone this repo to the target local directory:

> cd ~/Sites/
> git clone --recurse-submodules https://github.com/codemotion/cogear-preset-blog blog

Pay attention to --recurse-submodules option. It's required, because cogear-theme-blog is presented as git submodule.

Install dependencies:

> cd ~/Sites/blog
> npm install
or
> yarn install

You're ready to go! Fire up Cogear.JS in dev mode, your new blog will be opened in browser automatically!

> cogear # development mode by default

Read the docs

https://cogearjs.org/docs

View on GitHub

Let's install blog with preset.

$ git clone --recurse-submodules https://github.com/codemotion/cogear-preset-blog blog

Now you need to install the dependencies:

$ cd ~/Sites/blog
$ npm install
# of
$ yarn install

Done

Really, that was all you have to do.

Now fire up Cogear.JS in the development mode.

$ cogear

You blog is ready:

I've uploaded the result to:
https://cogear-blog.now.sh

Check it out.

It's time to create first post.

Create ./src/pages/p/first-post.md file with the following content:

---
title: First post
tags:
  - news
---
# This is my first post!

Well done. Save it and browser page will be reloaded automatically.

The result is also available by link:
https://cogear-blog-with-post.now.sh

P.S. Why p folder has been chosen for blog?

It's easy to customize this behaviour.

Edit ./config.yaml file from this

title: Blog | Cogear.JS – modern static websites generator
description:
keywords:
theme: blog
blog:
  index: ""
  regex: "^p/"
  tagUri: 'tag'
  perPage: 5
pages:
  ^p/:
    layout: post
    author:
      login: Dmitriy Beliaev
      avatar: 'https://www.gravatar.com/avatar/400caf343d3bab57ab93f63e21a12be7?s=24'
      link: https://cogearjs.org

to that

title: Blog | Cogear.JS – modern static websites generator
description:
keywords:
theme: blog
blog:
  index: ""
  regex: "^blog/"
  tagUri: 'tag'
  perPage: 5
pages:
  ^blog/:
    layout: post
    author:
      login: Dmitriy Beliaev
      avatar: 'https://www.gravatar.com/avatar/400caf343d3bab57ab93f63e21a12be7?s=24'
      link: https://cogearjs.org

And rename folder ./src/pages/p to ./src/pages/blog.

More about config file in the following video:

You questions are welcome!

Cogear.JS — modern static websites generator

Dmitriy Belyaev — Tue, 25 Sep 2018 17:31:18 +0000

Cogear.JS is a static websites generator built with Node.JS (9.x or higher) and based on Webpack (v4.6).

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

Provides awesome hot reloading experience in development mode.

Features

🖥 Modern stack of 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). Server can handle thousands requests per second to serve static files (even on tiny VPS).
📦 For any hosting Doesn't requires any database (data stored in flat files) and works with any hosting (as it produces static html and assets files).
🚚 Deploy built in Create a preset and update your site to the server via FTP, SFTP or even rsync.
🔓 Secure. No updates needed Just forget about annoying regular updates from usual CMS. It's 100% secure for hacking because there is no backend after being deployed to the server.
Free. Open Sourced Use it for free. For any needs. Forever.

Github Pages (or any similar project) you can host generated site for free.

What it can be used for:

Rapid site prototyping
Portfolio site
Company site
Product site
Personal blog
Artist or musician site

Any site that has admin-generated content.

Multi-user content management can be provided via Github. Just store your source in the repository, accept pull-requests from other users and build a site after commits (can be automated).

Using Firebase or any other backend, written in any lang (PHP, Ruby, Python, Node.JS) or even with CMS like a WordPress, with help of modern frontend technologies like Vue.JS or React, it can be turned into more dynamic site like e-commerce, products catalog and so on.

What it cannot be used for:

Forum
Social network
Chat

Or any other site type with great amount of user-generated content which relies on heavily database usage and dynamically generated pages.

Of course you can try, but it has to be modern SPA which handles data from dedicated API.

Requirements

You have Node.JS (9.x or higher) and NPM (usually comes together) to be installed.

Download and install.

The latest version (v10.9.0) is recommended.

You can also use Yarn instead of NPM.

Cogear.JS runs on:

Mac
Linux
Windows

You may want to use awesome VSCode editor.

Installation

Usage

Go to the directory where all your local sites are hosted.

$ cd ~/Sites

Create a new site via command:

$ cogear new site.io -y # where "site" is your site folder name

After that go to site directory:

$ cd ~/Sites/site.io

And start up Cogear.JS in development or production mode (learn more).

$ cogear # run in develompent mode with hot-reload – by default

$ cogear production # build a site and run local server

Next time we will dive deeply into the workflow.

Github 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…

View on GitHub

Official site:
https://cogearjs.org

Docs:
https://cogearjs.org/docs/

DEV Community: Dmitriy Belyaev

Livewire Notifier

Livewire - Notifier

Requirements

Installation

Usage

Message options

Backend

Frontend

Example

Config file

Creating a plugin for Cogear.JS

Article No Longer Available

Article No Longer Available

Article No Longer Available

Source of ./lib/cogear.js

dbelyaeff / awesome-cogear

List of best plugins, themes, etc.

awesome-cogear

Plugins

Assets

Video

Frontend frameworks

Blogging

Themes

Presets

dbelyaeff / cogear.js

Modern static websites generator (Node.JS/Webpack)

THE PROJECT IS DEPRECTATED

Cogear.JS – modern static websites generator

About

Introduction video

Features

Join the Social Impact Hacktoberfest Challenge

Deploying Cogear.JS-generated site to the Now.sh

Getting Started

Build a blog with Cogear.JS

Installation

Blog crafting

dbelyaeff / cogear-preset-blog

Blog preset for Cogear.JS

Cogear.JS preset blog

Installation

Read the docs

Done

Cogear.JS — modern static websites generator

Features

What it can be used for:

What it cannot be used for:

Requirements

Installation

Usage

codemotion / cogear.js

Modern static websites generator (Node.JS/Webpack)

Cogear.JS – modern static websites generator

About

Introduction video

Features

Source of `./lib/cogear.js`

Cogear.JS preset `blog`