fix: table rendering

Author: deleonio

dev/docs/00-welcome.mdx

@@ -23,6 +23,7 @@ import {
 } from '@public-ui/react';
 import { KoliBri } from '@site/src/components/KoliBri';
 import { KoliBriAbbr } from '@site/src/components/KoliBriAbbr';
+import { WelcomeQualityTable, WelcomeSupportTable } from '@site/src/components/docs/Welcome';
 import { translate } from '@docusaurus/Translate';
 
 <div className="flex gap-4">
@@ -242,70 +243,7 @@ import { translate } from '@docusaurus/Translate';
 <p className="col-12">
 	In der folgenden Tabelle werden die priorisierten Qualitäten von <KoliBri /> aufgelistet:
 </p>
-<KolTable
-	className="col-12"
-	_label="Priorisierte Qualitäten"
-	_minWidth="50em"
-	_headers={{
-		horizontal: [
-			[
-				{
-					label: 'Qualität',
-					key: 'quality',
-					width: '12em',
-				},
-				{
-					label: 'Priorität',
-					key: 'prio',
-					textAlign: 'center',
-					width: '5em',
-				},
-				{
-					label: 'Erläuterung',
-					key: 'desc',
-				},
-			],
-		],
-	}}
-	_data={[
-		{
-			quality: '<b>Kompatibilität</b>',
-			prio: 'AAA',
-			desc: 'W3C®-Standards, Framework-agnostisch und Open Source',
-		},
-		{
-			quality: '<b>Benutzbarkeit</b>',
-			prio: 'AAA',
-			desc: 'BIK BITV- und Usability-Test',
-		},
-		{
-			quality: '<b>Wartbarkeit</b>',
-			prio: 'AAA',
-			desc: 'DevOps, Technologie-Stack, Modularisierung und Automatisierung',
-		},
-		{
-			quality: '<b>Portierbarkeit</b>',
-			prio: 'AA',
-			desc: 'Anpassbarkeit an verschiedene Styleguides des Bundes oder anderer',
-		},
-		{
-			quality: '<b>Zuverlässigkeit</b>',
-			prio: 'AA',
-			desc: 'BIK BITV-, Axe-, Unit-, Snapshot-, E2E-Tests und Developer Experience (DX)',
-		},
-		{
-			quality: '<b>Performance</b>',
-			prio: 'A',
-			desc: 'KoliBri geht hier einen Kompromiss ein, da es die Entwicklung aktiv bei der Umsetzung barrierefreier Benutzeroberflächen unterstützt.',
-		},
-		{
-			quality: '<b>Sicherheit</b>',
-			prio: 'A',
-			desc: 'Web Components dienen der Präsentationsschicht und beinhalten selbst keine sensitiven Informationen',
-		},
-	]}
-></KolTable>
-<p />
+<WelcomeQualityTable lang="de" />
 
 ## Geräte-, Betriebssystem-, Browser- und Screenreader-Anforderungen
 
@@ -317,58 +255,4 @@ import { translate } from '@docusaurus/Translate';
 	Der Microsoft Internet Explorer wird explizit nicht unterstützt, um das Projekt und die Entwicklung nicht durch
 	Altlasten zu schwächen. <KoliBri /> investiert stattdessen konsequent in die Zukunft.
 </p>
-<KolTable
-	className="col-12"
-	_label="Angestrebt Geräte-, Betriebssystem-, Browser und Screenreader-Kompatibilität"
-	_minWidth="40em"
-	_headers={{
-		horizontal: [
-			[
-				{
-					label: 'Gerät',
-					key: 'device',
-					width: '10em',
-					textAlign: 'center',
-				},
-				{
-					label: 'Betriebssystem',
-					key: 'os',
-					width: '10em',
-					textAlign: 'center',
-				},
-				{
-					label: 'Browser',
-					key: 'browser',
-					width: '10em',
-					textAlign: 'center',
-				},
-				{
-					label: 'Screenreader',
-					key: 'screenreader',
-					width: '10em',
-					textAlign: 'center',
-				},
-			],
-		],
-	}}
-	_data={[
-		{
-			device: '<b>PC</b>',
-			os: 'Windows<br/>Linux<br/>MacOS',
-			browser: 'Chrome<br/>Firefox<br/>Edge<br/>Opera<br/>Safari (nur MacOS)',
-			screenreader: 'NVDA (nur ...)<br/>Jaws (nur ...)<br/>VoiceOver (nur MacOS)',
-		},
-		{
-			device: '<b>Tablet</b>',
-			os: 'Android<br/>iOS<br/>Windows',
-			browser: 'Chrome<br/>Firefox<br/>Edge<br/>Opera<br/>Safari (nur MacOS)',
-		},
-		{
-			device: '<b>Mobil</b>',
-			os: 'Android<br/>iOS',
-			browser: 'Chrome<br/>Firefox<br/>Edge<br/>Opera<br/>Safari (nur MacOS)',
-			screenreader: 'TalkBack (nur Android)',
-		},
-	]}
-></KolTable>
-<p />
+<WelcomeSupportTable lang="de" />

