✨ Add new Deta banner badge with new sponsorship tier 🙇 (#3194)

README.md

@@ -40,7 +40,7 @@ The key features are:
 
 <small>* estimation based on tests on an internal development team, building production applications.</small>
 
-## Gold Sponsors
+## Sponsors
 
 <!-- sponsors -->
 

docs/en/data/sponsors.yml

@@ -2,6 +2,7 @@ gold:
   - url: https://www.deta.sh/?ref=fastapi
     title: The launchpad for all your (team's) ideas
     img: https://fastapi.tiangolo.com/img/sponsors/deta.svg
+silver:
   - url: https://www.investsuite.com/jobs
     title: Wealthtech jobs with FastAPI
     img: https://fastapi.tiangolo.com/img/sponsors/investsuite.svg
@@ -11,7 +12,7 @@ gold:
   - url: https://talkpython.fm/fastapi-sponsor
     title: FastAPI video courses on demand from people you trust
     img: https://fastapi.tiangolo.com/img/sponsors/talkpython.png
-silver:
+bronze:
   - url: https://testdriven.io/courses/tdd-fastapi/
     title: Learn to build high-quality web apps with best practices
     img: https://fastapi.tiangolo.com/img/sponsors/testdriven.svg

docs/en/docs/css/custom.css

@@ -56,10 +56,41 @@ a.internal-link::after {
   text-align: center;
 }
 
-a.announce:link, a.announce:visited {
+a.announce-link:link,
+a.announce-link:visited {
   color: #fff;
 }
 
-a.announce:hover {
+a.announce-link:hover {
   color: var(--md-accent-fg-color);
 }
+
+.announce-wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.announce-wrapper div.item {
+  display: none;
+}
+
+.announce-wrapper .sponsor-badge {
+  display: block;
+  position: absolute;
+  top: -5px;
+  right: 0;
+  font-size: 0.5rem;
+  color: #999;
+  background-color: #666;
+  border-radius: 10px;
+  padding: 0 10px;
+  z-index: 10;
+}
+
+.announce-wrapper>div {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+}

docs/en/docs/fastapi-people.md

@@ -130,11 +130,19 @@ They are supporting my work with **FastAPI** (and others), mainly through <a hre
 {% endfor %}
 {% endif %}
 
+### Bronze Sponsors
+
+{% if sponsors %}
+{% for sponsor in sponsors.bronze -%}
+<a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
+{% endfor %}
+{% endif %}
+
+### Individual Sponsors
+
 {% if people %}
 {% if people.sponsors_50 %}
 
-### Bronze Sponsors
-
 <div class="user-list user-list-center">
 {% for user in people.sponsors_50 %}
 
@@ -146,8 +154,6 @@ They are supporting my work with **FastAPI** (and others), mainly through <a hre
 {% endif %}
 {% endif %}
 
-### Individual Sponsors
-
 {% if people %}
 <div class="user-list user-list-center">
 {% for user in people.sponsors %}

docs/en/docs/index.md

@@ -40,13 +40,16 @@ The key features are:
 
 <small>* estimation based on tests on an internal development team, building production applications.</small>
 
-## Gold Sponsors
+## Sponsors
 
 <!-- sponsors -->
 
 {% if sponsors %}
 {% for sponsor in sponsors.gold -%}
 <a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
+{% endfor -%}
+{%- for sponsor in sponsors.silver -%}
+<a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
 {% endfor %}
 {% endif %}
 

docs/en/docs/js/custom.js

@@ -128,6 +128,35 @@ function setupTermynal() {
     loadVisibleTermynals();
 }
 
+function shuffle(array) {
+    var currentIndex = array.length, temporaryValue, randomIndex;
+    while (0 !== currentIndex) {
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+        temporaryValue = array[currentIndex];
+        array[currentIndex] = array[randomIndex];
+        array[randomIndex] = temporaryValue;
+    }
+    return array;
+}
+
+async function showRandomAnnouncement(groupId, timeInterval) {
+    const announceFastAPI = document.getElementById(groupId);
+    if (announceFastAPI) {
+        let children = [].slice.call(announceFastAPI.children);
+        children = shuffle(children)
+        let index = 0
+        const announceRandom = () => {
+            children.forEach((el, i) => {el.style.display = "none"});
+            children[index].style.display = "block"
+            index = (index + 1) % children.length
+        }
+        announceRandom()
+        setInterval(announceRandom, timeInterval
+        )
+    }
+}
+
 async function main() {
     if (div) {
         data = await getData()
@@ -144,6 +173,8 @@ async function main() {
     }
 
     setupTermynal();
+    showRandomAnnouncement('announce-left', 5000)
+    showRandomAnnouncement('announce-right', 10000)
 }
 
 main()

docs/en/overrides/main.html

@@ -1,13 +1,26 @@
 {% extends "base.html" %}
 
 {% block announce %}
-<a class="announce" href="https://fastapi.tiangolo.com/newsletter/">
-    <span class="twemoji">
-        {% include ".icons/material/email.svg" %}
-      </span> Subscribe to the <strong>FastAPI and friends</strong> newsletter 🎉
-  </a>
-  <!-- <a class="announce" href="https://tripetto.app/run/RXZ6OLDBXX?s=dc" target="_blank">
-    <span class="twemoji">
-      </span>Fill the first-ever <strong>FastAPI user survey</strong> for a chance to win official <strong>FastAPI and Typer stickers</strong> 🎁
-  </a> -->
+<div class="announce-wrapper">
+  <div id="announce-left">
+    <div class="item">
+      <a class="announce-link" href="https://fastapi.tiangolo.com/newsletter/">
+        <span class="twemoji">
+          {% include ".icons/material/email.svg" %}
+        </span> Subscribe to the <strong>FastAPI and friends</strong> newsletter 🎉
+      </a>
+    </div>
+    <div class="item">
+      <iframe style="display: inline-block; vertical-align: middle; border: none; margin-right: 0.5rem;" src="https://github.com/sponsors/tiangolo/button" title="Sponsor tiangolo" height="35" width="116" style="border: 0;"></iframe> <a class="announce-link" target="_blank" href="https://github.com/sponsors/tiangolo">You can now sponsor <strong>FastAPI</strong> 🍰</a>
+    </div>
+  </div>
+  <div id="announce-right" style="position: relative;">
+    <div class="item">
+      <a title="The launchpad for all your (team's) ideas" style="display: block; position: relative;" href="https://www.deta.sh/?ref=fastapi">
+        <span class="sponsor-badge">sponsor</span>
+        <img style="display: block;" src="/img/sponsors/deta-banner.svg" />
+      </a>
+    </div>
+  </div>
+</div>
 {% endblock %}

scripts/docs.py

@@ -206,6 +206,9 @@ def build_lang(
 {% if sponsors %}
 {% for sponsor in sponsors.gold -%}
 <a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
+{% endfor -%}
+{%- for sponsor in sponsors.silver -%}
+<a href="{{ sponsor.url }}" target="_blank" title="{{ sponsor.title }}"><img src="{{ sponsor.img }}"></a>
 {% endfor %}
 {% endif %}
 """