feat(plugins/sponsors): add plugin_sponsors_past (#958) [skip ci]

source/plugins/sponsors/examples.yml

@@ -6,6 +6,7 @@
     base: ""
     plugin_sponsors: yes
     plugin_sponsors_sections: goal
+    plugin_sponsors_past: yes
 
 - name: Sponsors introduction
   uses: lowlighter/metrics@latest

source/plugins/sponsors/index.mjs

@@ -7,16 +7,33 @@ export default async function({login, q, imports, data, graphql, queries, accoun
       return null
 
     //Load inputs
-    const {sections} = await imports.metadata.plugins.sponsors.inputs({data, account, q})
+    const {sections, past} = await imports.metadata.plugins.sponsors.inputs({data, account, q})
 
     //Query sponsors and goal
+    console.debug(`metrics/compute/${login}/plugins > sponsors > querying sponsors and goal`)
     const {[account]:{sponsorsListing:{fullDescription, activeGoal}, sponsorshipsAsMaintainer:{nodes, totalCount:count}}} = await graphql(queries.sponsors({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 list = nodes.map(({sponsorEntity:{login, avatarUrl}, tier}) => ({login, avatarUrl, amount:tier?.monthlyPriceInDollars}))
+    let list = nodes.map(({sponsorEntity:{login, avatarUrl}, tier}) => ({login, avatarUrl, amount:tier?.monthlyPriceInDollars ?? null, past:false}))
     await Promise.all(list.map(async user => user.avatar = await imports.imgb64(user.avatarUrl)))
 
+    //Query past sponsors
+    if (past) {
+      console.debug(`metrics/compute/${login}/plugins > sponsors > querying past sponsors`)
+      const active = new Set(list.map(({login}) => login))
+      const {[account]:{sponsorsActivities:{nodes:events}}} = await graphql(queries.sponsors.all({login, account}))
+      console.log(JSON.stringify(await graphql(queries.sponsors.all({login, account})), null, 2))
+      const users =  events.map(({sponsor:{login, avatarUrl}, sponsorsTier}) => ({login, avatarUrl, amount:sponsorsTier?.monthlyPriceInDollars ?? null, past:true}))
+      for (const user of users) {
+        if (!active.has(user.login)) {
+          active.add(user.login)
+          list.push({...user, avatar:await imports.imgb64(user.avatarUrl)})
+        }
+      }
+    }
+
     //Results
+    list = list.sort((a, b) => a.past === b.past ? b.amount - a.amount : a.past - b.past)
     return {sections, about, list, count, goal}
   }
   //Handle errors

source/plugins/sponsors/metadata.yml

@@ -31,3 +31,11 @@ inputs:
     values:
       - goal
       - about
+
+  plugin_sponsors_past:
+    description: |
+      Display past sponsorships
+
+      This feature requires a token from target account, as past sponsorships are gathered from sponsors activity and is private data.
+    type: boolean
+    default: no

source/plugins/sponsors/queries/all.graphql

@@ -0,0 +1,17 @@
+query SponsorsAll {
+  $account(login: "$login") {
+    sponsorsActivities(last: 100, period: ALL) {
+      nodes {
+        sponsor {
+          ... on User {
+            avatarUrl
+            login
+          }
+        }
+        sponsorsTier {
+          monthlyPriceInDollars
+        }
+      }
+    }
+  }
+}

source/templates/classic/partials/sponsors.ejs

@@ -41,7 +41,7 @@
                   <span><%= plugins.sponsors.goal.title %></span>
                 </div>
                 <div class="row">
-                  <% for (const user of plugins.sponsors.list) { %><img class="avatar" src="<%= user.avatar %>" width="24" height="24" alt="" /><% } %>
+                  <% for (const user of plugins.sponsors.list) { %><img class="avatar <%= user.past ? "past" : "" %>" src="<%= user.avatar %>" width="24" height="24" alt="" /><% } %>
                 </div>
               </section>
             </div>

source/templates/classic/style.css

@@ -1071,6 +1071,9 @@
   .sponsors .avatar {
     margin: 2px;
   }
+  .sponsors .avatar.past {
+    opacity: 0.3;
+  }
 
 /* Stackoverflow */
   .stackoverflow {

tests/mocks/api/github/graphql/sponsors.all.mjs

@@ -0,0 +1,19 @@
+/**Mocked data */
+export default function({ faker, query, login = faker.internet.userName() }) {
+  console.debug("metrics/compute/mocks > mocking graphql api result > sponsors/all")
+  return ({
+    user: {
+      sponsorsActivities: {
+        nodes: new Array(10).fill(null).map(_ => ({
+          sponsor: {
+            login: faker.internet.userName(),
+            avatarUrl: null,
+          },
+          sponsorsTier: {
+            monthlyPriceInDollars: faker.datatype.number(10),
+          },
+        })),
+      },
+    },
+  })
+}