feat(plugins/sponsors): add list support to plugin_sponsors_sections (#1011) [skip ci]

source/plugins/sponsors/index.mjs

@@ -14,7 +14,7 @@ export default async function({login, q, imports, data, graphql, queries, accoun
     const {[account]:{sponsorsListing:{fullDescription, activeGoal}}} = await graphql(queries.sponsors.description({login, account}))
     const about = await imports.markdown(fullDescription, {mode:"multiline"})
     const goal = activeGoal ? {progress:activeGoal.percentComplete, title:activeGoal.title, description:await imports.markdown(activeGoal.description)} : null
-    const count = {active:{total:0, user:0, organization:0}, past:{total:0, user:0, organization:0}}
+    const count = {total:{count:0, user:0, organization:0}, active:{total:0, user:0, organization:0}, past:{total:0, user:0, organization:0}}
 
     //Query active sponsors
     let list = []
@@ -66,6 +66,11 @@ export default async function({login, q, imports, data, graphql, queries, accoun
       }
     }
 
+    //Update counters
+    count.total.count = count.active.total + count.past.total
+    count.total.user = count.active.user + count.past.user
+    count.total.organization = count.active.organization + count.past.organization
+
     //Results
     list = list.sort((a, b) => a.past === b.past ? b.amount - a.amount : a.past - b.past)
     return {sections, about, list, count, goal}

source/plugins/sponsors/metadata.yml

@@ -31,6 +31,7 @@ inputs:
     values:
       - goal
       - about
+      - list
 
   plugin_sponsors_past:
     description: |

source/templates/classic/partials/sponsors.ejs

@@ -14,10 +14,11 @@
           </section>
         </div>
       <% } else { %>
-        <% for (const section of plugins.sponsors.sections) { %>
+        <% for (const section of plugins.sponsors.sections) { if ((plugins.sponsors.sections.includes("goal"))&&(plugins.sponsors.sections.includes("list"))&&(section === "list")) continue%>
-          <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
+          <% if ((section === "goal")||(section === "list")) { %>
             <div class="fill-width">
               <section class="sponsors goal">
+                <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
                   <div class="markdown">
                     <%= plugins.sponsors.goal.description %>
                   </div>
@@ -32,17 +33,22 @@
                       </svg>
                     </div>
                   <% } %>
+                <% } %>
                 <div class="goal-text">
                   <span>
                     <% if (plugins.sponsors.count.active.total) { %>
                       <%= plugins.sponsors.count.active.total %> sponsor<%= plugins.sponsors.count.active.total !== 1 ? "s are" : " is" %> funding <%= user.login %>'s work
                     <% } %>
                   </span>
+                  <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
                     <span><%= plugins.sponsors.goal.title %></span>
+                  <% } %>
                 </div>
+                <% if ((section === "list")||(plugins.sponsors.sections.includes("list"))) { %>
                   <div class="row">
                     <% for (const user of plugins.sponsors.list) { %><img class="avatar <%= user.type === "organization" ? "organization" : "" %> <%= user.past ? "past" : "" %>" src="<%= user.avatar %>" width="24" height="24" alt="" /><% } %>
                   </div>
+                <% } %>
               </section>
             </div>
           <% } else if (section === "about") { %>

source/templates/classic/style.css

@@ -147,6 +147,9 @@
     border-radius: 50%;
     margin: 0 6px;
   }
+  .avatar.past {
+    filter: opacity(0.5);
+  }
 
   .organization.avatar {
     border-radius: 15%;
@@ -1076,9 +1079,6 @@
   .sponsors .avatar {
     margin: 2px;
   }
-  .sponsors .avatar.past {
-    opacity: 0.3;
-  }
 
 /* Stackoverflow */
   .stackoverflow {