Merge branch 'main' into jo-docs-thanks-page

site/assets/scss/_sponsor.scss

@@ -0,0 +1,9 @@
+.sponsor {
+  width: 100px;
+  height: 100px;
+}
+
+.sponsor-md {
+  width: 50px;
+  height: 50px;
+}

site/assets/scss/docs.scss

@@ -36,6 +36,7 @@
 @import "ads";
 @import "content";
 @import "skippy";
+@import "sponsor";
 @import "sidebar";
 @import "layout";
 @import "toc";

site/content/docs/5.0/thanks.md

@@ -0,0 +1,158 @@
+---
+layout: docs
+title: Support the team
+group: thanks
+aliases: "/thanks/"
+toc: true
+---
+
+Through donations and sponsorships we are able to maintain & improve Bootstrap. Feel free to show your support on our [Open Collective page](https://opencollective.com/bootstrap).
+
+## Sponsors
+
+{{< sponsors.inline >}}
+<div id="sponsorList" class="d-flex flex-wrap mx-n2 text-center"></div>
+{{< /sponsors.inline >}}
+
+## Backers
+
+{{< backers.inline >}}
+<div id="backerList" class="d-flex flex-wrap mx-n1 text-center"></div>
+{{< /backers.inline >}}
+
+## Services
+
+{{< services.inline >}}
+<div class="d-flex mx-n3 flex-wrap">
+  {{- range (index $.Site.Data "services") }}
+    <div class="m-3 position-relative">
+      {{ if .website -}}
+        <a href="{{ .website }}" class="stretched-link text-reset" title="{{ .name }}" target="_blank" rel="nofollow noopener noreferrer">
+      {{ end -}}
+      <img src="{{ printf ("/docs/%s/assets/img/services/%s") $.Site.Params.docs_version .image }}" alt="{{ .name }}" class="mh-100 mw-100">
+      {{ if .website -}}
+        </a>
+      {{ end -}}
+    </div>
+  {{ end -}}
+</div>
+
+<script>
+  (function () {
+    'use strict'
+
+    var backerDisplayed = 10
+
+    function displaySponsors(sponsorList) {
+      var sponsorListEl = document.getElementById('sponsorList')
+      var output = []
+
+      sponsorList.forEach(function (sponsor) {
+        var sponsorAccount = sponsor.fromAccount
+
+        output.push(
+          '<div class="m-2 position-relative">',
+          ' <div class="img-thumbnail mx-auto d-flex align-items-center justify-content-center overflow-hidden sponsor">',
+          '  <img class="img-fluid d-block" src="' + sponsorAccount.imageUrl + '" alt="' + sponsorAccount.name + '">',
+          ' </div>',
+          ' <h3 class="h6 pt-2">',
+        )
+
+        if (sponsorAccount.website) {
+          output.push('<a href="' + sponsorAccount.website + '" class="stretched-link text-reset" title="' + sponsorAccount.name + '"target="_blank" rel="nofollow noopener noreferrer">' + sponsorAccount.name + '</a>')
+        } else {
+          output.push(sponsorAccount.name)
+        }
+
+        output.push(
+          ' </h3>',
+          '</div>'
+        )
+      })
+
+      sponsorListEl.innerHTML = output.join('')
+    }
+
+    function displayBackers(backerList) {
+      var backerListEl = document.getElementById('backerList')
+      var output = []
+
+      backerList.forEach(function (backer) {
+        var backerAccount = backer.fromAccount
+
+        output.push(
+          '<div class="m-1 position-relative">',
+          ' <div class="img-thumbnail d-flex align-items-center justify-content-center overflow-hidden sponsor">'
+        )
+
+        if (backerAccount.website) {
+          output.push(
+            '<a href="' + backerAccount.website + '" class="stretched-link text-reset" title="' + backerAccount.name + '" target="_blank" rel="nofollow noopener noreferrer">'
+          )
+        }
+
+        output.push('<img src="' + backerAccount.imageUrl + '" alt="' + backerAccount.name + '" class="img-fluid d-block">')
+
+        if (backerAccount.website) {
+          output.push('</a>')
+        }
+
+        output.push(
+          ' </div>',
+          '</div>',
+        )
+      })
+
+      backerListEl.innerHTML = output.join('')
+    }
+
+    function requestOC(cb) {
+      var ocURL = 'https://rest.opencollective.com/v2/bootstrap/orders/incoming/active'
+      var xhr = new XMLHttpRequest()
+
+      xhr.open('GET', ocURL, true)
+      xhr.addEventListener('load', function () {
+        if (xhr.readyState !== 4) {
+          return
+        }
+
+        if (xhr.status === 200) {
+          cb(JSON.parse(xhr.responseText), null)
+        } else {
+          cb(null, xhr.statusText)
+        }
+      })
+
+      xhr.send()
+    }
+
+    (function () {
+      requestOC(function (data) {
+        var allBackerList = data.nodes
+        var backerList = allBackerList.filter(function (backer) {
+          return backer.tier && backer.tier.slug === 'backer'
+        })
+        var sponsorList = allBackerList.filter(function (backer) {
+          return backer.tier && backer.tier.slug === 'sponsor'
+        })
+
+        // Sort by total amount donated
+        sponsorList.sort(function (sponsor1, sponsor2) {
+          return sponsor2.totalDonations.value - sponsor1.totalDonations.value
+        })
+        sponsorList = sponsorList.slice(0, backerDisplayed)
+
+        displaySponsors(sponsorList)
+
+        // Sort by total amount donated
+        backerList.sort(function (backer1, backer2) {
+          return backer2.totalDonations.value - backer1.totalDonations.value
+        })
+        backerList = backerList.slice(0, backerDisplayed)
+
+        displayBackers(backerList)
+      })
+    })()
+  })()
+</script>
+{{< /services.inline >}}

site/data/services.yml

@@ -0,0 +1,6 @@
+- name: Browserstack
+  image: browserstack.svg
+  website: https://www.browserstack.com/
+- name: Netlify
+  image: netlify.svg
+  website: https://www.netlify.com

site/static/docs/5.0/assets/img/services/browserstack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 45" width="140" height="40"><defs><radialGradient id="a" cx="50.08%" cy="50.66%" r="50.4%" fx="50.08%" fy="50.66%"><stop offset="0%" stop-color="#797979"/><stop offset="100%" stop-color="#4C4C4C"/></radialGradient></defs><g fill="none"><circle cx="22.7" cy="22.4" r="21.7" fill="#F4B960"/><circle cx="20.5" cy="20.2" r="19.6" fill="#E66F32"/><circle cx="23.2" cy="17.7" r="17" fill="#E43C41"/><circle cx="24.5" cy="19" r="15.6" fill="#BDD041"/><circle cx="23.4" cy="20.2" r="14.5" fill="#6DB54C"/><circle cx="21.1" cy="17.8" r="12.1" fill="#AEDAE6"/><circle cx="23" cy="15.8" r="10.2" fill="#56B8DE"/><circle cx="24.3" cy="17.2" r="8.9" fill="#00B1D5"/><circle cx="23" cy="18.4" r="7.6" fill="url(#a)"/><circle cx="23" cy="18.4" r="7.6" fill="#221F1F"/><ellipse cx="26.04" cy="15.65" fill="#FFF" rx="2.4" ry="1.5" transform="rotate(-65.834 26.044 15.648)"/><path fill="#202020" d="M51.5 14.2c0-.1.1-.3.3-.3h6.9c3.9 0 5.7 1.8 5.7 4.5 0 2-1 3-2.2 3.6v.1c1.1.4 2.5 1.8 2.5 3.9 0 3.4-2.3 5-6.3 5h-6.6c-.1 0-.3-.1-.3-.3V14.2zm7.1 6.8c1.6 0 2.6-.9 2.6-2.2 0-1.4-1-2.3-2.6-2.3h-3.7c-.1 0-.1.1-.1.1v4.2c0 .1.1.1.1.1-.1.1 3.7.1 3.7.1zm-3.8 7.2h3.9c1.8 0 2.8-.9 2.8-2.4s-1-2.4-2.8-2.4h-3.9c-.1 0-.1.1-.1.1v4.4c-.1.3.1.3.1.3zm12.1 2.6c-.1 0-.3-.1-.3-.3V18.9c0-.1.1-.3.3-.3h2.5c.1 0 .3.1.3.3v1h.1c.6-.9 1.8-1.6 3.4-1.6 1 0 2.1.4 2.7 1 .1.1.1.3.1.3l-1.4 1.7c-.1.1-.3.1-.4.1-.6-.3-1.2-.6-2-.6-1.7 0-2.5 1.1-2.5 3.1v6.5c0 .1-.1.3-.3.3l-2.5.1zm9.5-3c-.3-.8-.5-1.6-.5-3s.1-2.2.5-3c.8-2.2 2.7-3.3 5.4-3.3s4.6 1.2 5.4 3.3c.3.8.5 1.6.5 3s-.1 2.2-.5 3c-.8 2.2-2.7 3.3-5.4 3.3s-4.7-1.1-5.4-3.3zm7.9-.7c.3-.6.3-1.2.3-2.2 0-1-.1-1.6-.3-2.2-.4-1-1.2-1.6-2.5-1.6-1.2 0-2.1.6-2.5 1.6-.3.7-.3 1.2-.3 2.2 0 1 .1 1.6.3 2.2.4 1 1.2 1.6 2.5 1.6 1.2 0 2-.6 2.5-1.6zm16.4 3.7c-.1 0-.3-.1-.3-.3l-2.5-7.8h-.1l-2.5 7.7c-.1.1-.1.3-.3.3h-2.2c-.1 0-.3-.1-.3-.3l-4.1-11.6c-.1-.1.1-.3.2-.3h2.6c.2 0 .3.1.3.3l2.5 8h.1l2.5-8c.1-.1.2-.3.3-.3h2c.1 0 .3.1.3.3l2.6 8h.1l2.4-8c.1-.2.1-.3.3-.3h2.6c.1 0 .3.1.2.3l-4 11.6c-.1.1-.1.3-.3.3l-2.4.1zm7.2-1.6c-.1-.1-.1-.3 0-.3l1.6-1.5c.1-.1.3-.1.4 0 .9.8 2.5 1.4 3.9 1.4 1.6 0 2.4-.6 2.4-1.4 0-.7-.5-1.2-2.2-1.3l-1.4-.1c-2.6-.3-4-1.5-4-3.5 0-2.3 1.8-3.9 5-3.9 2 0 3.7.6 4.9 1.4.1.1.1.3.1.3l-1.3 1.4c-.1.1-.3.1-.4.1-.8-.5-2.2-1-3.4-1-1.3 0-2 .5-2 1.3 0 .7.5 1.1 2.2 1.3l1.4.1c2.7.3 4 1.6 4 3.5 0 2.4-1.9 4.1-5.5 4.1-2.7.1-4.6-.9-5.7-1.9zm13.2-1.4c-.3-.8-.5-1.7-.5-3s.1-2.2.5-3c.8-2.2 2.7-3.3 5.4-3.3s4.6 1.3 5.4 3.3c.3.8.5 1.7.5 3.7 0 .1-.1.3-.3.3h-8.2c-.1 0-.1.1-.1.1 0 .3.1.7.2.9.5 1.2 1.4 1.8 2.9 1.8s2.4-.5 3.1-1.1c.1-.1.3-.1.5-.1l1.6 1.3c.1.1.1.3.1.3-1.1 1.2-3 2.1-5.4 2.1-3 .1-5-1.1-5.7-3.3zm7.9-5.4c-.3-1-1.3-1.6-2.5-1.6s-2.2.6-2.6 1.6c-.1.3-.1.6-.1 1 0 .1.1.1.1.1h5.2c.1 0 .1-.1.1-.1-.1-.3-.1-.7-.2-1zm5.4 8.4c-.1 0-.3-.1-.3-.3V18.9c0-.1.1-.3.3-.3h2.5c.1 0 .3.1.3.3v1h.1c.6-.9 1.8-1.6 3.4-1.6 1 0 2.1.4 2.7 1 .1.1.1.3.1.3l-1.4 1.7c-.1.1-.3.1-.4.1-.6-.3-1.2-.6-2-.6-1.7 0-2.5 1.1-2.5 3.1v6.5c0 .1-.1.3-.3.3l-2.5.1zm9.5-1.8c-.1-.1-.1-.3-.1-.4l1.7-1.8c.1-.1.3-.1.4-.1 1.2.9 3 1.8 5 1.8 2.2 0 3.5-1 3.5-2.5 0-1.2-.8-2-3.3-2.4l-1-.1c-3.5-.5-5.5-2-5.5-4.8 0-3.1 2.5-5.2 6.2-5.2 2.3 0 4.5.7 5.9 1.7.1.1.1.2.1.3l-1.3 1.8c-.1.1-.3.1-.4.1-1.5-.9-2.9-1.3-4.4-1.3-1.9 0-2.9.9-2.9 2.3 0 1.2.9 2 3.4 2.3l1 .1c3.5.5 5.5 2 5.5 5s-2.4 5.3-6.9 5.3c-2.9.1-5.5-.9-6.9-2.1zm19.3 2.1c-2.6 0-3.7-1.2-3.7-3.5v-6.4c0-.1-.1-.1-.1-.1h-.8c-.1 0-.3-.1-.3-.3v-1.7c0-.1.1-.3.3-.3h.8c.1 0 .1-.1.1-.1v-3.3c0-.1.1-.3.3-.3h2.5c.1 0 .3.1.3.3v3.3c0 .1.1.1.1.1h1.8c.1 0 .3.1.3.3v1.7c0 .1-.1.3-.3.3h-1.8c-.1 0-.1.1-.1.1v6.3c0 .8.4 1.1 1.2 1.1h.7c.1 0 .3.1.3.3v2c0 .1-.1.3-.3.3l-1.3-.1zm11.5-.3c-.1 0-.3-.1-.3-.3v-.9c-.6.8-1.8 1.4-3.7 1.4-2.4 0-4.4-1.1-4.4-3.7s2-3.9 5.2-3.9h2.6c.1 0 .1-.1.1-.1v-.6c0-1.4-.7-2-2.9-2-1.4 0-2.4.4-3 .8-.1.1-.3.1-.4-.1l-1-1.6c-.1-.1-.1-.3.1-.3 1-.7 2.5-1.2 4.6-1.2 4 0 5.4 1.3 5.4 4.2v7.8c0 .1-.1.3-.3.3l-2 .2zm-.3-4v-.9c0-.1-.1-.1-.1-.1h-2.2c-2 0-2.8.5-2.8 1.6 0 1 .8 1.5 2.3 1.5 1.7-.1 2.8-.7 2.8-2.1zm5.2 1c-.3-.8-.5-1.7-.5-3s.1-2.2.5-3c.8-2.2 2.8-3.3 5.4-3.3 2 0 3.5.7 4.5 1.9.1.1.1.3-.1.3l-1.7 1.4c-.1.1-.3.1-.4-.1-.7-.7-1.3-1-2.4-1-1.2 0-2.1.5-2.5 1.6-.3.6-.3 1.3-.3 2.2 0 .9.1 1.6.3 2.3.4 1 1.3 1.6 2.5 1.6 1.1 0 1.8-.4 2.4-1 .1-.1.3-.1.4-.1l1.7 1.4c.1.1.1.3.1.3a6 6 0 0 1-4.5 1.8c-2.6.1-4.6-1.1-5.4-3.3zm20.5 3c-.2 0-.3-.1-.5-.3l-3.3-5-1.8 1.9v3.1c0 .1-.1.3-.3.3h-2.5c-.1 0-.3-.1-.3-.3V14c0-.1.1-.3.3-.3h2.5c.1 0 .3.1.3.3v9.8L199 19c.1-.2.3-.3.5-.3h2.8c.1 0 .3.1.1.3l-4.2 4.4 4.7 7.2c.1.1.1.3-.1.3l-2.7-.1z"/></g></svg>