Update translations and improve accessibility in documentation compon… (#311)

Author: deleonio

docusaurus.config.ts

@@ -76,10 +76,9 @@ const config: Config = {
 				},
 				items: [
 					{
-						type: 'docsVersionDropdown',
-						position: 'left',
-						dropdownActiveClassDisabled: true,
-						dropdownItemsAfter: [
+						label: 'Version 2',
+						position: 'right',
+						items: [
 							{
 								type: 'html',
 								className: 'dropdown-archived-versions',

i18n/de/code.json

@@ -352,6 +352,6 @@
 		"message": "View the example of the component"
 	},
 	"custom.docs-version-hint": {
-		"message": "This documentation covers KoliBri - Public UI {version} LTS. You can find the latest documentation here: {link}"
+		"message": "This documentation covers KoliBri - Public UI {version}. For the latest version, see {link}."
 	}
 }

i18n/en/code.json

@@ -12,12 +12,14 @@ export default function DocumentationVersionHint(): ReactNode {
 				values={{
 					link: (
 						<KolLink
-							style={{ padding: '0 .5rem' }}
+							style={{
+								padding: '0 .25rem',
+							}}
 							_href={`https://public-ui.github.io${i18n.currentLocale === 'en' ? '/en' : ''}`}
 							_label={'https://public-ui.github.io'}
 						></KolLink>
 					),
-					version: <b>2.2</b>,
+					version: <b>v2 (LTS)</b>,
 				}}
 			/>
 		</p>

src/components/DocumentationVersionHint.tsx

@@ -193,9 +193,10 @@ kol-link-button {
 	background: linear-gradient(90deg, #facc15, #fbbf24); /* leichter gelber Verlauf */
 	color: #1f2937; /* dunkles Grau für gute Lesbarkeit */
 	font-weight: 500;
+	margin: 0;
 	text-align: center;
-	padding: 0.75rem 1rem;
-	font-size: 0.95rem;
+	padding: 0.5rem 1rem;
+	font-size: 0.8rem;
 	border-bottom: 1px solid #e5e7eb; /* feine untere Linie */
 	position: sticky;
 	top: 0;

src/css/custom.css

@@ -5,7 +5,6 @@ import React from 'react';
 import { LanguageSwitch } from '@site/src/components/LanguageSwitch';
 import Navbar from '@theme-original/Navbar';
 import { translate } from '@docusaurus/Translate';
-import DocumentationVersionHint from '../../components/DocumentationVersionHint';
 
 export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 	// const [dark, setDark] = useState(false);
@@ -25,7 +24,7 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 
 	return (
 		<div className="kolibri-navbar-wrapper sticky top-0 z-50 bg-white">
-			<DocumentationVersionHint />
+			{/* <DocumentationVersionHint /> */}
 			<div className="kolibri-navbar max-w-screen-md lg:max-w-4xl 2xl:max-w-[95rem] mx-auto grid grid-cols-[1fr,auto] gap-y-2 items-center 2xl:grid-cols-[1fr,auto,auto,auto] p-4 lg:px-8">
 				<Navbar {...props} />
 				<section aria-label="Toolbar" className="flex flex-wrap gap-2 col-span-2">
@@ -49,7 +48,7 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 					</div> */}
 						<div>
 							<KolLinkButton
-								_href="https://github.com/public-ui/kolibri"
+								_href="https://github.com/public-ui/kolibri/tree/release/2"
 								_icons={'codicon codicon-github'}
 								_hideLabel
 								_label="GitHub-Repository"

src/theme/Navbar/index.tsx

@@ -1,4 +1,4 @@
-import { register } from '@public-ui/components';
+import { KoliBriDevHelper, register } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { DEFAULT } from '@public-ui/theme-default';
 import type { FunctionComponent, PropsWithChildren } from 'react';
@@ -10,7 +10,36 @@ export const Root: FunctionComponent<PropsWithChildren> = (props) => {
 			theme: {
 				detect: 'fixed',
 			},
-		}).catch(console.warn);
+		})
+			.then(() => {
+				KoliBriDevHelper.patchTheme(
+					'default',
+					{
+						'KOL-BUTTON-LINK': `
+							:host,
+							button {
+								font-size: inherit;
+							}
+						`,
+						'KOL-ICON': `
+							:host {
+								color: inherit;
+								font-size: inherit;
+							}
+						`,
+						'KOL-LINK': `
+							:host,
+							a {
+								font-size: inherit;
+							}
+						`,
+					},
+					{
+						append: true,
+					}
+				);
+			})
+			.catch(console.warn);
 	}, []);
 
 	return <div id="doc-app">{props.children}</div>;