docs: update to furo theme to match Spack docs (#471)

* docs: update to furo theme to match Spack docs

* Add logos

* Fix images location and add versions.js

* Fix block quotes for sections

* Fix more block quotes

* Fix more block quotes

* docs: fix indentation

Author: alecbcs

_pygments/style.py

@@ -2,3 +2,44 @@
     overflow-y: auto;
     max-height: 700px;
 }
+
+div.versionadded {
+  border-left: 3px solid #0c731f;
+  color: #0c731f;
+  padding-left: 1rem;
+}
+
+.py.property {
+  display: block !important;
+}
+
+div.version-switch {
+  text-align: center;
+  min-height: 2em;
+}
+
+div.version-switch>select {
+  display: inline-block;
+  text-align-last: center;
+  background: none;
+  border: none;
+  border-radius: 0.5em;
+  box-shadow: none;
+  color: var(--color-foreground-primary);
+  cursor: pointer;
+  appearance: none;
+  padding: 0.2em;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+div.version-switch select:active,
+div.version-switch select:focus,
+div.version-switch select:hover {
+  color: var(--color-foreground-secondary);
+  background: var(--color-background-hover);
+}
+
+.toc-tree li.scroll-current>.reference {
+  font-weight: normal;
+}

_static/css/custom.css

@@ -0,0 +1,37 @@
+// taken from https://github.com/readthedocs/sphinx_rtd_theme/blob/3.0.2/sphinx_rtd_theme/static/js/versions.js_t
+
+function onSelectorSwitch(event) {
+  const option = event.target.selectedIndex;
+  const item = event.target.options[option];
+  window.location.href = item.dataset.url;
+}
+
+document.addEventListener("readthedocs-addons-data-ready", function (event) {
+  const config = event.detail.data();
+
+  const versionSwitch = document.querySelector(
+    "div.version-switch",
+  );
+  let versions = config.versions.active;
+  if (config.versions.current.hidden || config.versions.current.type === "external") {
+    versions.unshift(config.versions.current);
+  }
+  const versionSelect = `
+  <select>
+    ${versions
+      .map(
+        (version) => `
+      <option
+value="${version.slug}"
+${config.versions.current.slug === version.slug ? 'selected="selected"' : ""}
+            data-url="${version.urls.documentation}">
+            ${version.slug}
+        </option>`,
+      )
+      .join("\n")}
+  </select>
+`;
+
+  versionSwitch.innerHTML = versionSelect;
+  versionSwitch.firstElementChild.addEventListener("change", onSelectorSwitch);
+})

_static/images/spack-logo-text.svg

@@ -0,0 +1,16 @@
+{% extends "!base.html" %}
+
+{%- block extrahead %}
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-S0PQ7WV75K"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-S0PQ7WV75K');
+  </script>
+  {%- if READTHEDOCS %}
+  <meta name="readthedocs-addons-api-version" content="1">
+  <script src="{{ pathto('_static/js/versions.js', 1) }}"></script>
+  {%- endif %}
+{% endblock %}

_static/images/spack-logo-white-text.svg

@@ -0,0 +1,23 @@
+<a class="sidebar-brand{% if logo %} centered{% endif %}" href="{{ pathto(master_doc) }}">
+  {%- block brand_content %}
+  {#- Remember to update the prefetch logic in `block logo_prefetch_links` in base.html #}
+  {%- if logo_url %}
+  <div class="sidebar-logo-container">
+    <img class="sidebar-logo" src="{{ logo_url }}" alt="Logo"/>
+  </div>
+  {%- endif %}
+  {%- if theme_light_logo and theme_dark_logo %}
+  <div class="sidebar-logo-container">
+    <img class="sidebar-logo only-light" width="850" height="256" src="{{ pathto('_static/' + theme_light_logo, 1) }}" alt="Spack Logo"/>
+    <img class="sidebar-logo only-dark" width="850" height="256" src="{{ pathto('_static/' + theme_dark_logo, 1) }}" alt="Spack Logo"/>
+  </div>
+  {%- endif %}
+  {% if not theme_sidebar_hide_name %}
+  <span class="sidebar-brand-text">{{ docstitle if docstitle else project }}</span>
+  {%- endif %}
+  {% endblock brand_content %}
+</a>
+
+{%- if READTHEDOCS %}
+<div class="version-switch"></div>
+{%- endif %}