asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs,api-ref: added search filters (#4830)

Browse Source 
* initial implementation of search modal

* added hit and search suggestions

* added support for multiple indices

* updated sample env

* added close when click outside dropdown

* test for mobile

* added mobile design

* added shortcut

* dark mode fixes

* added search to docs

* added plugins filter

* added React import

* moved filters to configurations

* handled error on page load

* change suggestion text

* removed hits limit

* handle select all

* open link in current tab

* change highlight colors

* added support for shortcuts + auto focus

* change header and footer

* redesigned search ui
This commit is contained in:
Shahed Nasser
2023-08-24 18:36:06 +03:00
committed by GitHub
parent f4bf9ee169
commit f07dc0384f
109 changed files with 4555 additions and 1648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
www/docs/src/css/components/docsearch.css
View File

@@ -1,197 +0,0 @@
.DocSearch-Modal {
@apply border border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
@apply lg:!rounded !relative;
@apply md:!m-[unset] md:w-[560px];
}
.DocSearch-SearchBar {
@apply !p-0;
}
.DocSearch-Form {
--docsearch-spacing: theme(margin[1.5]);
--docsearch-searchbox-height: 56px;
--docsearch-searchbox-focus-background: var(--docsearch-modal-background) !important;
@apply !rounded-t !rounded-b-none border-0 border-b border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
}
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
@apply !w-[20px] !h-[20px];
}
.DocSearch-Input {
@apply !text-medium !pl-1;
@apply placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark;
}
.DocSearch-Dropdown {
@apply !pt-0 !pb-2.5 !px-0;
@apply !max-h-[416px];
}
.DocSearch-Hit-source {
@apply !m-0 !text-compact-small-plus uppercase text-medusa-fg-muted dark:text-medusa-fg-muted-dark;
@apply border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
@apply !py-[10px] !px-1.5;
}
.DocSearch-Footer {
@apply !hidden;
}
.DocSearch-Hit {
@apply !p-0;
}
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon {
@apply !w-2.5 !h-2.5 p-0.125 border border-solid border-medusa-border-strong dark:border-medusa-border-strong-dark;
@apply rounded flex justify-center items-center;
@apply before:content-[''] before:w-2 before:h-2 before:bg-no-repeat before:bg-center before:bg-contain before:bg-search-hit dark:before:bg-search-hit-dark;
}
.DocSearch-Hit-icon svg {
@apply hidden;
}
.DocSearch-Hit--Child .DocSearch-Hit-icon {
@apply hidden;
}
.DocSearch-Hit a {
@apply !py-0.75 !px-1.5 !shadow-none !rounded-none;
}
.DocSearch-Hit:not(:last-of-type) a {
@apply border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
}
.DocSearch-Hit-content-wrapper {
@apply !mt-0 !mx-1;
}
.DocSearch-Hit-title,
.DocSearch-Hit-title mark {
@apply !text-medusa-fg-base dark:!text-medusa-fg-base-dark;
@apply !text-compact-small-plus;
}
.DocSearch-Hit-path {
@apply !text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark !text-compact-small;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
--docsearch-hit-active-color: theme(colors.medusa.fg.subtle.DEFAULT);
}
html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
--docsearch-hit-active-color: theme(colors.medusa.fg.subtle.dark);
}
.DocSearch-Hit[aria-selected=true] a {
@apply !bg-medusa-bg-base-hover dark:!bg-medusa-bg-base-hover-dark;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child {
@apply h-1.5 w-1.5 border border-solid border-medusa-border-strong dark:border-medusa-border-strong-dark;
@apply rounded bg-medusa-bg-base dark:bg-medusa-bg-base-dark p-0.125 flex justify-center items-center;
@apply before:content-[''] before:w-[20px] before:h-[20px] before:bg-search-arrow dark:before:bg-search-arrow-dark before:bg-no-repeat before:bg-center;
}
.DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg {
@apply hidden;
}
.DocSearch-Hit[aria-selected=true] mark {
@apply !no-underline;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree {
@apply text-medusa-border-strong dark:text-medusa-border-strong-dark;
}
.DocSearch-Hit-Tree {
@apply text-medusa-border-base dark:text-medusa-border-base-dark;
}
.DocSearch-HitsFooter {
@apply z-[100] absolute bottom-0 left-0 w-full h-2.5 !bg-medusa-bg-base dark:!bg-medusa-bg-base-dark;
@apply border-0 border-t border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
}
.DocSearch-HitsFooter a {
@apply !border-b-0;
}
.DocSearch-Reset {
@apply !rounded transition-all duration-200 ease-ease;
@apply hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark;
}
.DocSearch-NoResults .DocSearch-Screen-Icon {
@apply w-[20px] h-[20px] !p-0 flex justify-center items-center mt-0 mb-1 mx-auto;
@apply before:content-[''] before:w-full before:h-full before:bg-no-repeat before:bg-center before:bg-contain;
@apply before:bg-search-no-result dark:before:bg-search-no-result-dark;
}
.DocSearch-NoResults .DocSearch-Screen-Icon svg {
@apply hidden;
}
.DocSearch-NoResults .DocSearch-Title {
@apply !text-compact-small !pl-1;
}
.DocSearch-NoResults-Prefill-List {
@apply text-center !text-compact-small-plus !pl-1;
}
.DocSearch-NoResults-Prefill-List li::marker {
@apply content-[''];
}
.DocSearch-NoResults-Prefill-List li button {
@apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
}
.DocSearch-Button {
@apply w-full !h-full !rounded lg:!border lg:!border-solid lg:!border-medusa-border-base lg:dark:!border-medusa-border-base-dark border-0;
@apply lg:!bg-medusa-bg-field lg:dark:!bg-medusa-bg-field-dark !bg-transparent;
@apply lg:hover:!bg-medusa-bg-field-hover lg:dark:hover:!bg-medusa-bg-field-hover-dark;
@apply !py-[6px] !pl-0.5 relative;
@apply hover:!border-medusa-border-base hover:dark:!border-medusa-border-base-dark;
@apply active:!border-medusa-border-base active:dark:!border-medusa-border-base-dark;
@apply focus:!border-medusa-border-base focus:dark:!border-medusa-border-base-dark;
}
.DocSearch-Container {
@apply !z-[1001] md:flex md:justify-center md:items-center;
}
.DocSearch-Button .DocSearch-Search-Icon {
@apply invisible;
}
.DocSearch-Button-Container {
@apply before:content-[''] before:h-[20px] before:w-[20px] before:absolute before:left-0.5 before:top-[5px];
@apply before:bg-magnifying-glass dark:before:bg-magnifying-glass-dark before:bg-no-repeat;
}
.DocSearch-Button-Placeholder {
@apply text-medusa-fg-muted dark:text-medusa-fg-muted-dark;
@apply !pl-0.5 !text-compact-small lg:!block !hidden;
}
.DocSearch-Button-Keys {
@apply w-fit !min-w-[unset] lg:!flex !hidden;
}
.DocSearch-Button-Key {
@apply !shadow-none !rounded-md !text-compact-x-small-plus !font-base align-middle !p-0.125;
@apply !border !border-solid !border-medusa-tag-neutral-border dark:!border-medusa-tag-neutral-border-dark;
@apply [&span]:hidden [&:not(:last-child)]:!mr-0.25 last:!mr-0;
}
[class*=searchBox] {
@apply lg:w-[280px] lg:max-w-[280px] lg:!h-2 lg:!p-0 !static;
}

38
www/docs/src/css/custom.css
View File

@@ -2,6 +2,17 @@
@tailwind components;
@tailwind utilities;
@layer base {
body[data-modal="opened"] {
@apply !overflow-hidden;
}
mark {
@apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
@apply text-medusa-fg-interactive dark:text-medusa-fg-interactive-dark;
}
}
@layer components {
.sidebar-title {
@apply !m-0 !py-1 !px-0;
@@ -116,13 +127,14 @@
@apply inline-flex flex-row justify-center items-center;
@apply py-[5px] px-0.75 rounded-sm cursor-pointer;
@apply bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark;
@apply hover:bg-medusa-button-neutral-hover hover:bg-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark dark:hover:bg-button-neutral-hover-dark hover:no-underline;
@apply active:bg-medusa-button-neutral-pressed active:bg-button-neutral-pressed dark:active:bg-medusa-button-neutral-pressed-dark dark:active:bg-button-neutral-pressed-dark;
@apply focus:bg-medusa-button-neutral-pressed focus:bg-button-neutral-pressed dark:focus:bg-medusa-button-neutral-pressed-dark dark:focus:bg-button-neutral-pressed-dark;
@apply hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline;
@apply active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark;
@apply focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark;
@apply disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark;
@apply disabled:cursor-not-allowed;
@apply border border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
@apply text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark;
@apply hover:text-medusa-fg-base hover:dark:text-medusa-fg-base-dark;
@apply shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow;
@apply dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused;
@apply select-none;
@@ -132,9 +144,9 @@
@apply inline-flex flex-row justify-center items-center;
@apply py-[5px] px-0.75 rounded-sm cursor-pointer;
@apply bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark;
@apply hover:bg-medusa-button-inverted-hover hover:bg-button-inverted-hover dark:hover:bg-medusa-button-inverted-hover-dark dark:hover:bg-button-inverted-hover-dark hover:no-underline;
@apply active:bg-medusa-button-inverted-pressed active:bg-button-inverted-pressed dark:active:bg-medusa-button-inverted-pressed-dark dark:active:bg-button-inverted-pressed-dark;
@apply focus:bg-medusa-button-inverted-pressed focus:bg-button-inverted-pressed dark:focus:bg-medusa-button-inverted-pressed-dark dark:focus:bg-button-inverted-pressed-dark;
@apply hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline;
@apply active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark;
@apply focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark;
@apply shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow;
@apply dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark;
@apply disabled:!bg-no-image disabled:bg-medusa-button-disabled dark:disabled:bg-medusa-button-disabled-dark;
@@ -146,15 +158,16 @@
}
.navbar-action-icon-item {
@apply lg:bg-docs-button-neutral lg:dark:bg-docs-button-neutral-dark hover:!bg-no-image lg:active:!bg-no-image hover:bg-medusa-button-neutral-hover dark:hover:bg-medusa-button-neutral-hover-dark;
@apply lg:active:bg-medusa-button-neutral-pressed lg:dark:active:bg-medusa-button-neutral-pressed-dark;
@apply lg:focus:shadow-button-secondary-focus lg:dark:focus:shadow-button-secondary-focus-dark;
@apply lg:border lg:border-solid lg:border-medusa-border-loud-muted lg:dark:border-medusa-border-loud-muted-dark rounded;
@apply lg:bg-button-neutral lg:bg-medusa-button-neutral lg:dark:bg-button-neutral-dark lg:dark:bg-medusa-button-neutral-dark;
@apply lg:hover:bg-medusa-button-neutral-hover lg:hover:bg-no-image lg:dark:hover:bg-medusa-button-neutral-hover-dark lg:hover:no-underline;
@apply lg:active:bg-medusa-button-neutral-pressed lg:active:bg-no-image lg:dark:active:bg-medusa-button-neutral-pressed-dark;
@apply lg:focus:bg-medusa-button-neutral-pressed lg:focus:bg-no-image lg:dark:focus:bg-medusa-button-neutral-pressed-dark;
@apply lg:lg:border lg:border-solid lg:border-medusa-border-base lg:dark:border-medusa-border-base-dark rounded;
@apply w-2 h-2 flex justify-center items-center cursor-pointer;
}
.transparent-button {
@apply bg-transparent border-0 text-inherit cursor-pointer p-0;
.btn-clear {
@apply bg-transparent shadow-none border-0 outline-none cursor-pointer;
}
}
@@ -167,7 +180,6 @@
@import url('./_variables.css');
@import url('./_docusaurus.css');
@import url('./components/docsearch.css');
@import url('./components/sidebar.css');
@import url('./components/toc.css');
@import url('./components/tooltip.css');