Bang's Tools

A collection of utilities and dashboards for data management, translation, AI tasks, and more.

Live Site: https://nbang.github.io

[!NOTE] For Developers: We follow Spec-Driven Development (SDD) principles. You can explore our methodology mappings in the specs/ directory:

• SpecKit Methodology
• Superpowers Methodology
• OpenSpec Methodology

Available Tools

Project Structure

nbang.github.io/
├── index.html                   # Landing page — cards rendered from tools-manifest.json
├── tools-manifest.json          # Registry of all tools (title, url, category, icon, etc.)
├── CNAME                        # Custom domain configuration
├── specs/                       # Methodology docs (SpecKit, Superpowers, OpenSpec)
│
├── js/utils/                    # Shared JavaScript utilities
│   ├── common.js                # loadScript, loadStylesheet, formatBytes, UIManager
│   └── nav.js                   # Sticky nav bar + dark mode toggle (inject into any tool page)
│
├── templates/
│   └── tool-template.html       # Canonical scaffold for new tools — copy this to start
│
├── tests/
│   └── smoke.test.mjs           # Puppeteer smoke tests (npm test)
│
├── .github/workflows/
│   └── ci.yml                   # CI: lint + smoke tests on push/PR
│
├── image_tools/                 # Image manipulation tools
│   ├── index.html               # Image tools hub
│   ├── ocr.html                 # AI in-browser OCR
│   ├── editor.html              # Photo editor
│   ├── image_process.html       # Compress / resize / convert
│   └── utils/
│       └── image-libs.js        # CDN loader for Fabric.js, Cropper.js (delegates to common.js)
│
├── pdf_tools/                   # PDF manipulation tools
│   ├── index.html               # PDF tools hub
│   ├── merge.html               # Merge PDFs
│   ├── split.html               # Split PDFs
│   └── utils/
│       ├── pdf-libs.js          # CDN loader for pdf-lib, PDF.js (delegates to common.js)
│       └── ui-manager.js        # PDF-specific UIManager wrapper (delegates to common.js)
│
├── hcm-admin.html               # HCM Merger Data dashboard
├── vietnam-admin.html           # Vietnam Admin Data dashboard
├── translation.html             # Translation Workflow tool
├── prompt.html                  # AI Prompts Library
├── vram-calculator.html         # LLM VRAM Calculator
├── vram-data.json               # JSON metadata for GPUs and Models
├── md_viewer.html               # Markdown Viewer
├── cat2map.html                 # AutoCAD DXF → KML/GeoJSON converter
├── map-projection.html          # Mercator vs Equal Earth country size comparison
├── map-projection-data.json     # Per-country true vs Mercator areas (built by scripts/)
├── calendar-converter.html      # Lunar ↔ Solar calendar converter
├── freefordev.html              # Free-for-dev resources browser
├── stremio-guide.html           # Stremio setup guide
└── aniyomi-guide.html           # Aniyomi setup guide

Setup & Usage

This is a static site project hosted on GitHub Pages. No build process is required.

1. Clone the repository:

   git clone https://github.com/nbang/nbang.github.io.git
   cd nbang.github.io
   

2. Install dependencies (required for linting and testing):

   npm install
   

3. Run locally:

   python -m http.server 8000
   

   Then visit http://localhost:8000 in your browser.

Development

Adding a New Tool

1. Copy templates/tool-template.html to the right location and fill in the TODOs.
2. Add one entry to tools-manifest.json — the index page renders cards automatically:

   {
     "id": "my-tool",
     "title": "My Tool",
     "description": "What it does.",
     "url": "my-tool.html",
     "category": "utility",
     "color": "indigo",
     "icon": "fa-solid fa-wand-magic-sparkles",
     "cta": "Open Tool"
   }
   

3. Optionally add an entry to sitemap.xml.
4. Run npm run lint:fix and npm test before committing.

Valid categories: data | utility | ai | image | pdf | guide

Shared Utilities

Linting & Formatting

npm run lint        # Check for issues
npm run lint:fix    # Auto-fix indentation, Tailwind class order, CSS selectors

Auto-fix handles: JS/HTML indentation, Tailwind class ordering, collapsing multi-line CSS selectors in <style> tags.

Testing

npm test

Runs Puppeteer smoke tests (tests/smoke.test.mjs) that:

• Load every tool URL listed in tools-manifest.json via a local static server
• Assert HTTP 200, non-empty <title>, at least one heading
• Fail on any uncaught JavaScript errors

CI runs lint + test on every push and pull request (see .github/workflows/ci.yml).