Add new plugin stars (#36)

2021-01-02 23:41:36 +01:00
parent a010a333a1
commit 11cb6f042e
12 changed files with 281 additions and 4 deletions
--- a/README.md
+++ b/README.md
@@ -147,16 +147,20 @@ But there's more with [plugins](https://github.com/lowlighter/metrics/tree/maste
    </td>
  </tr>
  <tr>
+    <th><a href="https://github.com/lowlighter/metrics#-stars">🌟 Recently starred repositories</a></th>
    <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#-stars">
+        <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.stars.svg" alt="" width="400">
+      </a>
+    </td>
    <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">
@@ -511,6 +515,7 @@ Used template defaults to the `classic` one.
    <th><span title="Posts">✒️</span></th>
    <th><span title="Habits">💡</span></th>
    <th><span title="Gists">🎫</span></th>
+    <th><span title="Stars">🌟</span></th>
  </tr>
  <tr>
    <th>Classic</th>
@@ -528,6 +533,7 @@ Used template defaults to the `classic` one.
    <td>✔️</td>
    <td>✔️</td>
    <td>✔️</td>
+    <td><span title="Available on master">✔️<sup>M</sup></span></td>
  </tr>
  <tr>
    <th>Terminal</th>
@@ -545,6 +551,7 @@ Used template defaults to the `classic` one.
    <td>❌</td>
    <td>❌</td>
    <td>✔️</td>
+    <td>❌</td>
  </tr>
  <tr>
    <th>Repository<sup>R</sup></th>
@@ -562,6 +569,7 @@ Used template defaults to the `classic` one.
    <td>❌</td>
    <td>❌</td>
    <td>❌</td>
+    <td>❌</td>
  </tr>
 </table>

@@ -1249,6 +1257,30 @@ Add the following to your workflow :

 </details>

+### 🌟 Stars
+
+    🚧 This feature is available on @master
+
+The *stars* plugin displays your recently starred repositories.
+
+![Stars plugin](https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.stars.svg)
+
+<details>
+<summary>💬 About</summary>
+
+It will consume an additional GitHub request.
+
+Add the following to your workflow :
+```yaml
+- uses: lowlighter/metrics@latest
+  with:
+    # ... other options
+    plugin_stars: yes
+    plugin_stars_limit: 4
+```
+
+</details>
+
 ### 🔧 Other options

 A few additional options are available.
--- a/action.yml
+++ b/action.yml
@@ -347,6 +347,16 @@ inputs:
    description: Number of tweets to display
    default: 2

+  # Display recently starred repositories
+  plugin_stars:
+    description: Display recently starred repositories
+    default: no
+
+  # Number of recently starred repositories to display
+  plugin_stars_limit:
+    description: Number of recently starred repositories to display
+    default: 4
+
  # ====================================================================================
  # Options below are mostly used for testing

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "metrics",
-  "version": "3.0.0",
+  "version": "3.1.0-beta",
  "description": "An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere !",
  "main": "index.mjs",
  "scripts": {
--- a/settings.example.json
+++ b/settings.example.json
@@ -58,6 +58,9 @@
    "tweets":{                    "//":"Tweets plugin",
      "enabled":false,            "//":"Enable or disable recent tweets display",
      "token":null,               "//":"Twitter token (required when enabled)"
+    },
+    "stars":{                     "//":"Stars plugin",
+      "enabled":true,             "//":"Enable or disable recently starred repositories display"
    }
  }
 }
--- a/source/app/action/index.mjs
+++ b/source/app/action/index.mjs
@@ -139,6 +139,7 @@
          topics:{enabled:input.bool("plugin_topics")},
          projects:{enabled:input.bool("plugin_projects")},
          tweets:{enabled:input.bool("plugin_tweets")},
+          stars:{enabled:input.bool("plugin_stars")},
        }
        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))
@@ -208,6 +209,11 @@
            for (const option of ["limit"])
              info(`Tweets ${option}`, q[`tweets.${option}`] = input.number(`plugin_tweets_${option}`))
          }
