refactor(v2): improve markup and styling on search page (#4919)

packages/docusaurus-theme-search-algolia/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 && (
+            {!!searchResultState.totalResults &&
-              <strong>
+              documentsFoundPlural(searchResultState.totalResults)}
-                {documentsFoundPlural(searchResultState.totalResults)}
-              </strong>
-            )}
           </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
+              <svg viewBox="0 0 168 24" className={styles.algoliaLogo}>
-                viewBox="0 0 168 24"
-                className={styles.algoliaLogo}
-                xmlns="http://www.w3.org/2000/svg">
                 <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
+                  <h2 className={styles.searchResultItemHeading}>
-                    to={url}
+                    <Link to={url} dangerouslySetInnerHTML={{__html: title}} />
-                    className={styles.searchResultItemHeading}
+                  </h2>
-                    dangerouslySetInnerHTML={{__html: title}}
-                  />
 
                   {breadcrumbs.length > 0 && (
-                    <span className={styles.searchResultItemPath}>
+                    <nav aria-label="breadcrumbs">
-                      {breadcrumbs.map((html, index) => (
+                      <ul
-                        <React.Fragment key={index}>
+                        className={clsx(
-                          {index !== 0 && (
+                          'breadcrumbs',
-                            <span
+                          styles.searchResultItemPath,
-                              className={styles.searchResultItemPathSeparator}>
+                        )}>
-                              ›
+                        {breadcrumbs.map((html, index) => (
-                            </span>
+                          <li
-                          )}
+                            key={index}
-                          <span
+                            className="breadcrumbs__item"
                             // Developer provided the HTML, so assume it's safe.
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML={{__html: html}}
                           />
-                        </React.Fragment>
+                        ))}
-                      ))}
+                      </ul>
-                    </span>
+                    </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
-              <Translate
+              id="theme.SearchPage.fetchingNewResults"
-                id="theme.SearchPage.fetchingNewResults"
+              description="The paragraph for fetching new search results">
-                description="The paragraph for fetching new search results">
+              Fetching new results...
-                Fetching new results...
+            </Translate>
-              </Translate>
-            </span>
           </div>
         )}
       </div>

packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css

@@ -8,23 +8,20 @@
 .searchQueryInput,
 .searchVersionInput {
   border-radius: var(--ifm-global-radius);
-  border: 0;
+  border: 2px solid var(--ifm-toc-border-color);
-  font-size: var(--ifm-font-size-base);
+  font: var(--ifm-font-size-base) var(--ifm-font-family-base);
-  font-family: var(--ifm-font-family-base);
   padding: 0.8rem;
   width: 100%;
   background: var(--docsearch-searchbox-focus-background);
   color: var(--docsearch-text-color);
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
-  box-shadow: inset 0 0 0 2px var(--ifm-toc-border-color);
+  transition: border var(--ifm-transition-fast) ease;
-  transition: var(--ifm-transition-fast) ease box-shadow;
 }
 
-.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;
-}
+  font-weight: bold;
-
-.searchLogoColumn {
-  text-align: right;
 }
 
 .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;
+  --ifm-breadcrumb-separator-size-multiplier: 1;
-}
-
-.searchResultItemPathSeparator {
-  margin: 0 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--ifm-color-emphasis-400);
 }
 
 .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: 0.4em solid #eee;
-  border-color: #eee;
   border-top-color: var(--ifm-color-primary);
   border-radius: 50%;
   animation: loadingspin 1s linear infinite;