$ show HugoBlox/kit
HugoBlox Kit is a modular static site framework built on Hugo, providing a block-based page builder for academic, portfolio, documentation, and marketing websites. It uses Hugo's template system with Preact for interactive components, Tailwind CSS v4 for styling, and supports various third-party services (analytics, comments, search). The architecture is a monorepo with core modules (blox, analytics, slides, integrations) and multiple starter templates. Key entry points include the block system (blox/), layouts, shortcodes, and partials. Data flows from Markdown content and YAML configuration through Hugo's build pipeline, with client-side hydration via Preact. External dependencies include Hugo Extended, Node.js, pnpm, and various CDN-hosted libraries (Reveal.js, Mermaid, KaTeX, etc.). The framework is heavily oriented toward academic and research use cases, with features like BibTeX import, publication pages, and author profiles, but also serves general-purpose sites like SaaS landing pages and documentation.
The LLM identified 4 files worth highlighting for reuse:
Generates CSS custom properties for light/dark themes from YAML data files (themes/*.yaml, fonts/*.yaml). Supports color scales, surface colors, font families, and layout tokens. This partial is a self-contained utility that could be extracted to any Hugo project needing dynamic theming from structured data.
A robust Hugo partial for responsive image generation. Handles WebP conversion, srcset generation, fill/fit/resize modes, GIF/SVG passthrough, and fallback gradients. Demonstrates advanced Hugo image processing with error handling and caching. Reusable in any Hugo project requiring optimized images.
A generic wrapper for Preact-based blocks. Renders a container with data-props JSON and data-block-type attribute, then client-side Preact hydrates the component. This pattern decouples server-rendered HTML from client-side interactivity and can be reused for any Preact component in a Hugo site.
A Preact component for the hero block, demonstrating the block system pattern. It renders a hero section with background image, title, subtitle, CTA buttons, and optional animations. Uses a custom markdown renderer for inline text. This component is self-contained and could be extracted as a reusable Preact component for any landing page.