Skip to content

Commit 793e512

Browse files
Revathyvenugopal162RobPasMueakaszynski
authored
FEAT: Add Meilisearch in theme. (#200)
* Replace the searchfield * ADD the env variables * Add the dict * Try to add the env variable * Try to add uids * MAking the search field * Add the styles * Deploy changes to dev * Change the width * Get the pydata if miliesearch not present * Change the theme_options * Add the search button * Add the first value in dict * Update src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css * Add the styles * Add the dark theme * Adjust the searchbar width * Add the documenttation * Add the docstrings * Update doc/source/user_guide/options.rst Co-authored-by: Roberto Pastor Muela <[email protected]> * Add the searchbar styling * Update .github/workflows/ci_cd.yml Co-authored-by: Roberto Pastor Muela <[email protected]> * Fix Zoom problem * Update src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/css/meilisearch.css --------- Co-authored-by: Roberto Pastor Muela <[email protected]> Co-authored-by: Alex Kaszynski <[email protected]>
1 parent 3bf74ad commit 793e512

File tree

7 files changed

+232
-1
lines changed

7 files changed

+232
-1
lines changed

‎.github/workflows/ci_cd.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ env:
1212
PACKAGE_NAME: 'ansys-sphinx-theme'
1313
PACKAGE_NAMESPACE: 'ansys_sphinx_theme'
1414
DOCUMENTATION_CNAME: 'sphinxdocs.ansys.com'
15+
MEILISEARCH_HOST_NAME: ${{ secrets.MEILISEARCH_HOST_NAME}}
16+
MEILISEARCH_API_KEY: ${{ secrets.MEILISEARCH_API_KEY}}
1517

1618
concurrency:
1719
group: ${{ github.workflow }}-${{ github.ref }}

‎doc/source/conf.py‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
html_logo = ansys_logo_black
3939
html_theme = "ansys_sphinx_theme"
4040

41+
42+
# In the html_context dictionary in conf.py
4143
html_context = {
4244
"github_user": "ansys",
4345
"github_repo": "ansys-sphinx-theme",
@@ -62,6 +64,14 @@
6264
"json_url": f"https://{cname}/release/versions.json",
6365
"version_match": get_version_match(__version__),
6466
},
67+
"use_meilisearch": {
68+
"host": os.getenv("MEILISEARCH_HOST_NAME", ""),
69+
"api_key": os.getenv("MEILISEARCH_API_KEY", ""),
70+
"index_uids": {
71+
"ansys-ansys-sphinx-theme-sphinx-docs": "ansys-sphinx-theme",
72+
"pyansys-docs-all-public": "PyAnsys",
73+
},
74+
},
6575
}
6676

6777
html_short_title = html_title = "Ansys Sphinx Theme"

‎doc/source/user_guide/options.rst‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,50 @@ If you want to hide all icons, use the ``show_icons`` boolean variable:
103103
...
104104
}
105105
106+
Use MeiliSearch
107+
----------------
108+
109+
MeiliSearch is an open-source search engine that allows developers to
110+
easily integrate search functionality into their applications.
111+
112+
To use MeiliSearch in your Sphinx project, you can add a child
113+
dictionary called ``use_meilisearch`` to the ``html_theme_options``
114+
dictionary in the ``conf.py`` file.
115+
116+
This dictionary should contain the following keys:
117+
118+
#. ``host``: The host name of your MeiliSearch instance.
119+
You can set this to an environment variable using
120+
``os.getenv()`` for added security.
121+
122+
#. ``api_key``: The API key for your MeiliSearch instance.
123+
You can also set this to an environment variable using ``os.getenv()``.
124+
125+
#. ``index_uids``: A dictionary that maps index UID to user-friendly index names.
126+
Each key-value pair represents an index, with the key
127+
being the index UID and the value being the index name.
128+
129+
Here is an example configuration for using MeiliSearch in ``conf.py`` file:
130+
131+
.. code-block:: python
132+
133+
import os
134+
135+
use_meilisearch = {
136+
"host": os.getenv("MEILISEARCH_HOST_NAME", ""),
137+
"api_key": os.getenv("MEILISEARCH_API_KEY", ""),
138+
"index_uids": {
139+
"index-uid of current project": "index name to be displayed",
140+
"another-index-uid": "index name to be displayed"
141+
}
142+
}
143+
144+
With these options set, your Sphinx project can use MeiliSearch
145+
to provide search functionality for your documentation.
146+
147+
.. note::
148+
149+
If you do not set the "use_meilisearch" option,
150+
``ansys-sphinx-theme`` uses the default search functionality
151+
inherited from the PyData Sphinx Theme.
152+

