Skip to content

Commit

Permalink
Improve DocSearch modal (withastro#2086)
Browse files Browse the repository at this point in the history
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
  • Loading branch information
delucis and sarah11918 authored Nov 21, 2022
1 parent ca00416 commit f4ac8d5
Showing 6 changed files with 54 additions and 31 deletions.
23 changes: 0 additions & 23 deletions public/theme.css
Original file line number Diff line number Diff line change
@@ -193,29 +193,6 @@

--theme-glow-highlight: hsla(var(--color-base-purple), 50%, 1);
--theme-glow-diffuse: hsla(var(--color-base-purple), 35%, 0.4);

/* DocSearch [Algolia] */
--docsearch-primary-color: var(--theme-accent);
--docsearch-modal-background: var(--theme-bg-gradient-top);
--docsearch-searchbox-focus-background: var(--theme-bg-offset);
--docsearch-footer-background: var(--theme-bg-gradient-bottom);
--docsearch-text-color: var(--theme-text);
--docsearch-hit-background: var(--theme-bg-offset);
--docsearch-hit-shadow: none;
--docsearch-hit-color: var(--theme-text);
--docsearch-footer-shadow: inset 0 -1px 0 var(--theme-glow-highlight),
inset 1px 0px 0 var(--theme-glow-highlight), inset -1px 0px 0 var(--theme-glow-highlight),
inset 0 calc(-1 * var(--theme-glow-blur)) var(--theme-glow-blur)
calc(-1 * var(--theme-glow-blur)) var(--theme-glow-diffuse),
inset calc(-1 * var(--theme-glow-blur)) 0 var(--theme-glow-blur)
calc(-1 * var(--theme-glow-blur)) var(--theme-glow-diffuse),
inset var(--theme-glow-blur) 0 var(--theme-glow-blur) calc(-1 * var(--theme-glow-blur))
var(--theme-glow-diffuse);
--docsearch-modal-shadow: 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse),
inset 0 0 0 1px var(--theme-glow-highlight),
inset 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse);
--docsearch-container-background: hsla(var(--color-gray-10), 0.8);
--docsearch-hit-active-color: hsla(var(--color-gray-10), 1);
}

::selection {
31 changes: 26 additions & 5 deletions src/components/Header/DocSearch.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
:root {
--docsearch-hit-active-color: var(--theme-text);
--docsearch-primary-color: var(--theme-text-accent);
--docsearch-primary-color: var(--theme-accent-secondary);
--docsearch-modal-background: var(--theme-bg);
--docsearch-footer-background: var(--theme-bg-gradient-bottom);
--docsearch-logo-color: var(--theme-text);
--docsearch-text-color: var(--theme-text);
--docsearch-hit-color: var(--theme-text);
--docsearch-muted-color: var(--theme-text-lighter);
--docsearch-hit-shadow: none;
}

.DocSearch-Modal .DocSearch-Hit a {
box-shadow: none;
border: 1px solid var(--theme-glow-diffuse);
:root.theme-dark {
--docsearch-searchbox-focus-background: var(--theme-bg-offset);
--docsearch-hit-background: var(--theme-bg-offset);
--docsearch-footer-shadow: inset 0 -1px 0 var(--theme-glow-highlight),
inset 1px 0px 0 var(--theme-glow-highlight), inset -1px 0px 0 var(--theme-glow-highlight),
inset 0 calc(-1 * var(--theme-glow-blur)) var(--theme-glow-blur)
calc(-1 * var(--theme-glow-blur)) var(--theme-glow-diffuse),
inset calc(-1 * var(--theme-glow-blur)) 0 var(--theme-glow-blur)
calc(-1 * var(--theme-glow-blur)) var(--theme-glow-diffuse),
inset var(--theme-glow-blur) 0 var(--theme-glow-blur) calc(-1 * var(--theme-glow-blur))
var(--theme-glow-diffuse);
--docsearch-modal-shadow: 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse),
inset 0 0 0 1px var(--theme-glow-highlight),
inset 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse);
--docsearch-container-background: hsla(var(--color-gray-10), 0.8);
--docsearch-hit-active-color: hsla(var(--color-gray-10), 1);
--docsearch-key-gradient: linear-gradient(-225deg, #2b2d2f, #151515);
--docsearch-key-shadow: inset 0 -2px 0 0 #0d0d11, inset 0 0 1px 1px #000,
0 1px 2px 1px rgba(0, 0, 0, 0.4);
}

/* This query matches the upstream media query for mobile devices */
18 changes: 17 additions & 1 deletion src/components/Header/DocSearch.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import type { DocSearchTranslation } from '../../i18n/translation-checkers';

interface Props {
lang?: string;
labels: Pick<DocSearchTranslation, 'modal' | 'placeholder'>;
labels: Omit<DocSearchTranslation, 'button' | 'shortcutLabel'>;
}

export default function Search({ lang = 'en', labels }: Props) {
@@ -72,6 +72,22 @@ export default function Search({ lang = 'en', labels }: Props) {
}}
placeholder={labels.placeholder}
translations={labels.modal}
resultsFooterComponent={() => (
<div style={{ marginBlock: '2em' }}>
<p>{labels.resultsFooterLede}</p>
<ul style={{ display: 'flex', gap: '1em', marginBlock: '0.5em', flexWrap: 'wrap' }}>
<li>
<a href="https://astro.build/integrations/">{labels.resultsFooterIntegrations}</a>
</li>
<li>
<a href="https://astro.build/themes/">{labels.resultsFooterThemes}</a>
</li>
<li>
<a href="https://astro.build/chat">{labels.resultsFooterDiscord}</a>
</li>
</ul>
</div>
)}
/>,
document.body
);
4 changes: 2 additions & 2 deletions src/components/Header/Search.astro
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ export interface Props {
}
const { lang, labels } = Astro.props as Props;
const { button, shortcutLabel, modal, placeholder } = labels;
const { button, shortcutLabel, ...modalLabels } = labels;
---

<button
@@ -45,7 +45,7 @@ const { button, shortcutLabel, modal, placeholder } = labels;
<kbd aria-hidden="true">/</kbd>
</span>
</button>
<DocSearch {...{ lang, labels: { modal, placeholder } }} client:only="preact" />
<DocSearch {...{ lang, labels: modalLabels }} client:only="preact" />

<style>
/** Style search header button */
4 changes: 4 additions & 0 deletions src/i18n/en/docsearch.ts
Original file line number Diff line number Diff line change
@@ -4,5 +4,9 @@ export default DocSearchDictionary({
button: 'Search',
placeholder: 'Search docs',
shortcutLabel: 'Press / to search',
resultsFooterLede: 'Looking for an Astro integration or theme? Need more help?',
resultsFooterIntegrations: 'Astro integrations directory',
resultsFooterThemes: 'Astro themes showcase',
resultsFooterDiscord: 'Join us on Discord',
modal: {},
});
5 changes: 5 additions & 0 deletions src/i18n/translation-checkers.ts
Original file line number Diff line number Diff line change
@@ -34,6 +34,11 @@ export interface DocSearchTranslation {
// These two keys are Astro-specific and apply to the search box in the header.
button?: string;
shortcutLabel?: string;
// Astro-specific labels for the custom `resultsFooterComponent`.
resultsFooterLede?: string;
resultsFooterIntegrations?: string;
resultsFooterThemes?: string;
resultsFooterDiscord?: string;
// Search box placeholder text within the DocSearch modal.
placeholder?: string;
// This object follows DocSearch's translation.modal format.

0 comments on commit f4ac8d5

Please sign in to comment.