Skip to content

Commit f1f797f

Browse files
Merge remote-tracking branch 'origin/main' into 6828-Fixed-Theming-Link
# Conflicts: # docs/20-concepts/05-styling/34-theming.mdx # i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/05-styling/34-theming.mdx # versioned_docs/version-2.1/20-concepts/05-styling/34-theming.mdx
2 parents 7bfc6d8 + de1fce9 commit f1f797f

File tree

106 files changed

+1103
-1585
lines changed

Some content is hidden

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

106 files changed

+1103
-1585
lines changed

.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
**/assets/**
2+
**/*.md
3+
**/*.mdx

docs/00-welcome.mdx

Lines changed: 36 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,11 @@ tags:
77
- Getting started
88
---
99

10-
import {
11-
KolAbbr,
12-
KolAlert,
13-
KolCard,
14-
KolHeading,
15-
KolIconIcofont,
16-
KolIndentedText,
17-
KolIcon,
18-
KolKolibri,
19-
KolDetails,
20-
KolLink,
21-
KolLogo,
22-
KolTable,
23-
} from '@public-ui/react';
24-
import { KoliBri } from '@site/src/components/KoliBri';
25-
import { KoliBriAbbr } from '@site/src/components/KoliBriAbbr';
26-
import { WelcomeQualityTable, WelcomeSupportTable } from '@site/src/components/docs/Welcome';
27-
import { translate } from '@docusaurus/Translate';
10+
11+
import {KolAlert, KolKolibri, KolLink, KolLogo,} from '@public-ui/react';
12+
import {KoliBri} from '@site/src/components/KoliBri';
13+
import {KoliBriAbbr} from '@site/src/components/KoliBriAbbr';
14+
import {WelcomeQualityTable, WelcomeSupportTable} from '@site/src/components/docs/Welcome';
2815

2916
<div className="flex gap-4">
3017
<KolLogo
@@ -44,11 +31,8 @@ import { translate } from '@docusaurus/Translate';
4431
/>
4532
</div>
4633

47-
<KolAlert _type="info">
48-
<KolLink _href="/docs/concepts/styling/theming" _label="">
49-
{' '}
50-
Erfahren Sie hier, wieso <KoliBri /> so hilfreich ist.
51-
</KolLink>
34+
<KolAlert _type="info" _variant="card">
35+
<KolLink _label="Erfahren Sie hier, wieso KoliBri so hilfreich ist." _href="/docs/concepts/styling/theming" />
5236
</KolAlert>
5337

5438
<br />
@@ -68,14 +52,17 @@ import { translate } from '@docusaurus/Translate';
6852
## Mission
6953

7054
<p className="col-12">
71-
Der <kol-link _href="https://html.spec.whatwg.org" _target="w3c" _label="HTML-Webstandard"></kol-link> ist an sich sehr
55+
Der <KolLink _label="HTML-Webstandard" _href="https://html.spec.whatwg.org" _target="_blank" /> ist an sich sehr
7256
"offen" spezifiziert, um möglichst langlebig und robust zu sein. Es kommt daher häufig vor, dass HTML-Kompositionen nicht
7357
ohne Weiteres barrierefrei, semantisch und valide sind. <KoliBri /> baut direkt auf den
74-
<kol-link _href="https://www.w3.org/standards/webdesign/" _target="w3c" _label="Webstandards"></kol-link> des
75-
<kol-link _href="https://www.w3.org" _target="w3c" _label="W3C"></kol-link> auf (Framework-agnostisch), ist dabei eine
76-
generische Referenzimplementierung des
77-
<kol-link _href="https://www.w3.org/WAI/standards-guidelines/wcag/" _target="wcag" _label="WCAG-Standards"></kol-link>
78-
und der <kol-link _href="https://www.bitvtest.de/bitv_test.html" _target="bitv" _label="BITV"></kol-link> für die Barrierefreiheit
58+
<KolLink _label="Webstandards" _href="https://www.w3.org/standards/webdesign/" _target="_blank" /> des
59+
<KolLink _label="W3C" _href="https://www.w3.org" _target="_blank" /> auf (Framework-agnostisch), ist dabei eine
60+
generische Referenzimplementierung des <KolLink
61+
_label="WCAG-Standards"
62+
_href="https://www.w3.org/WAI/standards-guidelines/wcag/"
63+
_target="_blank"
64+
/>
65+
und der <KolLink _label="BITV" _href="https://www.bitvtest.de/bitv_test.html" _target="_blank" /> für die Barrierefreiheit
7966
und als eine Multi-Theming-fähige Präsentationsschicht umgesetzt. Es gibt keinerlei fachlichen Bezug und keine Datenübertragungsfunktionalitäten.
8067
Damit ist <KoliBri /> für die Realisierung statischer Webseiten als auch dynamischer Webanwendungen unterschiedlicher Corporate
8168
Designs und Styleguides gleichermaßen wiederverwendbar und somit für Open Source sehr interessant.
@@ -104,12 +91,11 @@ import { translate } from '@docusaurus/Translate';
10491
<p className="col-12">
10592
<KoliBri /> wird unter der <strong>EUROPEAN UNION PUBLIC LICENCE v1.2</strong> Open Source freigegeben. Folgende
10693
Aspekte sind insbesondere dadurch berücksichtigt:
107-
<br />
10894
<ul>
10995
<li>
11096
<strong>Zugänglichmachung:</strong> Die Artefakte und der Quellcode können von jedem frei und kostenlos
11197
wiederverwendet werden. Hierdurch leistet der ITZBund einen Beitrag im Sinne von{' '}
112-
<kol-link _href="https://publiccode.eu/" _target="publiccode" _label="„Public Money – Public Code“"></kol-link>.
98+
<KolLink _label="„Public Money – Public Code“" _href="https://publiccode.eu/" _target="_blank" />.
11399
</li>
114100
<li>
115101
<strong>Gewährleistungs- und Haftungsausschluss:</strong> Mit der Wiederverwendung gehen keinerlei Gewährleistung
@@ -145,9 +131,8 @@ import { translate } from '@docusaurus/Translate';
145131
werden.
146132
</p>
147133
<p className="col-12">
148-
<KolAlert _type="success">
149-
<KoliBri />
150-
-Komponenten lassen sich nahtlos in vorhandene Webseiten oder Webanwendungen integrieren und bringen ihren Style (-guide)
134+
<KolAlert _type="success" _variant="card">
135+
<KoliBri />-Komponenten lassen sich nahtlos in vorhandene Webseiten oder Webanwendungen integrieren und bringen ihren Style (-guide)
151136
selbst mit und kapseln diesen nahezu vollständig von Außen ab.
152137
</KolAlert>
153138
</p>
@@ -156,34 +141,33 @@ import { translate } from '@docusaurus/Translate';
156141

157142
<p className="col-12">
158143
Web Components können technologisch sowohl Client-seitig (CSR), prerendered (SSG), als auch Server-seitig (SSR)
159-
gerendert werden. Das Rendering ist dabei von den jeweils technischen Rahmenbedingungen abhängig (
160-
<KolLink _href="https://web.dev/rendering-on-the-web/" _target="web.dev" _label={`https://web.dev`} />,{` `}
161-
<KolLink
144+
gerendert werden. Das Rendering ist dabei von den jeweils technischen Rahmenbedingungen abhängig (<KolLink
145+
_label="https://web.dev"
146+
_href="https://web.dev/rendering-on-the-web/"
147+
_target="_blank"
148+
/>, <KolLink
149+
_label="https://medium.com"
162150
_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"
163-
_target="web.dev"
164-
_label={`https://medium.com`}
165-
/>
166-
).
151+
_target="_blank"
152+
/>).
167153
</p>
168154
<p>
169-
<KolIndentedText className="col-12">
155+
<KolAlert _type="info" _variant="card">
170156
<small>
171157
💡 Es ist zu beachten, dass Web Components ein auf JavaScript basierender Webstandard ist. Das
172158
Server-Side-Rendering ermöglicht das Prerendern der Web Component für eine optimale Anzeigegeschwindigkeit auf dem
173159
Client. Wenn Client-seitiges JavaScript erlaubt ist, steht die vollständige Dynamik der Web Component auch
174160
Client-seitig zur Verfügung. Möchte man jedoch Client-seitig kein JavaScript einsetzen, wird die Web Component
175161
geprerendert angezeigt, aber die Dynamik geht dadurch verloren.
176162
</small>
177-
</KolIndentedText>
163+
</KolAlert>
178164
<br />
179-
<KolIndentedText className="col-12">
165+
<KolAlert _type="info" _variant="card">
180166
<small>
181167
🧪 Das Server-Side-Rendering von Web Components ist eine neue spannende Funktionalität, wo noch Anpassungen an den
182-
Prerenderer notwendig sein werden und wird daher unsererseits als experimentell eingestuft (
183-
<KolLink _href="https://web.dev/declarative-shadow-dom/" _target="web.dev" _label={`https://web.dev`} />
184-
).
168+
Prerenderer notwendig sein werden und wird daher unsererseits als experimentell eingestuft (<KolLink _label="https://web.dev" _href="https://web.dev/declarative-shadow-dom/" _target="_blank" />).
185169
</small>
186-
</KolIndentedText>
170+
</KolAlert>
187171
</p>
188172

189173
## Versionierung
@@ -192,7 +176,7 @@ import { translate } from '@docusaurus/Translate';
192176
<KoliBri /> folgt den Prinzipien der semantischen Versionierung.
193177
</p>
194178
<p className="col-12">
195-
Aufbau einer Version:
179+
<strong>Aufbau</strong> einer Version:
196180
<ul>
197181
<li>
198182
Sie besteht in der Regel aus 3 Teilen (z. B. 1.0.2)
@@ -219,7 +203,7 @@ import { translate } from '@docusaurus/Translate';
219203
</ul>
220204
</p>
221205
<p className="col-12">
222-
Folgende Hauptprinzipien kommen dabei zur Anwendung:
206+
Folgende <strong>Hauptprinzipien</strong> kommen dabei zur Anwendung:
223207
<ul>
224208
<li>
225209
<b>Patch</b>: Beinhaltet Änderungen, die den aktuellen Funktionsumfang verbessern und in seiner Verwendung nicht
@@ -234,8 +218,8 @@ import { translate } from '@docusaurus/Translate';
234218
Funktionsumfang in seiner Verwendung ändern dürfen.
235219
</li>
236220
</ul>
237-
Die komplette Beschreibubng der SemVer finden Sie hier:{' '}
238-
<kol-link _href="https://semver.org/lang/de/" _target="semver" _label="https://semver.org/lang/de/"></kol-link>
221+
Die komplette Beschreibung der SemVer finden Sie hier:{' '}
222+
<KolLink _label="https://semver.org/lang/de/" _href="https://semver.org/lang/de/" _target="_blank" />
239223
</p>
240224

241225
## Qualitätsziele

docs/03-faq.mdx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { KolLink } from '@public-ui/react';
3131
- **Was besagt die Lizenzierung?**<br/>
3232
Die EUPL erlaubt die uneingeschränkte Nutzung der Artefakt, die auf konfigurative Weise an die eigenen Bedürfnisse angepasst werden können.
3333
Andererseits erzwingt sie die Offenlegung von Änderungen, die beim Kopieren von Quellcode aus KoliBri hervorgegangen sind (Copy-Left).
34-
Mehr hierzu finden Sie in der <KolLink _href="/docs/license" _label="Lizenz" />.
34+
Mehr hierzu finden Sie in der <KolLink _label="Lizenz" _href="/docs/project/license" />.
3535

3636
## Theming und Styling
3737

@@ -40,20 +40,20 @@ import { KolLink } from '@public-ui/react';
4040
- **Wie funktioniert das Theming?**<br/>
4141
In der Regel werden Web Components mit festem Styling erstellt. KoliBri trennt die semantisch barrierefreien Komponenten vom Styling und stellt dafür eine Register-Methode zum Kombinieren zur Verfügung. Da die Web Components im Browser grundsätzlich registriert (define) werden müssen, besteht hier die Möglichkeit, die Komponenten mit einem definierten Theme zu laden.
4242
- **Wie kann man ein eigenes Theme erstellen?**<br/>
43-
Wir arbeiten stets daran, das Erstellen und Pflegen von Themes weiter zu vereinfachen. Hierzu dienen z.B. das Basis-Styling (reines Layout) der Komponenten ab Version 1.5. Aufsetzen kann man einfach durch die Erstellung einer Theme-Definition, z.B. mit einem eigenen Theme-Projekt (NPM-Paket) mittels der <KolLink _href="https://github.com/public-ui/kolibri/blob/45726c50d7f28c9c595442b2241582816eca5670/packages/create-kolibri/templates/kolibri-library/packages/components/src/global/script.ts#L8" _label="TS-Datei" _target="github"/>. Hilfreich um Erstellen und Pflegen von Themes ist auch unser<KolLink _href="/designer/" _label=" Theme-Designer" _target="designer"/>.
44-
- **Warum muss CSS in JavaScript verwalten werden?**<br/>
43+
Wir arbeiten stets daran, das Erstellen und Pflegen von Themes weiter zu vereinfachen. Hierzu dienen z.B. das Basis-Styling (reines Layout) der Komponenten ab Version 1.5. Aufsetzen kann man einfach durch die Erstellung einer Theme-Definition, z.B. mit einem eigenen Theme-Projekt (NPM-Paket) mittels der <KolLink _label="TS-Datei" _href="https://github.com/public-ui/kolibri/blob/45726c50d7f28c9c595442b2241582816eca5670/packages/create-kolibri/templates/kolibri-library/packages/components/src/global/script.ts#L8" _target="_blank" />. Hilfreich um Erstellen und Pflegen von Themes ist auch unser <KolLink _label="Theme-Designer" _href="/designer/" _target="_blank" />.
44+
- **Warum muss CSS in JavaScript verwaltet werden?**<br/>
4545
Das Stylen von KoliBri-Komponenten erfolgt nicht allein eingebundenes CSS oder die Verwendung von CSS-Frameworks (wie z.B. Bootstrap, Material-UI, Tailwind CSS, etc.), sondern
46-
über das technische Setzen von CSS an der Komponente. Das hat den Vorteil, dass die Komponenten vom äußeren CSS unabhängig sind. Die Robustheit ist ein architektonischen Qualitätsziel. Sie spiegelt sich darin wieder, das nur die Komponente selbst über ihr Styling entscheidet.
46+
über das technische Setzen von CSS an der Komponente. Das hat den Vorteil, dass die Komponenten vom äußeren CSS unabhängig sind. Die Robustheit ist ein architektonisches Qualitätsziel. Sie spiegelt sich darin wider, dass nur die Komponente selbst über ihr Styling entscheidet.
4747
- **Wozu braucht man das Schema?**<br/>
48-
KoliBri basiert auf einer ausgeklügelten <KolLink _href="/docs/concepts/architecture" _label="Architektur" />. Beispielsweise dient das kleine Schema-Paket (@public-ui/schema) dazu, die Tag-Namen und Sprach-Keys der KoliBri-Komponenten unabhängig von der konkreten Implementierung zu definieren. Dies ermöglicht bei der Theme-Erstellung ein komplett losgelöstes Arbeiten mit Autovervollständigung, ohne aber die Komponenten und deren Abhängigkeiten zu benötigen. Das hat Vorteile bei manchen Integrationsszenarien, wie z.B. bei statischen Seiten oder Content-Management-Systemen (CMS).
48+
KoliBri basiert auf einer ausgeklügelten <KolLink _label="Architektur" _href="/docs/concepts/architecture" />. Beispielsweise dient das kleine Schema-Paket (@public-ui/schema) dazu, die Tag-Namen und Sprach-Keys der KoliBri-Komponenten unabhängig von der konkreten Implementierung zu definieren. Dies ermöglicht bei der Theme-Erstellung ein komplett losgelöstes Arbeiten mit Autovervollständigung, ohne aber die Komponenten und deren Abhängigkeiten zu benötigen. Das hat Vorteile bei manchen Integrationsszenarien, wie z.B. bei statischen Seiten oder Content-Management-Systemen (CMS).
4949

5050
## Technisches
5151

5252
- **Wieso können KoliBri-Komponenten wirklich barrierefrei sein?**<br/>
5353
Die KoliBri-Komponenten sind softwarearchitektonisch so designed, dass sie sich nur über Properties instrumentieren lassen und nicht über eignenes reingebbares HTML. Das bedeutet, dass die Komponenten nur über die API (Properties) gesteuert werden können. Das ist ein Qualitätsmerkmal, da die Komponenten so nicht von außen manipuliert werden können. Die Komponenten sind sehr restriktiv und können somit in sich immer barrierefrei sein.<br/>
54-
Um aus dieser Restriktivität ausbrechen zu können, gibt es den <KolLink _href="/docs/concepts/expert-slot" _label="Expert-Slot" />, der es ermöglicht, eigenes HTML in die Komponente einzubetten. Die Barrierefreiheit über den Expert-Slot liegt in den Händen des Experten (Developers) und sollte nur in Ausnahmefällen verwendet werden.
54+
Um aus dieser Restriktivität ausbrechen zu können, gibt es den <KolLink _label="Expert-Slot" _href="/docs/concepts/expert-slot" />, der es ermöglicht, eigenes HTML in die Komponente einzubetten. Die Barrierefreiheit über den Expert-Slot liegt in den Händen des Experten (Developers) und sollte nur in Ausnahmefällen verwendet werden.
5555
- **Warum werden die Eigenschaften von Komponenten manchmal abweichend vom HTML-Naming benannt?**<br/>
56-
Um die Erlernbarkeit von KoliBri zu einfach zu halten, wird in der Regel immer das Naming des HTML verwenden. Doch auch der HTML-Standard ist in seinem Naming über mehrerer Element (Komponenten) nicht einheitlich. Und daher kommt es dazu, dass wir in KoliBri für gleichartige Eigenschaften übergreifend einheitliche Namen gewählt haben. Mehr dazu finden Sie im Konzept <KolLink _href="/docs/concepts/properties" _label="Eigenschaften" />.
56+
Um die Erlernbarkeit von KoliBri einfach zu halten, wird in der Regel die Benennung aus dem HTML übernommen. Doch auch der HTML-Standard ist in seinem Naming über mehrere Elemente (Komponenten) nicht einheitlich. Und daher kommt es dazu, dass wir in KoliBri für gleichartige Eigenschaften übergreifend einheitliche Namen gewählt haben. Mehr dazu finden Sie im Konzept <KolLink _label="Eigenschaften" _href="/docs/concepts/properties" />.
5757

5858
## Barrierefreiheit
5959

@@ -62,4 +62,4 @@ import { KolLink } from '@public-ui/react';
6262

6363
## Noch Fragen offen?
6464

65-
Wenn noch Fragen offen sind, dann schreiben Sie uns gerne eine E-Mail an <KolLink _href="mailto:kolibri@itzbund.de" _label="kolibri@itzbund.de" _target="email" _icons="codicon codicon-mail" />.
65+
Wenn noch Fragen offen sind, dann schreiben Sie uns gerne eine E-Mail an <KolLink _href="mailto:kolibri@itzbund.de" _label="kolibri@itzbund.de" _icons="codicon codicon-mail" />.

docs/10-get-started/1-first-steps.mdx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1+
import { KolAlert, KolLink } from '@public-ui/react';
2+
13
# Erste Schritte
24

3-
<div class="grid md:grid-cols-2 mb-4">
4-
<kol-card _label="Cheat Sheet herunterladen" _level="2">
5-
<kol-link
6-
slot=""
7-
_href="https://public-ui.github.io/cheat-sheet/"
8-
_icons="codicon codicon-code"
9-
_label="false"
10-
_target="cheat-sheet"
5+
<div class="grid md:grid-cols-12 mb-4">
6+
<KolAlert _label="Cheat Sheet herunterladen" _level="2" _type="info" _variant="card">
7+
<KolLink
118
_label="Klicken Sie hier, um sich das Cheat-Sheet zum Entwickeln anzuschauen und herunterzuladen."
12-
></kol-link>
13-
</kol-card>
9+
_href="https://public-ui.github.io/cheat-sheet/"
10+
_target="_blank"
11+
/>
12+
</KolAlert>
1413
</div>
1514

16-
> **Hinweis:** Für Projekt im ITZBund gibt es ein vorgegebenes Seed-Projekt, welches über die internen Kommunikationswege angefragt werden kann.
15+
<KolAlert _type="warning" _variant="card">
16+
Für Projekt im ITZBund gibt es ein vorgegebenes Seed-Projekt, welches über die internen Kommunikationswege angefragt
17+
werden kann.
18+
</KolAlert>
1719

1820
## Neues Projekt erstellen
1921

@@ -112,7 +114,7 @@ import "./index.css";
112114
+ .catch(console.warn);
113115
```
114116

115-
#### 3. module einbinden
117+
#### 3. Modul einbinden
116118

117119
index.html
118120

@@ -191,7 +193,7 @@ const app = createApp(App)
191193
app.mount('#app')
192194
```
193195

194-
#### 3. module einbinden
196+
#### 3. Modul einbinden
195197

196198
index.html
197199

@@ -311,7 +313,7 @@ export const AppComponent = () => {
311313
};
312314
```
313315

314-
### IV ohne Framework
316+
### IV Ohne Framework
315317

316318
<kol-tabs _headers="['npm', 'pnpm', 'yarn']" _tabs='[{"_label":"NPM"},{"_label":"PNPM"},{"_label":"YARN"}]'>
317319
<div>npm i @public-ui/components @public-ui/themes</div>
@@ -346,7 +348,7 @@ Um Codevervollständigung zu erhalten kann es notwendig sein `.vscode/settings.j
346348

347349
Hierbei ist die Web-Component Schreibweise (kebab-case) zu verwenden. (z.B.: `<kol-heading _label="">`)
348350

349-
### V statische Webseite
351+
### V Statische Webseite
350352

351353
Um KoliBri in eine statische Webseite einzubauen muss lediglich das folgende Script-Tag eingebunden werden.
352354
Sofern Schriftarten und/oder Icons verwendet werden, müssen diese, wie oben beschrieben, eingebunden werden.
@@ -364,9 +366,9 @@ Hierbei ist die Web-Component Schreibweise (kebab-case) zu verwenden. (z.B.: `<k
364366

365367
## Weitere Optionen
366368

367-
### Developer Tools
369+
### Entwickler Werkzeuge
368370

369-
Mittels der folgenden Konfiguration in der HTML-Datei können die Developer-Tools von KoliBri aktiviert werden.
371+
Mittels der folgenden Konfiguration in der HTML-Datei können die Entwickler-Werkzeuge von KoliBri aktiviert werden.
370372

371373
```html
372374

0 commit comments

Comments
 (0)