Skip to content

Commit 64e3b96

Browse files
committed
Fix links to reflect selected version
1 parent d265c01 commit 64e3b96

File tree

7 files changed

+144
-74
lines changed

7 files changed

+144
-74
lines changed

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: string | null = getVersionForUrl(docVersion);
31+
const versionId: string | null = 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: string = getVersionForUrl(docVersion);
30+
const versionId: string = 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: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
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) {
66
if (!docVersion || !docVersion.preferredVersion) return null;
77
return parseFloat(docVersion?.preferredVersion?.name as Version) < 2 ? 'v1' : 'v2';
88
}
9+
10+
export function getVersionForUrl(docVersion: { preferredVersion?: { name: string } }) {
11+
if (!docVersion || !docVersion.preferredVersion) return null;
12+
13+
const lastVersion = VERSIONS.reduce((max, ver) => {
14+
return parseFloat(ver) > max ? parseFloat(ver) : max;
15+
}, 0).toString();
16+
17+
return docVersion.preferredVersion?.name === 'current' || docVersion.preferredVersion?.name === lastVersion
18+
? null
19+
: (docVersion.preferredVersion?.name as Version);
20+
}

static/v1/designer/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Redirecting...</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="refresh" content="0; url=https://public-ui.github.io/v1/designer/" />
8+
</head>
9+
<body>
10+
<p>
11+
Redirecting to
12+
<a href="https://public-ui.github.io/v1/designer/">https://public-ui.github.io/v1/designer/</a>
13+
</p>
14+
</body>
15+
</html>

static/v1/sample-react/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Redirecting...</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link href="https://public-ui.github.io/v1/sample-react/" rel="canonical" />
8+
<noscript>
9+
<meta http-equiv="refresh" content="0; url=https://public-ui.github.io/v1/sample-react/" />
10+
</noscript>
11+
</head>
12+
<body>
13+
<p>
14+
Redirecting to
15+
<a href="https://public-ui.github.io/v1/sample-react/">https://public-ui.github.io/v1/sample-react/</a>
16+
</p>
17+
18+
<script>
19+
location.replace(`https://public-ui.github.io/v1/sample-react/${location.hash}`);
20+
</script>
21+
</body>
22+
</html>
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)