New "columns" display mode (#371)

.github/readme/partials/setup/action/setup.md

@@ -99,4 +99,6 @@ Update your README.md to embed your metrics:
 ![Metrics](https://github.com/my-github-user/my-github-user/blob/master/github-metrics.svg)
 <!-- If you're using "main" as default branch -->
 ![Metrics](https://github.com/my-github-user/my-github-user/blob/main/github-metrics.svg)
+<!-- If you're using the "columns" display mode -->
+<img src="https://github.com/my-github-user/my-github-user/blob/master/github-metrics.svg" alt="Metrics" width="100%">
 ```

README.md

@@ -529,6 +529,8 @@ Update your README.md to embed your metrics:
 ![Metrics](https://github.com/my-github-user/my-github-user/blob/master/github-metrics.svg)
 <!-- If you're using "main" as default branch -->
 ![Metrics](https://github.com/my-github-user/my-github-user/blob/main/github-metrics.svg)
+<!-- If you're using the "columns" display mode -->
+<img src="https://github.com/my-github-user/my-github-user/blob/master/github-metrics.svg" alt="Metrics" width="100%">
 ```
 </details>
 

source/app/web/statics/app.placeholder.js

@@ -56,6 +56,7 @@
       animated: false,
       //Display size
       large: set.config.display === "large",
+      columns: set.config.display === "columns",
       //Config
       config: set.config,
       //Base elements

source/plugins/core/README.md

@@ -145,6 +145,7 @@ It may increase filesize since it replace unicode characters by SVG images.
 Some templates like `classic` and `repositories` support different output display size:
 - `regular` (default) will render a medium-sized image, which is suitable for both desktop and mobile displays and is preferable when using data-intensive metrics (since text may be scaled down on small devices)
 - `large` will render a large-sized image, which may be more suitable for some plugins (like displaying topics icons,  repository contributors, etc.)
+- `columns` will render a full-width image, with two columns on desktop / one column on mobile
 
 #### ℹ️ Examples workflows
 

source/plugins/core/index.mjs

@@ -34,6 +34,7 @@ export default async function({login, q}, {conf, data, rest, graphql, plugins, q
 
   //Display
   data.large = display === "large"
+  data.columns = display === "columns"
 
   //Animations
   data.animated = animations

source/plugins/core/metadata.yml

@@ -175,6 +175,7 @@ inputs:
     values:
       - regular  # 480px width
       - large    # 960px width (may not be supported by all templates)
+      - columns  # Full width with two columns on desktop / One column on mobile
 
   # Enable SVG CSS animations
   config_animations:

source/templates/classic/image.svg

@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : 480 %>" height="99999" class="<%= large ? 'large' : '' %> <%= !animated ? 'no-animations' : '' %>">
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : columns ? 'auto' : 480 %>" height="99999" class="<%= large ? 'large' : columns ? 'columns' : '' %> <%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%= fonts %></style></defs>
   <style><%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
-    <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
       <% for (const partial of [...partials]) { %>
         <%- await include(`partials/${partial}.ejs`) %>
       <% } %>

source/templates/classic/style.css

@@ -35,6 +35,23 @@
     width: 50%;
   }
 
+/* Columns display */
+  svg.columns .items-wrapper{
+    column-count: 2;
+    column-gap: 10px;
+  }
+  svg.columns .items-wrapper>*{
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+
+  @media (max-width: 850px){
+    svg.columns .items-wrapper{
+      column-count: 1;
+    }
+  }
+
 /* Headers */
   h1, h2, h3 {
     margin: 8px 0 2px;