Skip to content

Commit deb3752

Browse files
committed
Apply changes from current docs to 2.1 docs
1 parent 2479bc6 commit deb3752

File tree

12 files changed

+137
-164
lines changed

12 files changed

+137
-164
lines changed

versioned_docs/version-2.1/00-welcome.mdx

Lines changed: 28 additions & 43 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,8 +31,8 @@ import { translate } from '@docusaurus/Translate';
4431
/>
4532
</div>
4633

47-
<KolAlert _type="info">
48-
<KolLink _href="/docs/concepts/styling/theming" _label="Erfahren Sie hier, wieso KoliBri so hilfreich ist." />
34+
<KolAlert _type="info" _variant="card">
35+
<KolLink _label="Erfahren Sie hier, wieso KoliBri so hilfreich ist." _href="/docs/concepts/styling/theming" />
4936
</KolAlert>
5037

5138
<br />
@@ -65,17 +52,17 @@ import { translate } from '@docusaurus/Translate';
6552
## Mission
6653

6754
<p className="col-12">
68-
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
6956
"offen" spezifiziert, um möglichst langlebig und robust zu sein. Es kommt daher häufig vor, dass HTML-Kompositionen nicht
7057
ohne Weiteres barrierefrei, semantisch und valide sind. <KoliBri /> baut direkt auf den
71-
<kol-link _href="https://www.w3.org/standards/webdesign/" _target="w3c" _label="Webstandards"></kol-link> des
72-
<kol-link _href="https://www.w3.org" _target="w3c" _label="W3C"></kol-link> auf (Framework-agnostisch), ist dabei eine
73-
generische Referenzimplementierung des <kol-link
74-
_href="https://www.w3.org/WAI/standards-guidelines/wcag/"
75-
_target="wcag"
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
7661
_label="WCAG-Standards"
62+
_href="https://www.w3.org/WAI/standards-guidelines/wcag/"
63+
_target="blank"
7764
/>
78-
und der <kol-link _href="https://www.bitvtest.de/bitv_test.html" _target="bitv" _label="BITV"></kol-link> für die Barrierefreiheit
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.
@@ -108,7 +95,7 @@ import { translate } from '@docusaurus/Translate';
10895
<li>
10996
<strong>Zugänglichmachung:</strong> Die Artefakte und der Quellcode können von jedem frei und kostenlos
11097
wiederverwendet werden. Hierdurch leistet der ITZBund einen Beitrag im Sinne von{' '}
111-
<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" />.
11299
</li>
113100
<li>
114101
<strong>Gewährleistungs- und Haftungsausschluss:</strong> Mit der Wiederverwendung gehen keinerlei Gewährleistung
@@ -145,8 +132,7 @@ import { translate } from '@docusaurus/Translate';
145132
</p>
146133
<p className="col-12">
147134
<KolAlert _type="success" _variant="card">
148-
<KoliBri />
149-
-Komponenten lassen sich nahtlos in vorhandene Webseiten oder Webanwendungen integrieren und bringen ihren Style (-guide)
135+
<KoliBri />-Komponenten lassen sich nahtlos in vorhandene Webseiten oder Webanwendungen integrieren und bringen ihren Style (-guide)
150136
selbst mit und kapseln diesen nahezu vollständig von Außen ab.
151137
</KolAlert>
152138
</p>
@@ -155,14 +141,15 @@ import { translate } from '@docusaurus/Translate';
155141

156142
<p className="col-12">
157143
Web Components können technologisch sowohl Client-seitig (CSR), prerendered (SSG), als auch Server-seitig (SSR)
158-
gerendert werden. Das Rendering ist dabei von den jeweils technischen Rahmenbedingungen abhängig (
159-
<KolLink _href="https://web.dev/rendering-on-the-web/" _target="web.dev" _label={`https://web.dev`} />,{` `}
160-
<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"
161150
_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"
162-
_target="web.dev"
163-
_label={`https://medium.com`}
164-
/>
165-
).
151+
_target="blank"
152+
/>).
166153
</p>
167154
<p>
168155
<KolAlert _type="info" _variant="card">
@@ -178,9 +165,7 @@ import { translate } from '@docusaurus/Translate';
178165
<KolAlert _type="info" _variant="card">
179166
<small>
180167
🧪 Das Server-Side-Rendering von Web Components ist eine neue spannende Funktionalität, wo noch Anpassungen an den
181-
Prerenderer notwendig sein werden und wird daher unsererseits als experimentell eingestuft
182-
<br />(<KolLink _href="https://web.dev/declarative-shadow-dom/" _target="web.dev" _label={`https://web.dev`} />
183-
).
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" />).
184169
</small>
185170
</KolAlert>
186171
</p>
@@ -191,7 +176,7 @@ import { translate } from '@docusaurus/Translate';
191176
<KoliBri /> folgt den Prinzipien der semantischen Versionierung.
192177
</p>
193178
<p className="col-12">
194-
<b>Aufbau</b> einer Version:
179+
<strong>Aufbau</strong> einer Version:
195180
<ul>
196181
<li>
197182
Sie besteht in der Regel aus 3 Teilen (z. B. 1.0.2)
@@ -218,7 +203,7 @@ import { translate } from '@docusaurus/Translate';
218203
</ul>
219204
</p>
220205
<p className="col-12">
221-
Folgende <b>Hauptprinzipien</b> kommen dabei zur Anwendung:
206+
Folgende <strong>Hauptprinzipien</strong> kommen dabei zur Anwendung:
222207
<ul>
223208
<li>
224209
<b>Patch</b>: Beinhaltet Änderungen, die den aktuellen Funktionsumfang verbessern und in seiner Verwendung nicht
@@ -234,7 +219,7 @@ import { translate } from '@docusaurus/Translate';
234219
</li>
235220
</ul>
236221
Die komplette Beschreibung der SemVer finden Sie hier:{' '}
237-
<kol-link _href="https://semver.org/lang/de/" _target="semver" _label="https://semver.org/lang/de/"></kol-link>
222+
<KolLink _label="https://semver.org/lang/de/" _href="https://semver.org/lang/de/" _target="blank" />
238223
</p>
239224

240225
## Qualitätsziele

versioned_docs/version-2.1/03-faq.mdx

Lines changed: 6 additions & 6 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/project/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"/>.
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" />.
4444
- **Warum muss CSS in JavaScript verwalten 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
4646
ü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.
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 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 _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" />.

versioned_docs/version-2.1/10-get-started/1-first-steps.mdx

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

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

15-
<kol-alert _type="warning" _variant="card">
16-
Für Projekt im ITZBund gibt es ein vorgegebenes Seed-Projekt, welches über die internen Kommunikationswege angefragt werden kann.
17-
</kol-alert>
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>
1819

1920
## Neues Projekt erstellen
2021

0 commit comments

Comments
 (0)