Skip to content

Commit 511db5a

Browse files
stvncodestvncode
committed
Remove some lit implementation for inline
1 parent d31cafa commit 511db5a

9 files changed

Lines changed: 373 additions & 451 deletions

File tree

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

Lines changed: 149 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,164 @@
1313
href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/webawesome.css"
1414
/>
1515
<script type="module" src="/src/utils/dark-mode.ts"></script>
16-
<script type="module" src="/src/components/app-header.ts"></script>
1716
<style>
1817
@import url('/src/styles/shoelace.css');
1918
@import url('/src/styles/theme.css');
2019
body {
2120
margin: 0;
2221
}
22+
23+
/* App Header Styles */
24+
.app-header {
25+
display: block;
26+
background: var(--app-bg-header);
27+
position: sticky;
28+
top: 0;
29+
z-index: 100;
30+
}
31+
32+
.app-header header {
33+
display: flex;
34+
align-items: center;
35+
justify-content: space-between;
36+
padding: 0 20px;
37+
border-bottom: 1px solid var(--app-border);
38+
height: 64px;
39+
margin: 0 auto;
40+
}
41+
42+
.app-header .logo-section {
43+
display: flex;
44+
align-items: center;
45+
gap: 12px;
46+
cursor: pointer;
47+
}
48+
49+
.app-header .logo {
50+
height: 32px;
51+
width: auto;
52+
}
53+
54+
@media (prefers-color-scheme: dark) {
55+
.app-header .logo {
56+
content: url('/ohf_dark.svg');
57+
height: 70px;
58+
}
59+
}
60+
61+
.app-header .title {
62+
font-size: 1.25rem;
63+
font-weight: 500;
64+
color: var(--app-text-primary);
65+
margin: 0;
66+
}
67+
68+
.app-header .nav-links {
69+
display: flex;
70+
gap: 20px;
71+
align-items: center;
72+
}
73+
74+
.app-header .nav-link {
75+
color: var(--app-text-secondary);
76+
border: 1px solid var(--app-border);
77+
text-decoration: none;
78+
padding: 8px 12px;
79+
border-radius: 6px;
80+
transition: all 0.2s ease;
81+
font-weight: 400;
82+
}
83+
84+
.app-header .nav-link:hover {
85+
background: var(--app-bg-secondary);
86+
color: var(--app-text-primary);
87+
border-color: var(--app-border-hover);
88+
}
89+
90+
.app-header .github-link {
91+
display: flex;
92+
align-items: center;
93+
gap: 6px;
94+
color: #666;
95+
text-decoration: none;
96+
padding: 8px 12px;
97+
border-radius: 6px;
98+
transition: all 0.2s ease;
99+
border: 1px solid #e0e0e0;
100+
}
101+
102+
.app-header .github-link:hover {
103+
background: #f5f5f5;
104+
color: #333;
105+
border-color: #ccc;
106+
}
107+
108+
.app-header .github-icon {
109+
width: 16px;
110+
height: 16px;
111+
fill: currentColor;
112+
}
113+
114+
@media (max-width: 768px) {
115+
.app-header .nav-links {
116+
gap: 12px;
117+
}
118+
119+
.app-header .nav-link,
120+
.app-header .github-link {
121+
padding: 6px 8px;
122+
font-size: 0.9rem;
123+
}
124+
125+
.app-header .title {
126+
font-size: 1.1rem;
127+
}
128+
129+
.app-header .github-link .github-text {
130+
display: none;
131+
}
132+
}
133+
134+
@media (max-width: 480px) {
135+
.app-header header {
136+
padding: 0 16px;
137+
}
138+
139+
.app-header .logo {
140+
height: 28px;
141+
}
142+
}
23143
</style>
24144
</head>
25145
<body class="wa-palette-shoelace wa-theme-shoelace">
26-
<app-header></app-header>
146+
<div class="app-header">
147+
<header>
148+
<div class="logo-section" onclick="window.location.href = '/'">
149+
<img
150+
src="/open-home-foundation.svg"
151+
alt="Open Home Foundation"
152+
class="logo"
153+
/>
154+
</div>
155+
156+
<nav class="nav-links">
157+
<a
158+
href="https://www.openhomefoundation.org/"
159+
class="nav-link"
160+
target="_blank"
161+
>
162+
OHF
163+
</a>
164+
<a
165+
href="https://www.home-assistant.io/"
166+
class="nav-link"
167+
target="_blank"
168+
>
169+
Home Assistant
170+
</a>
171+
</nav>
172+
</header>
173+
</div>
27174
{{ content }}
28175
</body>
29176
</html>

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

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

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

