Fix svg height, add conversion options and options to use differents data from GitHub account (#35)

* Display all features on web instance but disable them when they're not enabled

* Resize dynamically SVG output and add support to convert images to jpeg/png

* Disable animations when computing height

* Add option to disable animations

* Add options to specify different data from used GitHub account

* Update tests

source/templates/classic/image.svg

@@ -1,22 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="480" height="<%= 12
-  + (!!base.header)*80 + (user.isHireable)*16
-  + (!!base.metadata)*38
-  + ((!!base.activity)||(!!base.community))*128
-  + (!!base.repositories)*108
-  + ((!!base.repositories)*((!!plugins.traffic)||(!!plugins.lines)))*16
-  + (!!plugins.followup)*68
-  + (!!plugins.pagespeed)*126 + (plugins.pagespeed?.detailed ?? 0)*6*20 + (!!plugins.pagespeed?.screenshot)*330
-  + (!!plugins.habits)*28 + (!!plugins.habits?.facts)*58 + (!!plugins.habits?.charts)*226
-  + (!!plugins.languages)*96
-  + (!!plugins.music)*64 + (plugins.music?.tracks?.length ? 14+Math.max(0, plugins.music.tracks.length-1)*36 : 0)
-  + (!!plugins.posts)*64 + (plugins.posts?.list?.length ?? 0)*40
-  + (!!plugins.isocalendar)*192 + (plugins.isocalendar?.duration === 'full-year')*100
-  + (!!plugins.gists)*68
-  + (!!plugins.topics)*160
-  + (!!plugins.projects)*22 + (plugins.projects?.list?.length ?? 0)*60 + (!!plugins.projects?.error)*22
-  + (!!plugins.tweets)*64 + (plugins.tweets?.list?.length ?? 0)*90
-  + Math.max(0, (((!!base.metadata)+(!!base.header)+((!!base.activity)||(!!base.community))+(!!base.repositories)+((!!plugins.habits))+(!!plugins.pagespeed)+(!!plugins.languages)+(!!plugins.music)+(!!plugins.posts)+(!!plugins.isocalendar)+(!!plugins.gists)+(!!plugins.topics)+(!!plugins.projects))-1))*4
-%>">
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="99999" class="<%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%= fonts %></style></defs>
 
@@ -802,6 +784,7 @@
         </footer>
       <% } %>
 
+      <div id="metrics-end"></div>
     </div>
   </foreignObject>
 </svg>

source/templates/classic/style.css

@@ -421,4 +421,18 @@
     --color-calendar-graph-day-L3-border: rgba(27,31,35,0.06);
     --color-calendar-graph-day-L2-border: rgba(27,31,35,0.06);
     --color-calendar-graph-day-L1-border: rgba(27,31,35,0.06);
+  }
+
+/* End delimiter */
+  #metrics-end {
+    width: 100%;
+  }
+
+  .no-animations * {
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+    animation-delay: -0.0001s !important;
+    animation-duration: 0s !important;
+    animation-play-state: paused !important;
+    caret-color: transparent !important;
   }