The github.com/hbstack/hb is the core module of HB framework, which automatically loads and compiles the module’s SCSS and TypeScript, as well as rendering HTML.

Module	github.com/hbstack/hb
Repository	⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
Usage	See how to use modules.

Features

• Implements HugoPress.
• Baseof template.
• Fix flickering issue of dark mode on redirect pages.

How it Works?

HB is built on top of HugoPress, a UI-less modular framework that defines several hooks for loading modules automatically.

Module

Module Structure

HB module MUST be placed at the assets/hb/modules folder, which has the following structure.

1tree assets/hb/modules/vendor-module
2├── js
3│   └── index.ts
4├── purgecss.config.toml
5└── scss
6    ├── index.scss
7    └── variables.tmpl.scss

HB will:

• Loads SCSS variables from scss/variables.tmpl.scss, and then loads and compiles scss/index.scss into the CSS bundle.
• Loads and compiles the js/index.ts into the JS bundle.
• The purgecss.config.toml used to add styles to PurgeCSS whitelist, in order to avoid getting removing.

Module Naming Convention

We recommend naming your HB module in form: vendor-name, in order to avoid conflicting with HB built-in modules.

• vendor: your name or organization name.
• name: the module name.

See also creating a module.

Site Parameters

1[params]
2  [params.hb]
3    color = 'light'
4    css_bundle_name = 'hb'
5    debug = false
6    full_width = false
7    js_bundle_name = 'hb'
8    logo = 'images/logo.png'

1params:
2  hb:
3    color: light
4    css_bundle_name: hb
5    debug: false
6    full_width: false
7    js_bundle_name: hb
8    logo: images/logo.png

 1{
 2   "params": {
 3      "hb": {
 4         "color": "light",
 5         "css_bundle_name": "hb",
 6         "debug": false,
 7         "full_width": false,
 8         "js_bundle_name": "hb",
 9         "logo": "images/logo.png"
10      }
11   }
12}

Page Parameters

HugoPress Attributes

HugoPress Hooks