Skip to content

Commit 0b8bde0

Browse files
estherbrunnerestherbrunner
authored
Merge pull request #36 from zeixcom/feature/docs
Feature/docs revise introduction, installation & setup, core concepts and introduce markdown based SSG for docs
2 parents 840ccd8 + 0c89ae4 commit 0b8bde0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+4883
-2560
lines changed

‎bun.lockb

26.4 KB
Binary file not shown.

‎docs-src/components/code-block/code-block.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import './okaidia.css';
2-
31
code-block {
42
position: relative;
53
display: block;
@@ -22,6 +20,7 @@ code-block {
2220
}
2321

2422
& pre {
23+
font-size: var(--font-size-s);
2524
color: var(--color-gray-10);
2625
background: var(--color-gray-90);
2726
padding: var(--space-s);

‎docs-src/components/code-block/code-block.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { asBoolean, effect, enqueue, toggleAttribute, UIElement } from "@zeix/ui-element"
2-
import Prism from 'prismjs'
3-
import 'prismjs/components/prism-bash';
4-
import 'prismjs/components/prism-json';
5-
import 'prismjs/components/prism-typescript';
1+
import { asBoolean, toggleAttribute, UIElement } from "@zeix/ui-element"
2+
// import Prism from 'prismjs'
3+
// import 'prismjs/components/prism-bash';
4+
// import 'prismjs/components/prism-json';
5+
// import 'prismjs/components/prism-typescript';
66

77
import type { InputButton } from '../input-button/input-button'
88

@@ -15,10 +15,10 @@ export class CodeBlock extends UIElement {
1515
connectedCallback() {
1616

1717
// Enhance code block with Prism.js
18-
const language = this.getAttribute('language') || 'html'
18+
// const language = this.getAttribute('language') || 'html'
1919
const content = this.querySelector('code')
2020
if (content) {
21-
this.set('code', content.textContent?.trim(), false)
21+
/* this.set('code', content.textContent?.trim(), false)
2222
effect(() => {
2323
// Apply syntax highlighting while preserving Lit's marker nodes in Storybook
2424
const code = document.createElement('code')
@@ -34,7 +34,7 @@ export class CodeBlock extends UIElement {
3434
Array.from(code.childNodes)
3535
.forEach(node => code.appendChild(node))
3636
}, [code, 'h'])
37-
})
37+
}) */
3838

3939
// Copy to clipboard
4040
this.first('.copy').on('click', async (e: Event) => {

‎docs-src/components/code-block/okaidia.css

-3
This file was deleted.

‎docs-src/components/my-counter/my-counter.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<my-counter count="42">
2+
<p>
3+
Count: <span class="count"></span><br>
4+
Parity: <span class="parity"></span>
5+
</p>
6+
<button type="button" class="decrement">−</button>
7+
<button type="button" class="increment">+</button>
8+
</my-counter>

‎docs-src/lib/global.css ‎docs-src/global.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -358,10 +358,6 @@ header {
358358
li {
359359
padding: 0;
360360
margin: 0;
361-
362-
&.active {
363-
background-color: var(--color-background-alt);
364-
}
365361
}
366362

367363
a {
@@ -380,6 +376,10 @@ header {
380376
background-color: var(--color-secondary-hover);
381377
}
382378

379+
&.active {
380+
background-color: var(--color-background-alt);
381+
}
382+
383383
.icon {
384384
grid-area: icon;
385385
display: flex;

‎docs-src/includes/footer.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>© 2025 Zeix AG</p>

‎docs-src/includes/menu.html

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
<nav class="breakout">
3+
<ol>
4+
5+
<li>
6+
<a href="/index.html">
7+
<span class="icon">📘</span>
8+
<strong>Introduction</strong>
9+
<small>Overview and key benefits of UIElement</small>
10+
</a>
11+
</li>
12+
13+
<li>
14+
<a href="/installation-setup.html">
15+
<span class="icon">⚙️</span>
16+
<strong>Installation & Setup</strong>
17+
<small>How to install and set up the library</small>
18+
</a>
19+
</li>
20+
21+
<li>
22+
<a href="/core-concepts.html">
23+
<span class="icon">🧩</span>
24+
<strong>Core Concepts</strong>
25+
<small>Learn about Web Components, signals, and effects</small>
26+
</a>
27+
</li>
28+
29+
<li>
30+
<a href="/detailed-walkthrough.html">
31+
<span class="icon">📋</span>
32+
<strong>Detailed Walkthrough</strong>
33+
<small>Step-by-step guide to creating components</small>
34+
</a>
35+
</li>
36+
37+
<li>
38+
<a href="/best-practices-patterns.html">
39+
<span class="icon">💡</span>
40+
<strong>Best Practices & Patterns</strong>
41+
<small>Tips for effective and scalable usage</small>
42+
</a>
43+
</li>
44+
45+
<li>
46+
<a href="/advanced-topics.html">
47+
<span class="icon">🚀</span>
48+
<strong>Advanced Topics</strong>
49+
<small>Diving deeper into contexts and performance</small>
50+
</a>
51+
</li>
52+
53+
<li>
54+
<a href="/examples-recipes.html">
55+
<span class="icon">🧪</span>
56+
<strong>Examples & Recipes</strong>
57+
<small>Sample components and practical use cases</small>
58+
</a>
59+
</li>
60+
61+
<li>
62+
<a href="/troubleshooting-faqs.html">
63+
<span class="icon">❓</span>
64+
<strong>Troubleshooting & FAQs</strong>
65+
<small>Common issues and frequently asked questions</small>
66+
</a>
67+
</li>
68+
69+
<li>
70+
<a href="/api-reference.html">
71+
<span class="icon">📚</span>
72+
<strong>API Reference</strong>
73+
<small>Detailed documentation of classes and methods</small>
74+
</a>
75+
</li>
76+
77+
<li>
78+
<a href="/contributing-development.html">
79+
<span class="icon">🤝</span>
80+
<strong>Contributing & Development</strong>
81+
<small>How to contribute and set up the dev environment</small>
82+
</a>
83+
</li>
84+
85+
<li>
86+
<a href="/changelog-versioning.html">
87+
<span class="icon">📝</span>
88+
<strong>Changelog & Versioning</strong>
89+
<small>Track changes and understand versioning</small>
90+
</a>
91+
</li>
92+
93+
<li>
94+
<a href="/licensing-credits.html">
95+
<span class="icon">⚖️</span>
96+
<strong>Licensing & Credits</strong>
97+
<small>License details and acknowledgments</small>
98+
</a>
99+
</li>
100+
</ol>
101+
</nav>

‎docs-src/layout.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ title }} – UIElement Docs</title>
7+
<meta name="description" content="{{ description }}">
8+
<link rel="stylesheet" href="assets/main.css">
9+
<script type="module" src="assets/main.js"></script>
10+
</head>
11+
<body>
12+
<header class="content-grid">
13+
<h1 class="content">UIElement Docs <small>Version 0.9.4</small></h1>
14+
{{ include 'menu.html' }}
15+
</header>
16+
17+
<main>
18+
{{ content }}
19+
</main>
20+
<footer>
21+
{{ include 'footer.html' }}
22+
</footer>
23+
</body>
24+
</html>

‎docs-src/lib/prism.js

-8
This file was deleted.

‎docs-src/main.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './lib/global.css';
1+
@import './global.css';
22

33
@import './components/my-counter/my-counter.css';
44
@import './components/my-slider/my-slider.css';

‎docs-src/pages/advanced-topics.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "Advanced Topics"
3+
emoji: "🚀"
4+
description: "Diving deeper into contexts and performance"
5+
---
6+
7+
<section class="hero">
8+
9+
# 🚀 Advanced Topics
10+
11+
<p class="lead">Get started with <strong>UIElement</strong> by including it directly in your HTML or installing it via npm. Follow the steps below to set up your environment and start building reactive Web Components.</p>
12+
</section>
13+
14+
<section>
15+
16+
##
17+
18+
</section>

‎docs-src/pages/api-reference.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "API Reference"
3+
emoji: "📚"
4+
description: "Detailed documentation of classes and methods"
5+
---
6+
7+
<section class="hero">
8+
9+
# 📚 API Reference
10+
11+
<p class="lead">Get started with <strong>UIElement</strong> by including it directly in your HTML or installing it via npm. Follow the steps below to set up your environment and start building reactive Web Components.</p>
12+
</section>
13+
14+
<section>
15+
16+
##
17+
18+
</section>

‎docs-src/pages/best-practices-patterns.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "Best Practices & Patterns"
3+
emoji: "💡"
4+
description: "Tips for effective and scalable usage"
5+
---
6+
7+
<section class="hero">
8+
9+
# 💡 Best Practices & Patterns
10+
11+
<p class="lead">Get started with <strong>UIElement</strong> by including it directly in your HTML or installing it via npm. Follow the steps below to set up your environment and start building reactive Web Components.</p>
12+
</section>
13+
14+
<section>
15+
16+
##
17+
18+
</section>

‎docs-src/pages/changelog-versioning.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "Changelog & Versioning"
3+
emoji: "📝"
4+
description: "Track changes and understand versioning"
5+
---
6+
7+
<section class="hero">
8+
9+
# 📝 Changelog & Versioning
10+
11+
<p class="lead">Get started with <strong>UIElement</strong> by including it directly in your HTML or installing it via npm. Follow the steps below to set up your environment and start building reactive Web Components.</p>
12+
</section>
13+
14+
<section>
15+
16+
##
17+
18+
</section>

‎docs-src/pages/contributing-development.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: "Contributing & Development"
3+
emoji: "🤝"
4+
description: "How to contribute and set up the dev environment"
5+
---
6+
7+
<section class="hero">
8+
9+
# 🤝 Contributing & Development
10+
11+
<p class="lead">Get started with <strong>UIElement</strong> by including it directly in your HTML or installing it via npm. Follow the steps below to set up your environment and start building reactive Web Components.</p>
12+
</section>
13+
14+
<section>
15+
16+
##
17+
18+
</section>

0 commit comments

Comments
 (0)