Revert "add search" removal, fixing email publishing

pelicanconf.py

@@ -3,17 +3,22 @@
 from __future__ import unicode_literals
 import os
 
+# Adjust `TESTING_LOCALLY` if testing search functionality locally.
+TESTING_LOCALLY = False
+USE_EMAIL_THEME = True if os.environ.get('USE_EMAIL_THEME') == '1' else False
+
 AUTHOR = u'TWiR Contributors'
 SITENAME = u"This Week in Rust"
-SITEURL = 'https://this-week-in-rust.org'
+SITEURL = 'https://this-week-in-rust.org' if not TESTING_LOCALLY else 'http://localhost:8000'
 
 SOURCE_URL = 'https://github.com/rust-lang/this-week-in-rust'
 
-if '1' == os.environ.get('TWIR_NEWSLETTER_THEME'):
+if USE_EMAIL_THEME:
     THEME = 'themes/newsletter'
 else:
     THEME = 'themes/rusted'
 
+THEME_STATIC_DIR = THEME + '/static'
 PLUGIN_PATHS = ["plugins"]
 PLUGINS = ['assets', 'neighbors']
 
@@ -47,7 +52,12 @@
 """
 }
 
-PLUGINS = ['webassets']
+# Don't add search functionality for email.
+if USE_EMAIL_THEME:
+    PLUGINS = ['webassets']
+else:
+    PLUGINS = ['webassets', 'search']
+    SEARCH_HTML_SELECTOR = "article"
 
 MARKDOWN = {
     'extension_configs': {

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"]

publishing/Makefile

@@ -19,7 +19,7 @@
 # 
 # 2. This workflow will generate the desired email template, landing
 #    the end contents in the local "output/" directory. This is the 
-#    equivalent of running `TWIR_NEWSLETTER_THEME=1 pelican --delete-output-directory content`
+#    equivalent of running `USE_EMAIL_THEME=1 pelican --delete-output-directory content`
 #    from a properly instantantiated environment.   
 # 
 #    $ make build && make generate-email && make host-content
@@ -58,7 +58,7 @@ generate-website: clean
 
 generate-email: clean
 	docker run -it \
-		-e TWIR_NEWSLETTER_THEME=1 \
+		-e USE_EMAIL_THEME=1 \
 		-v $(shell pwd)/output:/usr/twir/output \
 		twir:latest
 

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

themes/rusted/static/css/_homepage.scss

@@ -10,4 +10,5 @@
 .subtext {
     margin-left: 50px;
     margin-right: 50px;
+    text-align: center;
 }

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

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%);
+}

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%);
+}

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 }}" />