$ show MichaelCurrin/badge-generator
This is a Vue 3 Single-Page Application (SPA) that provides an interactive form-based interface for generating Markdown badges using the shields.io service. The application allows users to generate repo metadata badges, generic static badges, package version badges, dynamic data badges, image markdown/HTML, and a catalogue of pre-made badges. The code is written in TypeScript with a clean separation of concerns: core logic modules handle badge generation and URL construction, Vue components manage UI, and a simple store persists user preferences via localStorage. The architecture is monolithic with client-side routing via Vue Router. The project demonstrates solid software engineering practices with comprehensive unit tests, a Makefile for common tasks, and GitHub Actions CI/CD for linting, testing, and deployment. While the codebase is well-structured and maintainable, it relies on the deprecated Vue CLI and some packages are several major versions behind (e.g., TypeScript 4.6, ESLint 8), indicating moderate technical drift. The application is actively maintained with recent commits and a clear release process.
The LLM identified 4 files worth highlighting for reuse:
A well-encapsulated class that provides a clean interface for generating various GitHub repo badges (tag, release, license, social counters, GitHub Pages, Python version, etc.). It abstracts away URL construction and Markdown generation, making it easy to produce consistent badge markdown. The class handles default values, error checking, and encoding, and could be extracted as a standalone library for badge generation.
A module that encapsulates the shields.io API interactions, providing functions for constructing static dash-based URLs, param-based URLs, dynamic JSON/TOML URLs, and GitHub-specific badge URLs. It handles encoding, style parameters (logo, color, size), and separates the API logic from the rest of the application. This could be reused in any project needing to generate shields.io badge URLs.
A small, focused utility module for generating Markdown links, images, and images-with-links. It also includes a function to render Markdown to HTML using markdown-it, and a cleanHtml function to post-process HTML output. The module has zero dependencies on Vue and can be reused in any JavaScript/TypeScript project needing Markdown generation.
A self-contained Vue component that implements a dark/light theme toggle using CSS custom properties, localStorage persistence, and browser preference detection. It uses a clean CSS-only toggle switch and integrates with the global store. The component is isolated and can be easily dropped into any Vue 3 project for theme switching.