- {filterOptions.length && (
+ {filterOptions.length > 0 && (
}
/>
-
+
0 &&
+ "h-[calc(100%-95px)] lg:max-h-[calc(100%-140px)] lg:min-h-[calc(100%-140px)]",
+ filterOptions.length === 0 &&
+ "h-[calc(100%-75px)] lg:max-h-[calc(100%-100px)] lg:min-h-[calc(100%-100px)]"
+ )}
+ >
}
>
@@ -143,7 +157,8 @@ export const Search = ({
// filters array has to be wrapped
// in another array for an OR condition
// to be applied between the items.
- tagFilters: [filters],
+ facetFilters: [facetFilters],
+ getRankingInfo: true,
}}
indices={algolia.indices}
checkInternalPattern={checkInternalPattern}
diff --git a/www/packages/docs-ui/src/components/Select/Badge/index.tsx b/www/packages/docs-ui/src/components/Select/Badge/index.tsx
index 0ef4bc1c33..7588afa02c 100644
--- a/www/packages/docs-ui/src/components/Select/Badge/index.tsx
+++ b/www/packages/docs-ui/src/components/Select/Badge/index.tsx
@@ -50,7 +50,7 @@ export const SelectBadge = ({
(!Array.isArray(value) && !value) ||
(Array.isArray(value) && !value.length)
) {
- str = "None selected"
+ str = "No Filters Selected"
} else {
str = selectedOptions[0].label
}
diff --git a/www/packages/docs-ui/src/constants.tsx b/www/packages/docs-ui/src/constants.tsx
index 241947d6f4..f01605a801 100644
--- a/www/packages/docs-ui/src/constants.tsx
+++ b/www/packages/docs-ui/src/constants.tsx
@@ -168,11 +168,12 @@ export const navDropdownItems: NavigationItem[] = [
export const searchFilters: OptionType[] = [
{
- value: "guides",
- label: "Guides",
+ value: "concepts-guides",
+ label: "Concepts & Guides",
+ hitsPerPage: 8,
},
{
- value: "references-v2",
+ value: "references",
label: "References",
},
{
@@ -184,7 +185,11 @@ export const searchFilters: OptionType[] = [
label: "Store API",
},
{
- value: "ui",
- label: "Medusa UI",
+ value: "user-guide",
+ label: "User Guide",
+ },
+ {
+ value: "troubleshooting",
+ label: "Troubleshooting",
},
]
diff --git a/www/packages/docs-ui/src/hooks/use-select/index.tsx b/www/packages/docs-ui/src/hooks/use-select/index.tsx
index 1d9a25c13a..efd9959ee6 100644
--- a/www/packages/docs-ui/src/hooks/use-select/index.tsx
+++ b/www/packages/docs-ui/src/hooks/use-select/index.tsx
@@ -5,6 +5,7 @@ export type OptionType = {
label: string
index?: string
isAllOption?: boolean
+ hitsPerPage?: number
}
export type SelectOptions = {
diff --git a/www/packages/docs-ui/src/layouts/main-content.tsx b/www/packages/docs-ui/src/layouts/main-content.tsx
index 61b56d74a3..2b96343c53 100644
--- a/www/packages/docs-ui/src/layouts/main-content.tsx
+++ b/www/packages/docs-ui/src/layouts/main-content.tsx
@@ -61,6 +61,7 @@ export const MainContentLayout = ({
"pt-docs_4 lg:pt-docs_6 pb-docs_8 lg:pb-docs_4",
contentClassName
)}
+ id="content"
>
{children}
diff --git a/www/packages/docs-ui/src/providers/Search/index.tsx b/www/packages/docs-ui/src/providers/Search/index.tsx
index 1c461b6611..73cfe20a91 100644
--- a/www/packages/docs-ui/src/providers/Search/index.tsx
+++ b/www/packages/docs-ui/src/providers/Search/index.tsx
@@ -20,6 +20,7 @@ import {
import clsx from "clsx"
// @ts-expect-error can't install the types package because it doesn't support React v19
import { CSSTransition, SwitchTransition } from "react-transition-group"
+import { searchFilters } from "../.."
export type SearchCommand = {
name: string
@@ -87,36 +88,8 @@ export const SearchProvider = ({
"requests" in searchParams ? searchParams.requests : searchParams
// always send this request, which is the main request with no filters
const mainRequest = requests[0]
-
- // retrieve only requests that have filters
- // this is to ensure that we show no result if no filter is selected
- const requestsWithFilters = requests.filter((item) => {
- if (
- !item.params ||
- typeof item.params !== "object" ||
- !("tagFilters" in item.params)
- ) {
- return false
- }
-
- const tagFilters = item.params.tagFilters as string[]
-
- // if no tag filters are specified, there's still one item,
- // which is an empty array
- return tagFilters.length >= 1 && tagFilters[0].length > 0
- })
-
- // check whether a query is entered in the search box
- const noQueries = requestsWithFilters.every(
- (item) =>
- !item.facetQuery &&
- (!item.params ||
- typeof item.params !== "object" ||
- !("query" in item.params) ||
- !item.params.query)
- )
-
- if (noQueries) {
+ const params = (mainRequest.params || {}) as Record
+ if (!params.query) {
return Promise.resolve({
results: requests.map(() => ({
hits: [],
@@ -132,36 +105,75 @@ export const SearchProvider = ({
})
}
- // split requests per tags
- const newRequests: typeof requestsWithFilters = [mainRequest]
- for (const request of requestsWithFilters) {
- const params = request.params as Record
- const tagFilters = (params.tagFilters as string[][])[0]
-
- // if only one tag is selected, keep the request as-is
- if (tagFilters.length === 1) {
- newRequests.push(request)
-
- continue
+ // retrieve only requests that have filters
+ // this is to ensure that we show no result if no filter is selected
+ const requestsWithFilters = requests.filter((item) => {
+ if (
+ !item.params ||
+ typeof item.params !== "object" ||
+ !("facetFilters" in item.params)
+ ) {
+ return false
}
- // if multiple tags are selected, split the tags
- // to retrieve a small subset of results per each tag.
- newRequests.push(
- ...tagFilters.map((tag) => ({
- ...request,
- params: {
- ...params,
- tagFilters: [tag],
- },
- hitsPerPage: 4,
- }))
- )
+ const facetFilters = item.params.facetFilters as string[]
+
+ // if no tag filters are specified, there's still one item,
+ // which is an empty array
+ return facetFilters.length >= 1 && facetFilters[0].length > 0
+ })
+
+ // check whether a query is entered in the search box
+ const noQueries = requestsWithFilters.every(
+ (item) =>
+ !item.facetQuery &&
+ (!item.params ||
+ typeof item.params !== "object" ||
+ !("query" in item.params) ||
+ !item.params.query)
+ )
+
+ const newRequests: typeof requestsWithFilters = [mainRequest]
+ if (!noQueries) {
+ // split requests per tags
+ for (const request of requestsWithFilters) {
+ const params = request.params as Record
+ const facetFilters = (params.facetFilters as string[][])[0]
+
+ // if only one tag is selected, keep the request as-is
+ if (facetFilters.length === 1) {
+ newRequests.push(request)
+
+ continue
+ }
+
+ // if multiple tags are selected, split the tags
+ // to retrieve a small subset of results per each tag.
+ newRequests.push(
+ ...facetFilters.map((tag) => {
+ // get the filter's details in case it has custom hitsPerPage
+ const filterDetails = searchFilters.find(
+ (item) => `_tags:${item.value}` === tag
+ )
+ return {
+ ...request,
+ params: {
+ ...params,
+ facetFilters: [tag],
+ },
+ hitsPerPage: filterDetails?.hitsPerPage || 3,
+ }
+ })
+ )
+ }
}
return algoliaClient
.search(newRequests)
.then((response) => {
+ if (newRequests.length === 1) {
+ return response
+ }
// combine results of the same index and return the results
const resultsByIndex: {
[indexName: string]: SearchResponse
@@ -194,9 +206,28 @@ export const SearchProvider = ({
}
})
+ const newResults = Object.values(resultsByIndex).flatMap(
+ (result) => ({
+ ...result,
+ hits: ("hits" in result ? result.hits : []).sort((a, b) => {
+ const typosA = a._rankingInfo?.nbTypos || 0
+ const typosB = b._rankingInfo?.nbTypos || 0
+ if (a.type === "lvl1" && typosA <= typosB) {
+ return -1
+ }
+
+ if (b.type === "lvl1" && typosB <= typosA) {
+ return 1
+ }
+
+ return 0
+ }),
+ })
+ )
+
return {
// append the results with the main request's results
- results: [mainResult, ...Object.values(resultsByIndex)],
+ results: [mainResult, ...newResults],
} as SearchResponses
})
},
@@ -239,7 +270,7 @@ export const SearchProvider = ({
"!p-0 overflow-hidden relative h-full",
"flex flex-col justify-between"
)}
- modalContainerClassName="!h-[480px] max-h-[480px]"
+ modalContainerClassName="!h-[95%] max-h-[95%] md:!h-[480px] md:max-h-[480px]"
open={isOpen}
onClose={() => setIsOpen(false)}
passedRef={modalRef}