Add people plugin (#48)

README.md

@@ -164,7 +164,7 @@ But there's more with [plugins](https://github.com/lowlighter/metrics/tree/maste
   </tr>
   <tr>
     <th><a href="https://github.com/lowlighter/metrics#-gists">🎫 Gists plugin</a></th>
-    <th><a href="https://github.com/lowlighter/metrics#%EF%B8%8F-base-content">🗃️ Header special features</a></th>
+    <th><a href="https://github.com/lowlighter/metrics#-people">🧑‍🤝‍🧑 People plugin <sup><code>🚧 @master</code></sup></a></th>
   </tr>
   <tr>
     <td>
@@ -172,11 +172,28 @@ But there's more with [plugins](https://github.com/lowlighter/metrics/tree/maste
         <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.gists.svg" alt="" width="400">
       </a>
     </td>
+    <td>
+      <a href="https://github.com/lowlighter/metrics#-people">
+        <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.people.followers.svg" alt="" width="400">
+      </a>
+      <details><summary>Followed people version</summary>
+        <a href="https://github.com/lowlighter/metrics#-habits">
+          <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.people.following.svg" alt="" width="400">
+        </a>
+      </details>
+    </td>
+  </tr>
+  <tr>
+    <th><a href="https://github.com/lowlighter/metrics#%EF%B8%8F-base-content">🗃️ Header special features</a></th>
+    <th></th>
+  </tr>
+  <tr>
     <td>
       <a href="https://github.com/lowlighter/metrics#%EF%B8%8F-base-content">
         <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.header.svg" alt="" width="400">
       </a>
     </td>
+    <td></td>
   </tr>
   <tr>
     <td colspan="2" align="center">
@@ -534,6 +551,7 @@ Used template defaults to the `classic` one.
     <th><span title="Stars">🌟</span></th>
     <th><span title="Stargazers">✨</span></th>
     <th><span title="Gists">🎫</span></th>
+    <th><span title="People">🧑‍🤝‍🧑</span></th>
   </tr>
   <tr>
     <th>Classic</th>
@@ -550,10 +568,11 @@ Used template defaults to the `classic` one.
     <td data-for="tweets">✔️</td>
     <td data-for="posts">✔️</td>
     <td data-for="habits">✔️</td>
-    <th><span title="Available on @master">✔️<sup>M</sup></span></th>
+    <td data-for="activity"><span title="Available on @master">✔️<sup>M</sup></span></td>
     <td data-for="stars">✔️</td>
     <td data-for="stargazers">✔️</td>
     <td data-for="gists">✔️</td>
+    <td data-for="people"><span title="Available on @master">✔️<sup>M</sup></span></td>
   </tr>
   <tr>
     <th>Terminal</th>
@@ -574,6 +593,7 @@ Used template defaults to the `classic` one.
     <td data-for="stars">❌</td>
     <td data-for="stargazers">❌</td>
     <td data-for="gists">✔️</td>
+    <td data-for="people">❌</td>
   </tr>
   <tr>
     <th>Repository<sup>R</sup></th>
@@ -594,6 +614,7 @@ Used template defaults to the `classic` one.
     <td data-for="stars">❌</td>
     <td data-for="stargazers">✔️</td>
     <td data-for="gists">❌</td>
+    <td data-for="people">❌</td>
   </tr>
 </table>
 
@@ -1381,6 +1402,41 @@ Add the following to your workflow :
 
 </details>
 
+### 🧑‍🤝‍🧑 People
+
+    🚧 This plugin is available as pre-release on @master branch (unstable)
+
+The *people* plugin displays your followers and followed users' avatars.
+
+![People plugin](https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.people.svg)
+
+<details>
+<summary>💬 About</summary>
+
+It will consume an additional GitHub request per group of 100 users fetched.
+
+Add the following to your workflow :
+```yaml
+- uses: lowlighter/metrics@master
+  with:
+    # ... other options
+    plugin_people: yes
+    plugin_people_types: followers, following
+    plugin_people_limit: 28
+    plugin_people_size: 28 # Size in pixels of displayed avatars
+```
+
+It is possible to use [identicons](https://github.blog/2013-08-14-identicons/) instead of their avatar for privacy purposes.
+
+```yaml
+- uses: lowlighter/metrics@master
+  with:
+    # ... other options
+    plugin_people_identicons: yes
+```
+
+</details>
+
 ### 🔧 Other options
 
 A few additional options are available.

action.yml

@@ -377,7 +377,7 @@ inputs:
     description: Number of activity events to display
     default: 5
 
-  # Disacard older events
+  # Discard older events
   # Use 0 to display activity whatever the date
   plugin_activity_days:
     description: Maximum activity event age
@@ -400,6 +400,35 @@ inputs:
     description: Events to display
     default: all
 
+  # Display followed and following users
+  plugin_people:
+    description: Display
+    default: no
+
+  # Limit the number of users displayed
+  plugin_people_limit:
+    description: Number of users to display per categorie
+    default: 28
+
+  # Configure image size of users' avatar
+  plugin_people_size:
+    description: Size of users' avatars
+    default: 28
+
+  # List of users categories to display (comma separated)
+  # Supported values are:
+  # - "followers"
+  # - "following"
+  plugin_people_types:
+    description: Categories to display
+    default: followers, following
+
+  # Display GitHub identicons instead of users' real avatar
+  # Mostly for privacy purposes
+  plugin_people_identicons:
+    description: Use identicons instead of real avatars
+    default: no
+
   # ====================================================================================
   # Options below are mostly used for testing
 
@@ -497,7 +526,7 @@ runs:
           set -e
           echo "Is released version: $METRICS_IS_RELEASED"
           # Rebuild image for unreleased version
-          if [[ $METRICS_IS_RELEASED ]]; then
+          if [[ "$METRICS_IS_RELEASED" -gt "0" ]]; then
             echo "Using released version $METRICS_TAG, will pull docker image from GitHub registry"
             METRICS_IMAGE=ghcr.io/lowlighter/metrics:$METRICS_TAG
           # Use registry for released version

settings.example.json

@@ -67,6 +67,9 @@
     },
     "activity":{                  "//":"Activity plugin",
       "enabled":false,            "//":"Enable or disable recent activity display"
+    },
+    "people":{                    "//":"People plugin",
+      "enabled":false,            "//":"Enable or disable people display"
     }
   }
 }

