blog-easy-client

blog-easy-client is a javascript client library for blog-easy which enables us to integrates a full automated blog system to a website without having to write any code. It consists of :

A javascript client library for the browser (this repository)

Features

• It adds a simple yet powerful Blog content management system (cms) to your client side page
• We can easily add and alter Header, Sub-headers, Paragraphs, Notes, List, images, code-snippets and many more elements
• It provides a default styling for all the blog elements
• It enables us to customize the styling of all the elements

A Node.js package (for server)

Features

• It can automatically upload, update the post sent by its javascript cms client library
• It provides middlewares for automatic upload, update, search, view all post, view single post, and deletion
• It enables to choose a databse either mongoDB or mysql to store blog data
• It creates search engine friendly content

Screen Shots

Installation

npm i blog-easy-client

Initialization

Once you have installed the blog-easy-client library, you can now init the client.

Using CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/blog-easy-client-1.3.0.min.js"></script>

using NPM

import { blogEasy } from 'blog-easy-client'

How to use

blogEasy({
      wrapper: /* The selected div container where all the elements will added */,
      post: /* URL or route where the data will be posted */,
      type: /* can be upload or edit */,
      theme : /* can be dark or light */
    }

Example for uploading

blogEasy({
      wrapper: document.getElementById('container'),
      post: '/blogPost',
      type: 'upload',
      theme : 'light'
    })

Example for editing

blogEasy({
      wrapper: document.getElementById('container'),
      post: '/blogPost',
      type: 'edit',
      theme : 'light'
    })

How to style elements

To style elements you need to link your custom CSS and pass the class name to the elements as follow:

blogEasy({
      wrapper: document.getElementById('container'),
      post: '/blogPost',
      type: 'upload',
      theme : 'light',
      class:{
          header : 'custom_class_name',
          subHeader : 'custom_class_name',
          para : 'custom_class_name',
          h3 : 'custom_class_name',
          h4 : 'custom_class_name',
          h5 : 'custom_class_name',
          h6 : 'custom_class_name',
          list : 'custom_class_name',
          listElem : 'custom_class_name',
          paraSpace : 'custom_class_name',
          note : 'custom_class_name',
          code : 'custom_class_name',
          imageBox : 'custom_class_name',
          coverImage : 'custom_class_name',
          date : 'custom_class_name'
      }
    })

For styling all the text of code, Select all the child element with a *, Example : your_class *{}

How to set up its Automated backends

Read full documentation here -> blog-easy

Missing feature

• For adding links we have to use dafault html <a> tag ( we will be providing link adding feature soon. )

TO-DO

• Link adding feature
• Automatic compression of images
• Converting the cover image into 2 qualities ( preview and original, to decrease the load time of view while viewing multiple post at a time )
• Social sites share button