feat(app/metrics): add warnings for embed misconfiguration (closes #1196)

source/templates/classic/image.svg

@@ -6,6 +6,17 @@
 
   <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" class="items-wrapper">
+      <% if (warnings.length) { %>
+        <section>
+          <div class="row">
+            <div class="field warning">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
+              <%= warnings.map(({warning}) => warning.message).join(", ") %>
+            </div>
+          </div>
+        </section>
+      <% } %>
+
       <% for (const partial of [...partials]) { %>
         <%- await include(`partials/${partial}.ejs`) %>
       <% } %>

source/templates/classic/style.css

@@ -103,6 +103,12 @@
   .field.error svg {
     fill: #cb2431;
   }
+  .field.warning {
+    color: #D79533;
+  }
+  .field.warning svg {
+    fill: #D79533;
+  }
 
 /* Displays */
   .row {

source/templates/repository/image.svg

@@ -7,6 +7,16 @@
 
   <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">
+      <% if (warnings.length) { %>
+        <section>
+          <div class="row">
+            <div class="field warning">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
+              <%= warnings.map(({warning}) => warning.message).join(", ") %>
+            </div>
+          </div>
+        </section>
+      <% } %>
 
       <% if (errors.length) { %>
         <section>

source/templates/terminal/image.svg

@@ -51,6 +51,7 @@ WARRANTY, to the extent permitted by applicable law.
 
 Last generated: <%= meta.generated %>
 </div><% } -%>
+<% if (warnings.length) { %><div class="warnings"><%- warnings.map(({warning}) => `WARN: ${warning.message}`).join("<br/>") %></div><% } %><%# -%>
 <% for (const partial of [...partials]) { %><%- await include(`partials/${partial}.ejs`) %><% } -%>
 <% if (base.metadata) { -%>
 

source/templates/terminal/style.css

@@ -62,6 +62,10 @@
   .banner, footer {
     color: #AE9DA7;
   }
+  .warnings {
+    color: #D79533;
+    white-space: normal;
+  }
 
 /* Isocalendar */
   .isocalendar svg {