source/app/action/index.mjs

@@ -142,6 +142,7 @@
           stars:{enabled:input.bool("plugin_stars")},
           stargazers:{enabled:input.bool("plugin_stargazers")},
           activity:{enabled:input.bool("plugin_activity")},
+          people:{enabled:input.bool("plugin_people")},
         }
         let q = Object.fromEntries(Object.entries(plugins).filter(([key, plugin]) => plugin.enabled).map(([key]) => [key, true]))
         info("Plugins enabled", Object.entries(plugins).filter(([key, plugin]) => plugin.enabled).map(([key]) => key))
@@ -223,6 +224,15 @@
             for (const option of ["filter"])
               info(`Activity ${option}`, q[`activity.${option}`] = input.array(`plugin_activity_${option}`))
           }
+        //People
+          if (plugins.people.enabled) {
+            for (const option of ["limit", "size"])
+              info(`People ${option}`, q[`people.${option}`] = input.number(`plugin_people_${option}`))
+            for (const option of ["types"])
+              info(`People ${option}`, q[`people.${option}`] = input.array(`plugin_people_${option}`))
+            for (const option of ["identicons"])
+              info(`People ${option}`, q[`people.${option}`] = input.bool(`plugin_people_${option}`))
+          }
 
       //Repositories to use
         const repositories = input.number("repositories")

source/app/metrics.mjs

