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

Author: lowlighter

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,35 +14,41 @@
           </section>
         </div>
       <% } else { %>
-        <% for (const section of plugins.sponsors.sections) { %>
-          <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
+        <% for (const section of plugins.sponsors.sections) { if ((plugins.sponsors.sections.includes("goal"))&&(plugins.sponsors.sections.includes("list"))&&(section === "list")) continue%>
+          <% if ((section === "goal")||(section === "list")) { %>
             <div class="fill-width">
               <section class="sponsors goal">
-                <div class="markdown">
-                  <%= plugins.sponsors.goal.description %>
-                </div>
-                <% { const width = 440 * (1 + large) %>
-                  <div class="center horizontal-wrap ">
-                    <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
-                      <mask id="project-bar">
-                        <rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
-                      </mask>
-                      <rect mask="url(#project-bar)" x="0" y="0" width="<%= (plugins.sponsors.goal.progress/100)*width %>" height="8" fill="#ec6cb9"/>
-                      <rect mask="url(#project-bar)" x="<%= (plugins.sponsors.goal.progress/100)*width %>" y="0" width="<%= ((100-plugins.sponsors.goal.progress)/100)*width %>" height="8" fill="#d1d5da"/>
-                    </svg>
+                <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
+                  <div class="markdown">
+                    <%= plugins.sponsors.goal.description %>
                   </div>
+                  <% { const width = 440 * (1 + large) %>
+                    <div class="center horizontal-wrap ">
+                      <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
+                        <mask id="project-bar">
+                          <rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
+                        </mask>
+                        <rect mask="url(#project-bar)" x="0" y="0" width="<%= (plugins.sponsors.goal.progress/100)*width %>" height="8" fill="#ec6cb9"/>
+                        <rect mask="url(#project-bar)" x="<%= (plugins.sponsors.goal.progress/100)*width %>" y="0" width="<%= ((100-plugins.sponsors.goal.progress)/100)*width %>" height="8" fill="#d1d5da"/>
+                      </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>
-                  <span><%= plugins.sponsors.goal.title %></span>
-                </div>
-                <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="" /><% } %>
+                  <% 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 {