Skip to content

Commit 084dacd

Browse files
sdvgsdvg
authored
Fix links to reflect selected version (#245)
2 parents dfa306f + cd86e13 commit 084dacd

File tree

4 files changed

+119
-88
lines changed

4 files changed

+119
-88
lines changed

‎src/components/ExampleLink.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,16 @@ import React from 'react';
22
import { KolLink } from '@public-ui/react';
33
import type { FC } from 'react';
44
import { useDocsPreferredVersion } from '@docusaurus/theme-common';
5-
import VERSIONS from '../../versions.json';
65
import { translate } from '@docusaurus/Translate';
7-
import type { Version } from '../shares/version';
6+
import { determinateVersionId } from '../shares/version';
87
import Heading from '@theme/Heading';
98

109
interface ComponentProps {
1110
component: string;
1211
}
1312
export const ExampleLink: FC<ComponentProps> = ({ component }) => {
1413
const docVersion = useDocsPreferredVersion();
15-
let version: string = docVersion?.preferredVersion?.name as Version;
16-
17-
if (version === 'current') {
18-
const highestVersion = VERSIONS.reduce((max, ver) => {
19-
const major = parseInt(ver.split('.')[0], 10);
20-
return major > max ? major : max;
21-
}, 0);
22-
version = `v${highestVersion}`;
23-
} else if (version) {
24-
version = `v${version.split('.')[0]}`;
25-
}
14+
const versionId = determinateVersionId(docVersion);
2615

2716
return (
2817
<div>
@@ -33,7 +22,7 @@ export const ExampleLink: FC<ComponentProps> = ({ component }) => {
3322
})}
3423
</Heading>
3524
<KolLink
36-
_href={`https://public-ui.github.io/${version}/sample-react/#/${component}`}
25+
_href={`/${versionId}/sample-react/#/${component}`}
3726
_label={translate({
3827
id: 'custom.view-component-example',
3928
message: 'Beispiel der Komponente ansehen',

‎src/components/HomepageFeatures.tsx

Lines changed: 86 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React from 'react';
22
import { KolIcon, KolLink, KolLinkButton } from '@public-ui/react';
33
import { translate } from '@docusaurus/Translate';
44
import Heading from '@theme/Heading';
5+
import { useDocsPreferredVersion } from '@docusaurus/theme-common';
6+
import { getVersionForUrl, determinateVersionId } from '../shares/version';
57

68
type FeatureItem = {
79
icon: string;
@@ -10,76 +12,6 @@ type FeatureItem = {
1012
button: JSX.Element;
1113
};
1214

13-
const FeatureList: FeatureItem[] = [
14-
{
15-
icon: 'codicon codicon-paintcan',
16-
title: 'Designer',
17-
description: (
18-
<>
19-
<p>
20-
{translate({
21-
id: 'custom.designer-short-description-part-1',
22-
message:
23-
'Die semantisch barrierefreien Web Components können nahtlos in anderen Komponenten-Bibliotheken oder Design Systemen wiederverwendet werden. Mittels des',
24-
})}{' '}
25-
<KolLink _href="/designer" _label="Designers" _target="designer" />{' '}
26-
{translate({
27-
id: 'custom.designer-short-description-part-2',
28-
message: 'können die Komponenten an beliebige Styleguides oder Designs angepasst werden.',
29-
})}
30-
</p>
31-
</>
32-
),
33-
button: (
34-
<KolLinkButton className="w-72" _href="docs/concepts/styling/theming" _label="Styling & Design"></KolLinkButton>
35-
),
36-
},
37-
{
38-
icon: 'codicon codicon-code',
39-
title: 'Developer',
40-
description: (
41-
<>
42-
<p>
43-
{translate({
44-
id: 'custom.developer-short-description',
45-
message:
46-
'Die robusten Web Components (Shadow-Root) lassen sich in allen webbasierten Projekten wiederverwenden. Neben der direkten Verwendung der Web Components bieten wir auch Framework-Adapter für Angular, React, Preact und Solid an.',
47-
})}
48-
</p>
49-
</>
50-
),
51-
button: <KolLinkButton className="w-72" _href="docs/get-started/frameworks" _label="Frameworks"></KolLinkButton>,
52-
},
53-
{
54-
icon: 'codicon codicon-layers',
55-
title: translate({
56-
id: 'custom.components',
57-
message: 'Komponenten',
58-
}),
59-
description: (
60-
<>
61-
<p>
62-
{translate({
63-
id: 'custom.components-short-description',
64-
message:
65-
'Heute umfasst die Komponentenvielfalt mehr als 40 Komponenten mit einem hohen Funktionsumfang zur Umsetzung verschiedenster Fachanwendungen und Darstellung von webbasierten Inhalten.',
66-
})}
67-
</p>
68-
</>
69-
),
70-
button: (
71-
<KolLinkButton
72-
className="w-72"
73-
_href="docs/components"
74-
_label={translate({
75-
id: 'custom.components',
76-
message: 'Components',
77-
})}
78-
></KolLinkButton>
79-
),
80-
},
81-
];
82-
8315
function Feature({ title, icon, description, button }: FeatureItem) {
8416
return (
8517
<div className="grid gap-4 content-baseline text-center justify-items-center">
@@ -94,6 +26,90 @@ function Feature({ title, icon, description, button }: FeatureItem) {
9426
}
9527

9628
export default function HomepageFeatures(): JSX.Element {
29+
const docVersion = useDocsPreferredVersion();
30+
const version = getVersionForUrl(docVersion);
31+
const versionId = determinateVersionId(docVersion);
32+
33+
const FeatureList: FeatureItem[] = [
34+
{
35+
icon: 'codicon codicon-paintcan',
36+
title: 'Designer',
37+
description: (
38+
<>
39+
<p>
40+
{translate({
41+
id: 'custom.designer-short-description-part-1',
42+
message:
43+
'Die semantisch barrierefreien Web Components können nahtlos in anderen Komponenten-Bibliotheken oder Design Systemen wiederverwendet werden. Mittels des',
44+
})}{' '}
45+
<KolLink _href={`/${versionId}/designer`} _label="Designers" _target="designer" />{' '}
46+
{translate({
47+
id: 'custom.designer-short-description-part-2',
48+
message: 'können die Komponenten an beliebige Styleguides oder Designs angepasst werden.',
49+
})}
50+
</p>
51+
</>
52+
),
53+
button: (
54+
<KolLinkButton
55+
className="w-72"
56+
_href={`/docs/${version ? `${version ? `${version}/` : ''}` : ''}concepts/styling/theming `}
57+
_label="Styling & Design"
58+
></KolLinkButton>
59+
),
60+
},
61+
{
62+
icon: 'codicon codicon-code',
63+
title: 'Developer',
64+
description: (
65+
<>
66+
<p>
67+
{translate({
68+
id: 'custom.developer-short-description',
69+
message:
70+
'Die robusten Web Components (Shadow-Root) lassen sich in allen webbasierten Projekten wiederverwenden. Neben der direkten Verwendung der Web Components bieten wir auch Framework-Adapter für Angular, React, Preact und Solid an.',
71+
})}
72+
</p>
73+
</>
74+
),
75+
button: (
76+
<KolLinkButton
77+
className="w-72"
78+
_href={`/docs/${version ? `${version}/` : ''}get-started/frameworks`}
79+
_label="Frameworks"
80+
></KolLinkButton>
81+
),
82+
},
83+
{
84+
icon: 'codicon codicon-layers',
85+
title: translate({
86+
id: 'custom.components',
87+
message: 'Komponenten',
88+
}),
89+
description: (
90+
<>
91+
<p>
92+
{translate({
93+
id: 'custom.components-short-description',
94+
message:
95+
'Heute umfasst die Komponentenvielfalt mehr als 40 Komponenten mit einem hohen Funktionsumfang zur Umsetzung verschiedenster Fachanwendungen und Darstellung von webbasierten Inhalten.',
96+
})}
97+
</p>
98+
</>
99+
),
100+
button: (
101+
<KolLinkButton
102+
className="w-72"
103+
_href={`/docs/${version ? `${version}/` : ''}components`}
104+
_label={translate({
105+
id: 'custom.components',
106+
message: 'Components',
107+
})}
108+
></KolLinkButton>
109+
),
110+
},
111+
];
112+
97113
return (
98114
<section className="m-8 grid gap-8 lg:grid-cols-3">
99115
{FeatureList.map((props, idx) => (

‎src/pages/index.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import Layout from '@theme/Layout';
77
import type { FunctionComponent } from 'react';
88
import React from 'react';
99
import { KoliBriAbbr } from '../components/KoliBriAbbr';
10+
import { useDocsPreferredVersion } from '@docusaurus/theme-common';
11+
import { getVersionForUrl, determinateVersionId } from '../shares/version';
1012

1113
const HomepageHeader: FunctionComponent = () => (
1214
<header className="p-8 grid justify-center">
@@ -23,6 +25,9 @@ const HomepageHeader: FunctionComponent = () => (
2325
</header>
2426
);
2527
const HomepageButtons: FunctionComponent = () => {
28+
const docVersion = useDocsPreferredVersion();
29+
const version = getVersionForUrl(docVersion);
30+
const versionId = determinateVersionId(docVersion);
2631

2732
return (
2833
<div className="grid sm:flex gap-4 justify-center mt-4">
@@ -31,22 +36,22 @@ const HomepageButtons: FunctionComponent = () => {
3136
_icons={{
3237
right: 'codicon codicon-dashboard',
3338
}}
34-
_href="docs/get-started/first-steps"
39+
_href={`/docs/${version ? `${version}/` : ''}get-started/first-steps`}
3540
_label={translate({
3641
id: 'custom.get-started-button',
3742
})}
3843
_variant="primary"
3944
></KolLinkButton>
4045
<KolLinkButton
4146
className="w-72"
42-
_href="docs"
47+
_href={`/docs/${version ? `${version}` : ''}`}
4348
_label={translate({
4449
id: 'custom.documentation-button',
4550
})}
4651
></KolLinkButton>
4752
<KolLinkButton
4853
className="w-72"
49-
_href={`/sample-react/#/handout/basic`}
54+
_href={`/${versionId}/sample-react/#/handout/basic`}
5055
_label={translate({
5156
id: 'custom.sample-app-button',
5257
})}

‎src/shares/version.ts

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
1-
import type VERSIONS from '../../versions.json';
1+
import VERSIONS from '../../versions.json';
22

33
export type Version = (typeof VERSIONS)[number] & 'current';
44

55
export function determinateVersionId(docVersion: { preferredVersion?: { name: string } }) {
66
if (!docVersion || !docVersion.preferredVersion) return null;
77
return parseFloat(docVersion?.preferredVersion?.name as Version) < 2 ? 'v1' : 'v2';
88
}
9+
10+
/**
11+
* Determines the appropriate version to be used in the URL.
12+
* If the preferred version is "current" or matches the latest version,
13+
* `null` is returned because no version specification is needed in the URL in these cases.
14+
* If the preferred version differs from the latest version, it will be returned.
15+
* @param docVersion - An object containing the preferred version.
16+
* @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.
17+
*/
18+
export function getVersionForUrl(docVersion: { preferredVersion?: { versionName: string } }): string | null {
19+
if (!docVersion || !docVersion.preferredVersion) return null;
20+
21+
const lastVersion = VERSIONS.reduce((max, ver) => {
22+
return parseFloat(ver) > max ? parseFloat(ver) : max;
23+
}, 0).toString();
24+
25+
return docVersion.preferredVersion?.versionName === 'current' ||
26+
docVersion.preferredVersion?.versionName === lastVersion
27+
? null
28+
: (docVersion.preferredVersion?.versionName as Version);
29+
}

0 commit comments

Comments
 (0)