Lines changed: 117 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,121 @@ description: Home Assistant Connect ZWA-2 - 800 series Z-Wave Long Range adapter
55
permalink: /home-assistant-connect-zwa-2/index.html
66
---
77

8-
<script type="module" src="/src/pages/zwa2-details.ts"></script>
8+
<script type="module" src="/src/components/details.ts"></script>
9+
<script type="module" src="/src/components/action-item.ts"></script>
910

10-
<zwa2-details></zwa2-details>
11+
<style>
12+
container: {
13+
display: block;
14+
}
15+
p[slot='subtitle'] {
16+
color: var(--wa-color-brand-50);
17+
font-size: 1.1rem;
18+
font-weight: 500;
19+
margin: 0 0 10px 0;
20+
}
21+
22+
p[slot='description'],
23+
p[slot='secondary-description'] {
24+
color: var(--app-text-secondary);
25+
line-height: 1.6;
26+
margin: 0;
27+
font-size: 1.05rem;
28+
}
29+
30+
p[slot='secondary-description'] {
31+
margin-top: 12px;
32+
}
33+
34+
h3 {
35+
margin: 0 0 6px 0;
36+
color: var(--app-text-primary);
37+
font-size: 1rem;
38+
font-weight: 600;
39+
}
40+
41+
action-item .experimental {
42+
color: #e78e21;
43+
}
44+
</style>
45+
46+
<div class="container">
47+
<details-page>
48+
<span slot="title">Home Assistant Connect ZWA-2</span>
49+
<p slot="subtitle">800 series Z-Wave Long Range adapter</p>
50+
<p slot="description">
51+
The ultimate way to connect Z-Wave devices to Home Assistant.
52+
</p>
53+
<p slot="secondary-description">
54+
Features the latest Z-Wave 800 series chip with Long Range support,
55+
SmartStart, and enhanced security for your smart home.
56+
</p>
57+
58+
<div slot="actions">
59+
<action-item
60+
href="/home-assistant-connect-zwa-2/install"
61+
icon="/svgs/install.svg"
62+
trailing-icon="/svgs/chevron-right.svg"
63+
>
64+
<h3>Install original firmware</h3>
65+
<p>
66+
The original firmware that allows to connect the ZWA-2 directly to
67+
Home Assistant hub via USB cable.
68+
</p>
69+
</action-item>
70+
71+
<action-item
72+
href="/home-assistant-connect-zwa-2/install-portable"
73+
icon="/svgs/install.svg"
74+
trailing-icon="/svgs/chevron-right.svg"
75+
>
76+
<h3>Install portable Z-Wave firmware</h3>
77+
<p style="color: var(--app-text-secondary);">
78+
<span style="color: #e78e21;">Experimental.</span> Place the ZWA-2
79+
in the most optimal position and connect it to Home Assistant via
80+
Wi-Fi.
81+
</p>
82+
</action-item>
83+
84+
<action-item
85+
href="/home-assistant-connect-zwa-2/use-poe"
86+
icon="/svgs/install.svg"
87+
trailing-icon="/svgs/chevron-right.svg"
88+
>
89+
<h3>Use Portable Z-Wave with Power-over-Ethernet</h3>
90+
<p style="color: var(--app-text-secondary);">
91+
<span style="color: #e78e21;">Experimental.</span> Place the ZWA-2
92+
in the most optimal position and connect it to Home Assistant via
93+
Power-over-Ethernet.
94+
</p>
95+
</action-item>
96+
97+
<action-item
98+
href="https://support.nabucasa.com/hc/en-us/categories/28669861145885"
99+
icon="/svgs/doc.svg"
100+
>
101+
<h3>Documentation</h3>
102+
<p>User documentation, troubleshooting, and resources</p>
103+
</action-item>
104+
105+
<action-item
106+
href="https://www.home-assistant.io/connect/zwa-2/"
107+
icon="/svgs/product.svg"
108+
>
109+
<h3>Product info</h3>
110+
<p>
111+
Learn more about the Connect ZWA-2 features, specifications, and
112+
where to buy
113+
</p>
114+
</action-item>
115+
116+
<action-item
117+
href="https://github.com/NabuCasa/zwave-firmware"
118+
icon="/svgs/github.svg"
119+
>
120+
<h3>Source code</h3>
121+
<p>View the open-source Z-Wave firmware code</p>
122+
</action-item>
123+
</div>
124+
</details-page>
125+
</div>

0 commit comments

Comments
 (0)