Skip to content

Commit 098844b

Browse files
AriaEdoAriaEdo
authored
Merge pull request #399 from datum-cloud/fix-docs
chore: fix search result docs
2 parents 79c4f30 + 36c3cc3 commit 098844b

File tree

4 files changed

+175
-103
lines changed

4 files changed

+175
-103
lines changed

‎src/components/starlight/SearchButton.astro‎

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Icon from '@components/Icon.astro';
99
aria-label={Astro.locals.t('search.label')}
1010
aria-keyshortcuts="Control+K"
1111
>
12-
<Icon name="search" />
12+
<Icon name="search" size="sm" />
1313
<span class="md:sl-block" aria-hidden="true">{Astro.locals.t('search.label')}</span>
1414
<kbd class="md:sl-flex" style="display: none;">
1515
<kbd>{Astro.locals.t('search.ctrlKey')}</kbd><kbd>K</kbd>
@@ -75,51 +75,3 @@ import Icon from '@components/Icon.astro';
7575

7676
customElements.define('site-search-button', SiteSearchButton);
7777
</script>
78-
79-
<style>
80-
@layer starlight.core {
81-
site-search-button {
82-
display: contents;
83-
}
84-
85-
button[data-open-modal] {
86-
display: flex;
87-
align-items: center;
88-
gap: 0.5rem;
89-
border: 0;
90-
color: var(--sl-color-gray-1);
91-
cursor: pointer;
92-
height: 2.5rem;
93-
font-size: var(--sl-text-xl);
94-
border: 1px solid var(--sl-color-gray-5);
95-
border-radius: 0.5rem;
96-
padding-inline-start: 0.75rem;
97-
padding-inline-end: 0.5rem;
98-
background-color: var(--sl-color-black);
99-
color: var(--sl-color-gray-2);
100-
font-size: var(--sl-text-sm);
101-
width: 100%;
102-
}
103-
104-
button[data-open-modal]:hover {
105-
border-color: var(--sl-color-gray-2);
106-
color: var(--sl-color-white);
107-
}
108-
109-
button[data-open-modal] > :last-child {
110-
margin-inline-start: auto;
111-
}
112-
113-
button > kbd {
114-
border-radius: 0.25rem;
115-
font-size: var(--sl-text-2xs);
116-
gap: 0.25em;
117-
padding-inline: 0.375rem;
118-
background-color: var(--sl-color-gray-6);
119-
}
120-
121-
kbd {
122-
font-family: var(--__sl-font);
123-
}
124-
}
125-
</style>

‎src/components/starlight/SearchModal.astro‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
1919
<dialog style="padding:0" aria-label={Astro.locals.t('search.label')}>
2020
<div class="dialog-frame sl-flex" data-lenis-prevent>
2121
<button data-close-modal class="sl-flex" aria-label={Astro.locals.t('search.cancelLabel')}>
22-
<Icon name="x" size="lg" class="close-icon" />
22+
<span>Close</span>
23+
<Icon name="x" size="sm" class="close-icon" />
2324
</button>
2425
{
2526
import.meta.env.DEV ? (
@@ -191,8 +192,8 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
191192

192193
dialog {
193194
margin: 0;
194-
background-color: var(--sl-color-gray-6);
195-
border: 1px solid var(--sl-color-gray-5);
195+
background-color: var(--sl-color-dialog);
196+
border: 1px solid var(--sl-color-dialog-border);
196197
width: 100%;
197198
max-width: 100%;
198199
height: 100%;
@@ -224,10 +225,9 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
224225
align-items: center;
225226
justify-content: center;
226227
align-self: flex-end;
227-
top: 0.75rem;
228+
top: 2rem;
228229
right: 0.75rem;
229-
width: 2rem;
230-
height: 2rem;
230+
height: 1.5rem;
231231
padding: 0.25rem;
232232
border: 0;
233233
border-radius: 0.25rem;
@@ -237,6 +237,13 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
237237
transition: background-color 0.2s ease;
238238
}
239239

240+
button[data-close-modal] span {
241+
color: var(--sl-color-text);
242+
font-size: 12px;
243+
display: inline-block;
244+
padding-right: 0.3rem;
245+
}
246+
240247
button[data-close-modal]:hover {
241248
background-color: var(--sl-color-gray-5);
242249
color: var(--sl-color-white);
@@ -255,7 +262,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
255262
--pagefind-ui-border: var(--sl-color-gray-5);
256263
--pagefind-ui-border-width: 1px;
257264
--pagefind-ui-tag: var(--sl-color-gray-5);
258-
--sl-search-cancel-space: 5rem;
265+
--sl-search-cancel-space: 80px;
259266
}
260267

261268
:root[data-theme='light'] #starlight__search {
@@ -264,7 +271,11 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
264271

265272
@media (min-width: 40rem) {
266273
#starlight__search {
267-
--sl-search-cancel-space: 0px;
274+
--sl-search-cancel-space: 120px;
275+
}
276+
277+
button[data-close-modal] {
278+
top: 2.25rem;
268279
}
269280

270281
dialog {
@@ -294,8 +305,8 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
294305

295306
#starlight__search {
296307
--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
297-
--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
298-
--sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
308+
--sl-search-result-pad-inline-start: calc(1.75rem * var(--pagefind-ui-scale));
309+
--sl-search-result-pad-inline-end: calc(1.75rem * var(--pagefind-ui-scale));
299310
--sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
300311
--sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
301312
--sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
@@ -311,7 +322,13 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
311322

312323
#starlight__search .pagefind-ui__form::before {
313324
--pagefind-ui-text: var(--sl-color-gray-1);
325+
background-color: var(--sl-color-text-accent);
314326
opacity: 1;
327+
328+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-search-icon lucide-search'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E")
329+
center;
330+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-search-icon lucide-search'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E")
331+
center;
315332
}
316333

317334
#starlight__search .pagefind-ui__search-input {
@@ -321,7 +338,8 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
321338
}
322339

323340
#starlight__search input:focus {
324-
--pagefind-ui-border: var(--sl-color-accent);
341+
outline: none;
342+
--pagefind-ui-border: var(--sl-color-gray-2);
325343
}
326344

