From 14f14d9f4d0d05f7a3f05c168dd31db274aadd11 Mon Sep 17 00:00:00 2001
From: Simon Lecoq <22963968+lowlighter@users.noreply.github.com>
Date: Sat, 23 Apr 2022 22:00:47 +0200
Subject: [PATCH] feat(plugins/sponsors): add `list` support to
 `plugin_sponsors_sections` (#1011) [skip ci]

---
 source/plugins/sponsors/index.mjs             |  7 +++-
 source/plugins/sponsors/metadata.yml          |  1 +
 .../templates/classic/partials/sponsors.ejs   | 42 +++++++++++--------
 source/templates/classic/style.css            |  6 +--
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/source/plugins/sponsors/index.mjs b/source/plugins/sponsors/index.mjs
index e3b73b77..b6b43c19 100644
--- a/source/plugins/sponsors/index.mjs
+++ b/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}
diff --git a/source/plugins/sponsors/metadata.yml b/source/plugins/sponsors/metadata.yml
index aa3bac3c..a6176dee 100644
--- a/source/plugins/sponsors/metadata.yml
+++ b/source/plugins/sponsors/metadata.yml
@@ -31,6 +31,7 @@ inputs:
     values:
       - goal
       - about
+      - list
 
   plugin_sponsors_past:
     description: |
diff --git a/source/templates/classic/partials/sponsors.ejs b/source/templates/classic/partials/sponsors.ejs
index fbf495db..92dcd021 100644
--- a/source/templates/classic/partials/sponsors.ejs
+++ b/source/templates/classic/partials/sponsors.ejs
@@ -14,23 +14,25 @@
           </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>
@@ -38,11 +40,15 @@
                       <%= 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") { %>
diff --git a/source/templates/classic/style.css b/source/templates/classic/style.css
index 5feddec4..95dd5acc 100644
--- a/source/templates/classic/style.css
+++ b/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 {