@@ -90,7 +90,7 @@
         //Additional SVG transformations
           if (/svg/.test(mime)) {
             //Optimize rendering
-              if ((conf.optimize)&&(!q.raw)) {
+              if ((conf.settings?.optimize)&&(!q.raw)) {
                 console.debug(`metrics/compute/${login} > optimize`)
                 const svgo = new SVGO({full:true, plugins:[{cleanupAttrs:true}, {inlineStyles:false}]})
                 const {data:optimized} = await svgo.optimize(rendered)

source/app/mocks.mjs

@@ -316,6 +316,30 @@
                   }
                 })
               }
+            //People query
+              if (/^query People /.test(query)) {
+                console.debug(`metrics/compute/mocks > mocking graphql api result > People`)
+                const type = query.match(/(?<type>followers|following)[(]/)?.groups?.type ?? "(unknown type)"
+                return /after: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/m.test(query) ? ({
+                  user:{
+                    [type]:{
+                      edges:[],
+                    }
+                  }
+                }) : ({
+                  user:{
+                    [type]:{
+                      edges:new Array(Math.ceil(20+80*Math.random())).fill(null).map(() => ({
+                        cursor:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+                        node:{
+                          login:"user",
+                          avatarUrl:"https://github.com/identicons/user.png",
+                        }
+                      }))
+                    }
+                  }
+                })
+              }
             //Unmocked call
               return target(...args)
           }

source/plugins/people/index.mjs

@@ -0,0 +1,53 @@
+//Setup
+  export default async function ({login, graphql, q, queries, imports}, {enabled = false} = {}) {
+    //Plugin execution
+      try {
+        //Check if plugin is enabled and requirements are met
+          if ((!enabled)||(!q.people))
+            return null
+
+        //Parameters override
+          let {"people.limit":limit = 28, "people.types":types = "followers, following", "people.size":size = 28, "people.identicons":identicons = false} = q
+          //Limit
+            limit = Math.max(1, limit)
+          //Repositories projects
+            types = decodeURIComponent(types ?? "").split(",").map(type => type.trim()).filter(type => ["followers", "following"].includes(type)) ?? []
+
+        //Retrieve followers from graphql api
+          console.debug(`metrics/compute/${login}/plugins > people > querying api`)
+          const result = {followers:[], following:[]}
+          for (const type of types) {
+            //Iterate through people
+              console.debug(`metrics/compute/${login}/plugins > people > retrieving ${type}`)
+              let cursor = null
+              let pushed = 0
+              do {
+                console.debug(`metrics/compute/${login}/plugins > people > retrieving ${type} after ${cursor}`)
+                const {user:{[type]:{edges}}} = await graphql(queries.people({login, type, size, after:cursor ? `after: "${cursor}"` : ""}))
+                cursor = edges?.[edges?.length-1]?.cursor
+                result[type].push(...edges.map(({node}) => node))
+                pushed = edges.length
+              } while ((pushed)&&(cursor))
+            //Limit people
+              if (limit > 0) {
+                console.debug(`metrics/compute/${login}/plugins > people > keeping only ${limit} ${type}`)
+                result[type].splice(limit)
+              }
+            //Hide real avator with identicons if enabled
+              if (identicons) {
+                console.debug(`metrics/compute/${login}/plugins > people > using identicons`)
+                result[type].map(user => user.avatarUrl = `https://github.com/identicons/${user.login}.png`)
+              }
+            //Convert avatars to base64
+              console.debug(`metrics/compute/${login}/plugins > people > loading avatars`)
+              await Promise.all(result[type].map(async user => user.avatar = await imports.imgb64(user.avatarUrl)))
+          }
+
+        //Results
+          return {types, size, ...result}
+      }
+    //Handle errors
+      catch (error) {
+        throw {error:{message:"An error occured", instance:error}}
+      }
+  }

source/plugins/projects/index.mjs

@@ -8,7 +8,7 @@
         //Parameters override
           let {"projects.limit":limit = 4, "projects.repositories":repositories = ""} = q
           //Repositories projects
