Module-2 on Ghafoor's Personal Blog

Grid and Cards

noreply@example.com (AG Sayyed) — Fri, 10 Oct 2025 17:06:05 +0100

Summary content goes here.

Hbstack Bootstrap Module

It comes with lot of features and components to build modern websites. The main information can be found at Hugomods.

Using Image Grid Shortcode

The shortcode takes a source directory as its input, that should be present in data directory. This file provides a correct path to images along with their title. Path can be local or external URL.

The following shortcode reads the file from a data directory and displays the images.

HugoMods

HB Framework

Razon Yang

Article Cards shortcode

Caution

Image Test

noreply@example.com (AG Sayyed) — Wed, 30 Jul 2025 19:14:42 +0000

Using images in hbstack framework

This document provides a guide on how to use images in the hbstack framework, including various methods of rendering images in markdown files. Hugo provides two places to keep the images, one is in the static directory and another is in the assets directory. The images in the static directory are served as static files, while the images in the assets directory are processed by Hugo.

AOS Animation Example in HBStack

noreply@example.com (AG Sayyed) — Thu, 17 Jul 2025 15:00:00 +0000

1. Prerequisites

Enable Goldmark attribute parsing in your Hugo config:

1markup:
2 goldmark:
3 parser:
4 attribute:
5 block: true
6 title: true

Import required modules in config/_default/module.yaml:

1imports:
2 - path: github.com/hbstack/header/modules/banner
3 - path: github.com/hugomods/aos

2. Basic Usage

You can add AOS attributes to any block element by appending { data-aos="fade-up" } or other AOS attributes.

Example: Heading Animation

1# Animated Heading { data-aos="fade-up" data-aos-delay="100" }

Example: Paragraph Animation

1This paragraph will animate on scroll. { data-aos="fade-right" data-aos-delay="200" }

Example: Banner Title and Description

Add attributes in front matter or content:

HBStack & HugoMods Shortcodes Showcase

noreply@example.com (AG Sayyed) — Mon, 07 Jul 2025 15:00:00 +0000

A comprehensive showcase of all available shortcodes in HBStack and HugoMods frameworks, including Bootstrap components, extended media shortcodes, and modular features with examples and module import requirements.

1. Module Requirements

Before using these shortcodes, ensure you have the following modules imported in your config/_default/module.yaml:

 1imports:
 2 # Custom modules
 3 - path: github.com/agsayyed/ags-mcq
 4 - path: github.com/agsayyed/ags-markmap
 5 # gallery modules.
 6 - path: github.com/hbstack/gallery
 7 - path: github.com/hbstack/gallery/modules/breadcrumb
 8 - path: github.com/hbstack/syntax-highlighting/styles/github-dark
 9 - path: github.com/hugomods/shortcodes
10 - path: github.com/hbstack/shortcodes
11
12 # Bootstrap components for shortcodes
13 - path: github.com/hugomods/bootstrap
14 - path: github.com/hbstack/bootstrap
15 - path: github.com/gohugoio/hugo-mod-bootstrap-scss/v5
16
17 # Additional shortcode modules
18 - path: github.com/hugomods/encrypt
19 - path: github.com/hugomods/katex
20 - path: github.com/hugomods/mermaid
21 - path: github.com/hugomods/video-js
22 - path: github.com/hugomods/kroki
23 - path: github.com/hugomods/echarts
24
25 # Core modules
26 - path: github.com/hugomods/hugopress
27 # syntax highlighting, see https://hbstack.dev/en/docs/modules/syntax-highlighting/.
28
29 # icons modules
30 - path: github.com/hugomods/icons/vendors/font-awesome
31 - path: github.com/hugomods/icons/vendors/bootstrap
32 # - path: github.com/hugomods/icons/vendors/mdi
33 # - path: github.com/hugomods/icons/vendors/simple-icons
34 # - path: github.com/hugomods/icons/vendors/tabler
35 # - path: github.com/hugomods/icons/vendors/feather
36
37 # header themes
38 - path: github.com/hbstack/header/themes/pills
39 # - path: github.com/hbstack/header/themes/tabs
40 # - path: github.com/hbstack/header/themes/classic
41
42 # blog sidebar
43 - path: github.com/hbstack/blog/modules/sidebar/profile
44 - path: github.com/hbstack/blog/modules/sidebar/posts
45 - path: github.com/hbstack/blog/modules/sidebar/taxonomies
46
47 # blog comments engine
48 - path: github.com/hbstack/blog/modules/giscus
49 # - path: github.com/hbstack/blog/modules/disqus
50 # - path: github.com/hbstack/blog/modules/utterances
51
52 # blog table of contents scrollspy
53 - path: github.com/hbstack/blog/modules/toc-scrollspy
54
55 # blog content panel
56 - path: github.com/hbstack/blog/modules/content-panel
57
58 # docs comments engine
59 - path: github.com/hbstack/docs/modules/giscus
60 # - path: github.com/hbstack/docs/modules/utterances
61 # - path: github.com/hbstack/docs/modules/disqus
62
63 # docs table of contents scrollspy
64 - path: github.com/hbstack/docs/modules/toc-scrollspy
65
66 # docs content panel
67 - path: github.com/hbstack/docs/modules/content-panel
68
69 # other modules
70 # - path: github.com/hugomods/google-analytics
71 # - path: github.com/hugomods/google-adsense
72
73 # recommended modules
74 # check which modules were imported by recommended module by "hugo mod graph | grep recommended".
75 # see also https://hbstack.dev/en/docs/modules/meta/.
76 # to remove unused modules, you need to replace the recommended module with modules your need.
77 # see also https://hbstack.dev/en/2023/10/replace-meta-modules/.
78 - path: github.com/hbstack/meta/recommended

2. Bootstrap UI Components

2.1. Alert Messages

Module Required: github.com/hugomods/bootstrap