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:
George Cushen committed 2025-09-22 22:18:03 +01:00
1 parent 0c43c902ce
commit a2aaa838c0
53 files changed
+9341 -6153

No files matched your search

+5 -14
View File
@@ -1,18 +1,9 @@
---
title: Home
date: 2023-11-01
type: landing
sections:
- block: markdown
content:
title: ⚡️ Section 1
text: |
Hello world 1 😃
![](cake.svg)
- 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`.
+14
View File
@@ -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"
---
+17
View File
@@ -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"
+21
View File
@@ -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"
+61
View File
@@ -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
View File
@@ -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