Add support for fonts

src/templates/classic/image.svg

@@ -1,14 +1,17 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="480" height="<%= 0
-  + (!!base.header)*86
-  + (!!base.metadata)*42
-  + ((!!base.activity)||(!!base.community))*150
-  + (!!base.repositories)*100
-  + ((!!computed.plugins.traffic)||(!!computed.plugins.lines))*18
-  + (!!computed.plugins.followup)*72
-  + (!!computed.plugins.pagespeed)*128
-  + (!!computed.plugins.habits)*72
+  + (!!base.header)*80
+  + (!!base.metadata)*38
+  + ((!!base.activity)||(!!base.community))*128
+  + (!!base.repositories)*92
+  + ((!!base.repositories)*((!!computed.plugins.traffic)||(!!computed.plugins.lines)))*16
+  + (!!computed.plugins.followup)*68
+  + (!!computed.plugins.pagespeed)*126
+  + (!!computed.plugins.habits)*68
   + (!!computed.plugins.languages)*96
 %>">
+
+  <defs><style><%= fonts %></style></defs>
+
   <style>
     <%= style %>
   </style>

src/templates/classic/style.css

@@ -1,6 +1,6 @@
 /* SVG global context */
   svg {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family: 'Roboto';
     font-size: 14px;
     color: #777777;
   }

src/templates/terminal/image.svg

@@ -1,23 +1,23 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="480" height="<%= 48
-  + (!!base.header)*64
-  + (!!base.metadata)*122
-  + (!!base.activity)*146
-  + (!!base.community)*120
-  + (!!base.repositories)*188
-  + (Object.entries(base).filter(([key, value]) => value).length)*8
-  + (!!computed.plugins.traffic)*18
-  + (!!computed.plugins.followup)*112
-  + (!!computed.plugins.lines)*36
-  + ((!!computed.plugins.traffic)+(!!computed.plugins.followup)+(!!computed.plugins.lines))*4
-  + (!!computed.plugins.pagespeed)*132
-  + (!!computed.plugins.languages)*172
-  + (Object.entries(computed.plugins).filter(([key, value]) => value).length)*4
+  + (!!base.header)*62
+  + (!!base.metadata)*108
+  + (!!base.activity)*108
+  + (!!base.community)*94
+  + (!!base.repositories)*142
+  + ((!!base.repositories)*(!!computed.plugins.traffic))*18
+  + ((!!base.repositories)*(!!computed.plugins.followup))*102
+  + ((!!base.repositories)*(!!computed.plugins.lines))*34
+  + (!!computed.plugins.pagespeed)*110
+  + (!!computed.plugins.languages)*124
+  + Math.max(0, (((!!base.metadata)+(!!base.header)+((!!base.activity)||(!!base.community))+(!!base.repositories)+(!!computed.plugins.pagespeed)+(!!computed.plugins.languages))-1))*20
 %>">
   <%
     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}
   %>
 
+  <defs><style><%= fonts %></style></defs>
+
   <style>
     <%= style %>
       .stdin, .stdout {
@@ -57,8 +57,7 @@
 <% if (base.metadata) { %>
 <div class="banner"><%# -%>
 GitHub metrics generator <%= meta.version %>
-These generated metrics comes with ABSOLUTELY NO WARRANTY,
-to the extent permitted by applicable law.
+These generated metrics comes with ABSOLUTELY NO WARRANTY, to the extent permitted by applicable law.
 
 Last generated: <%= new Date().toGMTString() %>
 </div><% } -%>
@@ -66,8 +65,9 @@ Last generated: <%= new Date().toGMTString() %>
 <% 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 %>
+<b><%= user.name || user.login %></b> registered=<%= computed.registration.match(/^.+? [ym]/)[0].replace(/ /g, "") %>, uid=<%= `${user.databaseId}`.substr(-4) %>, gid=<%= user.organizations.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>
+  followed by <b><%= user.followers.totalCount %></b> user<%= s(user.followers.totalCount) %>
 </div><% } -%>
 <%# ============================================================= -%>
 <% if ((base.activity)||(base.community)) { %>
@@ -152,7 +152,7 @@ dr-x         LICENSE
 <%# ============================================================= -%>
 <% if (base.metadata) { -%>
 
-<footer>Connection reset by 127.0.0.1</footer><%# -%>
+<footer>Connection reset by <%= Math.floor(256*Math.random()) %>.<%= Math.floor(256*Math.random()) %>.<%= Math.floor(256*Math.random()) %>.<%= Math.floor(256*Math.random()) %></footer><%# -%>
 <% } -%></pre>
 
     </div>

src/templates/terminal/style.css

@@ -1,6 +1,6 @@
 /* SVG global context */
   svg {
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    font-family: 'Courier Prime';
     font-size: 14px;
     color: #777777;
   }
@@ -49,7 +49,7 @@
 /* Terminal */
   pre, .banner, .footer {
     margin: 0;
-    font-family: monospace;
+    font-family: 'Courier Prime';
     color: #DDDDDD;
     white-space: break-spaces;
   }
@@ -61,7 +61,6 @@
   }
   .banner, footer {
     opacity: .7;
-    font-family: monospace;
   }
 
 /* Prompt */