feat: Update branding

docs/_static/css/custom.css

@@ -1,128 +1,25 @@
-body {
-  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
-  color: #2c3e50;
-  -moz-osx-font-smoothing: grayscale;
+@font-face {
+  font-family: 'Hanken Grotesk';
+  src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2'),
+      url('../fonts/HankenGrotesk-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
-a,
-a:visited {
-  color: #3438bf;
-}
-a:hover {
-  color: #3438bf;
-  text-decoration: underline;
-}
-
-.wy-nav-top {
-  background-color: #3438bf;
-}
-
-.wy-nav-top a {
-  color: white;
-  text-decoration: none !important;
-}
-
-.wy-nav-side {
-  background-color: #3438bf;
-}
-
-.wy-side-nav-search {
-  background-color: #3438bf;
-}
-
-.wy-side-nav-search > a {
-  color: #fcfcfc;
-  text-decoration: none !important;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.wy-side-nav-search > a img.logo {
-  display: inline-block;
-  height: 2.3rem;
-  padding: 0;
-  vertical-align: text-bottom;
-  position: relative;
-  top: 1px;
-}
-
-.wy-side-nav-search > div.version {
-  color: hsla(0, 0%, 100%, 0.7);
-}
-
-.wy-side-nav-search input[type="text"] {
-  border-color: #3438bf;
-}
-
-.wy-menu-vertical a:hover {
-  background-color: #3438bf;
-}
-
-.wy-menu-vertical a,
-.wy-menu-vertical a:hover,
-.wy-menu-vertical a:visited {
-  color: white;
-}
-
-.wy-menu-vertical li.current > a,
-.wy-menu-vertical li.on a {
-  background-color: white;
-}
-
-.wy-nav-content-wrap,
-.wy-nav-content {
-  background-color: white;
-}
-
-.rst-versions,
-.rst-versions .rst-current-version {
-  background-color: #3438bf;
-}
-
-.rst-versions .rst-current-version {
-  color: #fbbf52;
-}
-
-.rst-versions .rst-other-versions {
-  color: white;
-}
-
-.rst-versions a {
-  color: white;
-  text-decoration: underline;
-}
-
-.rst-versions .rst-other-versions dl {
-  margin: 5px 0;
-}
-
-.rst-versions .rst-other-versions dt {
-  margin-bottom: 3px;
-}
-
-.rst-versions .rst-other-versions dd a {
-  border: 1px solid white;
-  border-radius: 5px;
-  padding: 3px 6px;
-  text-decoration: none;
-}
-
-.rst-versions .rst-other-versions dd a:hover {
-  color: #3438bf;
-  background-color: white;
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),
+        url('../fonts/PlusJakartaSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
 }
 
-.rst-content code.literal {
-  color: #62626e;
+h1 {
+  color: var(--color-brand-content);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: inherit;
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Plus Jakarta Sans";
 }

docs/_templates/base.html

@@ -0,0 +1,16 @@
+{% extends '!base.html' %}
+{% block extrahead %}
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans&amp;display=swap">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ pathto('_static/img/favicon.png', 1) }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ pathto('_static/img/favicon.png', 1) }}">
+  <link rel="icon" type="image/png" sizes="192x192" href="{{ pathto('_static/img/favicon.png', 1) }}">
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=GTM-WHJMBX2"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'GTM-WHJMBX2');
+  </script>
+{% endblock %}

docs/conf.py

@@ -49,10 +49,52 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
-html_theme = "sphinx_rtd_theme"
-html_theme_options = {"logo_only": True, "analytics_id": "G-NYV2096KBJ"}
-
 html_logo = "_static/img/logo.svg"
+html_theme = "furo"
+html_theme_options = {
+    # general
+    "source_repository": "https://github.com/meltano/sdk/",
+    "source_branch": "main",
+    "source_directory": "docs/",
+    "sidebar_hide_name": True,
+    # branding
+    "light_css_variables": {
+        "font-stack": "Hanken Grotesk,-apple-system,Helvetica,sans-serif",
+        "color-foreground-primary": "#080216",
+        "color-background-primary": "#E9E5FB",
+        "color-link": "#f963bc",
+        "color-link-underline": "transparent",
+        "color-link--hover": "#f963bc",
+        "color-link-underline--hover": "#f963bc",
+        # brand
+        "color-brand-primary": "#311772",
+        "color-brand-content": "#311772",
+        # sidebar
+        "color-sidebar-background": "#311772",
+        "color-sidebar-search-background": "#E9E5FB",
+        "color-sidebar-item-background--hover": "#18c3fa",
+        "color-sidebar-item-expander-background--hover": "#311772",
+        "color-sidebar-brand-text": "white",
+        "color-sidebar-caption-text": "rgba(255, 255, 255, 0.7)",
+        "color-sidebar-link-text": "white",
+        "color-sidebar-link-text--top-level": "white",
+    },
+    "dark_css_variables": {
+        "color-background-primary": "#080216",
+        "color-link": "#18c3fa",
+        "color-link-underline": "transparent",
+        "color-link--hover": "#18c3fa",
+        "color-link-underline--hover": "#18c3fa",
+        # brand
+        "color-brand-primary": "#311772",
+        "color-brand-content": "rgba(255, 255, 255, 0.7)",
+        # sidebar
+        "color-sidebar-background": "#311772",
+        "color-sidebar-search-background": "#080216",
+        "color-sidebar-item-background--hover": "#311772",
+    },
+}
+
 
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,

docs/index.rst

@@ -3,8 +3,8 @@
    You can adapt this file completely to your liking, but it should at least
    contain the root `toctree` directive.
 
-Welcome to Meltano EDK's documentation!
-=======================================
+Meltano Extension Developer Kit (EDK)
+=====================================
 
 The Meltano extension developer kit is the fastest way to build custom extensions and utilities for Meltano.
 Extensions allow you to integrate any existing data tool into your Meltano project - or build your own!

pyproject.toml

@@ -51,15 +51,15 @@ devtools = ">=0.9.0,<1"
 # Sphinx dependencies installed as optional 'docs' extras
 # https://github.com/readthedocs/readthedocs.org/issues/4912#issuecomment-664002569
 sphinx = {version = ">=4.5,<6.0", optional = true}
-sphinx-rtd-theme = {version = ">=0.5.2,<1.3.0", optional = true}
+furo = {version = ">=2022.12.7,<2024.0.0", optional = true}
 sphinx-copybutton = {version = ">=0.3.1,<0.6.0", optional = true}
 myst-parser = {version = ">=0.17.2,<1.1.0", optional = true}
 sphinx-autobuild = {version = "^2021.3.14", optional = true}
 
 [tool.poetry.extras]
 docs = [
     "sphinx",
-    "sphinx-rtd-theme",
+    "furo",
     "sphinx-copybutton",
     "myst-parser",
     "sphinx-autobuild",