Merge pull request #298 from lioman/add-stork

Add stork search
This commit is contained in:
Alexandre Vicenzi 2022-07-08 15:36:14 +02:00 committed by GitHub
commit 3b11bc9908
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 236 additions and 3 deletions

View file

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

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,12 @@
{% if USE_GOOGLE_FONTS != False %}
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400|Open+Sans" rel="stylesheet">
{% 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 %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stork/stork-dark.css" />
{% endif %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/fontawesome.css">
@ -182,7 +187,12 @@
<input type="text" name="q" id="tipue_search_input" placeholder="{{ _('Search...') }}">
</form>
{% 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 %}
<nav>
<ul class="list">
@ -302,5 +312,7 @@
{% endif %}
{% block additional_js %}{% endblock %}
{% include 'partial/stork_search.html' %}
</body>
</html>

View file

@ -0,0 +1,12 @@
{% 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 %}