Version 2.2 (new additions)

- Smarter placeholders
- Merged placeholders with real templates to avoid maintening duplicates
- Moved style/js away from index.html and refactor
- Svg size is now computed again from templates
- Base metrics is now contained in special plugin "base", which can be disabled  part by part if you just want to include a plugin instead
- Reformatted a bit terminal template
- Test now look templates directory

src/templates/terminal/image.svg

@@ -1,30 +1,48 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="<%= computed.svg.width %>" height="<%= computed.svg.height %>">
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="<%= 48
+  + (!!base.header)*(16*5)
+  + (!!base.metadata)*(16*9)
+  + (!!base.activity)*(16*10)
+  + (!!base.community)*(16*9)
+  + (!!base.repositories)*(16*13)
+  + (!!computed.plugins.traffic)*(16*1)
+  + (!!computed.plugins.followup)*(16*6)
+  + (!!computed.plugins.lines)*(16*3)
+  + (!!computed.plugins.languages)*(16*12)
+  + (!!computed.plugins.pagespeed)*(16*10)
+%>">
+  <%
+    meta.$ = `<span class="ps1-path">${user.login}@metrics</span>:<span class="ps1-location">~</span>${computed.token.scopes.includes("repo") ? "#" : "$"}`
+    meta.animations = !meta.placeholder ? {stdin:.16, stdout:.28, length:(2+Object.keys(base).length+Object.keys(computed.plugins).length)} : {stdin:0, stdout:0, length:0}
+  %>
+
   <style>
     <%= style %>
       .stdin, .stdout {
-        animation-duration: .2s;
+        animation-duration: <%= meta.animations.stdin %>s;
       }
       .stdout {
-        animation-duration: .2s;
-      }
-    <% for (let i = 0; i < 12; i++) { %>
-      .stdin:nth-of-type(<%= i+1 %>) {
-        animation-delay: <%= i*.2 %>s;
-      }
-      .stdout:nth-of-type(<%= i+2 %>) {
-        animation-delay: <%= (i+1)*.2 %>s;
-      }
-    <% } %>
-      footer {
-        animation-delay: <%= 12*.2 %>s;
+        animation-duration: <%= meta.animations.stdout %>s;
       }
+      <% for (let i = 0, d = 0; i < meta.animations.length; i++, d+=meta.animations.stdin+meta.animations.stdout) { %>
+        .stdin:nth-of-type(<%= i+1 %>) {
+          animation-delay: <%= d %>s;
+        }
+        .stdout:nth-of-type(<%= i+2 %>) {
+          animation-delay: <%= d+meta.animations.stdin %>s;
+        }
+        <% if (i === meta.animations.length-1) { %>
+          footer {
+            animation-delay: <%= d %>s;
+          }
+        <% } %>
+      <% } %>
   </style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
 
       <div class="header">
-        <span class="title">GitHub metrics</span>
+        <span class="title">GitHub metrics v<%= meta.version %></span>
         <div class="buttons">
           <div class="button">─</div>
           <div class="button">□</div>
@@ -32,40 +50,51 @@
         </div>
       </div>
 