-            repositories = repositories?.split(",").map(repository => repository.trim()).filter(repository => /[-\w]+[/][-\w]+[/]projects[/]\d+/.test(repository)) ?? []
+            repositories = decodeURIComponent(repositories ?? "").split(",").map(repository => repository.trim()).filter(repository => /[-\w]+[/][-\w]+[/]projects[/]\d+/.test(repository)) ?? []
           //Limit
             limit = Math.max(repositories.length, Math.min(100, Number(limit)))
         //Retrieve user owned projects from graphql api

source/queries/people.graphql

@@ -0,0 +1,14 @@
+query People {
+  user(login: "$login") {
+    login
+    $type($after first: 100) {
+      edges {
+        cursor
+        node {
+          login
+          avatarUrl(size: $size)
+        }
+      }
+    }
+  }
+}

source/templates/classic/image.svg

@@ -895,6 +895,66 @@
         </section>
       <% } %>
 
+      <% if (plugins.people) { %>
+        <% if (plugins.people.error) { %>
+          <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="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path></svg>
+
+            </h2>
+            <div class="row">
+              <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.people.error.message %>
+                </div>
+              </section>
+            </div>
+          </section>
+        <% } else { %>
+          <% if (plugins.people.types?.includes("followers")) { %>
+            <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="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path></svg>
+                <%= user.followers.totalCount %> follower<%= s(user.followers.totalCount) %>
+              </h2>
+              <div class="row">
+                <section class="people">
+                  <% if (plugins.people.error) { %>
+                    <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.people.error.message %>
+                    </div>
+                  <% } else { %>
+                    <% for (const user of plugins.people.followers) { %><img class="avatar" src="data:image/png;base64,<%= user.avatar %>" width="<%= plugins.people.size %>" height="<%= plugins.people.size %>" alt=""/><% } %>
+                  <% } %>
+                </section>
+              </div>
+            </section>
+          <% } %>
+          <% if (plugins.people.types?.includes("following")) { %>
+            <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="M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"></path></svg>
+                <%= user.following.totalCount %> followed
+              </h2>
+              <div class="row">
+                <section class="people">
+                  <% if (plugins.people.error) { %>
+                    <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.people.error.message %>
+                    </div>
+                  <% } else { %>
+                    <% for (const user of plugins.people.following) { %><img class="avatar" src="data:image/png;base64,<%= user.avatar %>" width="<%= plugins.people.size %>" height="<%= plugins.people.size %>" alt=""/><% } %>
+                  <% } %>
+                </section>
+              </div>
+            </section>
+          <% } %>
+        <% } %>
+      <% } %>
+
       <% if (plugins.activity) { %>
         <section>
           <h2 class="field">

source/templates/classic/style.css

@@ -85,7 +85,6 @@
 
 /* User avatar */
   .avatar {
-    background-color: #000000;
     border-radius: 50%;
     margin: 0 6px;
   }
@@ -503,6 +502,15 @@
     -webkit-box-orient: vertical;
   }
 
+/* People */
+  .people {
+    padding: 0 10px;
+  }
+
+  .people .avatar {
+    margin: 0 2px;
+  }
+
 /* Fade animation */
   .af {
     opacity: 0;

tests/metrics.test.js

@@ -255,6 +255,21 @@
     ["Gists plugin (default)", {
       plugin_gists:true,
     }, {skip:["terminal", "repository"]}],
+    ["People plugin (default)", {
+      plugin_people:true,
+    }, {skip:["terminal", "repository"]}],
+    ["People plugin (followers)", {
+      plugin_people:true,
+      plugin_people_types:"followers",
+    }, {skip:["terminal", "repository"]}],
+    ["People plugin (following)", {
+      plugin_people:true,
+      plugin_people_types:"following",
+    }, {skip:["terminal", "repository"]}],
+    ["People plugin (identicons)", {
+      plugin_people:true,
+      plugin_people_identicons:true,
+    }, {skip:["terminal", "repository"]}],
   ]
 
 //Tests run