dev/docs/90-health-state.mdx

@@ -8,166 +8,13 @@ tags:
 ---
 
 import { KolHeading, KolTable, KolIndentedText } from '@public-ui/react';
-import { getPackageName } from '@site/src/shares/utils';
+import { dangerouslySetInnerHTML, getPackageName } from '@site/src/shares/utils';
+import { HealthStateTable } from '@site/src/components/docs/HealthState';
 
 In der nachfolgenden Tabelle werden zahlreiche Informationen zu den Paketen angezeigt, um einen Überblick über deren Gesundheitszustand zu erhalten.
 
-<KolTable
-	className="col-12"
-	_label="Liste von Statuswerte zu den Paketen"
-	_minWidth="95em"
-	_headers={{
-		horizontal: [
-			[
-				{
-					label: 'Package',
-					key: 'name',
-					render: (el, cell, tupel) => `${getPackageName(tupel.scope, tupel.name)}`,
-					width: '15em',
-				},
-				{
-					label: 'Version',
-					key: 'name',
-					textAlign: 'center',
-					render: (el, cell, tupel) => `<kol-link _href="https://www.npmjs.com/package/${getPackageName(
-						tupel.scope,
-						tupel.name
-					)}" _target="npmjs" _label="">
-	<img alt="" src="https://img.shields.io/npm/v/${getPackageName(tupel.scope, tupel.name)}" />
-</kol-link>`,
-				},
-				{
-					label: 'Downloads',
-					key: 'name',
-					textAlign: 'center',
-					render: (el, cell, tupel) => `<kol-link _href="https://npmcharts.com/compare/${getPackageName(
-						tupel.scope,
-						tupel.name
-					)}" _target="npmcharts" _label="">
-	<img alt="" src="https://img.shields.io/npm/dt/${getPackageName(tupel.scope, tupel.name)}.svg" />
-</kol-link>`,
-				},
-				{
-					label: 'Quality',
-					key: 'name',
-					textAlign: 'center',
-					render: () => `<img alt="" src="https://packagequality.com/shield/create-kolibri.svg" />`,
-				},
-				{
-					label: 'Install size',
-					key: 'name',
-					textAlign: 'center',
-					render: (el, cell, tupel) => `<kol-link _href="https://packagephobia.com/result?p=${getPackageName(
-						tupel.scope,
-						tupel.name
-					)}" _target="packagephobia" _label="">
-	<img alt="" src="https://packagephobia.now.sh/badge?p=${getPackageName(tupel.scope, tupel.name)}" />
-</kol-link>`,
-				},
-				{
-					label: 'Dependencies',
-					key: 'name',
-					textAlign: 'center',
-					render: (el, cell, tupel) => `<kol-link _href="https://libraries.io/npm/${getPackageName(
-						tupel.scope,
-						tupel.name,
-						'%2F'
-					)}" _target="libraries" _label="">
-	<img alt="" src="https://img.shields.io/librariesio/release/npm/${getPackageName(tupel.scope, tupel.name)}" />
-</kol-link>`,
-				},
-				{
-					label: 'Health',
-					key: 'name',
-					render: (el, cell, tupel) => `<kol-link _href="https://snyk.io/advisor/npm-package/${getPackageName(
-						tupel.scope,
-						tupel.name
-					)}" _target="snyk" _label="">
-	<img alt="" src="https://snyk.io/advisor/npm-package/${getPackageName(tupel.scope, tupel.name)}/badge.svg" />
-</kol-link>`,
-				},
-				{
-					label: 'Vulnerabilities*',
-					key: 'name',
-					textAlign: 'center',
-					render: (el, cell, tupel) => `<kol-link _href="https://snyk.io/advisor/npm-package/${getPackageName(
-						tupel.scope,
-						tupel.name,
-						'%2F'
-					)}" _target="snyk" _label="">
-	<img alt="" src="https://snyk.io/test/npm/${getPackageName(tupel.scope, tupel.name)}/badge.svg" />
-</kol-link>`,
-				},
-			],
-		],
-	}}
-	_data={[
-		{
-			scope: '@public-ui',
-			name: 'components',
-		},
-		{
-			scope: '@public-ui',
-			name: 'core',
-		},
-		{
-			scope: '@public-ui',
-			name: 'schema',
-		},
-		{
-			scope: '@public-ui',
-			name: 'themes',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v17',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v16',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v15',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v14',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v13',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v12',
-		},
-		{
-			scope: '@public-ui',
-			name: 'angular-v11',
-		},
-		{
-			scope: '@public-ui',
-			name: 'preact',
-		},
-		{
-			scope: '@public-ui',
-			name: 'react',
-		},
-		{
-			scope: '@public-ui',
-			name: 'solid',
-		},
-		{
-			scope: '@public-ui',
-			name: 'vue',
-		},
-		{
-			scope: '@public-ui',
-			name: 'hydrate',
-		},
-	]}
-></KolTable>
+<HealthStateTable lang="de" version="2" />
+
 <div
 	style={{
 		display: 'block',