doc(plugins/skyline): update

source/plugins/skyline/README.md

@@ -1,19 +1,31 @@
-### 🌇 GitHub Skyline 3D calendar
-
-> ⚠️ This plugin significantly increase file size, prefer using it as standalone.
-
-The *skyline* plugin lets you display your 3D commits calendar from [skyline.github.com](https://skyline.github.com/).
-
+<!--header-->
 <table>
-  <td align="center">
-    <img src="https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.skyline.svg">
-    <img width="900" height="1" alt="">
-  </td>
+  <tr><th colspan="2"><h3>🌇 GitHub Skyline 3D calendar</h3></th></tr>
+  <tr><td colspan="2" align="center"><p>This plugins lets you display your 3D commits calendar from <a href="https://skyline.github.com/">skyline.github.com</a>.</p>
+<blockquote>
+<p>⚠️ This plugin significantly increase file size, consider using it as standalone.</p>
+</blockquote>
+</td></tr>
+  <tr>
+    <th rowspan="3">Supported features<br><sub><a href="metadata.yml">→ Full specification</a></sub></th>
+    <td><a href="/source/templates/classic"><code>📗 Classic template</code></a></td>
+  </tr>
+  <tr>
+    <td><code>👤 Users</code></td>
+  </tr>
+  <tr>
+    <td><i>No tokens are required for this plugin</i></td>
+  </tr>
+  <tr>
+    <td colspan="2" align="center">
+      <img src="https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.skyline.svg" alt=""></img>
+      <img width="900" height="1" alt="">
+    </td>
+  </tr>
 </table>
+<!--/header-->
 
-This uses puppeteer to generate collect image frames, and use CSS animations to create an animated rendering (GIF images are not animated in GitHub flavored markdown rendering which is why this design choice was made).
-
-#### ➡️ Available options
+## ➡️ Available options
 
 <!--options-->
 <table>
@@ -22,7 +34,7 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   </tr>
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline</code></td>
-    <td rowspan="2"><p>Display GitHub Skyline 3D calendar</p>
+    <td rowspan="2"><p>Enable skyline plugin</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -44,7 +56,9 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   </tr>
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline_frames</code></td>
-    <td rowspan="2"><p>Number of frames</p>
+    <td rowspan="2"><p>Frames count</p>
+<p>Use 120 for a full-loop and 60 for a half-loop.
+A higher number of frames will increase file size.</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -58,6 +72,7 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline_quality</code></td>
     <td rowspan="2"><p>Image quality</p>
+<p>A higher image quality will increase file size.</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -71,6 +86,8 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
   <tr>
     <td nowrap="nowrap"><code>plugin_skyline_compatibility</code></td>
     <td rowspan="2"><p>Compatibility mode</p>
+<p>This uses CSS animations rather than embedded GIF to support a widerr range of browser, like Firefox and Safari.
+Using this mode significantly increase file size as each frame is encoded separately</p>
 <img width="900" height="1" alt=""></td>
   </tr>
   <tr>
@@ -81,9 +98,7 @@ This uses puppeteer to generate collect image frames, and use CSS animations to
 </table>
 <!--/options-->
 
-*[→ Full specification](metadata.yml)*
-
-#### ℹ️ Examples workflows
+## ℹ️ Examples workflows
 
 <!--examples-->
 ```yaml
@@ -99,4 +114,4 @@ with:
   plugin_skyline_quality: 1
 
 ```
-<!--/examples-->
+<!--/examples-->

source/plugins/skyline/metadata.yml

@@ -1,44 +1,54 @@
 name: "🌇 GitHub Skyline 3D calendar"
 category: github
+description: |
+  This plugins lets you display your 3D commits calendar from [skyline.github.com](https://skyline.github.com/).
+
+  > ⚠️ This plugin significantly increase file size, consider using it as standalone.
+examples:
+  default: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.skyline.svg
 index: 25
 supports:
   - user
 scopes: []
 inputs:
 
-  # Enable or disable plugin
   plugin_skyline:
-    description: Display GitHub Skyline 3D calendar
+    description: Enable skyline plugin
     type: boolean
     default: no
 
-  # Displayed year
   plugin_skyline_year:
     description: Displayed year
     type: number
-    default: "current-year"
+    default: current-year
     min: 2008
 
-  # Number of frames
-  # Use 120 for a full-loop and 60 for a half-loop
   plugin_skyline_frames:
-    description: Number of frames
+    description: |
+      Frames count
+
+      Use 120 for a full-loop and 60 for a half-loop.
+      A higher number of frames will increase file size.
     type: number
     default: 60
     min: 1
     max: 120
 
-  # Image quality
   plugin_skyline_quality:
-    description: Image quality
+    description: |
+      Image quality
+
+      A higher image quality will increase file size.
     type: number
     default: 0.5
     min: 0.1
     max: 1
 
-  # This uses CSS animations instead of GIF to support a wider range of browser like FireFox and Safari
-  # Using this mode significantly increase file size as each frame is encoded separately
   plugin_skyline_compatibility:
-    description: Compatibility mode
+    description: |
+      Compatibility mode
+
+      This uses CSS animations rather than embedded GIF to support a widerr range of browser, like Firefox and Safari.
+      Using this mode significantly increase file size as each frame is encoded separately
     type: boolean
     default: no