Skip to content

Commit

Permalink
Add custom header component with version selector
Browse files Browse the repository at this point in the history
  • Loading branch information
webpro committed Dec 20, 2023
1 parent 06459d4 commit c03e8ae
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 1 deletion.
3 changes: 2 additions & 1 deletion knip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ const config: KnipConfig = {
}
},
'packages/docs': {
entry: ['{remark,scripts}/*.ts', 'src/components/{Head,Footer}.astro!'],
entry: ['{remark,scripts}/*.ts', 'src/components/{Head,Header,Footer}.astro!'],
ignore: 'config.ts',
ignoreBinaries: ['rg']
}
},
Expand Down
1 change: 1 addition & 0 deletions packages/docs/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default defineConfig({
},
components: {
Head: './src/components/Head.astro',
Header: './src/components/Header.astro',
Footer: './src/components/Footer.astro',
},
customCss: ['./src/styles/custom.css', './src/fonts/font-face.css'],
Expand Down
8 changes: 8 additions & 0 deletions packages/docs/config.ts
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';
101 changes: 101 additions & 0 deletions packages/docs/src/components/Header.astro
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>

0 comments on commit c03e8ae

Please sign in to comment.