Improve topics plugin support

source/app/metrics/index.mjs

@@ -26,7 +26,7 @@
           const pending = []
           const {queries} = conf
           const data = {animated:true, base:{}, config:{}, errors:[], plugins:{}, computed:{}}
-          const imports = {plugins:Plugins, templates:Templates, metadata:conf.metadata, ...utils, ...(convert === "markdown" ? {imgb64:url => url} : null)}
+          const imports = {plugins:Plugins, templates:Templates, metadata:conf.metadata, ...utils, ...(convert === "markdown" ? {imgb64(url, options) { return options?.force ? utils.imgb64(...arguments) : url }} : null)}
           const experimental = new Set(decodeURIComponent(q["experimental.features"] ?? "").split(" ").map(x => x.trim().toLocaleLowerCase()).filter(x => x))
           if (conf.settings["debug.headless"])
             imports.puppeteer.headless = false

source/plugins/topics/index.mjs

@@ -64,6 +64,7 @@
             if (topic.icon) {
               console.debug(`metrics/compute/${login}/plugins > topics > processing ${topic.name}`)
               topic.icon = await imports.imgb64(topic.icon)
+              topic.icon24 = await imports.imgb64(topic.icon, {force:true, width:24, height:24})
             }
             //Escape HTML description
               topic.description = imports.htmlescape(topic.description)

source/templates/markdown/example.md

@@ -2,7 +2,7 @@
 
 This is a markdown template example which explain the basic usage of this template.
 
-See [rendering of this file here](https://github.com/lowlighter/lowlighter/blob/master/metrics.markdown.full.md).
+See [rendering of this file here](https://github.com/lowlighter/lowlighter/blob/master/metrics.markdown.full.md) and [original template source here](https://github.com/lowlighter/metrics/blob/master/source/templates/markdown/example.md).
 
 ## 🈂️ Templating syntax:
 
@@ -24,12 +24,22 @@ Most of plugins from SVG templates can be reused directly by including image sou
 
 See [compatibility matrix](https://github.com/lowlighter/metrics#-templateplugin-compatibily-matrix) for more informations.
 
+___
+
 <%- await include(`partials/activity.ejs`) %>
 
+___
+
 <%- await include(`partials/posts.ejs`) %>
 
+___
+
 <%- await include(`partials/rss.ejs`) %>
 
+___
+
 <%- await include(`partials/tweets.ejs`) %>
 
+___
+
 <%- await include(`partials/topics.ejs`) %>

source/templates/markdown/partials/topics.ejs

@@ -1,11 +1,14 @@
 <%_ if (plugins.topics) { _%>
-**[📌 Starred topics](https://github.com/<%= user.login %>?tab=stars)**
+**[📌 <%= {starred:"Starred topics", mastered:"Mastered technologies and topics"}[plugins.topics.mode] %>](https://github.com/<%= user.login %>?tab=stars)**
+
   <%_ if (plugins.topics.error) { _%>
 <%= plugins.topics.error.message _%>
   <%_ } else if (plugins.topics.list.length) { _%>
-    <%_ for (const {name, icon} of plugins.topics.list) { _%>
-* <img src="<%= icon %>" width="24" height="24" alt=""> [<%= name %>](https://github.com/topics/<%= name.toLocaleLowerCase().replace(/ /g, "-") %>)
+    <%_ for (const {name, icon24} of plugins.topics.list.slice(0, plugins.topics.list.length-1)) { _%>
+[![](https://img.shields.io/static/v1?style=flat&label=&message=<%= encodeURIComponent(name) %>&color=222&logo=<%= icon24 %>)](https://github.com/topics/<%= name.toLocaleLowerCase().replace(/ /g, "-") %>)
     <%_ } _%>
+
+[<%= plugins.topics.list[plugins.topics.list.length-1].name %>](https://github.com/<%= user.login %>?tab=stars)
   <%_ } else { _%>
 No starred topics
   <%_ } _%>