327345
#starlight__search .pagefind-ui__search-clear {
@@ -336,11 +354,11 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
336354
}
337355
#starlight__search .pagefind-ui__search-clear::before {
338356
content: '';
339-
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
357+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-x-icon lucide-x'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")
340358
center / 50% no-repeat;
341-
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
359+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-x-icon lucide-x'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")
342360
center / 50% no-repeat;
343-
background-color: var(--sl-color-text-accent);
361+
background-color: #90969c;
344362
display: block;
345363
width: 100%;
346364
height: 100%;
@@ -357,21 +375,22 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
357375
#starlight__search .pagefind-ui__result-nested {
358376
position: relative;
359377
padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
360-
padding-inline-start: var(--sl-search-result-pad-inline-start);
378+
padding-inline-start: calc(1.35 * var(--sl-search-result-pad-inline-start));
379+
background-color: transparent;
361380
}
362381

363382
#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
364383
#starlight__search .pagefind-ui__result-nested {
365384
position: relative;
366-
background-color: var(--sl-color-black);
385+
background-color: transparent;
367386
}
368387

369388
#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
370389
#starlight__search
371390
.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
372391
#starlight__search .pagefind-ui__result-nested:hover,
373392
#starlight__search .pagefind-ui__result-nested:focus-within {
374-
outline: 1px solid var(--sl-color-accent-high);
393+
background-color: var(--sl-color-black);
375394
}
376395

377396
#starlight__search
@@ -394,18 +413,19 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
394413

395414
#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
396415
padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
397-
padding-inline-start: var(--sl-search-result-pad-inline-start);
416+
padding-inline-start: calc(1.35 * var(--sl-search-result-pad-inline-start));
417+
background-color: transparent;
398418
}
399419
#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
400420
content: '';
401421
position: absolute;
402422
inset-block: 0;
403423
inset-inline-start: var(--sl-search-page-icon-inline-start);
404424
width: var(--sl-search-page-icon-size);
405-
background: var(--sl-color-gray-3);
406-
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
425+
background-color: var(--sl-color-text-accent);
426+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath stroke-width='1' d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
407427
center no-repeat;
408-
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
428+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath stroke-width='1' d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
409429
center no-repeat;
410430
}
411431

@@ -460,6 +480,7 @@ if (project.trailingSlash === 'never') dataAttributes['data-strip-trailing-slash
460480
#starlight__search .pagefind-ui__result-excerpt {
461481
font-size: calc(1rem * var(--pagefind-ui-scale));
462482
overflow-wrap: anywhere;
483+
color: var(--sl-color-text-search);
463484
}
464485

465486
#starlight__search mark {

