support stork search

- add search css
- include js and wasm from cdn or locally
- initialize js
This commit is contained in:
Elias Kirchgässner 2022-03-07 13:55:35 +01:00
parent 53fc53b8b9
commit 4e99152aff
3 changed files with 237 additions and 2 deletions

View file

@ -43,6 +43,7 @@ The minimalist [Pelican](http://blog.getpelican.com/) theme.
- [Related Posts](https://github.com/getpelican/pelican-plugins/tree/master/related_posts) - [Related Posts](https://github.com/getpelican/pelican-plugins/tree/master/related_posts)
- [Representative image](https://github.com/getpelican/pelican-plugins/tree/master/representative_image) - [Representative image](https://github.com/getpelican/pelican-plugins/tree/master/representative_image)
- [Neighbors](https://github.com/getpelican/pelican-plugins/tree/master/neighbors) - [Neighbors](https://github.com/getpelican/pelican-plugins/tree/master/neighbors)
- [Pelican Search](https://github.com/pelican-plugins/search)
- [Tipue Search](https://github.com/getpelican/pelican-plugins/blob/master/tipue_search/) - [Tipue Search](https://github.com/getpelican/pelican-plugins/blob/master/tipue_search/)
- [SEO](https://github.com/pelican-plugins/seo) - [SEO](https://github.com/pelican-plugins/seo)

208
static/stork/stork-dark.css Normal file
View file

@ -0,0 +1,208 @@
.stork-wrapper-dark {
position: relative;
font-family: inherit;
box-sizing: border-box;
font-size: 1em;
padding: unset;
--stork-blue-2: #a5d8ff;
--stork-violet-4: #9775fa;
--stork-violet-5: #845ef7;
--stork-violet-10: #52366d;
--stork-lime-3: #c0eb75;
--stork-gray-1: #f1f3f5;
--stork-gray-3: #dee2e6;
--stork-gray-7: #495057;
--stork-gray-8: #343a40;
--flex-red: #d9411e;
--stork-border-color: var(--stork-gray-7);
--stork-background-color: var(--stork-gray-8);
--stork-text-color: var(--flex-red);
}
.stork-wrapper-dark *,
.stork-wrapper-dark *:before,
.stork-wrapper-dark *:after {
box-sizing: border-box;
}
.stork-wrapper-dark .stork-input {
width: 100%;
height: 2.4em;
font-size: 1em;
padding: 0.4em 0.8em;
position: relative;
box-shadow: inset 0 0.1em 0.3em hsla(0, 0%, 0%, 0.1);
border: 1px solid var(--stork-border-color);
border-radius: 8px;
background-color: var(--stork-gray-3);
color: var(--stork-gray-8);
font-family: inherit;
}
.stork-wrapper-dark .stork-input:focus {
outline: none;
background-color: var(--stork-gray-8);
color: var(--stork-gray-3);
}
.stork-wrapper-dark .stork-progress {
position: absolute;
display: block;
content: "";
bottom: 1px;
background-color: var(--stork-violet-5);
box-shadow: 0 0 8px var(--stork-violet-4);
height: 1px;
transition: width 0.25s ease, opacity 0.4s ease 0.4s;
}
.stork-wrapper-dark .stork-output {
position: absolute;
width: 100%;
margin-top: 0.5em;
border-radius: 4px;
display: flex;
flex-direction: column;
z-index: 100;
color: var(--stork-text-color);
font-weight: 400;
font-family: inherit;
text-align: unset;
padding: unset;
}
.stork-wrapper-dark .stork-attribution a:link,
.stork-wrapper-dark .stork-attribution a:visited {
color: var(--stork-blue-2);
}
.stork-wrapper-dark .stork-output-visible {
border: 1px solid var(--stork-border-color);
box-shadow: 0px 0.4px 2.2px rgba(0, 0, 0, 0.011),
0px 1px 5.3px rgba(0, 0, 0, 0.016), 0px 1.9px 10px rgba(0, 0, 0, 0.02),
0px 3.4px 17.9px rgba(0, 0, 0, 0.024), 0px 6.2px 33.4px rgba(0, 0, 0, 0.029),
0px 15px 80px rgba(0, 0, 0, 0.04);
background: var(--stork-background-color);
}
.stork-wrapper-dark .stork-message {
width: 100%;
padding: 0.5em 1em;
color: var(--stork-text-color);
}
.stork-wrapper-dark .stork-attribution {
width: 100%;
padding: 0.5em 1em;
font-size: 0.8em;
color: var(--stork-text-color);
}
.stork-wrapper-dark .stork-results {
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
max-height: 25em;
overflow-y: scroll;
border-top: 1px solid var(--stork-border-color);
border-bottom: 1px solid var(--stork-border-color);
box-shadow: inset 0em 0.7em 0.2em -0.5em hsla(0, 0%, 0%, 0.08),
inset 0em -0.7em 0.2em -0.5em hsla(0, 0%, 0%, 0.08);
}
.stork-wrapper-dark .stork-result:not(:last-child) {
border-bottom: 1px solid var(--stork-border-color);
}
.stork-wrapper-dark .stork-result.selected {
background: var(--stork-violet-10);
}
.stork-wrapper-dark .stork-result a:link {
padding: 1em;
display: block;
color: currentcolor;
text-decoration: none;
}
.stork-wrapper-dark .stork-result p {
margin: 0;
}
.stork-wrapper-dark .stork-title {
padding: unset;
font-weight: bold;
font-size: 0.95em;
margin: 0 0 0.75em 0;
color: var(--stork-text-color);
/* Flexbox container for the title and the score, when debugging */
display: flex;
justify-content: space-between;
}
.stork-wrapper-dark .stork-excerpt {
font-size: 0.8em;
line-height: 1;
margin: 0;
color: var(--stork-gray-3);
padding: unset;
/* Flexbox container for the title and the score, when debugging */
display: flex;
justify-content: space-between;
}
.stork-wrapper-dark .stork-excerpt:not(:last-of-type) {
margin-bottom: 0.6em;
}
.stork-wrapper-dark .stork-highlight {
background-color: var(--stork-lime-3);
padding: 0 0.1em;
}
.stork-wrapper-dark .stork-error {
outline: 2px solid #c92a2a;
}
.stork-wrapper-dark .stork-close-button {
position: absolute;
/* bottom: 0; */
right: 0;
margin: 0.7em 0.6em;
height: 1.2em;
width: 1.2em;
padding: 0px;
background: linear-gradient(
to bottom,
hsl(0, 0%, 85%) 0%,
hsl(0, 0%, 83%) 100%
);
border: 1px solid hsla(0, 0%, 50%, 0.3);
font-size: 1em;
color: hsl(0, 0%, 50%);
border-radius: 15%;
line-height: 1;
}
.stork-wrapper-dark .stork-close-button svg {
width: 0.8em;
position: relative;
top: 1px;
}
.stork-wrapper-dark .stork-close-button:hover {
background: hsla(0, 0%, 78%);
cursor: pointer;
}
.stork-wrapper-dark .stork-close-button:active {
background: hsla(0, 0%, 65%);
}

View file

@ -73,7 +73,15 @@
{% if USE_GOOGLE_FONTS != False %} {% if USE_GOOGLE_FONTS != False %}
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400|Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400|Open+Sans" rel="stylesheet">
{% endif %} {% endif %}
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/tipuesearch.min.css" /> <link rel="stylesheet"
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/tipuesearch.min.css" />
{% endif %}
{% if PLUGINS and 'pelican.plugins.search' in PLUGINS %}
{% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE or not THEME_COLOR or THEME_COLOR == "light" %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stork/stork-dark.css" />
{% endif %}
{% endif %} {% endif %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/fontawesome.css"> <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/fontawesome.css">
@ -182,7 +190,12 @@
<input type="text" name="q" id="tipue_search_input" placeholder="{{ _('Search...') }}"> <input type="text" name="q" id="tipue_search_input" placeholder="{{ _('Search...') }}">
</form> </form>
{% endif %} {% endif %}
{% if PLUGINS and 'pelican.plugins.search' in PLUGINS %}
<div class="stork-wrapper-dark">
<input class="stork-input" type="text" name="q" data-stork="sitesearch" placeholder="{{ _('Search...') }}"/>
<div class="stork-output" data-stork="sitesearch-output"></div>
</div>
{% endif %}
{% if (pages and DISPLAY_PAGES_ON_MENU) or LINKS %} {% if (pages and DISPLAY_PAGES_ON_MENU) or LINKS %}
<nav> <nav>
<ul class="list"> <ul class="list">
@ -302,5 +315,18 @@
{% endif %} {% endif %}
{% block additional_js %}{% endblock %} {% block additional_js %}{% endblock %}
{% if PLUGINS and 'pelican.plugins.search' in PLUGINS %}
{% if STORK_VERSION %}
<script src="https://files.stork-search.net/releases/v{{ STORK_VERSION }}/stork.js"></script>
<script>
{% else %}
<script src="{{ SITEURL }}/static/stork.js"></script>
<script>
stork.initialize("{{ SITEURL }}/static/stork.wasm")
{% endif %}
stork.register("sitesearch", "{{ SITEURL }}/search-index.st", {showProgress: false})
</script>
{% endif %}
</body> </body>
</html> </html>