mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 20:15:25 +00:00
feat(preact+landing): enable Preact block rendering + reusable landing page content system
## Preact Block Integration
- Enable Preact component detection for data-driven pages:
- Fix init.html to resolve sections_source + per-section ref before Preact detection
- Correct resource paths: blox/* → js/hbx/blocks/* (Hugo module mounts)
- Update libraries.html to load Preact core + compiled block scripts
- Add dynamic icon rendering for Preact components:
- Create Icon.jsx component with SVG decoding
- Add get_icon_data.html partial for passing icon strings to Preact props
- Update preact-wrapper.html to fetch icon data and inject into props
- Wire hero component to render dynamic icons via <Icon svg={icon_svg} />
- Centralized logging system:
- Add functions/logger.html to wrap warnf/errorf safely
- Degrade to HTML comments in constrained contexts (content adapters)
## Reusable Landing Page Content System
- Add sections_source support:
- Page front matter: sections_source: pages/<key> loads base from data/pages/<key>.yaml
- Inline sections deep-merge over base by position; extras appended
- Add per-section ref system:
- Any section: ref: blocks/<slug> loads from data/blocks/<slug>.yaml
- Inline section properties deep-merge over ref (content/design submaps)
- Enable content reuse across multiple landing pages
- Create reusable block library:
- Add test/data/blocks/: hero_basic.yaml, features_basic.yaml
- Add test/content/linked/index.md demo using refs with overrides
- Add pragmatic deep merge for content/design override handling
## Infrastructure & Schemas
- Update base-block.json schema:
- Fix gradient structure: flat → nested (gradient.start/end/direction)
- Fix color structure: string|{light,dark} (matches parse_block_v3.html)
- Update hero schema to properly extend base via $ref
- Fix Tailwind source path generation:
- Add tailwind_sources.html with test vs starter site logic
- scripts/view-test.sh: export HUGO_BLOX_TEST_SITE=true
- Update block directory structure:
- blox/<name>/config.html (was blox/<name>--CONFIG.html)
- Apply to init.html + parse_block_v2.html
- Code quality improvements:
- Biome config: match Prettier rules
## Content Adapters (Removed)
- Investigated Hugo content adapters for landing pages
- Found execution context limitations (early build phase, limited site methods)
- Archived to backups/content-adapters-*.zip and removed from test site
- Decision: use standard pages + data linking instead of adapters
This enables dynamic Preact rendering with proper icon support while providing a flexible, reusable content system for landing pages that maintains the "single file = page" mental model with optional advanced linking.
This commit is contained in:
1 parent
0c43c902ce
commit
a2aaa838c0
53 files changed
+9341
-6153
No files matched your search
+5
-14
@@ -1,18 +1,9 @@
|
||||
---
|
||||
title: Home
|
||||
date: 2023-11-01
|
||||
type: landing
|
||||
|
||||
sections:
|
||||
- block: markdown
|
||||
content:
|
||||
title: ⚡️ Section 1
|
||||
text: |
|
||||
Hello world 1 😃
|
||||

|
||||
- block: markdown
|
||||
content:
|
||||
title: 🎉 Section 2
|
||||
text: |
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia tortor a leo elementum, vitae sollicitudin diam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit quam sed justo blandit, sed tincidunt metus accumsan. Aenean at lacus nec neque mollis consectetur. Nullam non lorem dignissim, hendrerit nibh ut, ultricies augue. Integer finibus pellentesque mauris, et consectetur orci. Etiam id massa elementum, dapibus velit quis, vestibulum neque. Aenean scelerisque et quam vel vehicula. Sed rutrum et eros vulputate mattis. In finibus metus vel orci porttitor cursus. Duis commodo sed urna at cursus. Quisque et est eget elit pharetra volutpat. Fusce eleifend, eros non tristique interdum, justo lectus convallis turpis, sit amet sagittis ante mauris scelerisque enim. Suspendisse volutpat ultrices urna ac vehicula.
|
||||
date: 2023-11-01
|
||||
# Sections are loaded from data/pages/home.yaml via hbx/sections.html
|
||||
---
|
||||
|
||||
This is the Hugo Blox test site home page.
|
||||
The page sections are dynamically loaded from `data/pages/home.yaml`.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Linked Blocks Demo
|
||||
type: landing
|
||||
date: 2025-09-22
|
||||
|
||||
# Test per-section refs (linked-data) with inline overrides (titles)
|
||||
sections:
|
||||
- ref: blocks/hero_basic
|
||||
content:
|
||||
title: "**Linked Blocks** Test Page"
|
||||
- ref: blocks/features_basic
|
||||
content:
|
||||
title: "What You Get"
|
||||
---
|
||||
@@ -0,0 +1,17 @@
|
||||
# Features block configuration using re-usable blocks approach (data/blocks/features_basic.yaml)
|
||||
block: features
|
||||
id: features
|
||||
content:
|
||||
title: "Why Choose Hugo Blox?"
|
||||
items:
|
||||
- name: "Lightning Fast"
|
||||
description: "Static site generation with Preact hydration"
|
||||
icon: "bolt"
|
||||
- name: "Type Safe"
|
||||
description: "Full TypeScript support for all components"
|
||||
icon: "shield-check"
|
||||
- name: "SEO Optimized"
|
||||
description: "Server-side rendering with progressive enhancement"
|
||||
icon: "magnifying-glass"
|
||||
design:
|
||||
columns: "3"
|
||||
@@ -0,0 +1,21 @@
|
||||
# Hero block configuration using re-usable blocks approach (data/blocks/hero_basic.yaml)
|
||||
block: hero
|
||||
content:
|
||||
title: "**Build Anything** with Hugo Blox"
|
||||
text: |
|
||||
Create stunning websites with our Preact-powered components.
|
||||
Fast, flexible, and future-proof.
|
||||
primary_action:
|
||||
text: "Get Started"
|
||||
url: "#features"
|
||||
icon: "arrow-right"
|
||||
secondary_action:
|
||||
text: "View Documentation"
|
||||
url: "/"
|
||||
design:
|
||||
css_class: "hero-gradient"
|
||||
background:
|
||||
gradient:
|
||||
start: "primary-600"
|
||||
end: "primary-400"
|
||||
direction: "135"
|
||||
@@ -0,0 +1,61 @@
|
||||
# Home page configuration using data-driven approach (data/pages/home.yaml)
|
||||
title: Home
|
||||
type: landing
|
||||
date: 2023-11-01
|
||||
|
||||
sections:
|
||||
- block: hero
|
||||
content:
|
||||
title: "**Build Anything** with Hugo Blox"
|
||||
text: |
|
||||
Create stunning websites with our Preact-powered components.
|
||||
Fast, flexible, and future-proof.
|
||||
announcement:
|
||||
text: "🎉 Introducing Preact Components"
|
||||
link:
|
||||
text: "Learn more"
|
||||
url: "/linked"
|
||||
primary_action:
|
||||
text: "Get Started"
|
||||
url: "#features"
|
||||
icon: "hero/arrow-right"
|
||||
secondary_action:
|
||||
text: "View Documentation"
|
||||
url: "/linked"
|
||||
design:
|
||||
css_class: "hero-gradient"
|
||||
background:
|
||||
gradient:
|
||||
start: "primary-600"
|
||||
end: "primary-400"
|
||||
direction: "135"
|
||||
|
||||
- block: features
|
||||
id: features
|
||||
content:
|
||||
title: "Why Choose Hugo Blox?"
|
||||
items:
|
||||
- name: "Lightning Fast"
|
||||
description: "Static site generation with Preact hydration"
|
||||
icon: "bolt"
|
||||
- name: "Type Safe"
|
||||
description: "Full TypeScript support for all components"
|
||||
icon: "shield-check"
|
||||
- name: "SEO Optimized"
|
||||
description: "Server-side rendering with progressive enhancement"
|
||||
icon: "magnifying-glass"
|
||||
design:
|
||||
columns: "3"
|
||||
|
||||
- block: cta-card
|
||||
content:
|
||||
title: "Ready to get started?"
|
||||
text: "Join 250,000+ users building with Hugo Blox"
|
||||
button:
|
||||
text: "Start Building"
|
||||
url: "https://hugoblox.com"
|
||||
design:
|
||||
background:
|
||||
color:
|
||||
light: "gray-50"
|
||||
dark: "gray-900"
|
||||
+1
-2
@@ -2,6 +2,5 @@ module github.com/HugoBlox/hugo-blox-builder/test
|
||||
|
||||
go 1.15
|
||||
|
||||
require github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind main
|
||||
|
||||
require github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.0.0
|
||||
replace github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind => ../modules/blox-tailwind
|
||||
Reference in new issue
Block a user