From dd357159020f653ef53e6cb81b6e41752d64231e Mon Sep 17 00:00:00 2001
From: lowlighter <22963968+lowlighter@users.noreply.github.com>
Date: Tue, 18 Jan 2022 13:10:14 -0500
Subject: [PATCH] docs: community plugins examples

---
 .../partials/templated/plugins.community.md   | 29 +++++++++++--------
 source/plugins/community/README.md            | 26 +++++++++++++----
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/.github/readme/partials/templated/plugins.community.md b/.github/readme/partials/templated/plugins.community.md
index a609bc0c..03b76b5a 100644
--- a/.github/readme/partials/templated/plugins.community.md
+++ b/.github/readme/partials/templated/plugins.community.md
@@ -1,18 +1,24 @@
 <table>
   <tr><th colspan="2"><h3>🎲 Community plugins</h3></th></tr>
   <tr><td colspan="2" align="center">Additional plugins maintained by community for even more features!</td></tr>
-  <tr>
-    <td align="center">
-      <% for (const [plugin, {name, category}] of Object.entries(plugins).filter(([key, value], index) => (index%2 === 0)&&(value)&&(value.category === "community")).sort(([an, a], [bn, b]) => a.category === b.category ? an.localeCompare(bn) : 0)) { %><%# -%>
-      <a href="/source/plugins/community/<%= plugin %>/README.md"><%- name %> <sub><code><%= plugin %></code></sub></a><br><% } %>
-      <img width="900" height="1" alt="">
-    </td>
-    <td align="center">
-      <% for (const [plugin, {name, category}] of Object.entries(plugins).filter(([key, value], index) => (index%2 === 1)&&(value)&&(value.category === "community")).sort(([an, a], [bn, b]) => a.category === b.category ? an.localeCompare(bn) : 0)) { %><%# -%>
-      <a href="/source/plugins/community/<%= plugin %>/README.md"><%- name %> <sub><code><%= plugin %></code></sub></a><br><% } %>
-      <img width="900" height="1" alt="">
-    </td>
+<% {
+  let cell = 0
+  const elements = Object.entries(plugins).filter(([key, value]) => (value)&&(value.category === "community"))
+  if (elements.length%2)
+    elements.push(["", {readme:{demo:`<td align="center"><img width="900" height="1" alt=""></td>`}}])
+  for (let i = 0; i < elements.length; i+=2) {
+    const cells = [["even", elements[i]], ["odd", elements[i+1]]]
+    for (const [cell, [plugin, {name, readme}]] of cells) {
+      if (cell === "even") { %>  <tr><% } %>
+    <th><% if (plugin) { %><a href="source/plugins/community/<%= plugin %>/README.md"><%= name -%></a><% } %></th><%
+    if (cell === "odd") { %>
   </tr>
+<% }}
+    for (const [cell, [plugin, {name, readme}]] of cells) {
+      if (cell === "even") { %>  <tr><% } %>
+<%- readme.demo.replace(/<img src=/g, `<img alt="" width="400" src=`) %><%
+      if (cell === "odd") { %>
+  </tr><% }}}} %>
 </table>
 
 ## 📪 Creating community plugins
@@ -87,7 +93,6 @@ inputs:
     description: Enable {name} plugin
     type: boolean
     default: no
-
 ```
 
 > 💡 It is important to correctly define `metadata.yml` because *metrics* will use its content for various usage
diff --git a/source/plugins/community/README.md b/source/plugins/community/README.md
index e11503af..879c2a62 100644
--- a/source/plugins/community/README.md
+++ b/source/plugins/community/README.md
@@ -2,12 +2,29 @@
   <tr><th colspan="2"><h3>🎲 Community plugins</h3></th></tr>
   <tr><td colspan="2" align="center">Additional plugins maintained by community for even more features!</td></tr>
   <tr>
-    <td align="center">
-            <a href="/source/plugins/community/nightscout/README.md">💉 Nightscout <sub><code>nightscout</code></sub></a><br>      <a href="/source/plugins/community/screenshot/README.md">📸 Website screenshot <sub><code>screenshot</code></sub></a><br>
+    <th><a href="source/plugins/community/nightscout/README.md">💉 Nightscout</a></th>
+    <th><a href="source/plugins/community/poopmap/README.md">💩 PoopMap plugin</a></th>
+  </tr>
+  <tr>
+    <td  align="center">
+      <img alt="" width="400" src="https://github.com/legoandmars/legoandmars/blob/master/metrics.plugin.nightscout.svg" alt=""></img>
       <img width="900" height="1" alt="">
     </td>
-    <td align="center">
-            <a href="/source/plugins/community/poopmap/README.md">💩 PoopMap plugin <sub><code>poopmap</code></sub></a><br>      <a href="/source/plugins/community/stock/README.md">💹 Stock prices <sub><code>stock</code></sub></a><br>
+    <td  align="center">
+      <img alt="" width="400" src="https://github.com/matievisthekat/matievisthekat/blob/master/metrics.plugin.poopmap.svg" alt=""></img>
+      <img width="900" height="1" alt="">
+    </td>
+  </tr>  <tr>
+    <th><a href="source/plugins/community/screenshot/README.md">📸 Website screenshot</a></th>
+    <th><a href="source/plugins/community/stock/README.md">💹 Stock prices</a></th>
+  </tr>
+  <tr>
+    <td  align="center">
+      <img alt="" width="400" src="https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.screenshot.svg" alt=""></img>
+      <img width="900" height="1" alt="">
+    </td>
+    <td  align="center">
+      <img alt="" width="400" src="https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.stock.svg" alt=""></img>
       <img width="900" height="1" alt="">
     </td>
   </tr>
@@ -85,7 +102,6 @@ inputs:
     description: Enable {name} plugin
     type: boolean
     default: no
-
 ```
 
 > 💡 It is important to correctly define `metadata.yml` because *metrics* will use its content for various usage