Documentation

docs/insiders/benefits.md

@@ -86,6 +86,8 @@ future holds!
 
   [sponsoring tiers]: sponsoring-tiers.md#commercial-use
 
+<div data-mdx-component="sponsorship"></div>
+
 ## Funding <span class="mdx-sponsorship-total" data-mdx-component="sponsorship-total"></span>
 
 ### Goals

material/overrides/main.html

@@ -23,5 +23,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'assets/javascripts/custom.b457887c.min.js' | url }}"></script>
+  <script src="{{ 'assets/javascripts/custom.058c863c.min.js' | url }}"></script>
 {% endblock %}

src/overrides/assets/javascripts/components/sponsorship/index.ts

@@ -20,13 +20,13 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, map } from "rxjs"
+import { Observable, from, map, switchMap, tap } from "rxjs"
 
-import { getElement, requestJSON } from "~/browser"
+import { getOptionalElement, requestJSON } from "~/browser"
 
 import { renderPrivateSponsor, renderPublicSponsor } from "_/templates"
 
-import { Component, getComponentElement } from "../_"
+import { Component, getComponentElements } from "../_"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -113,35 +113,46 @@ export function mountSponsorship(
   )
 
   /* Retrieve adjacent components */
-  const count = getComponentElement("sponsorship-count")
-  const total = getComponentElement("sponsorship-total")
-
-  /* Render sponsorship */
-  sponsorship$.subscribe(sponsorship => {
-    el.removeAttribute("hidden")
-
-    /* Render public sponsors with avatar and links */
-    const list = getElement(":scope > :first-child", el)
-    for (const sponsor of sponsorship.sponsors)
-      if (sponsor.type === "public")
-        list.appendChild(renderPublicSponsor(sponsor.user))
-
-    /* Render combined private sponsors */
-    list.appendChild(renderPrivateSponsor(
-      sponsorship.sponsors.filter(({ type }) => (
-        type === "private"
-      )).length
-    ))
-
-    /* Render sponsorship count and total */
-    count.innerText = `${sponsorship.sponsors.length}`
-    total.innerText = `$ ${sponsorship.total
-      .toString()
-      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    } a month`
-  })
+  const count = getComponentElements("sponsorship-count")
+  const total = getComponentElements("sponsorship-total")
 
-  // /* Create and return component */
+  /* Render sponsorship count */
+  sponsorship$.pipe(
+    switchMap(sponsorship => from(count).pipe(
+      tap(child => child.innerText = `${sponsorship.sponsors.length}`)
+    ))
+  )
+    .subscribe(() => el.removeAttribute("hidden"))
+
+  /* Render sponsorship total */
+  sponsorship$.pipe(
+    switchMap(sponsorship => from(total).pipe(
+      tap(child => child.innerText = `$ ${sponsorship.total
+        .toString()
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+      } a month`)
+    ))
+  )
+    .subscribe()
+
+  // Render sponsorship list
+  const list = getOptionalElement(":scope > .mdx-sponsorship__list", el)
+  if (list && count.length) {
+    sponsorship$.subscribe(sponsorship => {
+      for (const sponsor of sponsorship.sponsors)
+        if (sponsor.type === "public")
+          list.appendChild(renderPublicSponsor(sponsor.user))
+
+      /* Render combined private sponsors */
+      list.appendChild(renderPrivateSponsor(
+        sponsorship.sponsors.filter(({ type }) => (
+          type === "private"
+        )).length
+      ))
+    })
+  }
+
+  /* Create and return component */
   return sponsorship$
     .pipe(
       map(state => ({ ref: el, ...state }))