+        //Stars
+          if (plugins.posts.enabled) {
+            for (const option of ["limit"])
+              info(`Stars ${option}`, q[`stars.${option}`] = input.number(`plugin_stars_${option}`))
+          }

      //Repositories to use
        const repositories = input.number("repositories")
--- a/source/app/mocks.mjs
+++ b/source/app/mocks.mjs
@@ -259,6 +259,43 @@
                  }
                })
              }
+            //Starred repositories query
+              if (/^query Starred /.test(query)) {
+                console.debug(`metrics/compute/mocks > mocking graphql api result > Starred`)
+                return ({
+                  user:{
+                    starredRepositories:{
+                      edges:[
+                        {
+                          starredAt:"2020-10-16T18:53:16Z",
+                          node:{
+                            description:"📊 An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere !",
+                            forkCount:12,
+                            isFork:false,
+                            issues:{
+                              totalCount: 12
+                            },
+                            nameWithOwner:"lowlighter/metrics",
+                            openGraphImageUrl:"https://repository-images.githubusercontent.com/293860197/7fd72080-496d-11eb-8fe0-238b38a0746a",
+                            pullRequests:{
+                              totalCount:23
+                            },
+                            stargazerCount:120,
+                            licenseInfo:{
+                              nickname:null,
+                              name:"MIT License"
+                            },
+                            primaryLanguage:{
+                              color:"#f1e05a",
+                              name:"JavaScript"
+                            }
+                          }
+                        },
+                      ]
+                    }
+                  }
+                })
+              }
            //Unmocked call
              return target(...args)
          }
--- a/source/app/web/statics/app.js
+++ b/source/app/web/statics/app.js
@@ -45,6 +45,7 @@
              topics:"Starred topics",
              projects:"Projects",
              tweets:"Latest tweets",
+              stars:"Recently starred repositories",
              "base.header":"Header",
              "base.activity":"Account activity",
              "base.community":"Community stats",
@@ -71,6 +72,7 @@
              "topics.sort":"stars",
              "topics.limit":12,
              "tweets.limit":2,
+              "stars.limit":4,
            },
          },
          templates:{
--- a/source/plugins/stars/index.mjs
+++ b/source/plugins/stars/index.mjs
@@ -0,0 +1,36 @@
+//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.stars))
+            return null
+        //Parameters override
+          let {"stars.limit":limit = 4} = q
+          //Limit
+            limit = Math.max(1, Math.min(100, Number(limit)))
+        //Retrieve user stars from graphql api
+          console.debug(`metrics/compute/${login}/plugins > stars > querying api`)
+          const {user:{starredRepositories:{edges:repositories}}} = await graphql(queries.starred({login, limit}))
+        //Format starred repositories
+          for (const edge of repositories) {
+            //Formats values
+              edge.node.stargazers = imports.format(edge.node.stargazerCount)
+              edge.node.forks = imports.format(edge.node.forkCount)
+            //Format date
+              const time = (Date.now()-new Date(edge.starredAt).getTime())/(24*60*60*1000)
+              let updated = new Date(edge.starredAt).toDateString().substring(4)
+              if (time < 1)
+                updated = `${Math.ceil(time*24)} hour${Math.ceil(time*24) >= 2 ? "s" : ""} ago`
+              else if (time < 30)
+                updated = `${Math.floor(time)} day${time >= 2 ? "s" : ""} ago`
+              edge.starred = updated
+          }
+        //Results
+          return {repositories}
+      }
+    //Handle errors
+      catch (error) {
+        throw {error:{message:"An error occured", instance:error}}
+      }
+  }
--- a/source/queries/starred.graphql
+++ b/source/queries/starred.graphql
@@ -0,0 +1,31 @@
+query Starred {
+  user(login: "$login") {
+    starredRepositories(first: $limit, orderBy: {field: STARRED_AT, direction: DESC}) {
+      edges {
+        starredAt
+        node {
+          description
+          forkCount
+          isFork
+          issues {
+            totalCount
+          }
+          nameWithOwner
+          openGraphImageUrl
+          licenseInfo {
+            nickname
+            name
+          }
+          pullRequests {
+            totalCount
+          }
+          stargazerCount
+          primaryLanguage {
+            color
+            name
+          }
+        }
+      }
+    }
+  }
+}
--- a/source/templates/classic/image.svg
+++ b/source/templates/classic/image.svg
@@ -777,6 +777,76 @@
        </section>
      <% } %>

