Skip to content

Commit a63b2d0

Browse files
balloobclaude
balloob
and
claude
authored
Convert product pages to static HTML (#13)
* Reduce JavaScript on product overview pages Created a new reusable layout (product-overview.html) for product pages that eliminates the need for JavaScript by rendering all content from YAML frontmatter. Changes: - Add product-overview.html layout that extends base.html - Define YAML schema for product metadata and action links - Migrate ZWA-2, ZBT-1, and VPE product pages to use new layout - Move all product info and links to YAML frontmatter - Remove duplicate HTML structure across product pages Benefits: - Zero JavaScript needed for content rendering - Improved maintainability with centralized layout - Cleaner page structure with declarative YAML - Consistent styling across all product pages * Fixes * Tweak --------- Co-authored-by: Claude <[email protected]>
1 parent 738cccf commit a63b2d0

File tree

11 files changed

+170
-355
lines changed

11 files changed

+170
-355
lines changed

‎.eleventy.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ export default function (eleventyConfig) {
3535
}
3636

3737
return {
38+
markdownTemplateEngine: 'njk',
39+
dataTemplateEngine: 'njk',
40+
htmlTemplateEngine: 'njk',
3841
dir: {
3942
input: 'src-11ty',
4043
output: 'dist',

‎src-11ty/_includes/base.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
{% capture full_title -%} {%- if title -%} {{ title }} – Device Toolbox {%- else
2-
-%} Device Toolbox {%- endif -%} {%- endcapture %}
1+
{%- if title -%}
2+
{% set full_title = title + " – Device Toolbox" %}
3+
{%- else -%}
4+
{% set full_title = "Device Toolbox" %}
5+
{%- endif -%}
36
<!doctype html>
47
<html lang="en">
58
<head>
@@ -49,7 +52,7 @@
4952
</nav>
5053
</header>
5154
</div>
52-
{{ content }}
55+
{{ content | safe }}
5356
<script>
5457
(function () {
5558
const updateTheme = () => {

‎src-11ty/_includes/product-overview.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
layout: base.html
3+
---
4+
<div class="details-page">
5+
<div class="details-container">
6+
<a href="/" class="back-button">
7+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
8+
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
9+
</svg>
10+
Back to Home
11+
</a>
12+
13+
<div class="details-layout">
14+
<div class="details-hero">
15+
<h1 class="details-hero-title">{{ productTitle }}</h1>
16+
<p class="details-hero-subtitle">{{ productSubtitle }}</p>
17+
18+
{{ content | safe }}
19+
</div>
20+
21+
<div class="details-actions">
22+
{%- for action in actions %}
23+
{% set external = action.href.startsWith('http') %}
24+
<a href="{{ action.href }}" class="action-item"{% if external %} target="_blank" rel="noopener noreferrer"{% endif %}>
25+
<div class="action-icon">
26+
<div class="icon-mask" style="--icon-url: url('{{ action.icon }}')"></div>
27+
</div>
28+
<div class="action-content">
29+
<h3>{{ action.title }}</h3>
30+
<p>
31+
{%- if action.experimental %}<span class="experimental">Experimental.</span> {% endif -%}
32+
{{ action.description }}
33+
</p>
34+
</div>
35+
<div class="action-trailing">
36+
{%- if external %}
37+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
38+
<path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
39+
</svg>
40+
{%- else %}
41+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevron-icon">
42+
<path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>
43+
</svg>
44+
{%- endif %}
45+
</div>
46+
</a>
47+
{%- endfor %}
48+
</div>
49+
</div>
50+
</div>
51+
</div>

‎src-11ty/home-assistant-connect-zbt-1/index.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
layout: product-overview.html
3+
title: Home Assistant Connect ZBT-1
4+
description: Update firmware for your Connect ZBT-1 adapter
5+
6+
productTitle: Home Assistant Connect ZBT-1
7+
productSubtitle: Zigbee 3.0 USB adapter
8+
9+
actions:
10+
- title: Install firmware
11+
description: Update your ZBT-1 with the latest Zigbee or Thread firmware
12+
href: /home-assistant-connect-zbt-1/install
13+
icon: /svgs/install.svg
14+
15+
- title: Documentation
16+
description: Complete documentation, troubleshooting guides, and technical specifications
17+
href: https://support.nabucasa.com/hc/en-us/categories/24734620813469
18+
icon: /svgs/doc.svg
19+
20+
- title: Product info
21+
description: Learn more about Connect ZBT-1 product features, specifications, and where to buy
22+
href: https://www.home-assistant.io/connectzbt1
23+
icon: /svgs/product.svg
24+
25+
- title: Source code
26+
description: View the open-source firmware code
27+
href: https://github.com/NabuCasa/silabs-firmware-builder
28+
icon: /svgs/github.svg
29+
---
30+
31+
The Home Assistant Connect ZBT-1 (formerly SkyConnect) is a powerful Zigbee 3.0 USB adapter that connects your Zigbee devices to Home Assistant. Easy setup, reliable performance, and seamless integration.

src-11ty/zbt1/install.njk renamed to src-11ty/home-assistant-connect-zbt-1/install.njk

File renamed without changes.

‎src-11ty/home-assistant-connect-zwa-2/index.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
layout: product-overview.html
3+
title: Home Assistant Connect ZWA-2
4+
description: Home Assistant Connect ZWA-2 - 800 series Z-Wave Long Range adapter
5+
6+
productTitle: Home Assistant Connect ZWA-2
7+
productSubtitle: The ultimate way to connect Z-Wave devices to Home Assistant.
8+
9+
actions:
10+
- title: Install original firmware
11+
description: The original firmware that allows to connect the ZWA-2 directly to Home Assistant hub via USB cable.
12+
href: /home-assistant-connect-zwa-2/install
13+
icon: /svgs/install.svg
14+
15+
- title: Install portable Z-Wave firmware
16+
description: Place the ZWA-2 in the most optimal position and connect it to Home Assistant via Wi-Fi.
17+
href: /home-assistant-connect-zwa-2/install-portable
18+
icon: /svgs/install.svg
19+
experimental: true
20+
21+
- title: Use Portable Z-Wave with Power-over-Ethernet
22+
description: Place the ZWA-2 in the most optimal position and connect it to Home Assistant via Power-over-Ethernet.
23+
href: /home-assistant-connect-zwa-2/use-poe
24+
icon: /svgs/install.svg
25+
experimental: true
26+
27+
- title: Documentation
28+
description: User documentation, troubleshooting, and resources
29+
href: https://support.nabucasa.com/hc/en-us/categories/28669861145885
30+
icon: /svgs/doc.svg
31+
32+
- title: Product info
33+
description: Learn more about the Connect ZWA-2 features, specifications, and where to buy
34+
href: https://www.home-assistant.io/connect/zwa-2/
35+
icon: /svgs/product.svg
36+
37+
- title: Source code
38+
description: View the open-source Z-Wave firmware code
39+
href: https://github.com/NabuCasa/zwave-firmware
40+
icon: /svgs/github.svg
41+
---
42+
43+
Features the latest Z-Wave 800 series chip with Long Range support, SmartStart, and enhanced security for your smart home.

‎src-11ty/home-assistant-connect-zwa-2/index.njk‎

Lines changed: 0 additions & 137 deletions
This file was deleted.

‎src-11ty/home-assistant-voice-preview-edition/index.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
layout: product-overview.html
3+
title: Home Assistant Voice Preview Edition
4+
description: Home Assistant Voice Preview Edition - Local voice control for your smart home
5+
6+
productTitle: Home Assistant Voice Preview Edition
7+
productSubtitle: Local voice control for your smart home
8+
9+
actions:
10+
- title: Install firmware
11+
description: Flash the latest Voice PE firmware
12+
href: /home-assistant-voice-preview-edition/install
13+
icon: /svgs/install.svg
14+
15+
- title: Voice control in Home Assistant
16+
description: Complete guide to setting up voice control, wake words, and commands
17+
href: https://www.home-assistant.io/voice_control/
18+
icon: /svgs/doc.svg
19+
20+
- title: Documentation
21+
description: Complete documentation, troubleshooting guides, and technical specifications
22+
href: https://support.nabucasa.com/hc/en-us/categories/24451727188125-Home-Assistant-Voice-Preview-Edition
23+
icon: /svgs/doc.svg
24+
25+
- title: Product info
26+
description: Learn about Voice PE features, hardware specifications, and where to buy
27+
href: https://www.home-assistant.io/voice-pe/
28+
icon: /svgs/product.svg
29+
30+
- title: Source code
31+
description: View the open-source Voice PE firmware code and contribute to development
32+
href: https://github.com/esphome/home-assistant-voice-pe
33+
icon: /svgs/github.svg
34+
---
35+
36+
Experience the future of voice control with complete local processing. The Voice Preview Edition brings fast, private voice commands to your smart home without sending data to the cloud.

src-11ty/vpe/install.njk renamed to src-11ty/home-assistant-voice-preview-edition/install.njk

File renamed without changes.

0 commit comments

Comments
 (0)