Add backers

docs/_data/links.json

@@ -745,7 +745,7 @@
   },
   "navbar": ["docs", "expo", "love", "sponsor"],
   "navbar_icons": ["github", "twitter"],
-  "navbar_more": ["made-with-bulma", "brand", "extensions"],
+  "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
   "category_ids": [
     "start",
     "features",

docs/assets/javascript/main.js

@@ -6,6 +6,48 @@ document.addEventListener("DOMContentLoaded", () => {
   const $animateds = document.querySelectorAll(".js-animated");
   $animateds.forEach((el) => el.classList.add("is-animated"));
 
+  // Backers
+
+  const $backers = document.getElementById("js-backers");
+
+  if ($backers) {
+    fetch("https://jgthms.com/amis/backers.json")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        return response.json();
+      })
+      .then((response) => {
+        const values = response.values;
+
+        values.forEach((value) => {
+          const el = document.createElement("div");
+          el.className = "bd-tier";
+
+          const amount = document.createElement("div");
+          amount.className = "bd-tier-amount";
+          amount.textContent = `$${value}`;
+
+          const frequency = document.createElement("div");
+          frequency.className = "bd-tier-frequency";
+          frequency.textContent = "a month";
+
+          const list = response.tiers[value];
+          const message = document.createElement("div");
+          message.className = "bd-tier-message";
+          message.textContent = list.join(", ");
+
+          el.appendChild(amount);
+          el.appendChild(frequency);
+          el.appendChild(message);
+
+          $backers.appendChild(el);
+        });
+      });
+  }
+
   // Amis
 
   const $amis = document.getElementById("amis");

docs/backers.html

@@ -1,35 +1,42 @@
 ---
-fulltitle: 'Backers via Patreon and GitHub'
+fulltitle: "Backers via Patreon and GitHub"
 title: 'Backers via <a href="https://www.patreon.com/jgthms" target="_blank">Patreon</a> and <a href="https://github.com/sponsors/jgthms" target="_blank">GitHub</a>'
 layout: default
 route: backers
 theme: sponsor
 breadcrumb:
-- home
-- patreon-backers
+  - home
+  - patreon-backers
 ---
 
-{% include global/header.html %}
-{%
-  include docs/hero.html
-  title=page.title
-  subtitle="Everyone who is supporting Bulma and Open Source."
-%}
+{% include global/header.html %} {% include docs/hero.html title=page.title
+subtitle="Everyone who is supporting Bulma and Open Source." %}
 
 <main class="bd-backers">
   <div class="bd-backers-platforms">
     <div class="bd-backers-platform bd-is-patreon">
-      <a class="bd-backers-platform-logo" href="{{ site.data.meta.patreon_url }}" target="_blank">
+      <a
+        class="bd-backers-platform-logo"
+        href="{{ site.data.meta.patreon_url }}"
+        target="_blank"
+      >
         {% include svg/patreon.svg %}
       </a>
     </div>
     <div class="bd-backers-platform bd-is-github">
-      <a class="bd-backers-platform-logo" href="{{ site.data.meta.github }}" target="_blank">
+      <a
+        class="bd-backers-platform-logo"
+        href="{{ site.data.meta.github }}"
+        target="_blank"
+      >
         {% include svg/github.svg %}
       </a>
     </div>
   </div>
 
-  {% include docs/elements/backers-group.html tier="30" title="Generous backers ($30+)" %}
-  {% include docs/elements/backers-group.html tier="10" title="Bulma backers ($10+)" %}
+  <div class="bd-tiers">
+    <div class="container">
+      <div id="js-backers" class="bd-tiers-list"></div>
+    </div>
+  </div>
 </main>