Skip to content

Commit

Permalink
feat: add improvements on Docusaurus Searchbox customization (#835)
Browse files Browse the repository at this point in the history
  • Loading branch information
@raiindev
raiindev authored Oct 30, 2024
2 parents cc583f9 + 246d90e commit 9c57d14
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 36 deletions.
3 changes: 2 additions & 1 deletion packages/plugin-docusaurus-v3/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@
"devDependencies": {
"@types/jsdom": "^21.1.6",
"@types/markdown-it": "^13.0.7",
"@types/pako": "^2.0.3"
"@types/pako": "^2.0.3",
"typescript": "^5.6.3"
},
"peerDependencies": {
"@docusaurus/plugin-content-docs": ">= 3.2.0",
Expand Down
36 changes: 20 additions & 16 deletions packages/plugin-docusaurus-v3/src/theme/SearchBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,26 @@ import { OramaSearchBox, OramaSearchButton } from "@orama/react-components"
import { useOrama, PluginData } from "./useOrama"

export function OramaSearchNoDocs() {
const { searchBoxConfig, searchBtnConfig, colorMode } = useOrama()
const { searchBoxConfig, searchBtnConfig: {text, ...searchBtnConfigRest}, colorMode } = useOrama()

return (
<div>
<OramaSearchButton {...searchBtnConfig} colorScheme={colorMode} className="DocSearch-Button" />
{searchBoxConfig.basic && (
<OramaSearchBox
{...searchBoxConfig.basic}
{...searchBoxConfig.custom}
colorScheme={colorMode}
searchParams={{
where: {
version: { eq: "current" }
}
}}
facetProperty="category"
/>
<>
<OramaSearchButton colorScheme={colorMode} className="DocSearch-Button" {...searchBtnConfigRest}>
{text || "Search"}
</OramaSearchButton>
<OramaSearchBox
{...searchBoxConfig.basic}
{...searchBoxConfig.custom}
colorScheme={colorMode}
searchParams={{
where: {
version: { eq: "current" }
}
}}
/>
</>
)}
</div>
)
Expand All @@ -35,7 +38,7 @@ export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {
const activeVersion = useActiveVersion(pluginId)
const { preferredVersion } = useDocsPreferredVersion(pluginId)
const currentVersion = activeVersion || preferredVersion || versions[0]
const { searchBoxConfig, searchBtnConfig, colorMode } = useOrama()
const { searchBoxConfig, searchBtnConfig: { text, ...searchBtnConfigRest }, colorMode } = useOrama()

const searchParams = {
...(currentVersion && {
Expand All @@ -47,14 +50,15 @@ export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {

return (
<div>
<OramaSearchButton {...searchBtnConfig} colorScheme={colorMode} className="DocSearch-Button" />
<OramaSearchButton colorScheme={colorMode} className="DocSearch-Button" {...searchBtnConfigRest}>
{text || "Search"}
</OramaSearchButton>
{searchBoxConfig.basic && (
<OramaSearchBox
{...searchBoxConfig.basic}
{...searchBoxConfig.custom}
colorScheme={colorMode}
searchParams={searchParams}
facetProperty="category"
/>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/plugin-docusaurus-v3/src/theme/SearchBar/useOrama.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const useOrama = () => {
setSearchBoxConfig({
basic: {
clientInstance: oramaInstance,
disableChat: !endpoint?.url
facetProperty: 'category',
},
custom: searchBoxCustomConfig
})
Expand Down
3 changes: 2 additions & 1 deletion packages/plugin-docusaurus/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
"devDependencies": {
"@types/jsdom": "^21.1.6",
"@types/markdown-it": "^13.0.7",
"@types/pako": "^2.0.3"
"@types/pako": "^2.0.3",
"typescript": "^5.6.3"
},
"peerDependencies": {
"@docusaurus/plugin-content-docs": "2.x",
Expand Down
36 changes: 20 additions & 16 deletions packages/plugin-docusaurus/src/theme/SearchBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,26 @@ import { OramaSearchBox, OramaSearchButton } from "@orama/react-components"
import { useOrama, PluginData } from "./useOrama"

export function OramaSearchNoDocs() {
const { searchBoxConfig, searchBtnConfig, colorMode } = useOrama()
const { searchBoxConfig, searchBtnConfig: { text, ...searchBtnConfigRest }, colorMode } = useOrama()

return (
<div>
<OramaSearchButton {...searchBtnConfig} colorScheme={colorMode} className="DocSearch-Button" />
{searchBoxConfig.basic && (
<OramaSearchBox
{...searchBoxConfig.basic}
{...searchBoxConfig.custom}
colorScheme={colorMode}
searchParams={{
where: {
version: { eq: "current" }
}
}}
facetProperty="category"
/>
<>
<OramaSearchButton colorScheme={colorMode} className="DocSearch-Button" {...searchBtnConfigRest}>
{text || "Search"}
</OramaSearchButton>
<OramaSearchBox
{...searchBoxConfig.basic}
{...searchBoxConfig.custom}
colorScheme={colorMode}
searchParams={{
where: {
version: { eq: "current" }
}
}}
/>
</>
)}
</div>
)
Expand All @@ -35,7 +38,7 @@ export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {
const activeVersion = useActiveVersion(pluginId)
const { preferredVersion } = useDocsPreferredVersion(pluginId)
const currentVersion = activeVersion || preferredVersion || versions[0]
const { searchBoxConfig, searchBtnConfig, colorMode } = useOrama()
const { searchBoxConfig, searchBtnConfig: { text, ...searchBtnConfigRest }, colorMode } = useOrama()

const searchParams = {
...(currentVersion && {
Expand All @@ -47,14 +50,15 @@ export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {

return (
<div>
<OramaSearchButton {...searchBtnConfig} colorScheme={colorMode} className="DocSearch-Button" />
<OramaSearchButton colorScheme={colorMode} className="DocSearch-Button" {...searchBtnConfigRest}>
{text || "Search"}
</OramaSearchButton>
{searchBoxConfig.basic && (
<OramaSearchBox
{...searchBoxConfig.basic}
{...searchBoxConfig.custom}
colorScheme={colorMode}
searchParams={searchParams}
facetProperty="category"
/>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/plugin-docusaurus/src/theme/SearchBar/useOrama.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const useOrama = () => {
setSearchBoxConfig({
basic: {
clientInstance: oramaInstance,
disableChat: !endpoint?.url
facetProperty: 'category',
},
custom: searchBoxCustomConfig
})
Expand Down
6 changes: 6 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 9c57d14

Please sign in to comment.