‎src/components/starlight/TwoColumnContent.astro‎

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import config from 'virtual:starlight/user-config';
55
import PageSidebar from './PageSidebar.astro';
66
import { Breadcrumbs } from 'astro-breadcrumbs';
77
import SearchButton from './SearchButton.astro';
8+
import { getCollection } from 'astro:content';
89
910
// Get Starlight route data
1011
const { hasSidebar } = Astro.locals.starlightRoute;
@@ -17,7 +18,7 @@ let breadcrumbData = [];
1718
breadcrumbData.push(
1819
{
1920
text: 'Home',
20-
href: '/',
21+
href: '/docs/',
2122
},
2223
{
2324
text: 'Docs',
@@ -41,19 +42,81 @@ const pathSegments = fullPath
4142
.split('/')
4243
.filter(Boolean);
4344
44-
console.log(pathSegments);
45+
// Get all docs entries to look up real titles
46+
const allDocs = await getCollection('docs');
4547
4648
// Build breadcrumbs for each path segment
4749
if (pathSegments.length > 0) {
4850
let currentPath = '';
51+
let currentSlug = '';
4952
5053
for (const segment of pathSegments) {
5154
currentPath += '/' + segment;
55+
currentSlug = currentSlug ? `${currentSlug}/${segment}` : segment;
56+
57+
// Process each segment to build breadcrumbs
58+
59+
// Try to find index files for this segment first (more accurate titles)
60+
// First try with the exact segment name
61+
const segmentIndexPaths = [
62+
`docs/${segment}/index`,
63+
`${segment}/index`,
64+
`docs/docs/${segment}/index`,
65+
];
66+
67+
const indexFile = allDocs.find(
68+
(entry) =>
69+
// Check against our list of possible paths
70+
segmentIndexPaths.includes(entry.id) ||
71+
// Also check with the current slug
72+
entry.id === `docs/${currentSlug}/index` ||
73+
entry.id === `${currentSlug}/index` ||
74+
// Also check for exact segment match in the last part of the path
75+
(entry.id.endsWith('/index') && entry.id.split('/').includes(segment))
76+
);
77+
78+
if (indexFile) {
79+
// Use the index file's title for this breadcrumb
80+
breadcrumbData.push({
81+
text: indexFile.data.title,
82+
href: '/docs' + currentPath + '/',
83+
});
5284
53-
// Format the segment title (capitalize words, replace dashes with spaces)
54-
const segmentTitle = segment
55-
.replace(/-/g, ' ')
56-
.replace(/\b\w/g, (c: string) => c.toUpperCase());
85+
// Continue to the next segment
86+
continue;
87+
}
88+
89+
// Try to find the actual document title from the collection
90+
// First try to find the exact id match
91+
let docEntry = allDocs.find((entry) => entry.id === currentSlug);
92+
93+
// If not found, try to find an index file in that directory
94+
if (!docEntry) {
95+
// Standard handling for segments
96+
const indexEntries = allDocs.filter(
97+
(entry) =>
98+
// Match both "segment" and "segment/index" patterns that might exist in Starlight
99+
entry.id === currentSlug ||
100+
(entry.id.startsWith(`${currentSlug}/`) && entry.id.split('/').pop() === 'index') ||
101+
// Also try with docs/ prefix
102+
entry.id === `docs/${currentSlug}` ||
103+
(entry.id.startsWith(`docs/${currentSlug}/`) && entry.id.split('/').pop() === 'index')
104+
);
105+
106+
if (indexEntries.length > 0) {
107+
// Prefer exact directory match if available
108+
docEntry = indexEntries.find((entry) => entry.id === currentSlug) || indexEntries[0];
109+
}
110+
}
111+
112+
// Use the real title if found, otherwise format the segment
113+
let segmentTitle;
114+
if (docEntry && docEntry.data.title) {
115+
segmentTitle = docEntry.data.title;
116+
} else {
117+
// Format the segment title (capitalize words, replace dashes with spaces)
118+
segmentTitle = segment.replace(/-/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase());
119+
}
57120
58121
breadcrumbData.push({
59122
text: segmentTitle,
@@ -62,7 +125,7 @@ if (pathSegments.length > 0) {
62125
}
63126
64127
if (starlightRoute.entry?.data?.title) {
65-
// Replace the last item's text with the actual page title
128+
// Replace the last item's text with the actual page title from the current route
66129
breadcrumbData[breadcrumbData.length - 1].text = starlightRoute.entry.data.title;
67130
}
68131
}
@@ -115,17 +178,13 @@ const shouldRenderSearch =
115178
</div>
116179

117180
<script>
118-
function addDocsSmToSecondBreadcrumb() {
119-
// Wait until DOM is ready
120-
document.addEventListener('DOMContentLoaded', () => {
121-
const breadcrumbs = document.querySelectorAll('li.c-breadcrumbs__crumb');
122-
if (breadcrumbs.length <= 3) {
123-
breadcrumbs[1].classList.add('docs-sm');
124-
}
125-
});
126-
}
127-
addDocsSmToSecondBreadcrumb();
128181
document.addEventListener('DOMContentLoaded', () => {
182+
const breadcrumbs = document.querySelectorAll('li.c-breadcrumbs__crumb');
183+
184+
if (breadcrumbs.length >= 5) {
185+
breadcrumbs[breadcrumbs.length - 1].classList.add('hidden', 'md:inline-flex');
186+
}
187+
129188
const docsMenuToggle = document.querySelector('.docs-menu-toggle');
130189
const pathSegments = window.location.pathname
131190
.replace(/^\/?docs\//, '')
@@ -183,12 +242,3 @@ const shouldRenderSearch =
183242
}
184243
});
185244
</script>
186-
187-
<style>
188-
.search-button {
189-
width: 100%;
190-
}
191-
192-
/* The SearchButton component already has its own styling,
193-
so we don't need to add much custom styling here */
194-
</style>

0 commit comments

Comments
 (0)