BashIt Theme Documentation: Core Components, Setup, and Features

Welcome to the official documentation and component reference for BashIt — a high-performance, retro-modern terminal theme for Hugo powered by the WebTUI CSS framework.

BashIt brings the tactile, distraction-free aesthetic of classic terminal UIs (TUIs) into the browser without sacrificing modern web performance, semantic HTML5, or responsive design.

1. Architecture & Design Principles

2. Installation & Quickstart

Step 1: Add BashIt as a Git Submodule

Inside your Hugo site root directory:

git submodule add https://github.com/Debajyati/BashIt.git themes/BashIt

And later you can update the submodule in your site directory to the latest commit using:

git submodule update --remote --merge

Step 2: Install Local NPM Dependencies

BashIt bundles WebTUI modules locally for offline independence and deterministic asset bundling:

cd themes/BashIt
npm install

Step 3: Configure hugo.toml

Add the following to your site’s hugo.toml:

baseURL = 'https://yoursite.org/'
title = 'My Terminal Blog'
theme = 'BashIt'

[params]
  webtuiTheme = 'catppuccin'

# Navbar Brand Customization (Icon, Emoji, or Image Logo)
[params.navbar]
  icon = "󰞷"            # Nerd Font glyph ("󰞷"), Unicode emoji ("⚡"), or HTML entity ("")
  # logo = "/favicon.svg" # Optional image/SVG logo path
  # disableIcon = true   # Set to true to hide the icon/logo entirely

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true  # Enables custom WebTUI HTML elements in Markdown

3. Navbar Brand & Logo Customization

BashIt allows you to customize the brand icon, emoji, or image logo displayed before the site title in the top navigation bar. By default, it renders the classic Vim terminal logo (), but you can easily customize it to match your project or personal aesthetic.

Configuration Options (hugo.toml)

Under [params.navbar] in your hugo.toml, you can choose any of the following formats:

Examples in hugo.toml:

[params.navbar]
  # 1. Unicode Emoji
  icon = "⚡"

  # 2. Nerd Font Icon Glyph
  # icon = "󰞷"

  # 3. Custom Image / SVG Logo
  # logo = "/favicon.svg"

  # 4. Hide the icon completely (text-only brand)
  # disableIcon = true

4. Typography & 3-Tier Font Customization

BashIt loads and uses JetBrains Mono Nerd Font by default across the entire website. This eliminates missing glyph boxes and broken terminal icons on operating systems or browsers where the default monospace font lacks Nerd Font symbols.

You can customize or override three distinct font levels independently in your hugo.toml:

Example Configuration (hugo.toml):

[params.font]
  # 1. Global Font (UI, headers, navigation, buttons, default base)
  global = "JetBrainsMono Nerd Font"

  # 2. Paragraph Font (Body text, articles, prose paragraphs)
  paragraph = "JetBrainsMono Nerd Font"

  # 3. Code Blocks Font (pre, code, highlights, terminal blocks)
  code = "JetBrainsMono Nerd Font"

  # Optional webfont stylesheet link (e.g. if loading external Google Fonts)
  # fontUrl = "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap"

5. Core Component Reference & Live Demos

All core components are available both as Hugo shortcodes ({{< webtui-component >}}) and native HTML attributes.

A. ASCII Boxes (Terminal Borders)

Wrap any content inside classic terminal ASCII character borders. Available in square, round, and double styles:

{{< webtui-box style="square" >}}
Your terminal content here.
{{< /webtui-box >}}

B. Buttons & Badges

Interactive buttons and metadata status tags with Catppuccin color accents:

Buttons:

Badges:

{{< webtui-button variant="foreground0" size="small" >}}Click Me{{< /webtui-button >}}
{{< webtui-badge variant="green" >}}Active{{< /webtui-badge >}}

C. Data Tables

Render structured tabular data with monospace character alignment and customizable divider lines. Rows are separated by ;; (or newlines), columns by |, and headers by | (or ,):

<!-- Standard WebTUI Table (using ;; for rows and | for columns) -->
{{< webtui-table headers="Service | Runtime | Port | Status" rows="API Gateway | Go 1.22 | :8080 | Active ;; Cache Worker | Rust 1.80 | :6379 | Active ;; Static Site | Hugo+WebTUI | :1313 | Online" divide="both" >}}

<!-- Multiline rows are also supported -->
{{< webtui-table headers="Service | Runtime | Port | Status" rows="
API Gateway | Go 1.22 | :8080 | Active
Static Site | Hugo+WebTUI | :1313 | Online
" divide="both" >}}

D. Accordions & Directory File Trees

Interactive collapsible panels with prominent terminal disclosure indicators and specialized directory variants (variant="directory"):

Standard Accordion:

Directory & File Tree:

{{< webtui-file-accordion title="project/" open="true" >}}
  {{< webtui-file-accordion title="src/" >}}
    {{< webtui-file name="main.rs" >}}
  {{< /webtui-file-accordion >}}
  {{< webtui-file name="Cargo.toml" >}}
{{< /webtui-file-accordion >}}

E. Progress Bars & Terminal Spinners

Visualize background jobs, completion metrics, and loading states:

• Build Progress Meter:

  85%

• Animated Terminal Spinners: cursor dots arrows bars

{{< webtui-progress value="85" max="100" label="85%" >}}
{{< webtui-spinner variant="cursor" >}} Loading...

F. Text Highlights & Callouts

Emphasize code symbols, keywords, or important notifications:

• Highlights: Blue mark , Peach mark , and Green mark .

{{< webtui-callout title="Notice" variant="blue" >}}
Important callout content.
{{< /webtui-callout >}}

G. Tooltips, Popovers & Switches

Interactive micro-controls without requiring JavaScript libraries:

• Tooltip on Hover: 󰈙 Hover over this terminal badge WebTUI CSS running with zero client JavaScript!

• Popover Dropdown with Terminal Toggles:

  [ 󰘵 Terminal Preferences ]

  Display Settings CRT Phosphor Glow Teletype Audio Audio

6. Looking for Extended Shortcodes?

For advanced diagrams, charts, geo maps, math equations, and image alignment options, see our companion post: 👉 Extended Shortcodes Showcase: Admonition, Mermaid, ECharts, Mapbox, and Image Alignments