The Hub

The Hub plain is a CLI Toolkit coded to make plain HTML developers' work easier and reduce their workload.

Features

• Live server
• Scroll watcher
• JS Uglify
• Globalization
• SASS support
• TailwindCSS support
• HTML beautifier for production
• Common scripts and styles
• Image minifier
• CSS minifier
• JS minifier
• Stupidly easy to use

Installation / Update

Hub needs NodeJS. Please install NodeJS from here if npm is not installed.

$ npm i -g @emintayfur/hub

Initialize a new Project

$ hub init

New Page or Section

for creating a new page, you can use the following command:

$ hub new page {pageName}

for creating a new section, you can use the following command:

$ hub new section {sectionName}

Build

$ hub build

Tailwind Configuration

You can configure tailwind in hub.config.js file.

Example:

module.exports = {
    template: 'tailwind',
    port: 3000,
    // tailwind configuration
    tailwind: {
        extend: {
            colors: {
                red: {
                    300: '#ff0000',
                },
                blue: '#0000ff',
            }
        }
    },
};

Folder structure

Let's explain the folder structure that the hub expects through the example project structure below.

• My Template
  • src
    • *assets
      • *common
        • *css
          • ...
        • *js
          • ...
      • *vendors
        • ...
      • css
        • ...
      • js
        • ...
    • sections
      • footer
        • *index.html
        • *section.config.js
      • ...
    • pages
      • home
        • src
          • assets
            • css
              • ...
            • js
              • ...
          • *index.html
        • *section.config.js
  • *hub.config.js

| Name | Required | Description | |-----------------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | /src | yes | This folder is the folder where your resources and codes should be kept. hub doesn't see files outside the this folder. | | /src/assets | no | This nomenclature is up to you. You can change it if you wish. | | /src/sections | yes | You have to have the sections (eg header) in this folder. Hub ignores this folder during build. If you keep the sections in another folder, the hub will see it as an html file and will try to export that file. We don't want that at all :) | | /src/pages | yes | Please keep your pages under this folder in accordance with the rules. The hub automatically reads the folder and exports it during build. | | /src/pages/home | no | This is a page folder, it depends on the project... | | /src/pages/home/src | yes | If you want to create a page, you have to create this folder as well. Hub does not see files outside of this folder. | | /src/pages/home/src/index.html | yes | Your page root/index file. | | /src/pages/home/section.config.js | yes | If you want to create a page, you must also create this file. Here you specify what will be included in your project. This process is required for the globalization process. | | /hub.config.js | yes | This file is required because there are some settings specific to your project. You cannot run the hub without this file. |

./pages/**/section.config.js

module.exports = {
    include: [
        '@/assets/images/1.jpg',
        // ...
    ],
}

./hub.config.js

module.exports = {
    // template is required. Please do not change this.
    template: 'tailwind',
  
    port: 4000,
};

Usage / Commands

Initialize new project

$ cd {your_project_parent_folder}
$ hub init
$ # And answer the questions :)  

Start your project

$ cd {your_project}
$ hub start  

Build your project

$ cd {your_project}
$ hub build  

Globalize the page

$ cd {your_project}
$ hub globalize 
$ # and select your page.

Use globalized page

$ cd {your_project}
$ hub use 
$ # and select your page.

Un-globalize the page

$ hub un-globalize 
$ # and select your page.