FEAT: Add Meilisearch in theme.

.github/workflows/ci_cd.yml

@@ -12,6 +12,8 @@ env:
   PACKAGE_NAME: 'ansys-sphinx-theme'
   PACKAGE_NAMESPACE: 'ansys_sphinx_theme'
   DOCUMENTATION_CNAME: 'sphinxdocs.ansys.com'
+  MEILISEARCH_HOST_NAME: ${{ secrets.MEILISEARCH_HOST_NAME}}
+  MEILISEARCH_API_KEY: ${{ secrets.MEILISEARCH_API_KEY}}
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

doc/source/conf.py

@@ -38,6 +38,8 @@
 html_logo = ansys_logo_black
 html_theme = "ansys_sphinx_theme"
 
+
+# In the html_context dictionary in conf.py
 html_context = {
     "github_user": "ansys",
     "github_repo": "ansys-sphinx-theme",
@@ -62,6 +64,14 @@
         "json_url": f"https://{cname}/release/versions.json",
         "version_match": get_version_match(__version__),
     },
+    "use_meilisearch": {
+        "host": os.getenv("MEILISEARCH_HOST_NAME", ""),
+        "api_key": os.getenv("MEILISEARCH_API_KEY", ""),
+        "index_uids": {
+            "ansys-ansys-sphinx-theme-sphinx-docs": "ansys-sphinx-theme",
+            "pyansys-docs-all-public": "PyAnsys",
+        },
+    },
 }
 
 html_short_title = html_title = "Ansys Sphinx Theme"

doc/source/user_guide/options.rst

@@ -103,3 +103,50 @@ If you want to hide all icons, use the ``show_icons`` boolean variable:
         ...
     }
 
+Use MeiliSearch
+----------------
+
+MeiliSearch is an open-source search engine that allows developers to 
+easily integrate search functionality into their applications.
+
+To use MeiliSearch in your Sphinx project, you can add a child 
+dictionary called ``use_meilisearch`` to the ``html_theme_options``
+dictionary in the ``conf.py`` file. 
+
+This dictionary should contain the following keys:
+
+#. ``host``: The host name of your MeiliSearch instance.
+    You can set this to an environment variable using 
+    ``os.getenv()`` for added security.
+
+#. ``api_key``: The API key for your MeiliSearch instance.
+   You can also set this to an environment variable using ``os.getenv()``.
+
+#. ``index_uids``: A dictionary that maps index UID to user-friendly index names.
+   Each key-value pair represents an index, with the key
+   being the index UID and the value being the index name.
+
+Here is an example configuration for using MeiliSearch in ``conf.py`` file:
+
+.. code-block:: python
+
+    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"
+        }
+    }
+
+With these options set, your Sphinx project can use MeiliSearch 
+to provide search functionality for your documentation.
+
+.. note::
+
+    If you do not set the "use_meilisearch" option,
+    ``ansys-sphinx-theme`` uses the default search functionality 
+    inherited from the PyData Sphinx Theme.
+

doc/styles/Vocab/ANSYS/accept.txt

@@ -3,4 +3,5 @@ Ansys
 ansys
 Ansys Sphinx Theme
 boolean
-datatable
+datatable
+MeiliSearch

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

