-
-
Notifications
You must be signed in to change notification settings - Fork 177
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add custom header component with version selector
- Loading branch information
Showing
4 changed files
with
112 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
export const base = '/'; | ||
|
||
export const versions = [ | ||
['v4', 'v4 (canary)'], | ||
['v3', 'v3 (latest)'], | ||
]; | ||
|
||
export const defaultVersion = 'v3'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
--- | ||
import type { Props } from '@astrojs/starlight/props'; | ||
import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro'; | ||
import Search from '@astrojs/starlight/components/Search.astro'; | ||
import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro'; | ||
import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'; | ||
import Select from '@astrojs/starlight/components/Select.astro'; | ||
import { defaultVersion, versions } from '../../config.js'; | ||
const url = new URL(Astro.url); | ||
const currentVersion = /^\/v\d+/.test(url.pathname) | ||
? url.pathname.split('/')[1] | ||
: defaultVersion; | ||
const options = versions.map(([version, label]) => ({ | ||
label, | ||
selected: currentVersion === version, | ||
value: `/${version}`, | ||
})); | ||
--- | ||
|
||
<script> | ||
const select = document.querySelector('select'); | ||
select?.addEventListener('change', () => { | ||
const url = new URL(window.location.href); | ||
const p = url.pathname; | ||
url.pathname = select.value + p.replace(/^\/v\d\//, '/'); | ||
window.location.href = url.href; | ||
}); | ||
</script> | ||
|
||
<div class="header sl-flex"> | ||
<div class="sl-flex"> | ||
<SiteTitle {...Astro.props} /> | ||
</div> | ||
<div class="sl-flex"> | ||
<Search {...Astro.props} /> | ||
</div> | ||
<div class="sl-hidden md:sl-flex right-group"> | ||
<Select label="version" value="auto" options={options} width="auto" /> | ||
<div class="sl-flex social-icons"> | ||
<SocialIcons {...Astro.props} /> | ||
</div> | ||
<ThemeSelect {...Astro.props} /> | ||
</div> | ||
</div> | ||
|
||
<style> | ||
.header { | ||
gap: var(--sl-nav-gap); | ||
align-items: center; | ||
height: 100%; | ||
} | ||
|
||
.right-group { | ||
gap: 2rem; | ||
align-items: center; | ||
} | ||
|
||
.social-icons { | ||
gap: 1rem; | ||
align-items: center; | ||
} | ||
|
||
@media (min-width: 50rem) { | ||
:global(:root[data-has-sidebar]) { | ||
--__sidebar-pad: calc(2 * var(--sl-nav-pad-x)); | ||
} | ||
:global(:root:not([data-has-toc])) { | ||
--__toc-width: 0rem; | ||
} | ||
.header { | ||
--__sidebar-width: max( | ||
0rem, | ||
var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x) | ||
); | ||
--__main-column-fr: calc( | ||
( | ||
100% + var(--__sidebar-pad, 0rem) - | ||
var(--__toc-width, var(--sl-sidebar-width)) - | ||
(2 * var(--__toc-width, var(--sl-nav-pad-x))) - | ||
var(--sl-content-inline-start, 0rem) - var(--sl-content-width) | ||
) / 2 | ||
); | ||
display: grid; | ||
grid-template-columns: | ||
/* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest */ | ||
minmax( | ||
calc( | ||
var(--__sidebar-width) + | ||
max(0rem, var(--__main-column-fr) - var(--sl-nav-gap)) | ||
), | ||
auto | ||
) | ||
/* 2 (search box): all free space that is available. */ | ||
1fr | ||
/* 3 (right items): use the space that these need. */ | ||
auto; | ||
align-content: center; | ||
} | ||
} | ||
</style> |