Skip to content

Commit 2843c47

Browse files
mdomdo
committed
woooooo
1 parent af5276a commit 2843c47

26 files changed

+296
-274
lines changed

‎eslint.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,9 @@ export default [
136136
'**/*.d.ts',
137137
'**/*.astro',
138138
// Meteor metadata file (uses unsupported eslint-env comment)
139-
'package.js'
139+
'package.js',
140+
// Claude worktrees
141+
'.claude/worktrees/**'
140142
]
141143
},
142144

‎scss/_drawer.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,6 @@ $drawer-backdrop-tokens: defaults(
204204
display: flex;
205205
flex-grow: 0;
206206
flex-direction: row;
207-
align-items: center;
208207
width: 100%;
209208
padding: 0;
210209
overflow-y: visible;

‎site/src/components/PageMeta.astro‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const deps = frontmatter.deps ?? []
3939
const depsCount = deps.length
4040
---
4141

42-
<div class="bd-page-meta d-flex flex-wrap gap-5 row-gap-2 px-4 py-3 bg-1 fg-2 fs-sm rounded-3">
42+
<div class="bd-page-meta w-100 d-grid md:grid-cols-2 lg:d-flex gap-5 row-gap-2 px-4 py-3 bg-1 fg-2 fs-sm rounded-3">
4343
{frontmatter.js === 'required' && (
4444
<div class="d-flex align-items-center gap-2">
4545
<svg class="bi fg-warning" aria-hidden="true"><use href="#filetype-js" /></svg>
@@ -49,64 +49,67 @@ const depsCount = deps.length
4949
{frontmatter.js === 'optional' && (
5050
<div class="d-flex align-items-center gap-2">
5151
<svg class="bi fg-warning opacity-50" aria-hidden="true"><use href="#filetype-js" /></svg>
52-
Optional JavaScript-based features
52+
JavaScript is optional
5353
</div>
5454
)}
5555
{frontmatter.css_layer && (
5656
<div class="d-flex align-items-center gap-2">
57-
<svg class="bi fg-accent" aria-hidden="true"><use href="#layers" /></svg>
58-
<span>In <code class="fg-body">{frontmatter.css_layer}</code> CSS layer</span>
57+
<svg class="bi fg-accent" aria-hidden="true"><use href="#css" /></svg>
58+
<span>In <code class="fg-body">{frontmatter.css_layer}</code> layer</span>
59+
</div>
60+
)}
61+
{frontmatter.css_media === 'container' && (
62+
<div class="d-flex align-items-center gap-2">
63+
<svg class="bi" aria-hidden="true" style="color: var(--bs-pink-500);"><use href="#bounding-box-fill" /></svg>
64+
Container queries
65+
</div>
66+
)}
67+
{frontmatter.css_media === 'viewport' && (
68+
<div class="d-flex align-items-center gap-2">
69+
<svg class="bi" aria-hidden="true" style="color: var(--bs-purple-500);"><use href="#aspect-ratio-fill" /></svg>
70+
Viewport queries
5971
</div>
6072
)}
6173
{depsCount > 0 && (
6274
<div class="d-flex align-items-center gap-2">
63-
<svg class="bi fg-2" aria-hidden="true"><use href="#box-seam" /></svg>
75+
<svg class="bi fg-2" aria-hidden="true"><use href="#box-seam-fill" /></svg>
6476
<div>
6577
Depends on
6678
{deps.map((dep, i) => (
67-
<Fragment>
68-
{i > 0 && ', '}
69-
{dep.url?.startsWith('http') ? (
70-
<a class="fg-2 text-decoration-none" href={dep.url} target="_blank" rel="noopener">
71-
{dep.title}
72-
</a>
79+
<Fragment>{i > 0 && ', '}{dep.url?.startsWith('http') ? (
80+
<a class="fg-2 text-decoration-none" href={dep.url} target="_blank" rel="noopener">{dep.title}</a>
7381
) : dep.url ? (
74-
<a class="fg-2 text-decoration-none" href={dep.url}>
75-
{dep.title}
76-
</a>
82+
<a class="fg-2 text-decoration-none" href={dep.url}>{dep.title}</a>
7783
) : (
78-
<a class="fg-2 text-decoration-none" href={getVersionedDocsPath(`components/${getSlug(dep.title)}/`)}>
79-
{dep.title}
80-
</a>
81-
)}
82-
</Fragment>
84+
<a class="fg-2 text-decoration-none" href={getVersionedDocsPath(`components/${getSlug(dep.title)}/`)}>{dep.title}</a>
85+
)}</Fragment>
8386
))}
8487
</div>
8588
</div>
8689
)}
8790
{frontmatter.added &&
8891
((frontmatter.added.show_badge === undefined || frontmatter.added.show_badge === true)) && (
89-
<div class="hstack align-items-center gap-2">
92+
<div class="d-flex align-items-center gap-2">
9093
<svg class="bi fg-success" aria-hidden="true"><use href="#plus" /></svg>
9194
Added in v{frontmatter.added.version}
9295
</div>
9396
)}
9497
{frontmatter.mdn && (
95-
<div class="hstack align-items-center gap-2">
98+
<div class="d-flex align-items-center gap-2">
9699
<MdnIcon height={16} width={16} class="bi fg-2" />
97-
<a class="fg-2 text-decoration-none" href={frontmatter.mdn} target="_blank" rel="noopener">MDN</a>
100+
<a class="fg-2 text-decoration-none" href={frontmatter.mdn} target="_blank" rel="noopener">MDN Reference</a>
98101
</div>
99102
)}
100103
{frontmatter.csstricks && (
101-
<div class="hstack align-items-center gap-2">
104+
<div class="d-flex align-items-center gap-2">
102105
<CssTricksIcon height={16} width={16} class="bi fg-2" />
103106
<a class="fg-2 text-decoration-none" href={typeof frontmatter.csstricks === 'string' ? frontmatter.csstricks : frontmatter.csstricks.url} target="_blank" rel="noopener">
104107
{typeof frontmatter.csstricks === 'string' ? 'CSS-Tricks' : (frontmatter.csstricks.label || 'CSS-Tricks')}
105108
</a>
106109
</div>
107110
)}
108-
<div class="hstack align-items-center gap-2">
111+
<div class="d-flex align-items-center gap-2">
109112
<svg class="bi fg-2" aria-hidden="true"><use href="#github" /></svg>
110-
<a class="fg-2 text-decoration-none" href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/docs/${id}`} target="_blank" rel="noopener">Source</a>
113+
<a class="fg-2 text-decoration-none" href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/docs/${id}`} target="_blank" rel="noopener">View & Edit</a>
111114
</div>
112115
</div>

‎site/src/components/header/LinkItem.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ const { active, class: className, track, ...props } = Astro.props
1313
const content = await Astro.slots.render('default')
1414
---
1515

16-
<li class="nav-item col-6 lg:col-auto">
16+
<li class="nav-item">
1717
<a
1818
aria-current={active ? true : undefined}
19-
class:list={['nav-link py-2 px-0 lg:px-2', className, { active }]}
19+
class:list={['nav-link px-2', className, { active }]}
2020
{...props}
2121
>
2222
<slot />

‎site/src/components/header/Navigation.astro‎

Lines changed: 87 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -20,99 +20,108 @@ interface Props {
2020
}
2121
2222
const { addedIn, layout, title } = Astro.props
23+
24+
const activeSection = title === 'Examples' ? 'Examples' : 'Docs'
2325
---
2426

2527
<header class="navbar lg:navbar-expand bd-navbar border-bottom">
26-
<nav class="2xl:container bd-gutter flex-wrap lg:flex-nowrap" aria-label="Main navigation">
27-
{/* Docs sidebar toggle - only shown on docs pages */}
28+
<nav class="2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start" aria-label="Main navigation">
29+
<div class="d-flex align-items-center gap-2 lg:gap-1">
30+
<a class="navbar-brand p-0 me-0 lg:me-2" href="/" aria-label="Bootstrap" style="color: var(--bs-indigo-500);">
31+
<BootstrapWhiteFillIcon class="d-block my-1" height={32} width={40} />
32+
</a>
33+
34+
<span class="lg:d-none fg-4">/</span>
35+
36+
{/* Mobile breadcrumb dropdown - visible below lg */}
37+
<div class="nav-item lg:d-none">
38+
<button
39+
class="nav-link fs-5 fw-medium d-inline-flex align-items-center gap-1 px-0"
40+
type="button"
41+
data-bs-toggle="menu"
42+
aria-expanded="false"
43+
>
44+
{activeSection}
45+
<svg class="bi bi-sm" aria-hidden="true"><use href="#chevron-expand"></use></svg>
46+
</button>
47+
<div class="menu">
48+
<a
49+
class:list={['menu-item', { active: layout === 'docs' }]}
50+
href={getVersionedDocsPath('getting-started/install/')}
51+
>
52+
Docs
53+
{layout === 'docs' && <svg class="bi ms-auto" aria-hidden="true"><use href="#check2"></use></svg>}
54+
</a>
55+
<a
56+
class:list={['menu-item', { active: title === 'Examples' }]}
57+
href={getVersionedDocsPath('examples/')}
58+
>
59+
Examples
60+
{title === 'Examples' && <svg class="bi ms-auto" aria-hidden="true"><use href="#check2"></use></svg>}
61+
</a>
62+
<a class="menu-item" href={getConfig().icons} target="_blank" rel="noopener">
63+
Icons
64+
<svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
65+
</a>
66+
<a class="menu-item" href={getConfig().blog} target="_blank" rel="noopener">
67+
Blog
68+
<svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
69+
</a>
70+
<hr class="menu-divider" />
71+
<a class="menu-item" href={getConfig().github_org} target="_blank" rel="noopener">
72+
GitHub
73+
<svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
74+
</a>
75+
<a class="menu-item" href={getConfig().opencollective} target="_blank" rel="noopener">
76+
OpenCollective
77+
<svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
78+
</a>
79+
<a class="menu-item" href={`https://x.com/${getConfig().x}`} target="_blank" rel="noopener">
80+
Twitter/X
81+
<svg class="bi ms-auto" aria-hidden="true"><use href="#box-arrow-up-right"></use></svg>
82+
</a>
83+
</div>
84+
</div>
85+
86+
{/* Desktop nav links - visible at lg+ */}
87+
<ul class="nav navbar-nav flex-row d-none lg:d-flex bd-navbar-nav">
88+
<LinkItem active={layout === 'docs'} href={getVersionedDocsPath('getting-started/install/')} track>
89+
Docs
90+
</LinkItem>
91+
<LinkItem active={title === 'Examples'} href={getVersionedDocsPath('examples/')} track>Examples</LinkItem>
92+
<LinkItem href={getConfig().icons} target="_blank" rel="noopener" track>Icons</LinkItem>
93+
<LinkItem href={getConfig().blog} target="_blank" rel="noopener" track>Blog</LinkItem>
94+
</ul>
95+
</div>
96+
97+
<ul class="nav navbar-nav flex-row ms-auto">
98+
<li class="nav-item nav-link px-1" id="docsearch" data-bd-docs-version={getConfig().docs_version}></li>
99+
100+
<Versions layout={layout} addedIn={addedIn} />
101+
102+
<LinkItem class="px-1 d-none lg:d-flex" href={getConfig().github_org} target="_blank" rel="noopener">
103+
<GitHubIcon class="navbar-nav-svg" height={16} width={16} />
104+
</LinkItem>
105+
106+
<li class="nav-item">
107+
<ThemeToggler layout={layout} />
108+
</li>
109+
</ul>
110+
28111
{
29112
layout === 'docs' && (
30113
<button
31-
class="btn-icon navbar-btn-icon lg:d-none ms--2"
114+
class="btn-icon btn-sm navbar-btn-icon lg:d-none ms-2"
32115
type="button"
33116
data-bs-toggle="drawer"
34117
data-bs-target="#bdSidebar"
35118
aria-controls="bdSidebar"
36119
aria-label="Toggle docs navigation"
37120
>
38-
<HamburgerIcon class="navbar-toggler-icon" height={20} width={20} />
121+
<HamburgerIcon class="navbar-toggler-icon" height={16} width={16} />
39122
<span class="d-none fs-6 pe-1">Browse</span>
40123
</button>
41124
)
42125
}
43-
{layout !== 'docs' && <div class="lg:d-none" style="width: 4.25rem;" />}
44-
45-
<a class="navbar-brand p-0 me-0 lg:me-2" href="/" aria-label="Bootstrap" style="color: var(--bs-indigo-500);">
46-
<BootstrapWhiteFillIcon class="d-block my-1" height={32} width={40} />
47-
</a>
48-
49-
{/* Search and nav toggles */}
50-
<div class="d-flex gap-3">
51-
<div class="bd-search" id="docsearch" data-bd-docs-version={getConfig().docs_version}></div>
52-
53-
<button
54-
class="btn-icon navbar-btn-icon lg:d-none order-3 me--2"
55-
type="button"
56-
data-bs-toggle="drawer"
57-
data-bs-target="#bdNavbar"
58-
aria-controls="bdNavbar"
59-
aria-label="Toggle navigation"
60-
>
61-
<svg class="bi" aria-hidden="true"><use href="#three-dots"></use></svg>
62-
</button>
63-
</div>
64-
65-
{/* Main navigation - drawer on mobile, inline on desktop */}
66-
<dialog
67-
class="lg:drawer drawer-end flex-grow-1 drawer-fit-content"
68-
tabindex="-1"
69-
id="bdNavbar"
70-
aria-labelledby="bdNavbarDrawerLabel"
71-
>
72-
<div class="drawer-header px-4 pb-0">
73-
<h5 class="drawer-title text-white" id="bdNavbarDrawerLabel">Bootstrap</h5>
74-
<CloseButton dismiss="drawer" target="#bdNavbar" />
75-
</div>
76-
77-
<div class="drawer-body p-4 pt-0 lg:p-0">
78-
<hr class="lg:d-none mb-0" />
79-
<ul class="nav navbar-nav flex-row flex-wrap bd-navbar-nav">
80-
<LinkItem active={layout === 'docs'} href={getVersionedDocsPath('getting-started/install/')} track>
81-
Docs
82-
</LinkItem>
83-
<LinkItem active={title === 'Examples'} href={getVersionedDocsPath('examples/')} track>Examples</LinkItem>
84-
<LinkItem href={getConfig().icons} target="_blank" rel="noopener" track>Icons</LinkItem>
85-
<LinkItem href={getConfig().blog} target="_blank" rel="noopener" track>Blog</LinkItem>
86-
</ul>
87-
88-
<hr class="lg:d-none my-0" />
89-
90-
<ul class="nav navbar-nav md:ms-auto">
91-
<LinkItem class="nav-link py-2 px-0 lg:px-2" href={getConfig().github_org} target="_blank" rel="noopener">
92-
<GitHubIcon class="navbar-nav-svg" height={16} width={16} />
93-
<small class="lg:d-none">GitHub</small>
94-
</LinkItem>
95-
<LinkItem
96-
class="nav-link py-2 px-0 lg:px-2"
97-
href={`https://x.com/${getConfig().x}`}
98-
target="_blank"
99-
rel="noopener"
100-
>
101-
<XIcon class="navbar-nav-svg" height={16} width={16} />
102-
<small class="lg:d-none">X</small>
103-
</LinkItem>
104-
<LinkItem class="nav-link py-2 px-0 lg:px-2" href={getConfig().opencollective} target="_blank" rel="noopener">
105-
<OpenCollectiveIcon class="navbar-nav-svg" height={16} width={16} />
106-
<small class="lg:d-none">Open Collective</small>
107-
</LinkItem>
108-
109-
<Versions layout={layout} addedIn={addedIn} />
110-
111-
<li class="nav-item">
112-
<ThemeToggler layout={layout} />
113-
</li>
114-
</ul>
115-
</div>
116-
</dialog>
117126
</nav>
118127
</header>

‎site/src/components/header/Versions.astro‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,13 @@ if (layout === 'docs' && version === getConfig().docs_version) {
2626
<li class="nav-item">
2727
<button
2828
type="button"
29-
class="btn btn-link nav-link py-2 px-0 lg:px-2"
29+
class="btn btn-link nav-link px-1 gap-1"
3030
data-bs-toggle="menu"
3131
data-bs-placement="bottom-end"
3232
aria-expanded="false"
3333
>
34-
<svg class="bi" aria-hidden="true"><use href="#stack"></use></svg>
35-
<span class="lg:d-none" aria-hidden="true">
36-
Bootstrap v{
37-
getConfig().docs_version
38-
}
39-
</span>
40-
<svg class="bi bi-sm lg:ms--1" aria-hidden="true"><use href="#chevron-expand"></use></svg>
34+
v{getConfig().docs_version}
35+
<svg class="bi bi-sm" aria-hidden="true"><use href="#chevron-expand"></use></svg>
4136
</button>
4237
<div class="menu" id="bd-versions-menu">
4338
<h6 class="menu-header">v6 releases</h6>

0 commit comments

Comments
 (0)