@@ -0,0 +1,45 @@
+<!-- Debugging: html_theme_options = {{ html_theme_options }} -->
+{% if theme_use_meilisearch %}
+  <!-- Include the MeiliSearch CSS stylesheet only if theme present -->
+  <link href="{{ pathto('_static/css/meilisearch.css', 1) }}" rel="stylesheet">
+
+  <!-- Create a search bar form with a text input and a dropdown selector for the search index -->
+  <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+    <input type="search" placeholder="Search" class="form-control" id="search-bar-input" autofocus />
+
+    {% if theme_use_meilisearch.index_uids %}
+      <select id="indexUidSelector" class="index-select">
+      {% for index_uid, index_name in theme_use_meilisearch.index_uids.items() %}
+        <option value="{{ index_uid }}">{{ index_name }}</option>
+      {% endfor %}
+      </select>
+    {% endif %}
+    <i class="fa-solid fa-magnifying-glass"></i>
+    <!-- Include the MeiliSearch JavaScript library for the search bar -->
+    <script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.js"></script>
+    <script>
+      // Initialize the MeiliSearch bar with the given API key and host
+      // inspect the first value of index UID as default
+      let theSearchBar = docsSearchBar({
+        hostUrl: "{{ theme_use_meilisearch.host }}" ,
+        apiKey: "{{ theme_use_meilisearch.api_key }}" ,
+        indexUid: "{{ theme_use_meilisearch.index_uids.items()|first|first }}",
+        inputSelector: '#search-bar-input, #indexUidSelector',
+        enableDarkMode: 'auto',
+        debug: true // Set debug to true if you want to inspect the dropdown
+      });
+
+      document.getElementById('indexUidSelector').addEventListener('change', function() {
+        theSearchBar.indexUid = this.value;
+        theSearchBar.inputSelector = '#docs-searchbar-suggestion';
+      });
+
+      // Set the focus on the search bar input
+      document.getElementById('docs-searchbar-suggestion').focus();
+    </script>
+  </form>
+{% else %}
+  <!-- If there is no MiliSearch enabled, use the PyData search -->
+  {%- extends "pydata_sphinx_theme/components/search-field.html" -%}
+{% endif %}
+

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

@@ -0,0 +1,125 @@
+@import "https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
+
+div [data-ds-theme] .searchbox {
+    margin: auto;
+    display: block;
+    width: 600px;
+}
+
+.dsb-suggestions {
+    width: 580px;
+}
+
+.docs-searchbar-suggestion--category-header {
+    background-color: var(--pst-color-border);
+    border-radius: 7px;
+    text-align: center;
+}
+
+.docs-searchbar-suggestion--subcategory-column-text {
+    color: (var(--pst-color-text-base));
+}
+
+div [data-ds-theme] .searchbox input {
+    height: 32px;
+    border-radius: 8px;
+    font-size: 18px;
+    font-family: "Open Sans", sans-serif;
+    box-shadow: 0px 0px 8px darkgrey;
+}
+
+.docs-searchbar-footer {
+    display: none;
+}
+
+[class*="docs-searchbar-suggestion"] {
+    text-decoration: none;
+}
+
+.docs-searchbar-suggestion--highlight {
+    box-shadow: none !important;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.meilisearch-autocomplete {
+    text-align: center;
+    color: var(--pst-color-text-base);
+}
+
+#search-bar-input{
+    width: 182%;
+    background-color: var(--pst-color-background);
+    border: 1px solid var(--pst-color-border);
+    border-radius: .25rem;
+    color: var(--pst-color-text-base);
+    font-size: var(--pst-font-size-icon);
+    position: relative;
+    padding-left: 3rem;
+}
+
+.meilisearch-autocomplete::before {
+  content: "\f002";
+  font-family: "Font Awesome 6 Free"; /* The Font Awesome font family */
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: var(--pst-color-border);
+}
+
+.index-select {
+    color: var(--pst-color-text-base);
+    background: var(--pst-color-background);
+    height: 3rem;
+    border: 1px solid var(--pst-color-border);
+    border-radius: .25rem;
+    font-size: 20px;
+    font-family: "Open Sans", sans-serif;
+    box-shadow: 0px 0px 20px var(--pst-color-border);
+    padding: 0 10px 0px 10px;
+    width: 25%;
+    position: absolute;
+    margin-left: 41em;
+}
+
+.meilisearch-autocomplete .dsb-dropdown-menu [class^=dsb-dataset-] {
+    position: relative;
+    border: 1px solid #d9d9d9;
+    background: #fff;
+    border-radius: 4px;
+    overflow: auto;
+    padding: 0 8px 8px;
+    width: 99%;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion {
+    width: 99%;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--highlight {
+    color: var(--pst-color-info);
+    background: rgb(255 255 255 / 49%);
+    padding: 0 .05em;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
+    width: 30%;
+}
+
+.search-button__wrapper.show form.bd-search {
+    flex-grow: 2;
+}
+
+.d-flex {
+    display: flex!important;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+}

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/theme.conf

@@ -12,3 +12,4 @@ hidden_icons =
 additional_breadcrumbs =
 use_edit_page_button = True
 switcher =
+use_meilisearch=