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

@@ -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)

docs_theme/assets/colors.css

@@ -15,6 +15,7 @@
   --yellow: #e2b93d;
 
   /* For light bg */
+  --black: #404040;
   --teal: #2a8068;
   --dark-blue: #356eb7;
   --mid-purple: #846392;

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

docs_theme/main.html

@@ -1,8 +1,12 @@
 {% extends "base.html" %}
 
-{% block search_button %}
+{%- block search_button %}
-<form class="mkdocs-search" action="{{ base_url }}/search.html">
+  {% if 'search' in config['plugins'] %}
-  <input type="text" name="q" placeholder="Search docs" title="Type search term here">
+    <div role="search">
-  <button class="icon icon-search" aria-label="submit"></button>
+      <form id ="rtd-search-form" class="wy-form mkdocs-search" action="{{ base_url }}/search.html" method="get">
-</form>
+        <input type="text" name="q" placeholder="Search docs" title="Type search term here" />
-{% endblock %}
+        <button class="icon icon-search" aria-label="submit"></button>
+      </form>
+    </div>
+  {% endif %}
+{%- endblock %}

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 %}