@docusaurus/theme-search-algolia 2.0.0-beta.1ab8aa0af → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-search-algolia",
-  "version": "2.0.0-beta.1ab8aa0af",
+  "version": "2.0.0-beta.2",
   "description": "Algolia search component for Docusaurus.",
   "main": "src/index.js",
   "publishConfig": {
@@ -13,11 +13,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docsearch/react": "^3.0.0-alpha.33",
-    "@docusaurus/core": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/theme-common": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/utils": "2.0.0-beta.1ab8aa0af",
-    "@docusaurus/utils-validation": "2.0.0-beta.1ab8aa0af",
+    "@docsearch/react": "^3.0.0-alpha.36",
+    "@docusaurus/core": "2.0.0-beta.2",
+    "@docusaurus/theme-common": "2.0.0-beta.2",
+    "@docusaurus/utils": "2.0.0-beta.2",
+    "@docusaurus/utils-validation": "2.0.0-beta.2",
     "algoliasearch": "^4.8.4",
     "algoliasearch-helper": "^3.3.4",
     "clsx": "^1.1.1",
@@ -31,5 +31,5 @@
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "63c06baac39707a1a4c3cc4c0031cb2163f256c4"
+  "gitHead": "883f07fddffaf1657407c8e202e370cc436e25f7"
 }

package/src/theme/SearchBar/index.js

@@ -16,6 +16,7 @@ import useSearchQuery from '@theme/hooks/useSearchQuery';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
 import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
 
 let DocSearchModal = null;
 
@@ -164,17 +165,19 @@ function DocSearch({contextualSearch, ...props}) {
         />
       </Head>
 
-      <DocSearchButton
-        onTouchStart={importDocSearchModalIfNeeded}
-        onFocus={importDocSearchModalIfNeeded}
-        onMouseOver={importDocSearchModalIfNeeded}
-        onClick={onOpen}
-        ref={searchButtonRef}
-        translations={{
-          buttonText: translatedSearchLabel,
-          buttonAriaLabel: translatedSearchLabel,
-        }}
-      />
+      <div className={styles.searchBox}>
+        <DocSearchButton
+          onTouchStart={importDocSearchModalIfNeeded}
+          onFocus={importDocSearchModalIfNeeded}
+          onMouseOver={importDocSearchModalIfNeeded}
+          onClick={onOpen}
+          ref={searchButtonRef}
+          translations={{
+            buttonText: translatedSearchLabel,
+            buttonAriaLabel: translatedSearchLabel,
+          }}
+        />
+      </div>
 
       {isOpen &&
         createPortal(

package/src/theme/SearchBar/styles.css

@@ -11,6 +11,7 @@
 }
 
 .DocSearch-Button {
+  margin: 0;
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }

package/src/theme/SearchBar/styles.module.css

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (max-width: 996px) {
+  .searchBox {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+}
+
+@media (min-width: 997px) {
+  .searchBox {
+    padding: var(--ifm-navbar-item-padding-vertical)
+      var(--ifm-navbar-item-padding-horizontal);
+  }
+}

package/src/theme/SearchPage/index.js

@@ -375,16 +375,19 @@ function SearchPage() {
           )}
         </form>
 
-        <div className={clsx('row', 'margin-vert--sm')}>
+        <div className="row">
           <div className={clsx('col', 'col--8', styles.searchResultsColumn)}>
-            {!!searchResultState.totalResults && (
-              <strong>
-                {documentsFoundPlural(searchResultState.totalResults)}
-              </strong>
-            )}
+            {!!searchResultState.totalResults &&
+              documentsFoundPlural(searchResultState.totalResults)}
           </div>
 
-          <div className={clsx('col', 'col--4', styles.searchLogoColumn)}>
+          <div
+            className={clsx(
+              'col',
+              'col--4',
+              'text--right',
+              styles.searchLogoColumn,
+            )}>
             <a
               target="_blank"
               rel="noopener noreferrer"
@@ -394,10 +397,7 @@ function SearchPage() {
                 message: 'Search by Algolia',
                 description: 'The ARIA label for Algolia mention',
               })}>
-              <svg
-                viewBox="0 0 168 24"
-                className={styles.algoliaLogo}
-                xmlns="http://www.w3.org/2000/svg">
+              <svg viewBox="0 0 168 24" className={styles.algoliaLogo}>
                 <g fill="none">
                   <path
                     className={styles.algoliaLogoPathFill}
