Skip to content

Commit 4cd8166

Browse files
shivasuryashivasurya
authored
Merge pull request #211 from shivasurya/shiva/header-fix
docs: add header and links
2 parents 6cc9309 + 0e81b74 commit 4cd8166

File tree

5 files changed

+448
-1
lines changed

5 files changed

+448
-1
lines changed

‎docs/astro.config.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export default defineConfig({
4747
customCss: ["./src/styles/font.css", "./src/styles/layout.css"],
4848
components: {
4949
Footer: './src/components/Footer.astro',
50+
Header: './src/components/Header.astro',
5051
},
5152
}), sitemap()]
5253
});

‎docs/src/components/Header.astro

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
---
2+
import type { Props } from '@astrojs/starlight/props';
3+
import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro';
4+
import Search from '@astrojs/starlight/components/Search.astro';
5+
import SiteTitle from './SiteTitle.astro';
6+
import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
7+
import ThemeSelect from './ThemeSelect.astro';
8+
9+
const curLocale = Astro.props.locale;
10+
11+
12+
type Link = {
13+
title: string;
14+
value: string;
15+
transfer: boolean;
16+
};
17+
18+
const links: Link[] = [
19+
{
20+
title: 'Docs',
21+
value: '/quickstart',
22+
transfer: true,
23+
},
24+
{
25+
title: 'Rules',
26+
value: '/atlas',
27+
transfer: true,
28+
},
29+
{
30+
title: 'Blog',
31+
value: '/blog/',
32+
transfer: false,
33+
},
34+
{
35+
title: 'Releases',
36+
value: 'https://github.com/shivasurya/code-pathfinder/releases',
37+
transfer: false,
38+
},
39+
];
40+
---
41+
42+
<div class="header sl-flex">
43+
<div class="full-width sl-flex">
44+
<SiteTitle {...Astro.props} />
45+
</div>
46+
<div class="sl-flex">
47+
<Search {...Astro.props} />
48+
</div>
49+
<div class="sl-hidden md:sl-flex right-group">
50+
<div class="desktop">
51+
{
52+
links.map((link) => (
53+
<a href={link.transfer && curLocale ? `/${curLocale}${link.value}` : link.value}>
54+
{link.title}
55+
</a>
56+
))
57+
}
58+
</div>
59+
<div class="sl-flex social-icons">
60+
<SocialIcons {...Astro.props} />
61+
</div>
62+
<LanguageSelect {...Astro.props} />
63+
<ThemeSelect {...Astro.props} />
64+
</div>
65+
</div>
66+
67+
<style>
68+
.header {
69+
gap: var(--sl-nav-gap);
70+
justify-content: space-between;
71+
align-items: center;
72+
height: 100%;
73+
}
74+
.full-width {
75+
width: 100%;
76+
}
77+
.right-group,
78+
.social-icons {
79+
gap: 1rem;
80+
align-items: center;
81+
}
82+
.desktop,
83+
.release-link::after,
84+
.social-icons::after {
85+
content: '';
86+
height: 2rem;
87+
border-inline-end: 1px solid var(--sl-color-gray-5);
88+
}
89+
90+
@media (min-width: 50rem) {
91+
:global(:root[data-has-sidebar]) {
92+
--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
93+
}
94+
:global(:root:not([data-has-toc])) {
95+
--__toc-width: 0rem;
96+
}
97+
.header {
98+
--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
99+
--__main-column-fr: calc(
100+
(
101+
100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
102+
(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
103+
var(--sl-content-width)
104+
) / 2
105+
);
106+
display: grid;
107+
grid-template-columns:
108+
/* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest */
109+
minmax(
110+
calc(var(--__sidebar-pad, 0rem)),
111+
auto
112+
)
113+
/* 2 (search box): all free space that is available. */
114+
1fr
115+
/* 3 (right items): use the space that these need. */
116+
auto;
117+
align-content: center;
118+
}
119+
}
120+
a:hover {
121+
color: var(--sl-color-gray-2);
122+
}
123+
:root[data-theme='light'] {
124+
.header a:hover {
125+
color: var(--sl-color-gray-3);
126+
}
127+
}
128+
</style>
129+
<style is:global>
130+
.header {
131+
border: none !important;
132+
}
133+
body[data-mobile-menu-expanded] header {
134+
background-color: var(--sl-color-bg);
135+
}
136+
</style>
137+
138+
<style>
139+
.desktop {
140+
display: none;
141+
align-items: center;
142+
gap: 1rem;
143+
padding-inline-end: 1rem;
144+
}
145+
@media (min-width: 72rem) {
146+
.desktop {
147+
display: flex;
148+
}
149+
.mobile {
150+
display: none;
151+
}
152+
}
153+
154+
a {
155+
color: var(--sl-color-white);
156+
font-weight: 600;
157+
text-decoration: none;
158+
}
159+
160+
/* From https://github.com/withastro/starlight/blob/main/packages/starlight/components/Select.astro */
161+
label {
162+
--sl-label-icon-size: 0.875rem;
163+
--sl-caret-size: 1.25rem;
164+
position: relative;
165+
display: flex;
166+
align-items: center;
167+
gap: 0.25rem;
168+
color: var(--sl-color-gray-1);
169+
}
170+
171+
label:hover {
172+
color: var(--sl-color-gray-2);
173+
}
174+
175+
.icon {
176+
position: absolute;
177+
top: 50%;
178+
transform: translateY(-50%);
179+
pointer-events: none;
180+
}
181+
182+
.label-icon {
183+
font-size: var(--sl-label-icon-size);
184+
inset-inline-start: 0;
185+
}
186+
187+
.caret {
188+
font-size: var(--sl-caret-size);
189+
inset-inline-end: 0;
190+
}
191+
192+
select {
193+
border: 0;
194+
padding-block: 0.625rem;
195+
padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) calc(var(--sl-caret-size) + 0.25rem);
196+
width: var(--sl-select-width);
197+
background-color: transparent;
198+
text-overflow: ellipsis;
199+
color: inherit;
200+
cursor: pointer;
201+
appearance: none;
202+
}
203+
204+
option {
205+
background-color: var(--sl-color-bg-nav);
206+
color: var(--sl-color-gray-1);
207+
}
208+
209+
@media (min-width: 50rem) {
210+
select {
211+
font-size: var(--sl-text-sm);
212+
}
213+
}
214+
</style>

