add search

largely based off instruction in their readme: https://github.com/pelican-plugins/search#installation considered using tipue_search but was marked as deprecated in the repo and suggested the search plugin this search also uses stork, which is written in rust! also just adding it to the main page, since i'm not sure if it'd be as useful on every article or any other page.
2023-01-08 21:05:50 -05:00 · 2023-01-08 21:05:50 -05:00 · 03c2e2da47
parent 61bc5ab433
commit 03c2e2da47
11 changed files with 302 additions and 2 deletions
--- a/pelicanconf.py
+++ b/pelicanconf.py
@ -14,6 +14,7 @@ if '1' == os.environ.get('TWIR_NEWSLETTER_THEME'):
 else:
    THEME = 'themes/rusted'

+THEME_STATIC_DIR = THEME + '/static'
 PLUGIN_PATHS = ["plugins"]
 PLUGINS = ['assets', 'neighbors']

@ -47,7 +48,9 @@ scattered about.
 """
 }

-PLUGINS = ['webassets']
+SEARCH_HTML_SELECTOR = "article"
+
+PLUGINS = ['webassets', 'search']

 MARKDOWN = {
    'extension_configs': {
--- a/publishing/Dockerfile
+++ b/publishing/Dockerfile
@ -12,6 +12,9 @@ ENV LC_ALL='en_US.UTF-8'
 RUN ln -s /usr/bin/python3.8 /usr/bin/python
 COPY requirements.txt .
 RUN pip3 install -r requirements.txt
+RUN curl https://files.stork-search.net/releases/v1.5.0/stork-ubuntu-20-04 -o stork \
+    && chmod +x stork \
+    && mv ./stork /usr/bin/stork

 # sass/juice
 RUN apt-get install -y curl
@ -26,7 +29,7 @@ COPY plugins plugins
 COPY themes themes
 COPY pelicanconf.py pelicanconf.py

-COPY publishing/*.sh .
+COPY publishing/*.sh ./
 RUN chmod 777 *.sh

 CMD ["pelican", "--delete-output-directory", "content"]
--- a/requirements.txt
+++ b/requirements.txt
@ -6,3 +6,4 @@ Markdown==3.3.7
 markupsafe==2.0.1
 pelican==4.7.1
 pelican-webassets==2.0.0
+pelican-search==1.0.1
--- a/themes/rusted/static/css/_layout.scss
+++ b/themes/rusted/static/css/_layout.scss
@ -58,6 +58,28 @@ body > footer {
    font-size: 20px;
 }

+/**
+ * Search
+ */
+ .search {
+    li.nav-header h2 {
+        border-bottom: 1px solid $grey-colour-light;
+    }
+
+    li {
+        line-height: 1.8;
+    }
+}
+
+.stork-close-button {
+    right: 15px;
+    top: 87px;
+    bottom: unset;
+}
+
+.stork-progress {
+    position: relative;
+}

 /**
 * Page content
--- a/themes/rusted/static/css/stork-dark.css
+++ b/themes/rusted/static/css/stork-dark.css
@ -0,0 +1,38 @@
+@import url(https://files.stork-search.net/basic.css);
+
+body:not(.stork-multitheme),
+.stork-wrapper-dark {
+  --stork-border-color: hsl(0, 0%, 36%);
+  --stork-background-color: hsl(0, 0%, 22%);
+  --stork-accent-color: hsl(194, 90%, 53%);
+
+  --stork-input-text-color: white;
+
+  --stork-results-hover-color: hsl(210, 83%, 16%);
+  --stork-results-title-color: white;
+  --stork-results-excerpt-color: hsla(0, 0%, 80%, 1);
+  --stork-results-highlight-color: rgb(94, 201, 186);
+  --stork-results-border-color: hsl(0, 0%, 30%);
+}
+
+body:not(.stork-multitheme) .stork-close-button,
+.stork-wrapper-dark .stork-close-button {
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 60%) 0%,
+    hsl(0, 0%, 50%) 100%
+  );
+  border: 1px solid hsla(0, 0%, 50%, 0.8);
+  color: hsl(0, 0%, 25%);
+}
+
+body:not(.stork-multitheme) .stork-close-button:hover,
+.stork-wrapper-dark .stork-close-button:hover {
+  background: hsla(0, 0%, 45%);
+  cursor: pointer;
+}
+
+body:not(.stork-multitheme) .stork-close-button:active,
+.stork-wrapper-dark .stork-close-button:active {
+  background: hsla(0, 0%, 40%);
+}
--- a/themes/rusted/static/css/stork.css
+++ b/themes/rusted/static/css/stork.css
@ -0,0 +1,212 @@
+:root {
+  --stork-border-color: hsl(0, 0%, 65%);
+  --stork-background-color: hsla(0, 0%, 97%, 1);
+  --stork-font-family: inherit;
+  --stork-size-multiplier: 1;
+  --stork-accent-color: hsl(210, 72%, 45%);
+
+  --stork-input-width: 100%;
+  --stork-input-border-radius: 8px;
+  --stork-input-text-color: black;
+  --stork-input-shadow: 1;
+
+  --stork-results-width: 100%;
+  --stork-results-border-radius: 4px;
+  --stork-results-shadow: 1;
+  --stork-results-hover-color: hsl(210, 65%, 75%);
+  --stork-results-title-color: black;
+  --stork-results-excerpt-color: black;
+  --stork-results-highlight-color: rgb(245, 230, 26);
+  --stork-results-border-color: var(--stork-border-color);
+}
+
+.stork-wrapper {
+  position: relative;
+  font-family: var(--stork-font-family);
+  box-sizing: border-box;
+  font-size: 1em * var(--stork-size-multiplier);
+}
+
+.stork-wrapper *,
+.stork-wrapper *:before,
+.stork-wrapper *:after {
+  box-sizing: border-box;
+}
+
+.stork-input {
+  width: var(--stork-input-width);
+  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%, calc(var(--stork-input-shadow) * 0.25));
+  border: 1px solid var(--stork-border-color);
+  border-radius: var(--stork-input-border-radius);
+  background-color: var(--stork-background-color);
+  color: var(--stork-input-text-color);
+  font-family: var(--stork-font-family);
+}
+
+.stork-input:focus {
+  outline: none;
+}
+
+.stork-progress {
+  position: absolute;
+  display: block;
+  content: "";
+  bottom: 1px;
+  background-color: var(--stork-accent-color);
+  box-shadow: 0 0 8px var(--stork-accent-color);
+  height: 1px;
+  transition: width 0.25s ease, opacity 0.4s ease 0.4s;
+}
+
+.stork-output {
+  position: absolute;
+  width: var(--stork-results-width);
+  margin-top: 0.5em;
+  border-radius: var(--stork-results-border-radius);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  color: var(--stork-results-title-color);
+  font-weight: 400;
+  font-family: var(--stork-font-family);
+}
+
+.stork-attribution a:link,
+.stork-attribution a:visited {
+  color: var(--stork-accent-color);
+}
+
+.stork-output-visible {
+  border: 1px solid var(--stork-border-color);
+  box-shadow: 0px 0px 2.2px
+      rgba(0, 0, 0, calc(var(--stork-results-shadow) * 0.02)),
+    0px 0px 5.3px rgba(0, 0, 0, calc(var(--stork-results-shadow) * 0.028)),
+    0px 0px 10px rgba(0, 0, 0, calc(var(--stork-results-shadow) * 0.035)),
+    0px 0px 17.9px rgba(0, 0, 0, calc(var(--stork-results-shadow) * 0.042)),
+    0px 0px 33.4px rgba(0, 0, 0, calc(var(--stork-results-shadow) * 0.05)),
+    0px 0px 80px rgba(0, 0, 0, calc(var(--stork-results-shadow) * 0.07));
+  background: var(--stork-background-color);
+}
+
+.stork-message {
+  width: 100%;
+  padding: 0.5em 1em;
+  color: var(--stork-results-title-color);
+}
+
+.stork-attribution {
+  width: 100%;
+  padding: 0.5em 1em;
+  font-size: 0.8em;
+  color: var(--stork-results-title-color);
+}
+
+.stork-results {
+  margin: 0;
+  padding: 0.25em 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.7em -0.7em hsla(0, 0%, 0%, calc(var(
+              --stork-results-shadow
+            ) * 0.34)),
+    inset 0em -0.7em 0.7em -0.7em
+      hsl(0, 0%, 0%, calc(var(--stork-results-shadow) * 0.34));
+}
+
+.stork-result:not(:last-child) {
+  border-bottom: 1px solid var(--stork-results-border-color);
+}
+
+.stork-result.selected {
+  background: var(--stork-results-hover-color);
+}
+
+.stork-result a:link {
+  padding: 1em;
+  display: block;
+  color: currentcolor;
+  text-decoration: none;
+}
+
+.stork-result p {
+  margin: 0;
+}
+
+.stork-title {
+  font-weight: bold;
+  font-size: 0.95em;
+  margin: 0 0 0.75em 0;
+  color: var(--stork-results-title-color);
+
+  /* Flexbox container for the title and the score, when debugging */
+  display: flex;
+  justify-content: space-between;
+}
+
+.stork-excerpt {
+  font-size: 0.8em;
+  line-height: 1;
+  margin: 0;
+  color: var(--stork-results-excerpt-color);
+
+  /* Flexbox container for the title and the score, when debugging */
+  display: flex;
+  justify-content: space-between;
+}
+
+.stork-excerpt:not(:last-of-type) {
+  margin-bottom: 0.6em;
+}
+
+.stork-highlight {
+  background-color: var(--stork-results-highlight-color);
+  padding: 0 0.1em;
+}
+
+.stork-error {
+  outline: 2px solid hsl(0, 89%, 46%);
+}
+
+.stork-close-button {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0.3em 0.4em;
+  height: 1.5em;
+  width: 1.5em;
+  padding: 0px;
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 85%) 0%,
+    hsl(0, 0%, 75%) 100%
+  );
+  border: 1px solid hsla(0, 0%, 50%, 0.8);
+  font-size: 1.1em;
+  color: hsl(0, 0%, 45%);
+  border-radius: 15%;
+  line-height: 1;
+}
+
+.stork-close-button svg {
+  width: 0.8em;
+  position: relative;
+  top: 1px;
+}
+
+.stork-close-button:hover {
+  background: hsla(0, 0%, 70%);
+  cursor: pointer;
+}
+
+.stork-close-button:active {
+  background: hsla(0, 0%, 65%);
+}
--- a/themes/rusted/static/js/stork.js
+++ b/themes/rusted/static/js/stork.js
--- a/themes/rusted/static/js/stork.js.map
+++ b/themes/rusted/static/js/stork.js.map
--- a/themes/rusted/static/js/stork.wasm
+++ b/themes/rusted/static/js/stork.wasm
--- a/themes/rusted/templates/base.html
+++ b/themes/rusted/templates/base.html
@ -32,6 +32,8 @@
    <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME|striptags }} - Full Atom Feed" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://files.stork-search.net/basic.css" />
+    <link rel="stylesheet" media="screen and (prefers-color-scheme: dark)" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/stork-dark.css">
    {% assets filters="libsass,cssmin", output="css/web-min.css", "css/main.scss" %}

    <link rel="stylesheet" href="/{{ ASSET_URL }}" />
--- a/themes/rusted/templates/index.html
+++ b/themes/rusted/templates/index.html
@ -27,5 +27,21 @@
      </li>
    </ul>
  </div>
+  <div class ="col-md-12">
+    <ul class="list-unstyled search">
+      <li class="nav-header disabled"><h2>Search</h2></li>
+      <div>
+        <input data-stork="sitesearch" class="form-control"/>
+        <div data-stork="sitesearch-output"></div>
+
+        <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/stork.js"></script>
+        <script>
+          stork.initialize("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/stork.wasm")
+          stork.downloadIndex("sitesearch", "{{ SITEURL }}/search-index.st")
+          stork.attach("sitesearch")
+        </script>
+      </div>
+    </ul>
+  </div>
 </div>
 {% endblock content %}