1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
import versions from '../data/docs-versions.json';
import { docsRoute, docsTargetHref } from '../docs-path';
const route = docsRoute(Astro.url.pathname);
const locale = route.locale ?? 'root';
const labels = {
root: { accessible: 'Documentation version', latest: 'Latest', preview: 'Preview' },
ja: { accessible: 'ドキュメントのバージョン', latest: '最新', preview: 'プレビュー' },
'zh-cn': { accessible: '文档版本', latest: '最新', preview: '预览版' },
}[locale];
const scopes = versions.scopes;
---
{route.isDocs && (
<label class="docs-version-select">
<span class="sr-only">{labels.accessible}</span>
<select autocomplete="off" aria-label={labels.accessible}>
<option
value={docsTargetHref(route, 'stable', scopes)}
selected={route.target === 'stable'}
>
{labels.latest}{' '}{versions.current}
</option>
<option
value={docsTargetHref(route, 'preview', scopes)}
selected={route.target === 'preview'}
>
{labels.preview}
</option>
{versions.versions
.filter((entry) => entry.version !== versions.current || route.target === versions.current)
.map((entry) => (
<option
value={docsTargetHref(route, entry.version, scopes)}
selected={route.target === entry.version}
>
{entry.version}
</option>
))}
</select>
</label>
)}
<script>
for (const select of document.querySelectorAll<HTMLSelectElement>('.docs-version-select select')) {
select.addEventListener('change', () => {
globalThis.location.href = select.value;
});
}
</script>
<style>
.docs-version-select {
display: flex;
min-width: 0;
}
select {
width: 9.5rem;
min-width: 0;
border: 1px solid var(--sl-color-hairline);
border-radius: 4px;
padding: 0.4rem 1.6rem 0.4rem 0.55rem;
background: var(--sl-color-bg-nav);
color: var(--sl-color-gray-2);
font: inherit;
font-size: var(--sl-text-xs);
font-weight: 700;
text-overflow: ellipsis;
}
select:hover,
select:focus {
border-color: var(--sl-color-accent);
color: var(--sl-color-accent-high);
}
@media (max-width: 38rem) {
select {
width: 7.5rem;
}
}
</style>
|