-      <pre><span class="banner">GitHub metrics generator <%= meta.version %>
+<pre><div style="margin-top:-16px"></div><%# -%>
+<% if (base.metadata) { %>
+<span class="banner"><%# -%>
+GitHub metrics generator <%= meta.version %>
 These generated metrics comes with ABSOLUTELY NO WARRANTY,
 to the extent permitted by applicable law.
 
 Last generated: <%= new Date().toGMTString() %>
-</span>
-<div class="stdin"><%- meta.$ %> whoami</div><!--
---><div class="stdout"><!--
---><b><%= user.name || user.login %></b> registered=<%= computed.registration %>, uid=<%= `${user.databaseId}`.substr(-4) %>, gid=<%= user.organizations.totalCount %>, followers=<%= user.followers.totalCount %>
+</span><% } -%>
+<%# ============================================================= -%>
+<% if (base.header) { %>
+<div class="stdin"><%- meta.$ %> whoami</div><%# -%>
+<div class="stdout"><%# -%>
+<b><%= user.name || user.login %></b> registered=<%= computed.registration.match(/^.+? [ym]/)[0].replace(/ /g, "") %>, uid=<%= `${user.databaseId}`.substr(-4) %>, gid=<%= user.organizations.totalCount %>, followers=<%= user.followers.totalCount %>
   contributed to <%= user.repositoriesContributedTo.totalCount %> repositor<%= s(user.repositoriesContributedTo.totalCount, "y") %> <b><% for (const [x, {color}] of Object.entries(computed.calendar)) { -%><span style="color:<%= color %>">#</span><% } %></b>
-</div>
-<div class="stdin"><%- meta.$ %> git status</div><!--
---><div class="stdout"><b>Recent activity</b><!--
---><b><%= `${computed.commits}`.padStart(5) %></b> commit<%= s(computed.commits) %>
+</div><% } -%>
+<%# ============================================================= -%>
+<% if ((base.activity)||(base.community)) { %>
+<div class="stdin"><%- meta.$ %> git status</div><%# -%>
+<div class="stdout"><%# -%>
+<% if (base.activity) { -%>
+<b>Recent activity</b>
+  <b><%= `${computed.commits}`.padStart(5) %></b> commit<%= s(computed.commits) %>
   <b><%= `${user.contributionsCollection.totalPullRequestReviewContributions}`.padStart(5) %></b> pull request<%= s(user.contributionsCollection.totalPullRequestReviewContributions) %> reviewed
   <b><%= `${user.contributionsCollection.totalPullRequestContributions}`.padStart(5) %></b> pull request<%= s(user.contributionsCollection.totalPullRequestContributions) %> opened
   <b><%= `${user.contributionsCollection.totalIssueContributions}`.padStart(5) %></b> issue<%= s(user.contributionsCollection.totalIssueContributions) %> opened
   <b><%= `${user.issueComments.totalCount}`.padStart(5) %></b> issue comment<%= s(user.issueComments.totalCount) %>
+<% } -%>
+<% if ((base.activity)&&(base.community)) { -%>
 
+<% } -%>
+<% if (base.community) { -%>
 <b>Tracked activity</b>
   <b><%= `${user.following.totalCount}`.padStart(5) %></b> user<%= s(user.followers.totalCount) %> followed
   <b><%= `${computed.sponsorships}`.padStart(5) %></b> repositor<%= s(computed.sponsorships, "y") %> sponsored
   <b><%= `${user.starredRepositories.totalCount}`.padStart(5) %></b> repositor<%= s(user.starredRepositories.totalCount, "y") %> starred
   <b><%= `${user.watching.totalCount}`.padStart(5) %></b> repositor<%= s(user.watching.totalCount, "y") %> watched
-<% if (computed.plugins.lines) { -%><% if (computed.plugins.lines.error) { -%>
-
-<span class="diff error">@@ <%= computed.plugins.lines.error %> @@</span><% } else { -%>
-
-<span class="diff">@@ -<%= computed.plugins.lines.deleted %> +<%= computed.plugins.lines.added %> @@</span>
-<% }} -%></div>
-<div class="stdin"><%- meta.$ %> ls -lh github/repositories</div><!--
---><div class="stdout"><!--
--->Total <%= user.repositories.totalCount %> repositor<%= s(user.repositories.totalCount, "y") %>
-<% if (computed.plugins.traffic) { -%><% if (computed.plugins.traffic.error) { -%>
+<% } -%>
+</div><% } -%>
+<%# ============================================================= -%>
+<% if (base.repositories) { %>
+<div class="stdin"><%- meta.$ %> ls -lh github/repositories</div><%# -%>
+<div class="stdout"><%# -%>
+Total <%= user.repositories.totalCount %> repositor<%= s(user.repositories.totalCount, "y") %>
+<% if (computed.plugins.traffic) { if (computed.plugins.traffic.error) { -%>
 ----  <b>     </b>  views <span class="error">(<%= computed.plugins.traffic.error %>)</span>
 <% } else { -%>
 -r--  <b><%= `${computed.plugins.traffic.views.count}`.padStart(5) %></b>  views
@@ -75,7 +104,7 @@ Last generated: <%= new Date().toGMTString() %>
 -r--  <b><%= `${computed.repositories.watchers}`.padStart(5) %></b>  watcher<%= s(computed.repositories.watchers) %>
 dr-x  <b><%= `${user.packages.totalCount}`.padStart(5) %></b>  package<%= s(user.packages.totalCount) %>
 dr-x  <b><%= `${user.gists.totalCount}`.padStart(5) %></b>  gist<%= s(user.gists.totalCount) %>
-<% if (computed.plugins.followup) { -%><% if (computed.plugins.followup.error) { -%>
+<% if (computed.plugins.followup) { if (computed.plugins.followup.error) { -%>
 d---  <b>     </b>  ISSUES <span class="error">(<%= computed.plugins.followup.error %>)</span>
 d---  <b>     </b>  PULL_REQUESTS <span class="error">(<%= computed.plugins.followup.error %>)</span>
 <% } else { -%>
@@ -90,33 +119,39 @@ dr-x  <b><%= `${computed.plugins.followup.issues.count}`.padStart(5) %></b>  PUL
 dr-x         LICENSE
 -r--         └── <%= computed.licenses.favorite %>
 <% } -%>
-</div><% if (computed.plugins.languages) { -%><% if (computed.plugins.languages.error) { -%>
-
-<div class="stdin"><%- meta.$ %> locale</div><!--
---><div class="stdout"><!--
---><span class="error"><%= computed.plugins.languages.error %></span>
-<% } else { -%>
-
-<div class="stdin"><%- meta.$ %> locale</div><!--
---><div class="stdout"><!--
---><% for (const {name, value} of computed.plugins.languages.favorites) { -%>
+<% if (computed.plugins.lines) { if (computed.plugins.lines.error) { %>
+<span class="diff error">@@ <%= computed.plugins.lines.error %> @@</span><% } else { %>
+<span class="diff">@@ -<%= computed.plugins.lines.deleted %> +<%= computed.plugins.lines.added %> @@</span>
+<% }} -%>
+</div><% } -%>
+<%# ============================================================= -%>
+<% if (computed.plugins.languages) { %>
+<div class="stdin"><%- meta.$ %> locale</div><%# -%>
+<div class="stdout"><%# -%>
+<% if (computed.plugins.languages.error) { -%>
+<span class="error"><%= computed.plugins.languages.error %></span><%# -%>
+<% } else { for (const {name, value} of computed.plugins.languages.favorites) { -%>
 <b><%= name.toLocaleUpperCase().padEnd(12) %></b> [<%= "#".repeat(Math.ceil(100*value/5)).padEnd(20) %>] <%= (100*value).toFixed(2).padEnd(5) %>%
-<% }} -%></div><% } -%><% if (computed.plugins.pagespeed) { -%><% if (computed.plugins.pagespeed.error) { -%>
-
-<div class="stdin"><%- meta.$ %> curl -I <%= user.websiteUrl %></div><!--
---><div class="stdout"><!--
---><span class="error"><%= computed.plugins.pagespeed.error %></span>
-<% } else { -%>
-
-<div class="stdin"><%- meta.$ %> curl -I <%= user.websiteUrl %></div><!--
---><div class="stdout"><!--
---><b>User-Agent</b>: Google PageSpeed API
+<% }} -%>
+</div><% } -%>
+<%# ============================================================= -%>
+<% if (computed.plugins.pagespeed) { %>
+<div class="stdin"><%- meta.$ %> curl -I <%= user.websiteUrl %></div><%# -%>
+<div class="stdout"><%# -%>
+<% if (computed.plugins.pagespeed.error) { -%>
+<span class="error"><%= computed.plugins.pagespeed.error %></span><% } else { -%>
+<b>User-Agent</b>: Google PageSpeed API
 <b>Location</b>: <%= user.websiteUrl %>
 <% for (const {score, title} of computed.plugins.pagespeed.scores) { -%>
-<b><%= `X-${title.replace(/ /g, "-")}` %></b>: <%= Math.round(score*100) %>%
-<% }} -%></div><% } -%>
+<b><%= `X-${title.replace(/ /g, "-")}` %></b>: <%= !Number.isNaN(score) ? Math.round(score*100) : "-" %>%
+<% }} -%>
+</div><% } -%>
+<%# ============================================================= -%>
+<% if (base.metadata) { -%>
+
+<footer>Connection reset by 127.0.0.1</footer><%# -%>
+<% } -%></pre>
 
-<footer>Connection reset by 127.0.0.1</footer></pre>
     </div>
   </foreignObject>
 </svg>