elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 21:58:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add and style algolia search

Browse Source
This commit is contained in:
Alexandre G.-Raymond 2023-11-26 22:50:17 +01:00
parent 69e99fa902
commit dacd1e6146
No known key found for this signature in database
GPG Key ID: 97BA9F51695B5C7B
3 changed files with 68 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/components/Header/Header.astro
View File

@ -35,7 +35,7 @@ const sidebar = SIDEBAR[langCode];
</div>
{/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
<div class="search-item h-10">
<!-- <Search client:idle /> -->
<Search client:idle />
</div>
<a href="./" class="hidden md:flex cursor-pointer items-center space-x-1"
><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
@ -48,8 +48,8 @@ const sidebar = SIDEBAR[langCode];
<style>
/** Style Algolia */
:root {
--docsearch-primary-color: var(--theme-accent);
--docsearch-logo-color: var(--theme-text);
--docsearch-primary-color: var(--lineHighlight);
--docsearch-logo-color: var(--foreground);
}
.search-item {

75
website/src/components/Header/Search.css
View File

@ -1,7 +1,27 @@
/** Style Algolia */
:root {
--docsearch-primary-color: var(--theme-accent);
--docsearch-logo-color: var(--theme-text);
--docsearch-primary-color: var(--lineHighlight);
--docsearch-logo-color: var(--foreground);
--docsearch-container-background: rgba(110,110,110,0.8);
--docsearch-modal-shadow: none;
--docsearch-text-color: var(--foreground);
--docsearch-highlight-color: var(--foreground);
--docsearch-searchbox-background: var(--lineBackground);
--docsearch-searchbox-focus-background: var(--lineBackground);
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--lineHighlight);
--docsearch-hit-background: var(--background);
--docsearch-hit-active-color: var(--background);
--docsearch-hit-color: var(--foreground);
--docsearch-hit-shadow: 0 1px 3px 0 var(--foreground);
--docsearch-footer-shadow: none;
--docsearch-footer-background: var(--gutterBackground);
--docsearch-modal-background: var(--background);
--docsearch-muted-color: color-mix(in srgb,var(--foreground),#fff 30%);
--docsearch-key-gradient: var(--foreground);
--docsearch-key-shadow: inset 0 -2px 0 0 var(--gutterForeground),inset 0 0 1px 1px var(--foreground),0 1px 2px 1px var(--gutterBackground);
}
.dark {
--docsearch-muted-color: color-mix(in srgb,var(--foreground),#000 30%);
}
.search-input {
flex-grow: 1;
@ -14,9 +34,9 @@
font-size: 1rem;
font-family: inherit;
line-height: inherit;
background-color: var(--theme-divider);
border-color: var(--theme-divider);
color: var(--theme-text-light);
background-color: var(--lineBackground);
border-color: var(--lineBackground);
color: var(--foreground);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
@ -29,15 +49,15 @@
}
.search-input:hover,
.search-input:focus {
color: var(--theme-text);
border-color: var(--theme-text-light);
color: var(--foreground);
border-color: var(--foreground);
}
.search-input:hover::placeholder,
.search-input:focus::placeholder {
color: var(--theme-text-light);
color: var(--foreground);
}
.search-input::placeholder {
color: var(--theme-text-light);
color: var(--foreground);
}
.search-hint {
position: absolute;
@ -48,11 +68,13 @@
align-items: center;
justify-content: center;
letter-spacing: 0.125em;
font-size: 13px;
font-size: 12px;
font-family: var(--font-mono);
pointer-events: none;
border-color: var(--theme-text-lighter);
color: var(--theme-text-light);
border-color: transparent;
color: var(--background);
background-color: var(--foreground);
box-shadow: var(--docsearch-key-shadow);
border-style: solid;
border-width: 1px;
border-radius: 0.25rem;
@ -64,12 +86,37 @@
display: flex;
}
}
.search-button {
background-color: var(--lineBackground) !important;
color: var(--foreground);
}
/* ------------------------------------------------------------ *\
DocSearch (Algolia)
\* ------------------------------------------------------------ */
.DocSearch-Form {
padding: 3px var(--docsearch-spacing);
}
.DocSearch-Modal .DocSearch-Hit a {
box-shadow: none;
border: 1px solid var(--theme-accent);
border: none;
}
#docsearch-input.DocSearch-Input {
background-color: var(--lineBackground);
border-top: 3px solid var(--docsearch-searchbox-shadow);
border-bottom: 3px solid var(--docsearch-searchbox-shadow);
}
.DocSearch-Commands-Key {
color: var(--background);
border-radius: 0.25rem;
}
.DocSearch-SearchBar {
padding-bottom: 1px;
}
#docsearch-input.DocSearch-Input:focus {
box-shadow: none;
}
.DocSearch-Footer {
color: var(--docsearch-muted-color) !important;
}
.DocSearch-Logo svg .cls-1, .DocSearch-Logo svg .cls-2{fill:var(--docsearch-logo-color);}

5
website/src/components/Header/Search.tsx
View File

@ -43,7 +43,7 @@ export default function Search() {
return (
<>
<button type="button" ref={searchButtonRef} onClick={onOpen} className="rounded-md bg-slate-900 w-full px-2">
<button type="button" ref={searchButtonRef} onClick={onOpen} className="rounded-md bg-slate-900 w-full px-2 search-button">
<svg width="24" height="24" fill="none">
<path
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@ -74,6 +74,9 @@ export default function Search() {
indexName={ALGOLIA.indexName}
appId={ALGOLIA.appId}
apiKey={ALGOLIA.apiKey}
getMissingResultsUrl={({ query }) => {
return `https://github.com/tidalcycles/strudel/issues/new?title=Missing doc for ${query}`;
}}
transformItems={(items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL to