mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 14:14:41 +00:00
George Cushen
f017b3faef
Three new design.layout values, all driven by the existing items/resolver infrastructure (no Hugo-side changes). - justified: Flickr-style row-balanced layout. Each tile's flex-basis is derived from its precomputed aspect ratio at the configured row_height, flex-grow proportional to ratio so wider images claim more leftover row space. Pure CSS, no JS layout math. New design.row_height field (clamped 120-640, default 240). Last item capped at max-width: 50% so a lonely last-row image doesn't stretch grotesquely. - carousel: CSS scroll-snap-type: x mandatory horizontal strip. Touch swipe is native; optional Preact prev/next arrows render on md+ only. Per-breakpoint flex-basis driven by design.columns (mobile always shows ~1 + peeking next). Full-bleed scroll via negative margins matched by inner padding so the strip feels native at any width. - slideshow: Single-image presentation with crossfade transitions, dots, arrows, optional autoplay with pause-on-hover, touch swipe, and a click-through to the lightbox at full resolution. New design.autoplay (default false) and design.autoplay_interval (ms, min 1000, default 5000) fields. Aspect defaults to "wide" for presentational feel. Test site adds three new demos pointing at the same album folder so users can compare layouts side-by-side. Block bundle grows from 39KB to 66KB; pages without a gallery still ship 0KB (init.html gating).
Hugo Blox (core)
The Hugo Blox web framework powered by Tailwind CSS v4 with Hugo's native integration for styling components with Tailwind v4.
Requirements
- Hugo v0.148.2+ (Extended Edition)
- Node.js v20+
- pnpm (see
packageManagerfield in package.json)
Quick Start
1. Install Dependencies
pnpm install
2. Run Development Server
hugo server
Tailwind CSS is processed automatically by Hugo using the css.TailwindCSS function.
Features
- Tailwind CSS v4: Latest version with improved performance over Tailwind v3
- Hugo Native Integration: Uses Hugo's built-in
css.TailwindCSSfunction - Dynamic CSS Generation: Only includes utilities actually used in your content for ultra-fast page loads
- No Pre-compilation: CSS is generated on-demand (previously Tailwind v3 was pre-compiled in Hugo Blox as
wc.min.css) - Community Components: Community components work seamlessly without manual compilation
Configuration
The Tailwind configuration is now in CSS format at assets/css/main.css using the @theme directive. The configuration includes:
- Hugo Blox color schemes (primary, secondary, neutral)
- Typography settings
- Safelist patterns for dynamic classes
- Dark mode support
Migration from Tailwind v3
If you're upgrading from Tailwind v3:
- Install the new dependencies:
pnpm install - Remove any
assets/dist/wc.min.cssfiles - Add the
package.jsonfile from the latest templates - Update your deployment scripts to install it with
pnpm install(refer to the latest.githubfolder in the templates) - The old
tailwind.config.jsandpostcss.config.jsfiles are no longer needed
Development
For module development:
# Install dependencies
pnpm install
# Run development server
hugo server --disableFastRender
# Build for production
hugo --minify
Vendor Libraries
The module includes several third-party vendor libraries that are distributed with the module. These are copied from node_modules to the assets/dist/lib directory during the build process.
To update the vendor libraries:
# Update vendor libraries to the latest versions and rebuild
pnpm vendor:update-and-build
# Just rebuild vendor libraries without updating versions
pnpm vendor:libs
The following libraries are included:
- mermaid (diagrams)
- plotly.js (interactive charts)
- katex (math rendering)
- markmap-autoloader (mind maps)
- alpinejs (interactivity)
- preact (interactive components)