Skip to content

feat(docs): enhance getting started guide with integration steps for … #447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deleonio wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(docs): enhance getting started guide with integration steps for … #447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa9e12e
feat: update framework documentation and playground links
deleonio Dec 14, 2025
ee2fd76
Merge branch 'main' of https://github.com/public-ui/public-ui.github.…
deleonio Dec 17, 2025
6b10a9a
Refactor HomepageButtons to use constants for URLs
deleonio Dec 17, 2025
b97d224
Refactor HomepageFeatures and LanguageSwitch to use useBaseUrl for UR…
deleonio Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
432 changes: 101 additions & 331 deletions docs/10-get-started/1-first-steps.mdx
View file
Open in desktop

Large diffs are not rendered by default.

30 changes: 19 additions & 11 deletions docs/10-get-started/5-frameworks.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,13 @@ Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <KolLink _label="N
name: '@public-ui/themes',
desc: 'Beinhaltet zahlreiche Themes für die KoliBri-Basiskomponenten.',
},
{
name: '@public-ui/react',
desc: 'Adapter für das Framework React (v16-v18).',
},
{
name: '@public-ui/react-v19',
desc: 'Adapter für das Framework React.',
desc: 'Adapter für das Framework React (v19).',
},
{
name: '@public-ui/solid',
Expand All @@ -75,6 +79,10 @@ Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <KolLink _label="N
name: '@public-ui/vue',
desc: 'Adapter für das Framework Vue.',
},
{
name: '@public-ui/vaadin',
desc: 'Adapter für das Framework Vaadin.',
},
{
name: '@public-ui/hydrate',
desc: 'Beinhaltet Funktionen zum Generieren von HTML-Strings der Komponenten (SSR).',
Expand All @@ -98,18 +106,18 @@ Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <KolLink _label="N

| Framework | |
| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="/assets/webcomponent.png" width="150" alt="Logo von Web Component" /> | <b>Web Components</b><br/>Alle Komponenten von <b>KoliBri</b> sind gemäß dem Web Components Standard umgesetzt. Somit können die Komponenten in der Regel in allen modernen Projekten wiederverwendet werden. <kol-alert _type="info">KoliBri lässt sich einbinden wie jQuery und ist somit auch für Server-Side-Rendering, wie PHP, JSF usw., interessant.</kol-alert> |
| <img src="/assets/react.png" width="150" alt="Logo von React" /> | <b>React-Components</b> (empfohlen)<br/>Alternativ zu den reinen Web Componenten bieten wir einen Adapter für **React** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/assets/solid.png" width="150" alt="Logo von Solid" /> | <b>Solid-Components</b><br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Solid** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/assets/angular.png" width="150" alt="Logo von Angular" /> | <b>Angular-Components</b> (>= 19)<br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Angular** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/assets/vue.png" width="150" alt="Logo von Vue" /> | <b>Vue-Components</b> <br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Vue** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/assets/preact.png" width="150" alt="Logo von Preact" /> | <b>Preact-Components</b> (experimentell)<br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Preact** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/assets/svelte.png" width="150" alt="Logo von Svelte" /> | <b>Svelte-Components</b> (offen)<br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Svelte** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/assets/ember.png" width="150" alt="Logo von Ember" /> | <b>Ember-Components</b> (offen)<br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Ember** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/webcomponent.png" width="150" alt="Logo von Web Component" /> | <b>Web Components</b><br/>Alle Komponenten von <b>KoliBri</b> sind gemäß dem Web Components Standard umgesetzt. Somit können die Komponenten in der Regel in allen modernen Projekten wiederverwendet werden. <kol-alert _type="info">KoliBri lässt sich einbinden wie jQuery und ist somit auch für Server-Side-Rendering, wie PHP, JSF usw., interessant.</kol-alert> |
| <img src="/next/assets/react.png" width="150" alt="Logo von React" /> | <b>React-Components</b> (empfohlen)<br/>Alternativ zu den reinen Web Componenten bieten wir einen Adapter für **React** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/solid.png" width="150" alt="Logo von Solid" /> | <b>Solid-Components</b><br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Solid** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/angular.png" width="150" alt="Logo von Angular" /> | <b>Angular-Components</b> (>= 19)<br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Angular** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/vue.png" width="150" alt="Logo von Vue" /> | <b>Vue-Components</b> <br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Vue** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/preact.png" width="150" alt="Logo von Preact" /> | <b>Preact-Components</b><br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Preact** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/svelte.png" width="150" alt="Logo von Svelte" /> | <b>Svelte-Components</b><br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Svelte** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |
| <img src="/next/assets/ember.png" width="150" alt="Logo von Ember" /> | <b>Ember-Components</b> (offen)<br/>Alternativ zu den reinen Web Components bieten wir einen Adapter für **Ember** an. Es wird so sichergestellt, dass sich die Web Component möglichst nahtlos und voll typisiert in die Entwicklung integriert. |

### Server-Side-Frameworks

| Framework | |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="/assets/astro.png" width="150" alt="Logo von Astro" /> | <b>Astro</b><br/>Die Integration erfolgt mittels der <b>React- und Preact-Components</b>. Hierbei werden die Framework-Componentens Server-seitig und die Web Components Client-seitig gerendert. |
| <img src="/assets/next.js.png" width="150" alt="Logo von Next.js" /> | <b>Next.js</b><br/>Die Integration erfolgt mittels der <b>React-Components</b> (CSR der Web Components). Hierbei werden die Framework-Componentens Server-seitig und die Web Components Client-seitig gerendert. |
| <img src="/next/assets/astro.png" width="150" alt="Logo von Astro" /> | <b>Astro</b><br/>Die Integration erfolgt mittels der <b>React- und Preact-Components</b>. Hierbei werden die Framework-Componentens Server-seitig und die Web Components Client-seitig gerendert. |
| <img src="/next/assets/next.js.png" width="150" alt="Logo von Next.js" /> | <b>Next.js</b><br/>Die Integration erfolgt mittels der <b>React-Components</b> (CSR der Web Components). Hierbei werden die Framework-Componentens Server-seitig und die Web Components Client-seitig gerendert. |
15 changes: 10 additions & 5 deletions docs/10-get-started/7-playground.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import KoliBri from '@site/src/components/KoliBri';
import PlaygroundCards from '@site/src/components/PlaygroundCards';

# Playground

Probiere <KoliBri /> direkt in Deinem Browser aus, ohne etwas installieren oder einrichten zu müssen.

Sie sind vor allem nützlich für:
## Schnelle Code-Beispiele erstellen

- Testen von <KoliBri />
- Melden von Fehlern
Wähle die gewünschte <KoliBri />-Version:

<PlaygroundCards majorVersion={2} />
- [**StackBlitz (v4)** – Aktuelle stabile Version](https://stackblitz.com/edit/vitejs-vite-zmnbtsbi)
- [**StackBlitz (v3)** – Vorherige Version](https://stackblitz.com/edit/vitejs-vite-ihadrw)
- [**StackBlitz (v2)** – Legacy-Version](https://stackblitz.com/edit/vitejs-vite-kkfhk5)
- [**StackBlitz (v1)** – Legacy-Version](https://stackblitz.com/edit/vitejs-vite-dcg6xo)

:::tip Empfehlung
Nutze **v4** für neue Projekte – hier findest Du die neuesten Features und Bugfixes.
:::
Loading
Loading