alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ feat: add search functionality (#250)

Browse Source
This commit is contained in:
Óscar
2024-01-08 01:00:52 +01:00
committed by GitHub
parent fcd0c34d19
commit 906bc9dec0
69 changed files with 11443 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/partials/footer.html
View File

@@ -115,4 +115,9 @@
{%- if email_needs_decoding -%}
<script src="{{ get_url(path='js/decodeMail.min.js') }}" async></script>
{%- endif -%}
{# Modal structure for search #}
{%- if config.build_search_index -%}
{% include "partials/search_modal.html" %}
{%- endif -%}
</footer>

27
templates/partials/header.html
View File

@@ -1,6 +1,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="base" content="{{ config.base_url | safe }}">
{# Site title #}
<title>{%- include "partials/title.html" -%}</title>
@@ -155,4 +156,30 @@
{%- include "partials/analytics.html" -%}
{%- endif -%}
{# Search #}
{%- if config.build_search_index -%}
{%- if config.search.index_format -%}
{%- set search_index_format = config.search.index_format -%}
{%- elif config.extra.index_format -%}
{# Necessary to support Zola 0.17.X, as it doesn't have access to config.search.index_format #}
{# See: https://github.com/getzola/zola/issues/2165 #}
{%- set search_index_format = config.extra.index_format -%}
{%- else -%}
{%- set search_index_format = "elasticlunr_json" -%}
{%- endif -%}
{%- if search_index_format == "elasticlunr_javascript" -%}
<script defer src="{{ get_url(path='search_index.' ~ lang ~ '.js', cachebust=true) | safe }}"></script>
{%- endif -%}
{# Main search script #}
<script defer src="{{ get_url(path='js/searchElasticlunr.min.js', cachebust=true) | safe }}"></script>
{# Support correct stemming and stop word filtering in non-English search #}
{%- if lang != "en" -%}
<script defer src="{{ get_url(path='js/lunr/lunrStemmerSupport.min.js') | safe }}"></script>
<script defer src="{{ get_url(path='js/lunr/lunr.' ~ lang ~ '.min.js') | safe }}"></script>
{%- endif -%}
{%- endif -%}
</head>

12
templates/partials/nav.html
View File

@@ -18,6 +18,18 @@
{% endfor %}
{%- endif -%}
{# Search #}
{%- if config.build_search_index %}
{%- set search_icon_title = macros_translate::translate(key='search_icon_title', default='Press $SHORTCUT to open search', language_strings=language_strings) -%}
<li class="js">
<div role="button" tabindex="0" id="search-button" class="search-icon interactive-icon" title="{{ search_icon_title }}" aria-label="{{ search_icon_title }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
</div>
</li>
{%- endif %}
{# Language switcher #}
{# Display the language switcher only if more than one language is available #}
{%- if config.languages | length > 0 %}

24
templates/partials/search_modal.html Normal file
View File

@@ -0,0 +1,24 @@
<div id="searchModal" class="search-modal js" role="dialog" aria-labelledby="modalTitle">
<h1 id="modalTitle" class="visually-hidden">{{ macros_translate::translate(key='search', default='Search', language_strings=language_strings) }}</h1>
<div id="modal-content">
<div id="searchBar">
<div class="search-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
</div>
<input id="searchInput" role="combobox", autocomplete="off", spellcheck="false" aria-expanded="false", aria-controls="results-container", placeholder="{{ macros_translate::translate(key='search', default='Search', language_strings=language_strings) }}…"/>
<div id="clear-search" class="close-icon interactive-icon" tabindex="0" role="button" title="{{ macros_translate::translate(key='clear_search', default='Clear search', language_strings=language_strings) }}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
</svg>
</div>
</div>
<div id="results-container">
<div id="results-info">
<span id="n-results">0</span>&nbsp;<span id="result-text-singular">{{ macros_translate::translate(key='result', default='result', language_strings=language_strings) }}</span>
<span id="result-text-plural">{{ macros_translate::translate(key='results', default='results', language_strings=language_strings) }}</span>
</div>
<div id="results" role="listbox"></div>
</div>
</div>