‎doc/styles/Vocab/ANSYS/accept.txt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ Ansys
33
ansys
44
Ansys Sphinx Theme
55
boolean
6-
datatable
6+
datatable
7+
MeiliSearch

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!-- Debugging: html_theme_options = {{ html_theme_options }} -->
2+
{% if theme_use_meilisearch %}
3+
<!-- Include the MeiliSearch CSS stylesheet only if theme present -->
4+
<link href="{{ pathto('_static/css/meilisearch.css', 1) }}" rel="stylesheet">
5+
6+
<!-- Create a search bar form with a text input and a dropdown selector for the search index -->
7+
<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
8+
<input type="search" placeholder="Search" class="form-control" id="search-bar-input" autofocus />
9+
10+
{% if theme_use_meilisearch.index_uids %}
11+
<select id="indexUidSelector" class="index-select">
12+
{% for index_uid, index_name in theme_use_meilisearch.index_uids.items() %}
13+
<option value="{{ index_uid }}">{{ index_name }}</option>
14+
{% endfor %}
15+
</select>
16+
{% endif %}
17+
<i class="fa-solid fa-magnifying-glass"></i>
18+
<!-- Include the MeiliSearch JavaScript library for the search bar -->
19+
<script src="https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.js"></script>
20+
<script>
21+
// Initialize the MeiliSearch bar with the given API key and host
22+
// inspect the first value of index UID as default
23+
let theSearchBar = docsSearchBar({
24+
hostUrl: "{{ theme_use_meilisearch.host }}" ,
25+
apiKey: "{{ theme_use_meilisearch.api_key }}" ,
26+
indexUid: "{{ theme_use_meilisearch.index_uids.items()|first|first }}",
27+
inputSelector: '#search-bar-input, #indexUidSelector',
28+
enableDarkMode: 'auto',
29+
debug: true // Set debug to true if you want to inspect the dropdown
30+
});
31+
32+
document.getElementById('indexUidSelector').addEventListener('change', function() {
33+
theSearchBar.indexUid = this.value;
34+
theSearchBar.inputSelector = '#docs-searchbar-suggestion';
35+
});
36+
37+
// Set the focus on the search bar input
38+
document.getElementById('docs-searchbar-suggestion').focus();
39+
</script>
40+
</form>
41+
{% else %}
42+
<!-- If there is no MiliSearch enabled, use the PyData search -->
43+
{%- extends "pydata_sphinx_theme/components/search-field.html" -%}
44+
{% endif %}
45+

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
@import "https://cdn.jsdelivr.net/npm/docs-searchbar.js@latest/dist/cdn/docs-searchbar.min.css";
2+
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";
3+
4+
div [data-ds-theme] .searchbox {
5+
margin: auto;
6+
display: block;
7+
width: 600px;
8+
}
9+
10+
.dsb-suggestions {
11+
width: 580px;
12+
}
13+
14+
.docs-searchbar-suggestion--category-header {
15+
background-color: var(--pst-color-border);
16+
border-radius: 7px;
17+
text-align: center;
18+
}
19+
20+
.docs-searchbar-suggestion--subcategory-column-text {
21+
color: (var(--pst-color-text-base));
22+
}
23+
24+
div [data-ds-theme] .searchbox input {
25+
height: 32px;
26+
border-radius: 8px;
27+
font-size: 18px;
28+
font-family: "Open Sans", sans-serif;
29+
box-shadow: 0px 0px 8px darkgrey;
30+
}
31+
32+
.docs-searchbar-footer {
33+
display: none;
34+
}
35+
36+
[class*="docs-searchbar-suggestion"] {
37+
text-decoration: none;
38+
}
39+
40+
.docs-searchbar-suggestion--highlight {
41+
box-shadow: none !important;
42+
}
43+
44+
.container {
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
}
49+
50+
.meilisearch-autocomplete {
51+
text-align: center;
52+
color: var(--pst-color-text-base);
53+
}
54+
55+
#search-bar-input{
56+
width: 182%;
57+
background-color: var(--pst-color-background);
58+
border: 1px solid var(--pst-color-border);
59+
border-radius: .25rem;
60+
color: var(--pst-color-text-base);
61+
font-size: var(--pst-font-size-icon);
62+
position: relative;
63+
padding-left: 3rem;
64+
}
65+
66+
.meilisearch-autocomplete::before {
67+
content: "\f002";
68+
font-family: "Font Awesome 6 Free"; /* The Font Awesome font family */
69+
position: absolute;
70+
left: 8px;
71+
top: 50%;
72+
transform: translateY(-50%);
73+
font-size: 1rem;
74+
color: var(--pst-color-border);
75+
}
76+
77+
.index-select {
78+
color: var(--pst-color-text-base);
79+
background: var(--pst-color-background);
80+
height: 3rem;
81+
border: 1px solid var(--pst-color-border);
82+
border-radius: .25rem;
83+
font-size: 20px;
84+
font-family: "Open Sans", sans-serif;
85+
box-shadow: 0px 0px 20px var(--pst-color-border);
86+
padding: 0 10px 0px 10px;
87+
width: 25%;
88+
position: absolute;
89+
margin-left: 41em;
90+
}
91+
92+
.meilisearch-autocomplete .dsb-dropdown-menu [class^=dsb-dataset-] {
93+
position: relative;
94+
border: 1px solid #d9d9d9;
95+
background: #fff;
96+
border-radius: 4px;
97+
overflow: auto;
98+
padding: 0 8px 8px;
99+
width: 99%;
100+
}
101+
102+
.meilisearch-autocomplete .docs-searchbar-suggestion {
103+
width: 99%;
104+
}
105+
106+
.meilisearch-autocomplete .docs-searchbar-suggestion--highlight {
107+
color: var(--pst-color-info);
108+
background: rgb(255 255 255 / 49%);
109+
padding: 0 .05em;
110+
}
111+
112+
.meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
113+
width: 30%;
114+
}
115+
116+
.search-button__wrapper.show form.bd-search {
117+
flex-grow: 2;
118+
}
119+
120+
.d-flex {
121+
display: flex!important;
122+
flex-direction: row;
123+
justify-content: space-between;
124+
flex-wrap: nowrap;
125+
}

‎src/ansys_sphinx_theme/theme/ansys_sphinx_theme/theme.conf‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ hidden_icons =
1212
additional_breadcrumbs =
1313
use_edit_page_button = True
1414
switcher =
15+
use_meilisearch=

0 commit comments

Comments
 (0)