feat: Update documentation version hint text and improve Navbar links (#310)

Author: deleonio

.npmrc

@@ -1,9 +1 @@
-# - npm
-legacy-peer-deps=true
-save-exact=true
-
-# - pnpm
-auto-install-peers=true
-prefer-offline=true
 shamefully-hoist=true
-strict-peer-dependencies=false

docusaurus.config.js

@@ -93,10 +93,14 @@ const config = {
 				},
 				items: [
 					{
-						type: 'docsVersionDropdown',
-						position: 'left',
-						dropdownActiveClassDisabled: true,
-						dropdownItemsAfter: [
+						label: 'Version 3',
+						position: 'right',
+						items: [
+							{
+								type: 'html',
+								className: 'dropdown-archived-versions',
+								value: '<strong class="dropdown__link">Version 3</strong>',
+							},
 							{ to: `${PUBLIC_BASE_URL}/v2/`, label: 'Version 2' },
 							{
 								type: 'html',
@@ -114,21 +118,15 @@ const config = {
 						to: '/docs',
 						position: 'left',
 					},
-					{ to: '/blog', label: 'Blog', position: 'left' },
-					{ type: 'search', position: 'right' },
-					// {
-					// 	href: 'https://public-ui.github.io/designer',
-					// 	label: 'Designer',
-					// 	position: 'left',
-					// },
-					// {
-					// 	type: 'docsVersionDropdown',
-					// 	position: 'left',
-					// },
-					// {
-					// 	type: 'localeDropdown',
-					// 	position: 'right',
-					// },
+					{
+						to: '/blog',
+						label: 'Blog',
+						position: 'left',
+					},
+					{
+						type: 'search',
+						position: 'right',
+					},
 				],
 			},
 			footer: {

i18n/de/code.json

@@ -352,6 +352,6 @@
 		"message": "Beispiel der Komponente ansehen"
 	},
 	"custom.docs-version-hint": {
-		"message": "Diese Dokumentation behandelt KoliBri - Public UI {version}. Die aktuellste Dokumentation finden Sie hier: {link}"
+		"message": "Diese Dokumentation behandelt KoliBri - Public UI {version}. Für die aktuellste Version, siehe  {link}."
 	}
 }

i18n/en/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}. You can find the latest documentation here: {link}"
+		"message": "This documentation covers KoliBri - Public UI {version}. For the latest version, see {link}."
 	}
 }

src/components/DocumentationVersionHint.tsx

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

src/css/custom.css

@@ -193,13 +193,12 @@ 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;
-	z-index: 1000;
 }
 
 .version-hint a {

src/pages/index.tsx

@@ -6,7 +6,6 @@ import Layout from '@theme/Layout';
 import type { FunctionComponent, ReactElement } from 'react';
 import React from 'react';
 import { KoliBriAbbr } from '../components/KoliBriAbbr';
-import { VERSION_ID } from '@site/src/shares/version';
 import { ITZLogo } from '@site/src/components/ITZLogo';
 
 const HomepageHeader: FunctionComponent = () => (
@@ -46,7 +45,7 @@ const HomepageButtons: FunctionComponent = () => {
 			></KolLinkButton>
 			<KolLinkButton
 				className="w-72"
-				_href={`/${VERSION_ID}/sample-react/#/handout/basic`}
+				_href="https://develop--kolibri-public-ui.netlify.app"
 				_label={translate({
 					id: 'custom.sample-app-button',
 				})}

src/theme/DocVersionBadge/index.js

@@ -82,7 +82,7 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 						</div> */}
 						<div>
 							<KolLinkButton
-								_href={`/sample-react/#/handout/basic`}
+								_href="https://develop--kolibri-public-ui.netlify.app"
 								_icons={'codicon codicon-preview'}
 								_hideLabel
 								_label={translate({

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>;