Fix: search bar clear and individual index for docs (#251)

Co-authored-by: Roberto Pastor Muela <[email protected]>
Co-authored-by: Jorge Martínez <[email protected]>

.pre-commit-config.yaml

@@ -43,3 +43,10 @@ repos:
   rev: 0.21.0
   hooks:
     - id: check-github-workflows
+
+
+- repo: https://github.com/adamchainz/blacken-docs
+  rev: 1.15.0
+  hooks:
+  - id: blacken-docs
+    additional_dependencies: [black==23.7.0]

doc/source/conf.py

@@ -47,6 +47,7 @@
     "doc_path": "doc/source",
 }
 
+
 # specify the location of your github repo
 html_theme_options = {
     "github_url": "https://github.com/ansys/ansys-sphinx-theme",
@@ -67,8 +68,7 @@
     "use_meilisearch": {
         "api_key": os.getenv("MEILISEARCH_API_KEY", ""),
         "index_uids": {
-            "ansys-ansys-sphinx-theme-sphinx-docs": "ansys-sphinx-theme",
-            "ansys-pyaedt-sphinx-docs": "PyAEDT",
+            f"ansys-sphinx-theme-v{get_version_match(__version__)}": "ansys-sphinx-theme",
         },
     },
 }

doc/source/getting_started/index.rst

@@ -22,7 +22,7 @@ Modify the ``conf.py`` file
 ---------------------------
 To use this theme, modify your Sphinx ``conf.py`` file::
 
-   html_theme ='ansys_sphinx_theme'
+   html_theme = "ansys_sphinx_theme"
 
 Consider using the ``conf.py`` for this repository:
 

doc/source/user_guide/404_page.rst

@@ -43,7 +43,7 @@ Use the default 404 page
 To use the default 404 page, you can use the ``generate_404`` function in the
 ``ansys_sphinx_theme`` module to create and use a custom cover page:
 
-.. code-block:: python
+.. code-block:: pycon
 
     from ansys_sphinx_theme import generate_404
 

doc/source/user_guide/css.rst

@@ -32,6 +32,6 @@ Next, in your ``conf.py`` file, add the following:
 
 .. code:: python
 
-    html_static_path = ['_static']
-    html_css_files = ['css/custom.css']
+    html_static_path = ["_static"]
+    html_css_files = ["css/custom.css"]
 

doc/source/user_guide/options.rst

@@ -39,14 +39,14 @@ to the same value as the title for the main ``index.rst`` page:
 
 .. code:: python
 
-   html_short_title = html_title = 'Ansys Sphinx Theme'
+   html_short_title = html_title = "Ansys Sphinx Theme"
 
 If you want to title for the main ``index.rst`` file to show the package version,
 include ``|version|`` in the title:
 
 .. code:: python
 
-   html_short_title = html_title = 'Ansys Sphinx Theme |version|'
+   html_short_title = html_title = "Ansys Sphinx Theme |version|"
 
 Customize icons
 ---------------
@@ -72,7 +72,7 @@ the ``icon``, and the ``type``.
 
 This example adds an icon for sending an email:
 
