Add sample app link to homepage

Author: anicyne

i18n/de/code.json

@@ -5,6 +5,9 @@
 	"custom.documentation-button": {
 		"message": "Dokumentation"
 	},
+	"custom.sample-app-button": {
+		"message": "Beispiel-App"
+	},
 	"custom.subtitle": {
 		"message": "Die barrierefreie Web Component Bibliothek"
 	},
@@ -342,4 +345,4 @@
 	"custom.components-short-description": {
 		"message": "Heute umfasst die Komponentenvielfalt mehr als 40 Komponenten mit einem hohen Funktionsumfang zur Umsetzung verschiedenster Fachanwendungen und Darstellung von webbasierten Inhalten."
 	}
-}
+}

i18n/en/code.json

@@ -5,6 +5,9 @@
 	"custom.documentation-button": {
 		"message": "Documentation"
 	},
+	"custom.sample-app-button": {
+		"message": "Sample-App"
+	},
 	"custom.subtitle": {
 		"message": "The accessible Web Component library"
 	},

src/pages/index.tsx

@@ -7,6 +7,8 @@ import Layout from '@theme/Layout';
 import type { FunctionComponent } from 'react';
 import React from 'react';
 import { KoliBriAbbr } from '../components/KoliBriAbbr';
+import { useDocsPreferredVersion } from '@docusaurus/theme-common';
+import { Version } from '../../shares/version';
 
 const HomepageHeader: FunctionComponent = () => (
 	<header className="p-8 grid justify-center">
@@ -22,6 +24,43 @@ const HomepageHeader: FunctionComponent = () => (
 		</p>
 	</header>
 );
+const HomepageButtons: FunctionComponent = () => {
+	const docVersion = useDocsPreferredVersion();
+	const version =
+		typeof docVersion?.preferredVersion?.name && parseFloat(docVersion?.preferredVersion?.name as Version) < 2
+			? 'v1'
+			: 'v2';
+
+	return (
+		<div className="grid sm:flex gap-4 justify-center mt-4">
+			<KolLinkButton
+				className="w-72"
+				_icons={{
+					right: 'codicon codicon-dashboard',
+				}}
+				_href="docs/get-started/first-steps"
+				_label={translate({
+					id: 'custom.get-started-button',
+				})}
+				_variant="primary"
+			></KolLinkButton>
+			<KolLinkButton
+				className="w-72"
+				_href="docs"
+				_label={translate({
+					id: 'custom.documentation-button',
+				})}
+			></KolLinkButton>
+			<KolLinkButton
+				className="w-72"
+				_href={`/${version}/sample-react/#/handout/basic`}
+				_label={translate({
+					id: 'custom.sample-app-button',
+				})}
+			></KolLinkButton>
+		</div>
+	);
+};
 
 export default function Homepage(): JSX.Element {
 	return (
@@ -41,27 +80,9 @@ export default function Homepage(): JSX.Element {
 			)}
 		>
 			<HomepageHeader />
+			<HomepageButtons />
+
 			<main>
-				<div className="grid sm:flex gap-4 justify-center mt-4">
-					<KolLinkButton
-						className="w-72"
-						_icons={{
-							right: 'codicon codicon-dashboard',
-						}}
-						_href="docs/get-started/first-steps"
-						_label={translate({
-							id: 'custom.get-started-button',
-						})}
-						_variant="primary"
-					></KolLinkButton>
-					<KolLinkButton
-						className="w-72"
-						_href="docs"
-						_label={translate({
-							id: 'custom.documentation-button',
-						})}
-					></KolLinkButton>
-				</div>
 				<div className="grid gap-2 md:w-6/12 m-auto mt-4 p-4">
 					<div className="flex gap-4 justify-center">
 						<KolLogo

src/theme/Navbar/index.tsx

@@ -9,6 +9,8 @@ import { LanguageSwitch } from '@site/src/components/LanguageSwitch';
 import Navbar from '@theme-original/Navbar';
 import ThemeSelect from './ThemeSelect';
 import { useDocsPreferredVersion } from '@docusaurus/theme-common';
+import { Version } from '../../shares/version';
+import { translate } from '@docusaurus/Translate';
 
 export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 	// const [dark, setDark] = useState(false);
@@ -26,7 +28,11 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 	// 	},
 	// };
 	const docVersion = useDocsPreferredVersion();
-	const version = (docVersion?.preferredVersion?.name as number) > 2 ? 'v2' : 'v1';
+	const version =
+		typeof docVersion?.preferredVersion?.name && parseFloat(docVersion?.preferredVersion?.name as Version) < 2
+			? 'v1'
+			: 'v2';
+
 	return (
 		<div className="kolibri-navbar-wrapper sticky top-0 z-50 bg-white">
 			<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">
@@ -88,7 +94,9 @@ export const NavbarWrapper: FunctionComponent<PropsWithChildren> = (props) => {
 								_href={`/${version}/sample-react/#/handout/basic`}
 								_icons={'codicon codicon-preview'}
 								_hideLabel
-								_label="Präsentation anschauen"
+								_label={translate({
+									id: 'custom.sample-app-button',
+								})}
 								_tooltipAlign="left"
 								// _target="presentation"
 								_variant="ghost"