Skip to content

Commit d24d104

Browse files
bjohansebasbjohansebas
committed
feat: implement LocalizedLink component for shared content navigation
1 parent a6e0616 commit d24d104

4 files changed

Lines changed: 76 additions & 28 deletions

File tree

‎src/components/patterns/LocalizedLink/LocalizedLink.astro‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
/**
3+
* Link override for shared content (`api`, `blog`).
4+
*
5+
* Shared collections have no per-language source files, so their MDX is compiled
6+
* once and can't be localized per render-language at build time. This component
7+
* localizes links at render, using the current page's language/version (taken from
8+
* `Astro.url`):
9+
*
10+
* - Used as the `a` element override (`<Content components={{ a: LocalizedLink }} />`)
11+
* it catches Markdown links, which the plugin baked to the default language
12+
* (`/en/...`) — they get re-pointed to the current language.
13+
* - Used directly in MDX (`<LocalizedLink href="/api/...">`) it catches raw JSX
14+
* anchors, which the plugin can't bake; their bare paths are localized from scratch
15+
* with the shared core logic.
16+
*
17+
* Anchors, external links and relative links are left untouched.
18+
*/
19+
import { resolveOptions, rewriteUrl } from '@/plugins/rewrite-localized-links-core.mjs';
20+
21+
const DEFAULT_LANG = 'en';
22+
const config = resolveOptions();
23+
24+
const { href, ...rest } = Astro.props;
25+
26+
// Current page context, e.g. `/es/5x/api/express` → lang `es`, version `5x`.
27+
const segments = Astro.url.pathname.split('/').filter(Boolean);
28+
const lang = segments[0] || DEFAULT_LANG;
29+
const version = /^\d+x$/.test(segments[1] ?? '') ? segments[1] : undefined;
30+
31+
let localizedHref = href;
32+
if (typeof href === 'string') {
33+
if (href.startsWith(`/${DEFAULT_LANG}/`)) {
34+
// Baked to the default language at compile time → re-point to the current one.
35+
if (lang !== DEFAULT_LANG) {
36+
localizedHref = href.replace(new RegExp(`^/${DEFAULT_LANG}/`), `/${lang}/`);
37+
}
38+
} else {
39+
// Bare path (authored directly in shared MDX) → localize from scratch.
40+
localizedHref = rewriteUrl(href, { lang, version }, config);
41+
}
42+
}
43+
---
44+
45+
<a href={localizedHref} {...rest}><slot /></a>

‎src/content/api/3x/api.mdx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: Access the API reference for Express.js version 3.x, noting that th
66
import Alert from '@components/primitives/Alert/Alert.astro';
77
import Card from '@components/primitives/Card/Card.astro';
88
import { CardList } from '@components/patterns';
9+
import LocalizedLink from '@components/patterns/LocalizedLink/LocalizedLink.astro';
910

1011
<Alert type="warning" title="Express 3.x IS END-OF-LIFE AND NO LONGER MAINTAINED">
1112

@@ -43,28 +44,28 @@ app.listen(3000);
4344
After creating an application instance, you can define routes, configure middleware, and start handling HTTP requests
4445

4546
<CardList gap="6">
46-
<a href="/api/application">
47+
<LocalizedLink href="/api/application">
4748
<Card
4849
title="Application Object"
4950
body="Learn about the properties and methods of the Express 3.x application object."
5051
/>
51-
</a>
52-
<a href="/api/request">
52+
</LocalizedLink>
53+
<LocalizedLink href="/api/request">
5354
<Card
5455
title="Request Object"
5556
body="Learn about the properties and methods of the Express 3.x request object."
5657
/>
57-
</a>
58-
<a href="/api/response">
58+
</LocalizedLink>
59+
<LocalizedLink href="/api/response">
5960
<Card
6061
title="Response Object"
6162
body="Learn about the properties and methods of the Express 3.x response object."
6263
/>
63-
</a>
64-
<a href="/api/middleware">
64+
</LocalizedLink>
65+
<LocalizedLink href="/api/middleware">
6566
<Card
6667
title="Middleware"
6768
body="Learn about middleware in Express 3.x, including built-in and third-party options."
6869
/>
69-
</a>
70+
</LocalizedLink>
7071
</CardList>

