Surface sponsors on welcome page and sidebar (#2921)

Author: Kludex

docs/css/extra.css

@@ -0,0 +1,72 @@
+.md-nav__sponsors {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 1.2rem 0.4rem 0.6rem;
+  padding: 0.9rem 0.6rem 0.8rem;
+  background-color: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
+  border-radius: 0.4rem;
+}
+
+.md-nav__sponsors-title {
+  margin: 0 0 0.1rem;
+  font-size: 0.6rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--md-default-fg-color--light);
+}
+
+.md-nav__sponsor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 0.2rem;
+  transition: opacity 0.15s;
+}
+
+.md-nav__sponsor:hover {
+  opacity: 0.75;
+}
+
+.md-nav__sponsor img {
+  max-width: 100%;
+  max-height: 1.6rem;
+  object-fit: contain;
+}
+
+img[src*="#only-dark"],
+img[src*="#gh-dark-mode-only"] {
+  display: none;
+}
+
+[data-md-color-scheme="slate"] img[src*="#only-dark"],
+[data-md-color-scheme="slate"] img[src*="#gh-dark-mode-only"] {
+  display: inline;
+}
+
+[data-md-color-scheme="slate"] img[src*="#only-light"],
+[data-md-color-scheme="slate"] img[src*="#gh-light-mode-only"] {
+  display: none;
+}
+
+.md-nav__sponsor-cta {
+  display: inline-block;
+  margin-top: 0.15rem;
+  padding: 0.25rem 0.6rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--md-primary-bg-color);
+  background-color: var(--md-primary-fg-color);
+  border-radius: 0.2rem;
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.md-nav__sponsor-cta:hover {
+  opacity: 0.85;
+  color: var(--md-primary-bg-color);
+}

docs/img/fastapi-logo.png

@@ -44,6 +44,22 @@ and means we're now able to start building a common set of tooling usable across
 
 Uvicorn currently supports **HTTP/1.1** and **WebSockets**.
 
+## Sponsorship
+
+Help us keep Uvicorn maintained and sustainable by [becoming a sponsor](https://github.com/sponsors/Kludex).
+
+**Current sponsors:**
+
+<div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin: 1rem 0;">
+    <a href="https://fastapi.tiangolo.com">
+        <img src="img/fastapi-logo.png" alt="FastAPI" style="height: 80px;">
+    </a>
+    <a href="https://huggingface.co">
+        <img src="img/hf-logo-with-title.svg#only-light" alt="Hugging Face" style="height: 80px;">
+        <img src="img/hf-logo-with-title-dark.svg#only-dark" alt="Hugging Face" style="height: 80px;">
+    </a>
+</div>
+
 ## Quickstart
 
 **Uvicorn** is available on [PyPI](https://pypi.org/project/uvicorn/) so installation is as simple as:

docs/img/hf-logo-with-title-dark.svg

@@ -44,4 +44,19 @@
        {{ item.render(nav_item, path, 1) }}
      {% endfor %}
    </ul>
+
+   <!-- Sponsors -->
+   <div class="md-nav__sponsors">
+     <p class="md-nav__sponsors-title">Sponsors</p>
+     <a href="https://fastapi.tiangolo.com" title="FastAPI" class="md-nav__sponsor">
+       <img src="{{ 'img/fastapi-logo.png' | url }}" alt="FastAPI">
+     </a>
+     <a href="https://huggingface.co" title="Hugging Face" class="md-nav__sponsor">
+       <img src="{{ 'img/hf-logo-with-title.svg' | url }}#only-light" alt="Hugging Face">
+       <img src="{{ 'img/hf-logo-with-title-dark.svg' | url }}#only-dark" alt="Hugging Face">
+     </a>
+     <a href="https://github.com/sponsors/Kludex" class="md-nav__sponsor-cta">
+       Become a sponsor! ❤️
+     </a>
+   </div>
  </nav>

docs/img/hf-logo-with-title.svg

@@ -62,7 +62,6 @@ nav:
       - Docker: deployment/docker.md
   - Release Notes: release-notes.md
   - Contributing: contributing.md
-  - Sponsorship: sponsorship.md
 
 extra:
   analytics:
@@ -80,6 +79,9 @@ extra:
     - icon: fontawesome/solid/globe
       link: https://fastapiexpert.com
 
+extra_css:
+  - css/extra.css
+
 markdown_extensions:
   - attr_list
   - admonition