‎docs/src/components/SiteTitle.astro

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
// This is heavily adapted from Starlight components:
3+
// https://github.com/withastro/starlight/blob/main/packages/starlight/components/Select.astro
4+
// https://github.com/withastro/starlight/blob/main/packages/starlight/components/LanguageSelect.astro
5+
6+
import type { Props } from '@astrojs/starlight/props';
7+
import Default from '@astrojs/starlight/components/SiteTitle.astro';
8+
import { Icon } from '@astrojs/starlight/components';
9+
10+
const curLocale = Astro.props.locale;
11+
12+
type Link = {
13+
title: string;
14+
value: string;
15+
transfer: boolean;
16+
};
17+
18+
const links: Link[] = [
19+
{
20+
title: 'Docs',
21+
value: '/quickstart',
22+
transfer: true,
23+
},
24+
{
25+
title: 'Rules',
26+
value: '/atlas',
27+
transfer: true,
28+
},
29+
{
30+
title: 'Blog',
31+
value: '/blog/',
32+
transfer: false,
33+
},
34+
{
35+
title: 'Releases',
36+
value: 'https://github.com/shivasurya/code-pathfinder/releases',
37+
transfer: false,
38+
},
39+
];
40+
---
41+
42+
<>
43+
<Default {...Astro.props}><slot /></Default>
44+
45+
<starlight-select class="mobile">
46+
<label>
47+
<select aria-label="Menu">
48+
<option value="" disabled selected>Menu</option>
49+
{
50+
links.map((link) => (
51+
<option
52+
value={link.transfer && curLocale ? `/${curLocale}${link.value}` : link.value}
53+
set:html={link.title}
54+
/>
55+
))
56+
}
57+
</select>
58+
<Icon name="down-caret" class="icon caret" />
59+
</label>
60+
</starlight-select>
61+
</>
62+
63+
<script>
64+
class StarlightLanguageSelect extends HTMLElement {
65+
constructor() {
66+
super();
67+
const select = this.querySelector('select');
68+
if (select) {
69+
select.addEventListener('change', (e) => {
70+
if (e.currentTarget instanceof HTMLSelectElement) {
71+
window.location.pathname = e.currentTarget.value;
72+
}
73+
});
74+
}
75+
}
76+
}
77+
customElements.define('starlight-select', StarlightLanguageSelect);
78+
</script>
79+
80+
<style>
81+
.desktop {
82+
display: none;
83+
align-items: center;
84+
gap: 1rem;
85+
padding-inline-start: 1rem;
86+
}
87+
@media (min-width: 72rem) {
88+
.desktop {
89+
display: flex;
90+
}
91+
.mobile {
92+
display: none;
93+
}
94+
}
95+
96+
a {
97+
color: var(--sl-color-white);
98+
font-weight: 600;
99+
text-decoration: none;
100+
}
101+
102+
/* From https://github.com/withastro/starlight/blob/main/packages/starlight/components/Select.astro */
103+
label {
104+
--sl-label-icon-size: 0.875rem;
105+
--sl-caret-size: 1.25rem;
106+
position: relative;
107+
display: flex;
108+
align-items: center;
109+
gap: 0.25rem;
110+
color: var(--sl-color-gray-1);
111+
}
112+
113+
label:hover {
114+
color: var(--sl-color-gray-2);
115+
}
116+
117+
.icon {
118+
position: absolute;
119+
top: 50%;
120+
transform: translateY(-50%);
121+
pointer-events: none;
122+
}
123+
124+
.label-icon {
125+
font-size: var(--sl-label-icon-size);
126+
inset-inline-start: 0;
127+
}
128+
129+
.caret {
130+
font-size: var(--sl-caret-size);
131+
inset-inline-end: 0;
132+
}
133+
134+
select {
135+
border: 0;
136+
padding-block: 0.625rem;
137+
padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) calc(var(--sl-caret-size) + 0.25rem);
138+
width: var(--sl-select-width);
139+
background-color: transparent;
140+
text-overflow: ellipsis;
141+
color: inherit;
142+
cursor: pointer;
143+
appearance: none;
144+
}
145+
146+
option {
147+
background-color: var(--sl-color-bg-nav);
148+
color: var(--sl-color-gray-1);
149+
}
150+
151+
@media (min-width: 50rem) {
152+
select {
153+
font-size: var(--sl-text-sm);
154+
}
155+
}
156+
starlight-select {
157+
margin-left: auto;
158+
}
159+
</style>

0 commit comments

Comments
 (0)