Fix search indexing for html commands and changelog (#1055)

* Correctly index commands ending in `.html` * Fix Release notes keywords * Break apart release notes for search indexing * Don't index archival page * Show category colors if present in index * Get color along with icon * Add search focus color to dark mode
streamlit · May 6, 2024 · 666dd8b · 666dd8b
1 parent 3342473
commit 666dd8b
Show file tree

Hide file tree

Showing 7 changed files with 1,159 additions and 1,033 deletions.
diff --git a/components/utilities/search.js b/components/utilities/search.js
@@ -142,6 +142,7 @@ const Search = () => {
 
   function Hit(props) {
     const icon = props.hit.icon ? props.hit.icon : "text_snippet";
+    const color = props.hit.color ? props.hit.color : "orange-70";
     const category = props.hit.category ? props.hit.category : "Page";
     let snippet;
     if (
@@ -163,12 +164,16 @@ const Search = () => {
           className={classNames("not-link", styles.HitLink)}
           href={props.hit.url}
         >
-          <section className={styles.IconContainer}>
+          <section
+            className={classNames(styles.IconContainer, ICON_COLOR[color])}
+          >
             <div className={classNames(styles.ImageContainer, `icon-${icon}`)}>
               <i className={styles.Icon}>{icon}</i>
             </div>
           </section>
-          <section className={styles.TextContainer}>
+          <section
+            className={classNames(styles.TextContainer, HIGHLIGHT_COLOR[color])}
+          >
             <p className={styles.HitCategory}>{category}</p>
             <h5 className={styles.HitTitle}>
               <Highlight hit={props.hit} attribute="title"></Highlight>
@@ -266,4 +271,30 @@ const Search = () => {
   return searchBar;
 };
 
+const HIGHLIGHT_COLOR = {
+  "red-70": styles.RedHighlight,
+  "orange-70": styles.OrangeHighlight,
+  "yellow-70": styles.YellowHighlight,
+  "green-70": styles.GreenHighlight,
+  "acqua-70": styles.AcquaHighlight,
+  "lightBlue-70": styles.LightBlueHighlight,
+  "darkBlue-70": styles.DarkBlueHighlight,
+  "indigo-70": styles.IndigoHighlight,
+  "gray-70": styles.GrayHighlight,
+  unset: styles.TransparentHighlight,
+};
+
+const ICON_COLOR = {
+  "red-70": styles.RedIcon,
+  "orange-70": styles.OrangeIcon,
+  "yellow-70": styles.YellowIcon,
+  "green-70": styles.GreenIcon,
+  "acqua-70": styles.AcquaIcon,
+  "lightBlue-70": styles.LightBlueIcon,
+  "darkBlue-70": styles.DarkBlueIcon,
+  "indigo-70": styles.IndigoIcon,
+  "gray-70": styles.GrayIcon,
+  unset: styles.TransparentIcon,
+};
+
 export default withRouter(Search);
diff --git a/components/utilities/search.module.css b/components/utilities/search.module.css
@@ -67,7 +67,43 @@
 }
 
 .IconContainer {
-  @apply relative overflow-hidden rounded-md bg-yellow-90 w-10 h-10;
+  @apply relative overflow-hidden rounded-md w-10 h-10;
+}
+
+.RedIcon {
+  @apply bg-red-70;
+}
+
+.OrangeIcon {
+  @apply bg-orange-70;
+}
+
+.YellowIcon {
+  @apply bg-yellow-70;
+}
+
+.GreenIcon {
+  @apply bg-green-70;
+}
+
+.AcquaIcon {
+  @apply bg-acqua-70;
+}
+
+.LightBlueIcon {
+  @apply bg-lightBlue-70;
+}
+
+.DarkBlueIcon {
+  @apply bg-darkBlue-70;
+}
+
+.IndigoIcon {
+  @apply bg-indigo-70;
+}
+
+.GrayIcon {
+  @apply bg-gray-70;
 }
 
 .ImageContainer {
@@ -83,6 +119,42 @@
   @apply pr-8 flex-1;
 }
 
+.RedHighlight em {
+  @apply border-b-red-70;
+}
+
+.OrangeHighlight em {
+  @apply border-b-orange-70;
+}
+
+.YellowHighlight em {
+  @apply border-b-yellow-70;
+}
+
+.GreenHighlight em {
+  @apply border-b-green-70;
+}
+
+.AcquaHighlight em {
+  @apply border-b-acqua-70;
+}
+
+.LightBlueHighlight em {
+  @apply border-b-lightBlue-70;
+}
+
+.DarkBlueHighlight em {
+  @apply border-b-darkBlue-70;
+}
+
+.IndigoHighlight em {
+  @apply border-b-indigo-70;
+}
+
+.GrayHighlight em {
+  @apply border-b-gray-70;
+}
+
 .HitCategory {
   @apply mb-0 text-xs tracking-tight leading-4 font-normal;
   @apply text-gray-70 !important;

diff --git a/components/utilities/searchModal.css b/components/utilities/searchModal.css
@@ -7,7 +7,7 @@
 }
 
 .ais-InstantSearch .ais-SearchBox-form input {
-  @apply h-16 w-full bg-gray-10 dark:bg-gray-90 border-b border-b-gray-40 text-gray-90 rounded-none pl-20 pr-4 text-base focus:outline-none focus:border-b-2 focus:border-b-yellow-90 dark:border-b-gray-80 dark:text-gray-40;
+  @apply h-16 w-full bg-gray-10 dark:bg-gray-90 border-b border-b-gray-40 text-gray-90 rounded-none pl-20 pr-4 text-base focus:outline-none focus:border-b-2 focus:border-b-orange-70 dark:border-b-gray-80 dark:focus:border-b-orange-70 dark:text-gray-40;
 }
 
 .ais-InstantSearch .ais-SearchBox-form #search-clear,
@@ -51,7 +51,7 @@
 
 .ais-Snippet-highlighted,
 .ais-Highlight-highlighted {
-  @apply not-italic pb-1 border-b-2 border-b-yellow-90;
+  @apply not-italic pb-1 border-b-2; /* highlight color in search.module.css */
 }
 
 .ais-Highlight-highlighted {