From 82e31f1dd43d0e1ea8200e9dc6dfc92f97ea8970 Mon Sep 17 00:00:00 2001
From: Jonathan Wren <jonathan@nowandwren.com>
Date: Mon, 28 Dec 2020 12:25:12 -0800
Subject: [PATCH] Fixes for search on docs site

We previously didn't include the search results page in our CI testing,
so we missed some issues on that page. This ensures that page is part of
regular testing, and also includes fixes for the issues present.
---
 .github/workflows/docs.yaml  |  2 +-
 docs_theme/assets/colors.css |  1 +
 docs_theme/assets/theme.css  | 54 ++++++++++++++++++++++++++++++------
 docs_theme/main.html         | 16 +++++++----
 docs_theme/search.html       | 29 +++++++++++++++++++
 5 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 docs_theme/search.html

diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
index 6208ad5e..3b8cfa96 100644
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -61,7 +61,7 @@ jobs:
       env:
         site_url: http://127.0.0.1:8000
       run: |
-        select="{urls: [\"${site_url}/\", .urlset.url[].loc]}"
+        select="{urls: [\"${site_url}/\", \"${site_url}/search.html?q=jrnl\", .urlset.url[].loc]}"
         curl -s "$site_url/sitemap.xml" | poetry run xq "$select" > list.json
 
     - name: Accessibility testing (Pa11y)
diff --git a/docs_theme/assets/colors.css b/docs_theme/assets/colors.css
index 1a518461..93d84b4d 100644
--- a/docs_theme/assets/colors.css
+++ b/docs_theme/assets/colors.css
@@ -15,6 +15,7 @@
   --yellow: #e2b93d;
 
   /* For light bg */
+  --black: #404040;
   --teal: #2a8068;
   --dark-blue: #356eb7;
   --mid-purple: #846392;
diff --git a/docs_theme/assets/theme.css b/docs_theme/assets/theme.css
index a98c49bc..ae28d4f7 100644
--- a/docs_theme/assets/theme.css
+++ b/docs_theme/assets/theme.css
@@ -8,6 +8,7 @@
 body.wy-body-for-nav,
 section.wy-nav-content-wrap {
   background-color: var(--white);
+  color: var(--black);
 }
 
 .rst-content pre {
@@ -102,7 +103,7 @@ a.icon-home:before {
 .wy-menu-vertical a,
 .wy-menu-vertical li ul li a {
   font-size: 16px;
-  color: var(--off-white);
+  color: var(--white);
   line-height: 2em;
 }
 
@@ -185,18 +186,20 @@ footer {
 }
 
 .wy-side-nav-search input[type=text],
+.mkdocs-search input[type=text],
 form .search-query {
-  background-color: var(--black-shadow) !important;
+  background-color: var(--off-white);
   border: none;
-  box-shadow: none;
   margin-bottom: 1em;
-  color: var(--white);
+  color: var(--black);
   font-weight: 500;
+  box-shadow: none;
 }
 
 .wy-side-nav-search input[type=text]::placeholder,
+.mkdocs-search input[type=text]::placeholder,
 form .search-query::placeholder {
-  color: var(--off-white);
+  color: var(--dark-purple);
 }
 
 .wy-side-nav-search > a:hover {
@@ -298,19 +301,54 @@ ol>li:before {
   margin-top: 20px;
 }
 
-.wy-side-nav-search input[type="text"] {
+.wy-side-nav-search input[type="text"],
+.mkdocs-search input[type=text] {
   border-radius: 50px 0 0 50px;
   height: 32px;
   border-right: none;
+  margin: 0;
 }
 
 .mkdocs-search button {
-  background-color: var(--black-shadow);
+  background-color: var(--off-white);
   border: none;
   box-shadow: none;
-  color: var(--white);
+  color: var(--mid-purple);
   border-radius: 0 50px 50px 0;
   height: 32px;
   width: 2.5em;
   overflow: hidden;
 }
+
+.mkdocs-search {
+  border-radius: 50px;
+}
+
+.mkdocs-search:focus-within {
+  box-shadow: 0 2px 25px 0 var(--blacker-shadow);
+  transition: all .5s ease;
+}
+
+.rst-content div[role="main"] .mkdocs-search input[type="text"] {
+  border-right: none;
+  font-size: 100%;
+  height: 48px;
+  margin: 0;
+}
+
+.rst-content div[role="main"] .mkdocs-search button {
+  border-left: none;
+  font-size: 100%;
+  height: 48px;
+}
+
+.rst-content div[role="main"] .mkdocs-search button:before {
+  font-size: 140%;
+  position: relative;
+  left: -7px;
+  top: -1px;
+}
+
+.search-results {
+  margin-top: 0;
+}
diff --git a/docs_theme/main.html b/docs_theme/main.html
index 7d18ba8d..18a4f1cf 100644
--- a/docs_theme/main.html
+++ b/docs_theme/main.html
@@ -1,8 +1,12 @@
 {% extends "base.html" %}
 
-{% block search_button %}
-<form class="mkdocs-search" action="{{ base_url }}/search.html">
-  <input type="text" name="q" placeholder="Search docs" title="Type search term here">
-  <button class="icon icon-search" aria-label="submit"></button>
-</form>
-{% endblock %}
+{%- block search_button %}
+  {% if 'search' in config['plugins'] %}
+    <div role="search">
+      <form id ="rtd-search-form" class="wy-form mkdocs-search" action="{{ base_url }}/search.html" method="get">
+        <input type="text" name="q" placeholder="Search docs" title="Type search term here" />
+        <button class="icon icon-search" aria-label="submit"></button>
+      </form>
+    </div>
+  {% endif %}
+{%- endblock %}
diff --git a/docs_theme/search.html b/docs_theme/search.html
new file mode 100644
index 00000000..b191fc2a
--- /dev/null
+++ b/docs_theme/search.html
@@ -0,0 +1,29 @@
+{% extends "main.html" %}
+
+{% block content %}
+
+<div role="search">
+  <form id ="content_search" class="wy-form mkdocs-search" action="{{ base_url }}/search.html" method="get">
+
+    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
+    <input
+      name="q"
+      id="mkdocs-search-query"
+      type="text"
+      class="search_input search-query ui-autocomplete-input"
+      placeholder="Search the Docs"
+      autocomplete="off"
+      autofocus
+      title="Type search term here"
+    >
+    <button class="icon icon-search" aria-label="submit"></button>
+  </form>
+</div>
+
+  <h1 id="search">Results</h1>
+
+  <div id="mkdocs-search-results" class="search-results">
+    Searching...
+  </div>
+
+{% endblock %}