@@ -418,34 +418,32 @@ function SearchPage() {
         </div>
 
         {searchResultState.items.length > 0 ? (
-          <section>
+          <main>
             {searchResultState.items.map(
               ({title, url, summary, breadcrumbs}, i) => (
                 <article key={i} className={styles.searchResultItem}>
-                  <Link
-                    to={url}
-                    className={styles.searchResultItemHeading}
-                    dangerouslySetInnerHTML={{__html: title}}
-                  />
+                  <h2 className={styles.searchResultItemHeading}>
+                    <Link to={url} dangerouslySetInnerHTML={{__html: title}} />
+                  </h2>
 
                   {breadcrumbs.length > 0 && (
-                    <span className={styles.searchResultItemPath}>
-                      {breadcrumbs.map((html, index) => (
-                        <React.Fragment key={index}>
-                          {index !== 0 && (
-                            <span
-                              className={styles.searchResultItemPathSeparator}>
-                              ›
-                            </span>
-                          )}
-                          <span
+                    <nav aria-label="breadcrumbs">
+                      <ul
+                        className={clsx(
+                          'breadcrumbs',
+                          styles.searchResultItemPath,
+                        )}>
+                        {breadcrumbs.map((html, index) => (
+                          <li
+                            key={index}
+                            className="breadcrumbs__item"
                             // Developer provided the HTML, so assume it's safe.
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML={{__html: html}}
                           />
-                        </React.Fragment>
-                      ))}
-                    </span>
+                        ))}
+                      </ul>
+                    </nav>
                   )}
 
                   {summary && (
@@ -459,7 +457,7 @@ function SearchPage() {
                 </article>
               ),
             )}
-          </section>
+          </main>
         ) : (
           [
             searchQuery && !searchResultState.loading && (
@@ -479,13 +477,11 @@ function SearchPage() {
 
         {searchResultState.hasMore && (
           <div className={styles.loader} ref={setLoaderRef}>
-            <span>
-              <Translate
-                id="theme.SearchPage.fetchingNewResults"
-                description="The paragraph for fetching new search results">
-                Fetching new results...
-              </Translate>
-            </span>
+            <Translate
+              id="theme.SearchPage.fetchingNewResults"
+              description="The paragraph for fetching new search results">
+              Fetching new results...
+            </Translate>
           </div>
         )}
       </div>

package/src/theme/SearchPage/styles.module.css

@@ -8,23 +8,20 @@
 .searchQueryInput,
 .searchVersionInput {
   border-radius: var(--ifm-global-radius);
-  border: 0;
-  font-size: var(--ifm-font-size-base);
-  font-family: var(--ifm-font-family-base);
+  border: 2px solid var(--ifm-toc-border-color);
+  font: var(--ifm-font-size-base) var(--ifm-font-family-base);
   padding: 0.8rem;
   width: 100%;
   background: var(--docsearch-searchbox-focus-background);
   color: var(--docsearch-text-color);
-  margin-bottom: 1rem;
-  box-shadow: inset 0 0 0 2px var(--ifm-toc-border-color);
-  transition: var(--ifm-transition-fast) ease box-shadow;
+  margin-bottom: 0.5rem;
+  transition: border var(--ifm-transition-fast) ease;
 }
 
-.searchQueryInput:active,
 .searchQueryInput:focus,
-.searchVersionInput:active,
 .searchVersionInput:focus {
-  box-shadow: var(--docsearch-searchbox-shadow);
+  border-color: var(--docsearch-primary-color);
+  outline: none;
 }
 
 .searchQueryInput::placeholder {
@@ -33,10 +30,7 @@
 
 .searchResultsColumn {
   font-size: 0.9rem;
-}
-
-.searchLogoColumn {
-  text-align: right;
+  font-weight: bold;
 }
 
 .algoliaLogo {
@@ -53,20 +47,14 @@
 }
 
 .searchResultItemHeading {
-  font-size: var(--ifm-h2-font-size);
+  font-weight: 400;
+  margin-bottom: 0;
 }
 
 .searchResultItemPath {
   font-size: 0.8rem;
   color: var(--ifm-color-content-secondary);
-  display: block;
-}
-
-.searchResultItemPathSeparator {
-  margin: 0 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--ifm-color-emphasis-400);
+  --ifm-breadcrumb-separator-size-multiplier: 1;
 }
 
 .searchResultItemSummary {
@@ -83,16 +71,11 @@
     max-width: 40% !important;
   }
 
-  .algoliaLogo {
-    width: 100%;
-  }
-
   .searchResultsColumn {
     max-width: 60% !important;
   }
 
   .searchLogoColumn {
-    overflow: hidden;
     max-width: 40% !important;
     padding-left: 0 !important;
   }
@@ -110,11 +93,9 @@
 }
 
 .loadingSpinner {
-  pointer-events: none;
   width: 3rem;
   height: 3rem;
-  border: 0.4em solid transparent;
-  border-color: #eee;
+  border: 0.4em solid #eee;
   border-top-color: var(--ifm-color-primary);
   border-radius: 50%;
   animation: loadingspin 1s linear infinite;