Skip to content

Commit 6da6d47

Browse files
thdxrthdxr
committed
fix(web): render v2 banner full width below header
1 parent f1aacab commit 6da6d47

5 files changed

Lines changed: 209 additions & 62 deletions

File tree

‎packages/web/astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@ export default defineConfig({
296296
],
297297
components: {
298298
Hero: "./src/components/Hero.astro",
299-
Banner: "./src/components/Banner.astro",
299+
PageFrame: "./src/components/PageFrame.astro",
300300
Head: "./src/components/Head.astro",
301301
Header: "./src/components/Header.astro",
302302
Footer: "./src/components/Footer.astro",

‎packages/web/src/components/Banner.astro‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎packages/web/src/components/PageFrame.astro‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
import MobileMenuToggle from "virtual:starlight/components/MobileMenuToggle"
3+
import V2Banner from "./V2Banner.astro"
4+
5+
const { hasSidebar } = Astro.locals.starlightRoute
6+
---
7+
8+
<div class="page sl-flex">
9+
<header class="header"><slot name="header" /></header>
10+
<V2Banner />
11+
{
12+
hasSidebar && (
13+
<nav class="sidebar print:hidden" aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}>
14+
<MobileMenuToggle />
15+
<div id="starlight__sidebar" class="sidebar-pane">
16+
<div class="sidebar-content sl-flex">
17+
<slot name="sidebar" />
18+
</div>
19+
</div>
20+
</nav>
21+
)
22+
}
23+
<div class="main-frame"><slot /></div>
24+
</div>
25+
26+
<style>
27+
@layer starlight.core {
28+
.page {
29+
flex-direction: column;
30+
min-height: 100vh;
31+
}
32+
33+
.header {
34+
z-index: var(--sl-z-index-navbar);
35+
position: fixed;
36+
inset-inline-start: 0;
37+
inset-block-start: 0;
38+
width: 100%;
39+
height: var(--sl-nav-height);
40+
border-bottom: 1px solid var(--sl-color-hairline-shade);
41+
padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
42+
padding-inline-end: var(--sl-nav-pad-x);
43+
background-color: var(--sl-color-bg-nav);
44+
}
45+
46+
:global([data-has-sidebar]) .header {
47+
padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
48+
}
49+
50+
.sidebar-pane {
51+
visibility: var(--sl-sidebar-visibility, hidden);
52+
position: fixed;
53+
z-index: var(--sl-z-index-menu);
54+
inset-block: calc(var(--sl-nav-height) + var(--v2-banner-height)) 0;
55+
inset-inline-start: 0;
56+
width: 100%;
57+
background-color: var(--sl-color-black);
58+
overflow-y: auto;
59+
}
60+
61+
:global([aria-expanded="true"]) ~ .sidebar-pane {
62+
--sl-sidebar-visibility: visible;
63+
}
64+
65+
.sidebar-content {
66+
height: 100%;
67+
min-height: max-content;
68+
padding: 1rem var(--sl-sidebar-pad-x) 0;
69+
flex-direction: column;
70+
gap: 1rem;
71+
}
72+
73+
@media (min-width: 50rem) {
74+
.sidebar-content::after {
75+
content: "";
76+
padding-bottom: 1px;
77+
}
78+
}
79+
80+
.main-frame {
81+
padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height) + var(--v2-banner-height));
82+
padding-inline-start: var(--sl-content-inline-start);
83+
}
84+
85+
@media (min-width: 50rem) {
86+
:global([data-has-sidebar]) .header {
87+
padding-inline-end: var(--sl-nav-pad-x);
88+
}
89+
.sidebar-pane {
90+
--sl-sidebar-visibility: visible;
91+
width: var(--sl-sidebar-width);
92+
background-color: var(--sl-color-bg-sidebar);
93+
border-inline-end: 1px solid var(--sl-color-hairline-shade);
94+
}
95+
}
96+
}
97+
</style>

‎packages/web/src/components/V2Banner.astro‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<a class="v2-banner" href="https://opencode.ai/v2">
2+
<span class="badge">New</span>
3+
<span class="text">OpenCode v2 is now available</span>
4+
<span class="arrow" aria-hidden="true">&rarr;</span>
5+
</a>
6+
7+
<style>
8+
.v2-banner {
9+
--banner-bg: hsl(62, 84%, 88%);
10+
--banner-bg-hover: hsl(62, 84%, 84%);
11+
--banner-text: hsl(0, 5%, 12%);
12+
--banner-badge-bg: hsl(0, 5%, 12%);
13+
--banner-badge-text: hsl(0, 20%, 99%);
14+
15+
position: fixed;
16+
top: var(--sl-nav-height);
17+
inset-inline: 0;
18+
z-index: var(--sl-z-index-navbar);
19+
box-sizing: border-box;
20+
height: var(--v2-banner-height);
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
gap: 12px;
25+
padding: 0 24px;
26+
background: var(--banner-bg);
27+
color: var(--banner-text) !important;
28+
text-decoration: none;
29+
font-size: 14px;
30+
line-height: 1;
31+
transition: background 0.15s ease;
32+
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
.v2-banner {
36+
--banner-bg: hsl(60, 24%, 11%);
37+
--banner-bg-hover: hsl(60, 24%, 14%);
38+
--banner-text: hsl(62, 100%, 90%);
39+
--banner-badge-bg: hsl(62, 100%, 90%);
40+
--banner-badge-text: hsl(0, 9%, 7%);
41+
}
42+
}
43+
44+
.v2-banner:hover {
45+
background: var(--banner-bg-hover);
46+
}
47+
48+
.badge {
49+
padding: 4px 8px;
50+
background: var(--banner-badge-bg);
51+
color: var(--banner-badge-text);
52+
font-size: 11px;
53+
font-weight: 600;
54+
text-transform: uppercase;
55+
letter-spacing: 0.04em;
56+
border-radius: 3px;
57+
}
58+
59+
.text {
60+
font-weight: 500;
61+
}
62+
63+
.arrow {
64+
transition: transform 0.15s ease;
65+
}
66+
67+
.v2-banner:hover .arrow {
68+
transform: translateX(4px);
69+
}
70+
71+
:global(:root[data-has-hero]) .v2-banner {
72+
display: none;
73+
}
74+
75+
@media (max-width: 30rem) {
76+
.v2-banner {
77+
padding: 0 16px;
78+
gap: 8px;
79+
}
80+
81+
.badge {
82+
display: none;
83+
}
84+
}
85+
</style>

‎packages/web/src/styles/custom.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,32 @@
2828
/* For the share component */
2929
--sl-color-bg-surface: var(--sl-color-bg-nav);
3030
--sl-color-divider: var(--sl-color-gray-5);
31+
32+
/* Fixed v2 announcement bar rendered below the header by PageFrame */
33+
--v2-banner-height: 2.75rem;
34+
}
35+
36+
:root[data-has-hero] {
37+
--v2-banner-height: 0rem;
38+
}
39+
40+
/* Shift fixed chrome below the v2 banner */
41+
mobile-starlight-toc nav {
42+
top: calc(var(--sl-nav-height) + var(--v2-banner-height) - 1px);
43+
}
44+
45+
html {
46+
scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height) + var(--v2-banner-height));
47+
}
48+
49+
@media (min-width: 72rem) {
50+
.right-sidebar {
51+
padding-top: calc(var(--sl-nav-height) + var(--v2-banner-height));
52+
}
53+
54+
html {
55+
scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--v2-banner-height));
56+
}
3157
}
3258

3359
body {

0 commit comments

Comments
 (0)