+      <% if (plugins.stars) { %>
+        <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="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path></svg>
+            Recently starred repositories
+          </h2>
+          <div class="row">
+            <section>
+              <% if (plugins.stars.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.stars.error.message %>
+                </div>
+              <% } else { %>
+                <% for (const {starred, node:repository} of plugins.stars.repositories) { %>
+                  <div class="row fill-width">
+                    <section class="repository">
+                      <div class="field">
+                        <% if (repository.isFork) { %>
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
+                        <% } else { %>
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
+                        <% } %>
+                        <div class="name">
+                          <span><%= repository.nameWithOwner %></span>
+                          <span>starred <%= starred %></span>
+                        </div>
+                      </div>
+                      <div class="field description">
+                        <%= repository.description %>
+                      </div>
+                      <div class="field infos">
+                        <% if (repository.primaryLanguage) { %>
+                          <div class="language">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="<%= repository.primaryLanguage.color %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
+                            <%= repository.primaryLanguage.name %>
+                          </div>
+                        <% } %>
+                        <% if (repository.licenseInfo) { %>
+                          <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path></svg>
+                            <%= repository.licenseInfo.nickname ?? repository.licenseInfo.name %>
+                          </div>
+                        <% } %>
+                        <div>
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
+                          <%= repository.stargazers %>
+                        </div>
+                        <div>
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
+                          <%= repository.forks %>
+                        </div>
+                        <div>
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
+                          <%= repository.issues.totalCount %>
+                        </div>
+                        <div>
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
+                          <%= repository.pullRequests.totalCount %>
+                        </div>
+                      </div>
+                    </section>
+                  </div>
+                <% } %>
+              <% } %>
+            </section>
+          </div>
+        </section>
+      <% } %>
+
      <% if (base.metadata) { %>
        <footer>
          <span>These metrics <%= !computed.token.scopes.includes("repo") ? "does not include all" : "includes" %> private contributions<% if ((config.timezone?.name)&&(!config.timezone?.error)) { %>, timezone <%= config.timezone.name %><% } %></span>
--- a/source/templates/classic/style.css
+++ b/source/templates/classic/style.css
@@ -373,6 +373,53 @@
    margin: 0 6px;
  }

+/* Repository */
+  .repository {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 6px 0;
+  }
+
+  .repository .name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 440px;
+  }
+
+  .repository .name span:first-child {
+    color: #58a6ff;
+  }
+
+  .repository .name span:last-child {
+    color: #666666;
+    font-size: 13px;
+  }
+
+  .repository .description {
+    display: block;
+    width: 440px;
+    white-space: normal;
+  }
+
+  .repository .description, .repository .infos {
+    color: #666666;
+    margin-left: 38px;
+    font-size: 13px;
+  }
+
+  .repository .infos > div {
+    display: flex;
+    align-items: center;
+    margin-right: 16px;
+  }
+
+  .repository .infos svg {
+    margin: 0;
+    margin-right: 4px;
+  }
+
 /* Fade animation */
  .af {
    opacity: 0;
--- a/tests/metrics.test.js
+++ b/tests/metrics.test.js
@@ -239,6 +239,9 @@
    ["Gists plugin (default)", {
      plugin_gists:true,
    }, {skip:["terminal"]}],
+    ["Stars plugin (default)", {
+      plugin_stars:true,
+    }, {skip:["terminal"]}],
  ]

 //Tests run