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 }}
@@ -49,7 +51,7 @@ jobs:
 
   doc-deploy-development:
     name: Doc dev version deploy
-    if: ${{ github.ref == 'refs/heads/main' }}
+    #if: ${{ github.ref == 'refs/heads/main' }}
     runs-on: ubuntu-latest
     needs: doc-build
     steps:

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,16 @@
         "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",
+            "pyaedt": "pyaedt",
+            "pymapdl": "pymapdl",
+        },
+    },
 }
 
 html_short_title = html_title = "Ansys Sphinx Theme"

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

@@ -0,0 +1,43 @@
+<!-- Debugging: html_theme_options = {{ html_theme_options }} -->
+<!-- Include the MeiliSearch CSS stylesheet -->
+{% if theme_use_meilisearch %}
+  <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 search bar with the given API key and index UID
+    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, #indexUidSelector';
+    });
+
+    // Set the focus on the search bar input
+    document.getElementById('docs-searchbar-suggestion').focus();
+  </script>
+  </form>
+{% else %}
+  {%- extends "pydata_sphinx_theme/components/search-field.html" -%}
+{% endif %}
+

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

@@ -0,0 +1,122 @@
+@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: #d9d9d9;
+    border-radius: 7px;
+    text-align: center;
+}
+
+.docs-searchbar-suggestion--subcategory-column-text {
+    color: black;
+}
+
+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;
+}
+
+.index-select {
+    color: #555;
+    background: #fff;
+    height: 32px;
+    border-radius: 8px;
+    font-size: 18px;
+    font-family: "Open Sans", sans-serif;
+    border: 0;
+    box-shadow: 0px 0px 8px darkgrey;
+    padding: 0 10px 0px 10px;
+}
+
+.meilisearch-autocomplete {
+    text-align: center;
+    color: var(--pst-color-text-base);
+}
+
+#search-bar-input{
+    width: 150%;
+    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;
+}
+
+.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: #555;
+    flex-direction: column;
+    background: #fff;
+    height: 2.5rem;
+    border-radius: 8px;
+    font-size: 20px;
+    font-family: "Open Sans", sans-serif;
+    box-shadow: 0px 0px 20px darkgrey;
+    margin-left: 13rem;
+}
+
+.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: 130%;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion {
+    width: 130%;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--highlight {
+    color: var(--pst-color-info);
+    background: var(--pst-color-background);
+    padding: 0 .05em;
+}
+
+.meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
+    width: 50%;
+}

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=