‎src/content/api/4x/api.mdx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: API Reference for version 4.x
66
import Alert from '@components/primitives/Alert/Alert.astro';
77
import Card from '@components/primitives/Card/Card.astro';
88
import { CardList } from '@components/patterns';
9+
import LocalizedLink from '@components/patterns/LocalizedLink/LocalizedLink.astro';
910

1011
This section provides an overview of the modules and APIs available in Express 4.x for building web applications and HTTP services.
1112

@@ -29,31 +30,31 @@ Express 4.x requires **Node.js 0.10.0 or higher**.
2930
With express v4.x, you can define routes, configure middleware, and start handling HTTP requests using the application instance created by the `express()` function. The API is organized into the following sections:
3031

3132
<CardList gap="6">
32-
<a href="/api/express">
33+
<LocalizedLink href="/api/express">
3334
<Card
3435
title="express()"
3536
body="Learn about the express() function, which creates an Express application."
3637
/>
37-
</a>
38-
<a href="/api/application">
38+
</LocalizedLink>
39+
<LocalizedLink href="/api/application">
3940
<Card
4041
title="Application Object"
4142
body="Learn about the properties and methods of the Express 4.x application object."
4243
/>
43-
</a>
44-
<a href="/api/request">
44+
</LocalizedLink>
45+
<LocalizedLink href="/api/request">
4546
<Card
4647
title="Request Object"
4748
body="Learn about the properties and methods of the Express 4.x request object."
4849
/>
49-
</a>
50-
<a href="/api/response">
50+
</LocalizedLink>
51+
<LocalizedLink href="/api/response">
5152
<Card
5253
title="Response Object"
5354
body="Learn about the properties and methods of the Express 4.x response object."
5455
/>
55-
</a>
56-
<a href="/api/router">
56+
</LocalizedLink>
57+
<LocalizedLink href="/api/router">
5758
<Card title="Router" body="Learn about the properties and methods of the Express 4.x router." />
58-
</a>
59+
</LocalizedLink>
5960
</CardList>

‎src/content/api/5x/api.mdx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: API Reference for version 5.x
66
import Alert from '@components/primitives/Alert/Alert.astro';
77
import Card from '@components/primitives/Card/Card.astro';
88
import { CardList } from '@components/patterns';
9+
import LocalizedLink from '@components/patterns/LocalizedLink/LocalizedLink.astro';
910

1011
This section provides an overview of the modules and APIs available in Express 5.x for building web applications and HTTP services.
1112

@@ -29,31 +30,31 @@ Express 5.x requires **Node.js 18 or higher**.
2930
With express v5.x, you can define routes, configure middleware, and start handling HTTP requests using the application instance created by the `express()` function. The API is organized into the following sections:
3031

3132
<CardList gap="6">
32-
<a href="/api/express">
33+
<LocalizedLink href="/api/express">
3334
<Card
3435
title="express()"
3536
body="Learn about the express() function, which creates an Express application."
3637
/>
37-
</a>
38-
<a href="/api/application">
38+
</LocalizedLink>
39+
<LocalizedLink href="/api/application">
3940
<Card
4041
title="Application Object"
4142
body="Learn about the properties and methods of the Express 5.x application object."
4243
/>
43-
</a>
44-
<a href="/api/request">
44+
</LocalizedLink>
45+
<LocalizedLink href="/api/request">
4546
<Card
4647
title="Request Object"
4748
body="Learn about the properties and methods of the Express 5.x request object."
4849
/>
49-
</a>
50-
<a href="/api/response">
50+
</LocalizedLink>
51+
<LocalizedLink href="/api/response">
5152
<Card
5253
title="Response Object"
5354
body="Learn about the properties and methods of the Express 5.x response object."
5455
/>
55-
</a>
56-
<a href="/api/router">
56+
</LocalizedLink>
57+
<LocalizedLink href="/api/router">
5758
<Card title="Router" body="Learn about the properties and methods of the Express 5.x router." />
58-
</a>
59+
</LocalizedLink>
5960
</CardList>

0 commit comments

Comments
 (0)