@easyops-cn/docusaurus-search-local 0.34.0 → 0.35.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.35.0](https://github.com/easyops-cn/docusaurus-search-local/compare/v0.34.0...v0.35.0) (2023-03-04)
+
+
+### Features
+
+* improve no results UI when searching in context ([#323](https://github.com/easyops-cn/docusaurus-search-local/issues/323)) ([1a70835](https://github.com/easyops-cn/docusaurus-search-local/commit/1a708353d5fc6edae0f6e7d16bbd6e32381a9ea1))
+
 ## [0.34.0](https://github.com/easyops-cn/docusaurus-search-local/compare/v0.33.6...v0.34.0) (2023-02-16)
 
 

package/dist/client/client/theme/SearchBar/SearchBar.jsx

@@ -102,6 +102,53 @@ export default function SearchBar({ handleSearchBarToggle, }) {
             fetchIndexes(versionUrl, searchContext),
             fetchAutoCompleteJS(),
         ]);
+        const searchFooterLinkElement = ({ query, isEmpty, }) => {
+            const a = document.createElement("a");
+            const params = new URLSearchParams();
+            const seeAllResultsText = translate({
+                id: "theme.SearchBar.seeAll",
+                message: "See all results",
+            });
+            const seeAllResultsOutsideContextText = translate({
+                id: "theme.SearchBar.seeAllOutsideContext",
+                message: "See results outside {context}",
+            }, { context: searchContext });
+            const seeAllResultsInContextText = translate({
+                id: "theme.SearchBar.searchInContext",
+                message: "See all results in {context}",
+            }, { context: searchContext });
+            params.set("q", query);
+            let linkText;
+            if (searchContext && isEmpty) {
+                linkText = seeAllResultsOutsideContextText;
+            }
+            else if (searchContext) {
+                linkText = seeAllResultsInContextText;
+            }
+            else {
+                linkText = seeAllResultsText;
+            }
+            if (Array.isArray(searchContextByPaths) && !isEmpty) {
+                params.set("ctx", searchContext);
+            }
+            if (versionUrl !== baseUrl) {
+                if (!versionUrl.startsWith(baseUrl)) {
+                    throw new Error(`Version url '${versionUrl}' does not start with base url '${baseUrl}', this is a bug of \`@easyops-cn/docusaurus-search-local\`, please report it.`);
+                }
+                params.set("version", versionUrl.substring(baseUrl.length));
+            }
+            const url = `${baseUrl}search?${params.toString()}`;
+            a.href = url;
+            a.textContent = linkText;
+            a.addEventListener("click", (e) => {
+                if (!e.ctrlKey && !e.metaKey) {
+                    e.preventDefault();
+                    search.current?.autocomplete.close();
+                    history.push(url);
+                }
+            });
+            return a;
+        };
         search.current = autoComplete(searchBarRef.current, {
             hint: false,
             autoselect: true,
@@ -127,39 +174,10 @@ export default function SearchBar({ handleSearchBarToggle, }) {
                     suggestion: SuggestionTemplate,
                     empty: EmptyTemplate,
                     footer: ({ query, isEmpty }) => {
-                        if (isEmpty) {
+                        if (isEmpty && !searchContext) {
                             return;
                         }
-                        const a = document.createElement("a");
-                        const params = new URLSearchParams();
-                        params.set("q", query);
-                        if (Array.isArray(searchContextByPaths)) {
-                            params.set("ctx", searchContext);
-                        }
-                        if (versionUrl !== baseUrl) {
-                            if (!versionUrl.startsWith(baseUrl)) {
-                                throw new Error(`Version url '${versionUrl}' does not start with base url '${baseUrl}', this is a bug of \`@easyops-cn/docusaurus-search-local\`, please report it.`);
-                            }
-                            params.set("version", versionUrl.substring(baseUrl.length));
-                        }
-                        const url = `${baseUrl}search?${params.toString()}`;
-                        a.href = url;
-                        a.textContent = searchContext
-                            ? translate({
-                                id: "theme.SearchBar.searchInContext",
-                                message: "See all results in {context}",
-                            }, { context: searchContext })
-                            : translate({
-                                id: "theme.SearchBar.seeAll",
-                                message: "See all results",
-                            });
-                        a.addEventListener("click", (e) => {
-                            if (!e.ctrlKey && !e.metaKey) {
-                                e.preventDefault();
-                                search.current?.autocomplete.close();
-                                history.push(url);
-                            }
-                        });
+                        const a = searchFooterLinkElement({ query, isEmpty });
                         const div = document.createElement("div");
                         div.className = styles.hitFooter;
                         div.appendChild(a);

package/dist/client/client/theme/SearchPage/SearchPage.jsx

@@ -86,14 +86,15 @@ function SearchPageContent() {
         <h1>{pageTitle}</h1>
 
         <div className="row">
-          <div className={clsx("col", styles.searchQueryColumn, {
+          <div className={clsx("col", {
+            [styles.searchQueryColumn]: Array.isArray(searchContextByPaths),
             "col--9": Array.isArray(searchContextByPaths),
             "col--12": !Array.isArray(searchContextByPaths),
         })}>
             <input type="search" name="q" className={styles.searchQueryInput} aria-label="Search" onChange={handleSearchInputChange} value={searchQuery} autoComplete="off" autoFocus/>
           </div>
-          {Array.isArray(searchContextByPaths) ? (<div className={clsx("col", "col--3", "padding-left--none", styles.searchVersionColumn)}>
-              <select name="search-context" className={styles.searchVersionInput} id="context-selector" value={searchContext} onChange={(e) => updateSearchContext(e.target.value)}>
+          {Array.isArray(searchContextByPaths) ? (<div className={clsx("col", "col--3", "padding-left--none", styles.searchContextColumn)}>
+              <select name="search-context" className={styles.searchContextInput} id="context-selector" value={searchContext} onChange={(e) => updateSearchContext(e.target.value)}>
                 <option value="">
                   {useAllContextsWithNoSearchContext
                 ? translate({

package/dist/client/client/theme/SearchPage/SearchPage.module.css

@@ -1,4 +1,4 @@
-.searchVersionInput,
+.searchContextInput,
 .searchQueryInput {
   border-radius: var(--ifm-global-radius);
   border: var(--ifm-global-border-width) solid
@@ -30,3 +30,24 @@
   font-style: italic;
   margin: 0.5rem 0px 0px;
 }
+
+@media only screen and (max-width: 996px) {
+  .searchQueryColumn {
+    max-width: 60% !important;
+  }
+
+  .searchContextColumn {
+    max-width: 40% !important;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .searchQueryColumn {
+    max-width: 100% !important;
+  }
+
+  .searchContextColumn {
+    max-width: 100% !important;
+    padding-left: var(--ifm-spacing-horizontal) !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyops-cn/docusaurus-search-local",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "An offline/local search plugin for Docusaurus v2",
   "repository": "https://github.com/easyops-cn/docusaurus-search-local",
   "homepage": "https://github.com/easyops-cn/docusaurus-search-local",