feat(plugins/sponsors): add new sponsors plugin (#548)

source/app/mocks/api/github/graphql/sponsors.default.mjs

@@ -0,0 +1,28 @@
+/**Mocked data */
+export default function({faker, query, login = faker.internet.userName()}) {
+  console.debug("metrics/compute/mocks > mocking graphql api result > sponsors/default")
+  return ({
+    user:{
+      sponsorsListing:{
+        fullDescription:faker.lorem.sentences(),
+        activeGoal:{
+          percentComplete:faker.datatype.number(100),
+          title:faker.lorem.sentence(),
+          description:faker.lorem.sentence(),
+        }
+      },
+      sponsorshipsAsMaintainer:{
+        totalCount:faker.datatype.number(100),
+        nodes:new Array(10).fill(null).map(_ => ({
+          sponsorEntity:{
+            login:faker.internet.userName(),
+            avatarUrl:null,
+          },
+          tier:{
+            monthlyPriceInDollars:faker.datatype.number(10),
+          }
+        }))
+      }
+    },
+  })
+}

source/app/web/statics/app.placeholder.js

@@ -353,6 +353,26 @@
             }
           })
           : null),
+        //Sponsors
+        ...(set.plugins.enabled.sponsors
+          ? ({
+            sponsors: {
+              sections: options["sponsors.sections"].split(",").map(x => x.trim()),
+              about: "A new way to contribute to open source",
+              list: new Array(Number(faker.datatype.number(40))).fill(null).map(_ => ({
+                login: faker.internet.userName(),
+                amount: faker.datatype.number(10),
+                avatar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOcOnfpfwAGfgLYttYINwAAAABJRU5ErkJggg==",
+              })),
+              count: faker.datatype.number(100),
+              goal: {
+                progress: faker.datatype.number(100),
+                title: `$${faker.datatype.number(100)*10} per month`,
+                description: "Invest in the software that powers your world"
+              }
+            }
+          })
+          : null),
         //Languages
         ...(set.plugins.enabled.languages
           ? ({

source/plugins/sponsors/README.md

@@ -0,0 +1,25 @@
+### 💕 GitHub Sponsors
+
+The *sponsors* plugin lets you display your sponsors and introduction text from [GitHub sponsors](https://github.com/sponsors/).
+
+<table>
+  <td align="center">
+    <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.sponsors.svg">
+    <details><summary>With GitHub sponsors introduction</summary>
+      <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.sponsors.full.svg">
+    </details>
+    <img width="900" height="1" alt="">
+  </td>
+</table>
+
+#### ℹ️ Examples workflows
+
+[➡️ Available options for this plugin](metadata.yml)
+
+```yaml
+- uses: lowlighter/metrics@latest
+  with:
+    # ... other options
+    plugin_sponsors: yes
+    plugin_sponsors_sections: goal, about # Display goal and about sections
+```

source/plugins/sponsors/index.mjs

@@ -0,0 +1,26 @@
+//Setup
+export default async function({login, q, imports, data, graphql, queries, account}, {enabled = false} = {}) {
+  //Plugin execution
+  try {
+    //Check if plugin is enabled and requirements are met
+    if ((!enabled)||(!q.sponsors))
+      return null
+
+    //Load inputs
+    const {sections} = await imports.metadata.plugins.sponsors.inputs({data, account, q})
+
+    //Query 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:{monthlyPriceInDollars:amount}}) => ({login, avatarUrl, amount}))
+    await Promise.all(list.map(async user => user.avatar = await imports.imgb64(user.avatarUrl)))
+
+    //Results
+    return {sections, about, list, count, goal}
+  }
+  //Handle errors
+  catch (error) {
+    throw {error:{message:"An error occured", instance:error}}
+  }
+}

source/plugins/sponsors/metadata.yml

@@ -0,0 +1,25 @@
+name: "💕 GitHub Sponsors"
+cost: 1 GraphQL request
+category: github
+index: 23
+supports:
+  - user
+  - organization
+inputs:
+
+  # Enable or disable plugin
+  plugin_sponsors:
+    description: Display GitHub sponsors
+    type: boolean
+    default: no
+
+  # Sections to display
+  plugin_sponsors_sections:
+    description: Sections to display
+    type: array
+    format: comma-separated
+    default: goal, about
+    example: goal, about
+    values:
+      - goal    # Display your GitHub active goal
+      - about   # Display your GitHub sponsors introduction

source/plugins/sponsors/queries/sponsors.graphql

@@ -0,0 +1,26 @@
+query SponsorsDefault {
+  $account(login: "$login") {
+    sponsorsListing {
+      fullDescription
+      activeGoal {
+        percentComplete
+        title
+        description
+      }
+    }
+    sponsorshipsAsMaintainer(first: 100) {
+      totalCount
+      nodes {
+        sponsorEntity {
+          ... on User {
+            login
+            avatarUrl(size: 36)
+          }
+        }
+        tier {
+          monthlyPriceInDollars
+        }
+      }
+    }
+  }
+}

source/plugins/sponsors/tests.yml

@@ -0,0 +1,5 @@
+- name: Sponsors plugin (default)
+  uses: lowlighter/metrics@latest
+  with:
+    token: MOCKED_TOKEN
+    plugin_sponsors: yes

source/templates/classic/partials/_.json

@@ -32,5 +32,6 @@
   "stock",
   "achievements",
   "screenshot",
-  "code"
+  "code",
+  "sponsors"
 ]

source/templates/classic/partials/sponsors.ejs

@@ -0,0 +1,60 @@
+<% if (plugins.sponsors) { %>
+  <section>
+    <h2 class="field">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>
+      Sponsor me!
+    </h2>
+      <% if (plugins.sponsors.error) { %>
+        <div class="row fill-width">
+          <section>
+            <div class="field error">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
+              <%= plugins.sponsors.error.message %>
+            </div>
+          </section>
+        </div>
+      <% } else { %>
+        <% for (const section of plugins.sponsors.sections) { %>
+          <% if ((section === "goal")&&(plugins.sponsors.goal)) { %>
+            <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>
+                  </div>
+                <% } %>
+                <div class="goal-text">
+                  <span>
+                    <% if (plugins.sponsors.count) { %>
+                      <%= plugins.sponsors.count %> sponsor<%= plugins.sponsors.count !== 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" src="<%= user.avatar %>" width="24" height="24" alt="" /><% } %>
+                </div>
+              </section>
+            </div>
+          <% } else if (section === "about") { %>
+            <div class="row fill-width">
+              <section class="sponsors">
+                <div class="markdown">
+                  <%- plugins.sponsors.about %>
+                </div>
+              </section>
+            </div>
+          <% } %>
+        <% } %>
+      <% } %>
+  </section>
+<% } %>

source/templates/classic/style.css

@@ -931,11 +931,26 @@
     margin-right: 0;
   }
 
-/* Introduction */
+/* Introduction and sponsors */
-  .introduction {
+  .introduction, .sponsors {
     white-space: normal;
     margin: 0 13px 2px;
   }
+  .sponsors.goal {
+    padding: 6px 8px;
+    border-radius: 5px;
+    background-color: #7777771F;
+  }
+  .sponsors .goal-text {
+    display: flex;
+    justify-content: space-between;
+    font-style: italic;
+    font-size: 10px;
+    margin-bottom: 4px;
+  }
+  .sponsors .avatar {
+    margin: 2px;
+  }
 
 /* Stackoverflow */
   .stackoverflow {
@@ -1137,6 +1152,22 @@
     display: inline-block;
     width: 97%;
   }
+  .markdown p {
+    margin: 8px 0;
+  }
+  .markdown ul {
+    padding-left: 24px;
+  }
+  .markdown a {
+    color: #58a6ff;
+    text-decoration: none;
+  }
+  .markdown blockquote {
+    border-left: 4px solid #7777771F;
+    color: #777777;
+    margin: 0;
+    padding-left: 16px;
+  }
   code {
     background-color: #7777771F;
     display: inline-block;