Left-align headers and use sub-headers for languages plugin #328

source/plugins/languages/README.md

@@ -8,7 +8,7 @@ The *languages* plugin displays which programming languages you use the most acr
     <details open><summary>With both total bytes size and percentage version</summary>
       <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.languages.details.svg">
     </details>
-    <details open><summary>Recently used version (based on recent activity)</summary>
+    <details><summary>Recently used version (based on recent activity)</summary>
       <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.languages.recent.svg">
     </details>
     <img width="900" height="1" alt="">

source/plugins/languages/index.mjs

@@ -9,6 +9,13 @@ export default async function({login, data, imports, q, rest, account}, {enabled
     if ((!enabled) || (!q.languages))
       return null
 
+    //Context
+    let context = {mode:"user"}
+    if (q.repo) {
+      console.debug(`metrics/compute/${login}/plugins > activity > switched to repository mode`)
+      context = {...context, mode:"repository"}
+    }
+
     //Load inputs
     let {ignored, skipped, colors, details, threshold, limit, indepth, sections} = imports.metadata.plugins.languages.inputs({data, account, q})
     threshold = (Number(threshold.replace(/%$/, "")) || 0) / 100
@@ -23,9 +30,12 @@ export default async function({login, data, imports, q, rest, account}, {enabled
     colors = Object.fromEntries(decodeURIComponent(colors).split(",").map(x => x.trim().toLocaleLowerCase()).filter(x => x).map(x => x.split(":").map(x => x.trim())))
     console.debug(`metrics/compute/${login}/plugins > languages > custom colors ${JSON.stringify(colors)}`)
 
+    //Unique languages
+    const unique = new Set(data.user.repositories.nodes.flatMap(repository => repository.languages.edges.map(({node:{name}}) => name))).size
+
     //Iterate through user's repositories and retrieve languages data
     console.debug(`metrics/compute/${login}/plugins > languages > processing ${data.user.repositories.nodes.length} repositories`)
-    const languages = {sections, details, colors:{}, total:0, stats:{}, "stats.recent":{}}
+    const languages = {unique, sections, details, colors:{}, total:0, stats:{}, "stats.recent":{}}
     for (const repository of data.user.repositories.nodes) {
       //Skip repository if asked
       if ((skipped.includes(repository.name.toLocaleLowerCase())) || (skipped.includes(`${repository.owner.login}/${repository.name}`.toLocaleLowerCase()))) {
@@ -41,7 +51,7 @@ export default async function({login, data, imports, q, rest, account}, {enabled
     }
 
     //Recently used languages
-    if ((sections.includes("recently-used"))&&(["user", "organization"].includes(account))) {
+    if ((sections.includes("recently-used"))&&(context.mode === "user")) {
       console.debug(`metrics/compute/${login}/plugins > languages > using recent analyzer`)
       languages["stats.recent"] = await recent_analyzer({login, data, imports, rest, account}, {skipped})
     }

source/templates/classic/partials/languages.ejs

@@ -1,9 +1,15 @@
-<% if (plugins.languages) { for (const section of plugins.languages.sections) { const languages = {"most-used":plugins.languages.favorites, "recently-used":plugins.languages.recent}[section] %>
+<% if (plugins.languages) { %>
-  <section class="column">
+  <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="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
-      <%= {"most-used":"Most used languages", "recently-used":"Recently used languages"}[section] %>
+      <%= plugins.languages.unique %> Language<%= s(plugins.languages.unique) %>
     </h2>
+  </section>
+  <% for (const section of plugins.languages.sections) { const languages = {"most-used":plugins.languages.favorites, "recently-used":plugins.languages.recent}[section] %>
+    <section class="column">
+      <h3 class="field">
+        <%= {"most-used":"Most used languages", "recently-used":"Recently used languages"}[section] %>
+      </h3>
       <% if (plugins.languages.error) { %>
         <section>
           <div class="field error">
@@ -18,7 +24,7 @@
           </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} of languages) { %>
-          <rect mask="url(#languages-bar)" x="<%= x*width %>" y="0" width="<%= value*width %>" height="8" fill="<%= color %>"/>
+            <rect mask="url(#languages-bar)" x="<%= x*width %>" y="0" width="<%= value*width %>" height="8" fill="<%= color ?? "#959DA5" %>"/>
           <% } %>
         </svg>
         <% if (plugins.languages.details?.length) { const rows = large ? [0, 1, 2, 3] : [0, 1] %>
@@ -28,7 +34,7 @@
                 <% for (const {name, value, color, size} 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 %>" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
+                      <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>
@@ -52,4 +58,5 @@
         <% } %>
       <% } %>
     </section>
-<% } } %>
+  <% } %>
+<% } %>

source/templates/repository/partials/languages.ejs

@@ -1,9 +1,14 @@
 <% if (plugins.languages) { %>
-  <section class="column">
+  <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="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
-      Most used languages
+      <%= plugins.languages.unique %> Language<%= s(plugins.languages.unique) %>
     </h2>
+  </section>
+  <section class="column">
+    <h3 class="field">
+      Most used languages
+    </h3>
     <% if (plugins.languages.error) { %>
       <section>
         <div class="field error">