Add function description for getVersionForUrl and adjust links version in src/components/ExampleLink.tsx .

Author: anicyne

src/components/ExampleLink.tsx

@@ -2,26 +2,15 @@ import React from 'react';
 import { KolLink } from '@public-ui/react';
 import type { FC } from 'react';
 import { useDocsPreferredVersion } from '@docusaurus/theme-common';
-import VERSIONS from '../../versions.json';
 import { translate } from '@docusaurus/Translate';
-import { Version } from '../shares/version';
+import { determinateVersionId } from '../shares/version';
 
 interface ComponentProps {
 	component: React.ComponentType<string>;
 }
 export const ExampleLink: FC<ComponentProps> = ({ component }) => {
 	const docVersion = useDocsPreferredVersion();
-	let version: string = docVersion?.preferredVersion?.name as Version;
-
-	if (version === 'current') {
-		const highestVersion = VERSIONS.reduce((max, ver) => {
-			const major = parseInt(ver.split('.')[0], 10);
-			return major > max ? major : max;
-		}, 0);
-		version = `v${highestVersion}`;
-	} else if (version) {
-		version = `v${version.split('.')[0]}`;
-	}
+	const versionId = determinateVersionId(docVersion);
 
 	return (
 		<div>
@@ -32,7 +21,7 @@ export const ExampleLink: FC<ComponentProps> = ({ component }) => {
 				})}
 			</h2>
 			<KolLink
-				_href={`https://public-ui.github.io/${version}/sample-react/#/${component}`}
+				_href={`/${versionId}/sample-react/#/${component}`}
 				_label={translate({
 					id: 'custom.view-component-example',
 					message: 'Beispiel der Komponente ansehen',

src/components/HomepageFeatures.tsx

@@ -27,8 +27,8 @@ function Feature({ title, icon, description, button }: FeatureItem) {
 
 export default function HomepageFeatures(): JSX.Element {
 	const docVersion = useDocsPreferredVersion();
-	const version: string | null = getVersionForUrl(docVersion);
-	const versionId: string | null = determinateVersionId(docVersion);
+	const version = getVersionForUrl(docVersion);
+	const versionId = determinateVersionId(docVersion);
 
 	const FeatureList: FeatureItem[] = [
 		{
@@ -42,7 +42,7 @@ export default function HomepageFeatures(): JSX.Element {
 							message:
 								'Die semantisch barrierefreien Web Components können nahtlos in anderen Komponenten-Bibliotheken oder Design Systemen wiederverwendet werden. Mittels des',
 						})}{' '}
-						<KolLink _href={`${versionId}/designer`} _label="Designers" _target="designer" />{' '}
+						<KolLink _href={`/${versionId}/designer`} _label="Designers" _target="designer" />{' '}
 						{translate({
 							id: 'custom.designer-short-description-part-2',
 							message: 'können die Komponenten an beliebige Styleguides oder Designs angepasst werden.',
@@ -53,7 +53,7 @@ export default function HomepageFeatures(): JSX.Element {
 			button: (
 				<KolLinkButton
 					className="w-72"
-					_href={`docs/${version ? `${version ? `${version}/` : ''}` : ''}concepts/styling/theming `}
+					_href={`/docs/${version ? `${version ? `${version}/` : ''}` : ''}concepts/styling/theming `}
 					_label="Styling & Design"
 				></KolLinkButton>
 			),
@@ -75,7 +75,7 @@ export default function HomepageFeatures(): JSX.Element {
 			button: (
 				<KolLinkButton
 					className="w-72"
-					_href={`docs/${version ? `${version}/` : ''}get-started/frameworks`}
+					_href={`/docs/${version ? `${version}/` : ''}get-started/frameworks`}
 					_label="Frameworks"
 				></KolLinkButton>
 			),
@@ -100,7 +100,7 @@ export default function HomepageFeatures(): JSX.Element {
 			button: (
 				<KolLinkButton
 					className="w-72"
-					_href={`docs/${version ? `${version}/` : ''}components`}
+					_href={`/docs/${version ? `${version}/` : ''}components`}
 					_label={translate({
 						id: 'custom.components',
 						message: 'Components',

src/pages/index.tsx

@@ -26,8 +26,8 @@ const HomepageHeader: FunctionComponent = () => (
 );
 const HomepageButtons: FunctionComponent = () => {
 	const docVersion = useDocsPreferredVersion();
-	const version: string = getVersionForUrl(docVersion);
-	const versionId: string = determinateVersionId(docVersion);
+	const version = getVersionForUrl(docVersion);
+	const versionId = determinateVersionId(docVersion);
 
 	return (
 		<div className="grid sm:flex gap-4 justify-center mt-4">
@@ -36,22 +36,22 @@ const HomepageButtons: FunctionComponent = () => {
 				_icons={{
 					right: 'codicon codicon-dashboard',
 				}}
-				_href={`docs/${version ? `${version}/` : ''}get-started/first-steps`}
+				_href={`/docs/${version ? `${version}/` : ''}get-started/first-steps`}
 				_label={translate({
 					id: 'custom.get-started-button',
 				})}
 				_variant="primary"
 			></KolLinkButton>
 			<KolLinkButton
 				className="w-72"
-				_href={`docs/${version ? `${version}` : ''}`}
+				_href={`/docs/${version ? `${version}` : ''}`}
 				_label={translate({
 					id: 'custom.documentation-button',
 				})}
 			></KolLinkButton>
 			<KolLinkButton
 				className="w-72"
-				_href={`${versionId}/sample-react/#/handout/basic`}
+				_href={`/${versionId}/sample-react/#/handout/basic`}
 				_label={translate({
 					id: 'custom.sample-app-button',
 				})}

src/shares/version.ts

@@ -7,14 +7,23 @@ export function determinateVersionId(docVersion) {
 	return parseFloat(docVersion?.preferredVersion?.name as Version) < 2 ? 'v1' : 'v2';
 }
 
-export function getVersionForUrl(docVersion: { preferredVersion?: { name: string } }) {
+/**
+ * Determines the appropriate version to be used in the URL.
+ * If the preferred version is "current" or matches the latest version,
+ * `null` is returned because no version specification is needed in the URL in these cases.
+ * If the preferred version differs from the latest version, it will be returned.
+ * @param docVersion - An object containing the preferred version.
+ * @returns A string representing the version to be used in the URL, or `null` if the preferred version is "current" or matches the latest version.
+ */
+export function getVersionForUrl(docVersion: { preferredVersion?: { versionName: string } }): string | null {
 	if (!docVersion || !docVersion.preferredVersion) return null;
 
 	const lastVersion = VERSIONS.reduce((max, ver) => {
 		return parseFloat(ver) > max ? parseFloat(ver) : max;
 	}, 0).toString();
 
-	return docVersion.preferredVersion?.name === 'current' || docVersion.preferredVersion?.name === lastVersion
+	return docVersion.preferredVersion?.versionName === 'current' ||
+		docVersion.preferredVersion?.versionName === lastVersion
 		? null
-		: (docVersion.preferredVersion?.name as Version);
+		: (docVersion.preferredVersion?.versionName as Version);
 }