feat(plugins/starlists): add languages statistics supports (#856)

source/plugins/starlists/index.mjs

@@ -7,7 +7,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       return null
 
     //Load inputs
-    let {limit, ignored, only, "limit.repositories":_limit, "shuffle.repositories":_shuffle} = imports.metadata.plugins.starlists.inputs({data, account, q})
+    let {limit, ignored, only, "limit.repositories":_limit, languages, "limit.languages":_limit_languages, "shuffle.repositories":_shuffle} = imports.metadata.plugins.starlists.inputs({data, account, q})
     ignored = ignored.map(imports.stripemojis)
     only = only.map(imports.stripemojis)
 
@@ -40,24 +40,52 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       .slice(0, limit)
     console.debug(`metrics/compute/${login}/plugins > starlists > extracted ${lists.length} lists`)
 
-    //Fetch star list content
+    //Compute lists content
+    const colors = {}
     for (const list of lists) {
+      //Fetch star list content
       console.debug(`metrics/compute/${login}/plugins > starlists > fetching ${list.name}`)
-      await page.goto(list.link)
+      const repositories = []
-      const repositories = await page.evaluate(() => [...document.querySelectorAll("#user-list-repositories > div:not(.paginate-container)")].map(element => ({
+      for (let i = 1; i <= (languages ? 100 : 1); i++) {
-          name:element.querySelector("div:first-child")?.innerText.replace(" / ", "/") ?? "",
+        console.debug(`metrics/compute/${login}/plugins > starlists > fetching page ${i}`)
-          description:element.querySelector(".py-1")?.innerText ?? "",
+        await page.goto(`${list.link}?page=${i}`)
-          language:{
+        repositories.push(...await page.evaluate(() => [...document.querySelectorAll("#user-list-repositories > div:not(.paginate-container)")].map(element => ({
-            name:element.querySelector("[itemprop='programmingLanguage']")?.innerText ?? "",
+            name:element.querySelector("div:first-child")?.innerText.replace(" / ", "/") ?? "",
-            color:element.querySelector(".repo-language-color")?.style?.backgroundColor?.match(/\d+/g)?.map(x => Number(x).toString(16)).join("") ?? null,
+            description:element.querySelector(".py-1")?.innerText ?? "",
-          },
+            language:{
-          stargazers:Number(element.querySelector("[href$='/stargazers']")?.innerText.trim().replace(/[^\d]/g, "") ?? NaN),
+              name:element.querySelector("[itemprop='programmingLanguage']")?.innerText ?? "",
-          forks:Number(element.querySelector("[href$='/network/members']")?.innerText.trim().replace(/[^\d]/g, "") ?? NaN),
+              color:element.querySelector(".repo-language-color")?.style?.backgroundColor?.match(/\d+/g)?.map(x => Number(x).toString(16).padStart(2, "0")).join("") ?? null,
-        }))
+            },
-      )
+            stargazers:Number(element.querySelector("[href$='/stargazers']")?.innerText.trim().replace(/[^\d]/g, "") ?? NaN),
+            forks:Number(element.querySelector("[href$='/network/members']")?.innerText.trim().replace(/[^\d]/g, "") ?? NaN),
+          }))
+        ))
+        if (await page.evaluate(() => document.querySelector(".next_page.disabled"))) {
+          console.debug(`metrics/compute/${login}/plugins > starlists > reached last page`)
+          break
+        }
+      }
       list.repositories.push(...repositories)
       if (_shuffle)
         list.repositories = imports.shuffle(list.repositories)
+
+      //Compute languages statistics
+      if (languages) {
+        list.languages = {}
+        for (const {language:{name, color}} of repositories) {
+          if (name)
+            list.languages[name] = (list.languages[name] ?? 0) + 1
+          if (color)
+            colors[name] = color
+        }
+        list.languages = Object.entries(list.languages).sort((a, b) => b[1] - a[1]).slice(0, _limit_languages || Infinity)
+        const visible = list.languages.map(([_, value]) => value).reduce((a, b) => a + b, 0)
+        list.languages = list.languages.map(([name, value]) => ({name, value, color:name in colors ? `#${colors[name]}` : null, x:0, p:value/visible}))
+        for (let i = 1; i < list.languages.length; i++)
+          list.languages[i].x = (list.languages[i-1]?.x ?? 0) + (list.languages[i-1]?.value ?? 0)/visible
+      }
+
+      //Limit repositories
       list.repositories = list.repositories.slice(0, _limit)
     }
 

source/plugins/starlists/metadata.yml

@@ -28,6 +28,18 @@ inputs:
     min: 0
     max: 100
 
+  plugin_starlists_languages:
+    description: Toggle star list languages statistics
+    type: boolean
+    default: no
+
+  plugin_starlists_limit_languages:
+    description: Disply limit (languages per star list)
+    type: number
+    default: 8
+    min: 0
+    zero: disable
+
   plugin_starlists_shuffle_repositories:
     description: Shuffle data for varied outputs
     type: boolean

source/templates/classic/partials/starlists.ejs

@@ -5,14 +5,14 @@
       <%= plugins.starlists?.count ?? "" %> Star list<%= s(plugins.starlists?.count ?? 0) %>
     </h2>
     <div class="row">
-      <section class="largeable-flex-wrap">
+      <section>
         <% if (plugins.starlists.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.starlists.error.message %>
           </div>
         <% } else { %>
-          <% for (const {name, description, count, repositories} of plugins.starlists.lists) { %>
+          <% for (const {name, description, count, repositories, languages = null} of plugins.starlists.lists) { %>
             <div class="starlist">
               <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="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>
@@ -20,6 +20,39 @@
               </h2>
               <div class="count"><%= count %> repositor<%= s(count, "y") %></div>
               <div class="description"><%= description %></div>
+              <% if (languages) { const width = 420 * (1 + large), rows = large ? [0, 1, 2, 3] : [0, 1] %>
+                <div class="languages">
+                  <div class="row">
+                    <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="<%= width %>" height="8">
+                      <mask id="languages-bar">
+                        <rect x="0" y="0" width="<%= width %>" height="8" fill="white" rx="5"/>
+                      </mask>
+                      <rect mask="url(#languages-bar)" x="0" y="0" width="<%= languages.length ? 0 : width %>" height="8" fill="#d1d5da"/>
+                      <% for (const {name, value, color, x, p} of languages) { %>
+                        <rect mask="url(#languages-bar)" x="<%= x*width %>" y="0" width="<%= p*width %>" height="8" fill="<%= color ?? "#959DA5" %>"/>
+                      <% } %>
+                    </svg>
+                  </div>
+                  <div class="row">
+                    <% for (const row of rows) { %>
+                      <section>
+                        <% for (const {name, value, color} of languages.filter((_, i) => i%rows.length === row)) { %>
+                          <div class="field language details">
+                            <div class="field">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="<%= color ?? "#959DA5" %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
+                              <%= name %>
+                            </div>
+                            <small>
+                              <div><%= f.percentage(value/count) %></div>
+                              <div><%= f(value) %>★</div>
+                            </small>
+                          </div>
+                        <% } %>
+                      </section>
+                    <% } %>
+                  </div>
+                </div>
+              <% } %>
               <div class="repositories">
                 <% for (const repository of repositories) { %>
                   <div class="row fill-width largeable-width-half">

source/templates/classic/style.css

@@ -854,7 +854,8 @@
 
 /* Star lists */
   .starlist {
-    margin-left: 28px;
+    padding-left: 28px;
+    width: 460px;
   }
   .starlist > .description, .starlist > .count {
     margin-left: 32px;
@@ -876,6 +877,13 @@
   .starlist .repository .name {
     font-size: 14px;
   }
+  .starlist .languages {
+    margin-top: 6px;
+    padding-left: 13px;
+  }
+  .starlist .languages svg.bar {
+    margin-left: 18px;
+  }
 
 /* Anilist */
   .anilist {