From d4ca29ed2c9f0ec9a803013fd915ae705dfe38af Mon Sep 17 00:00:00 2001
From: Jonathan Wren <jonathan@nowandwren.com>
Date: Sat, 2 Jan 2021 12:24:21 -0800
Subject: [PATCH] Fix broken search bar in docs site (#1135)

* 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.

* fix sidebar contrast
---
 .github/workflows/docs.yaml  |  2 +-
 docs_theme/assets/colors.css |  1 +
 docs_theme/assets/theme.css  | 56 ++++++++++++++++++++++++++++++------
 docs_theme/main.html         | 16 +++++++----
 docs_theme/search.html       | 29 +++++++++++++++++++
 5 files changed, 88 insertions(+), 16 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..491a0baa 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;
 }
 
@@ -167,7 +168,7 @@ a.icon-home:before {
 }
 
 .wy-menu-vertical li a {
-  color: var(--off-white) !important;
+  color: var(--white) !important;
   font-weight: 300;
 }
 
@@ -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 %}