-.. code-block:: python
+.. code-block:: pycon
 
     html_theme_options = {
      "icon_links": [
@@ -86,7 +86,7 @@ Hide icons
 To hide icons so that they do not show in the navigation bar, add their names
 to the ``hidden_icons`` list:
 
-.. code-block:: python
+.. code-block:: pycon
 
     html_theme_options = {
         "hidden_icons": ["GitHub"],
@@ -96,7 +96,7 @@ to the ``hidden_icons`` list:
 
 If you want to hide all icons, use the ``show_icons`` boolean variable:
 
-.. code-block:: python
+.. code-block:: pycon
 
     html_theme_options = {
         "show_icons": False,
@@ -137,31 +137,31 @@ Here is an example configuration for using MeiliSearch in the ``conf.py`` file:
 
 .. code-block:: python
 
-    import os 
+    import os
 
     use_meilisearch = {
         "host": os.getenv("MEILISEARCH_HOST_NAME", ""),
         "api_key": os.getenv("MEILISEARCH_API_KEY", ""),
         "index_uids": {
             "index-uid of current project": "index name to be displayed",
-            "another-index-uid": "index name to be displayed"
-        }
+            "another-index-uid": "index name to be displayed",
+        },
     }
 
 Here is the example configuration of using MeiliSearch in 
 ``conf.py`` file of ``ansys-sphinx-theme``:
 
 .. code-block:: python
 
-    import os 
-    
+    import os
+
     html_theme_options = {
-    "use_meilisearch": {
-        "index_uids": {
-            "ansys-ansys-sphinx-theme-sphinx-docs": "ansys-sphinx-theme",
-            "pyansys-docs-all-public": "PyAnsys",
+        "use_meilisearch": {
+            "index_uids": {
+                "ansys-sphinx-theme-sphinx-docs": "ansys-sphinx-theme",
+                "pyansys-docs-all-public": "PyAnsys",
+            },
         },
-    },
     }
 
 With these options set, your Sphinx project can use MeiliSearch 

doc/source/user_guide/pdf.rst

@@ -11,7 +11,7 @@ page. However, you can use the ``generate_preamble`` function in the
 You use this function to generate the value for the ``preamble`` key in the
 ``latex_elements`` variable declared in the ``conf.py`` file:
 
-.. code-block:: python
+.. code-block:: pycon
 
     latex_elements = {
         "preamble": ansys_sphinx_theme.latex.generate_preamble(
@@ -27,13 +27,11 @@ import them and then add them to the ``latex_additional_files`` dictionary:
 .. code-block:: python
 
     from ansys_sphinx_theme import (
-       ansys_logo_white,
-       ansys_logo_white_cropped,
-       watermark,
+        ansys_logo_white,
+        ansys_logo_white_cropped,
+        watermark,
     )
 
 .. code-block:: python
 
-    latex_additional_files = [
-       watermark, ansys_logo_white, ansys_logo_white_cropped
-    ]
+    latex_additional_files = [watermark, ansys_logo_white, ansys_logo_white_cropped]

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/search-field.html

@@ -33,6 +33,7 @@
   theme_use_meilisearch.host %} {% endif %}
 
   <script>
+    document.body.style.overflow = "hidden !important";
     // Initialize the MeiliSearch bar with the given API key and host
     // inspect the first value of index UID as default
     var theSearchBar = docsSearchBar({
@@ -42,17 +43,37 @@
       inputSelector: "#search-bar-input",
       enableDarkMode: "auto",
       debug: true, // Set debug to true if you want to inspect the dropdown
+      meilisearchOptions: {
+        limit: 10,
+      },
     });
 
+    // Listen for changes in the dropdown selector and update the index uid and suggestion accordingly
     document
       .getElementById("indexUidSelector")
       .addEventListener("change", function () {
         theSearchBar.indexUid = this.value;
-        theSearchBar.inputSelector = "#search-bar-input";
+        theSearchBar.suggestionIndexUid = this.value;
+        theSearchBar.autocomplete.autocomplete.setVal("");
+      });
+
+    // Listen for changes in the search bar input and update the suggestion accordingly
+    document
+      .getElementById("search-bar-input")
+      .addEventListener("change", function () {
+        theSearchBar.suggestionIndexUid =
+          document.getElementById("indexUidSelector").value;
       });
 
     // Set the focus on the search bar input
-    document.getElementById("search-bar-input").focus();
+    document.getElementById("searchbar").focus();
+
+    // Set the focus on the dropdown selector
+    document
+      .getElementById("searchbar")
+      .addEventListener("indexUidSelector", function () {
+        theSearchBar.autocomplete.autocomplete.close();
+      });
   </script>
 </form>
 {% else %}

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css

@@ -2,6 +2,7 @@
 @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
 
 div [data-ds-theme] .searchbox {
+  overflow-y: scroll;
   margin: auto;
   display: block;
   width: 600px;
@@ -14,11 +15,11 @@ div [data-ds-theme] .searchbox {
 .docs-searchbar-suggestion--category-header {
   background-color: var(--pst-color-border);
   border-radius: 7px;
-  text-align: center;
+  text-align: left;
 }
 
 .docs-searchbar-suggestion--subcategory-column-text {
-  color: (var(--pst-color-text-base));
+  color: var(--pst-color-text-base);
 }
 
 div [data-ds-theme] .searchbox input {
@@ -91,23 +92,72 @@ div [data-ds-theme] .searchbox input {
 .meilisearch-autocomplete .dsb-dropdown-menu [class^="dsb-dataset-"] {
   position: relative;
   border: 1px solid #d9d9d9;
-  background: #fff;
+  background: var(--pst-color-background);
   border-radius: 4px;
-  overflow: auto;
+  max-width: 800px;
+  min-width: 500px;
   padding: 0 8px 8px;
   width: 805px;
 }
+.meilisearch-autocomplete .dsb-dropdown-menu {
+  height: 500px !important; /* Set a fixed height to trigger the scrollbar */
+  overflow-y: auto !important; /* Enable the vertical scrollbar */
+  border: 1px solid #ccc;
+}
 
 .meilisearch-autocomplete .docs-searchbar-suggestion {
   width: 735px;
+  background: var(--pst-color-background);
 }
 
 .meilisearch-autocomplete .docs-searchbar-suggestion--highlight {
-  color: var(--pst-color-info);
-  background: rgb(255 255 255 / 49%);
+  color: var(--pst-color-info) !important;
+  font-weight: 900;
+  background: transparent;
   padding: 0 0.05em;
 }
 
 .meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
-  width: 30%;
+  width: None;
+  text-align: left;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--content {
+  display: block;
+  width: 100% !important;
+}
+
+.meilisearch-autocomplete .dsb-dropdown-menu {
+  max-width: 800px;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--title {
+  margin-bottom: 4px;
+  color: var(--pst-color-text-base);
+  font-size: 0.9em;
+  font-weight: 700;
+  width: 100%;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--text {
+  width: 100%;
+}
+
+/* Styling the scrollbar */
+.meilisearch-autocomplete .dsb-dropdown-menu::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.meilisearch-autocomplete .dsb-dropdown-menu::-webkit-scrollbar-thumb {
+  background: var(--pst-color-text-base);
+  border-radius: inherit;
+}
+
+.meilisearch-autocomplete .dsb-dropdown-menu::-webkit-scrollbar-track {
+  background: var(--pst-color-background);
+}
+
+.bd-search {
+  margin-bottom: 200px;
 }