mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 20:15:25 +00:00
George Cushen
f4280ddb1c
BREAKING CHANGE Module paths moved to `github.com/HugoBlox/kit` with new names: - core `blox-tailwind` → `blox` - analytics → `analytics` - netlify → `integrations/netlify` - slides (reveal) → `slides` Update go.mod, module.yaml/params, scripts, tests, and v0.11 migration guide accordingly.
90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# Hugo Blox (core)
|
|
|
|
The Hugo Blox web framework powered by [Tailwind CSS v4](https://tailwindcss.com/) with Hugo's native integration for styling components with Tailwind v4.
|
|
|
|
## Requirements
|
|
|
|
- Hugo v0.148.2+ (Extended Edition)
|
|
- Node.js v20+
|
|
- pnpm (see `packageManager` field in package.json)
|
|
|
|
## Quick Start
|
|
|
|
### 1. Install Dependencies
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
### 2. Run Development Server
|
|
|
|
```bash
|
|
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.TailwindCSS` function
|
|
- **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:
|
|
|
|
1. Install the new dependencies: `pnpm install`
|
|
2. Remove any `assets/dist/wc.min.css` files
|
|
3. Add the `package.json` file from the latest templates
|
|
4. Update your deployment scripts to install it with `pnpm install` (refer to the latest `.github` folder in the templates)
|
|
5. The old `tailwind.config.js` and `postcss.config.js` files are no longer needed
|
|
|
|
## Development
|
|
|
|
For module development:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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)
|