Merge pull request #3942 from ndd7xv/search

add search
2023-02-20 11:56:52 -08:00 · 2023-02-20 11:56:52 -08:00 · ec921d449c
parent 8c388e4a87 3f91d31360
commit ec921d449c
12 changed files with 304 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/_homepage.scss
+++ b/themes/rusted/static/css/_homepage.scss
@ -10,4 +10,5 @@
 .subtext {
    margin-left: 50px;
    margin-right: 50px;
+    text-align: center;
 }
--- 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: 149px;
+    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,22 @@
      </li>
    </ul>
  </div>
+  <div class ="col-md-12">
+    <ul class="list-unstyled search">
+      <li class="nav-header disabled"><h2>Search</h2></li>
+      <div>
+        <p class="subtext">Generic or unspecific search terms may result in unhelpful results - there is currently no exact matching on phrases.</p>
+        <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 %}