fix: fix labels and support audit reports (#1076)

assets/_colors.scss

@@ -1,15 +1,17 @@
 // Colors
-.text-incorrect {color: #ff0010;}
-.text-wip {color: #ff6f00;}
-.text-incomplete {color: #ffef00;}
+.text-missing {color: #ff0010;}
+.text-incorrect {color: #ff6f00;}
+.text-wip {color: #ffef00;}
+.text-reliable {color: #0090ff;}
 .text-stable {color: #90ff00;}
 .text-transparent { color: transparent;}
 .text-black { color: black !important;}
 
 .bg-na { background-color: #6c8293;}
-.bg-incorrect {background-color: #ff0010;}
-.bg-wip {background-color: #ff6f00;}
-.bg-incomplete {background-color: #ffef00;}
+.bg-missing { background-color: #ff0010; }
+.bg-incorrect {background-color: #ff6f00;}
+.bg-wip {background-color: #ffef00;}
+.bg-reliable {background-color: #0090ff; }
 .bg-stable {background-color: #90ff00;}
 .bg-transparent { background-color: transparent;}
 .bg-black { background-color: black;}

assets/_custom.scss

@@ -10,6 +10,7 @@
 @import "dashboard";
 @import "plugins/toc";
 @import "katex";
+@import "icons";
 
 .markdown {
     overflow-x: hidden;

assets/_icons.scss

@@ -0,0 +1,43 @@
+// Modifiers
+.gg-s-half {
+    --ggs: 0.5
+}
+
+
+// External Icon
+.gg-external {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transform: scale(var(--ggs,1));
+    width: 12px;
+    height: 12px;
+    box-shadow:
+        -2px 2px 0 0,
+        -4px -4px 0 -2px,
+        4px 4px 0 -2px;
+    margin-left: -2px;
+    margin-top: 1px
+}
+.gg-external::after,
+.gg-external::before {
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    right: -4px
+}
+.gg-external::before {
+    background: currentColor;
+    transform: rotate(-45deg);
+    width: 12px;
+    height: 2px;
+    top: 1px
+}
+.gg-external::after {
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid;
+    border-top: 2px solid;
+    top: -4px
+}

assets/js/content-model.js

@@ -14,13 +14,15 @@ function buildTocModel (contentSelector) {
     let parents = [{tagName: 'H0', children: model}]
     let prevSibling = null
     for (let el of headingList) {
+      console.log("buildTocModel -> el.dataset", el.dataset)
       let node = {
         id: el.id,
         tagName: el.tagName,
         text: cleanHeadingText(el),
         page: Boolean(el.dataset.page),
         dashboardWeight: el.dataset.dashboardWeight,
         dashboardAudit: el.dataset.dashboardAudit,
+        dashboardAuditURL: el.dataset.dashboardAuditUrl,
         dashboardState: el.dataset.dashboardState,
         children: []
       }

assets/js/dashboard-spec.js

@@ -12,6 +12,35 @@ const tableData = (model, depth, output=[]) => {
     return output
 }
 
+const humanize = (input) => {
+  if(input === 'wip') {
+    return 'Draft/WIP'
+  }
+
+  if(input === 'n/a') {
+    return 'N/A'
+  }
+
+  return input.charAt(0).toUpperCase() + input.substr(1);
+}
+
+const stateToNumber = (s) => {
+  switch (s) {
+    case 'stable':
+      return 1
+    case 'reliable':
+      return 2
+    case 'wip':
+      return 3
+    case 'incorrect':
+      return 4
+    case 'missing':
+    return 5
+    default:
+      return 6
+  }
+}
+
 function buildDashboard(selector, model) {
   const data = tableData(model, [0])
   const tpl = html`
@@ -29,8 +58,8 @@ function buildDashboard(selector, model) {
     <tr>
       <td class="Dashboard-section">${i.number} <a href="#${i.id}">${i.text}</a></td>
       <td>${i.dashboardWeight}</td>
-      <td class="text-black bg-na bg-${i.dashboardState}">${i.dashboardState}</td>
-      <td class="text-transparent ${i.dashboardAudit > 0 ? 'bg-stable' : 'bg-incorrect'}">${i.dashboardAudit}</td>
+      <td data-sort="${stateToNumber(i.dashboardState)}" class="text-black bg-na bg-${i.dashboardState}">${humanize(i.dashboardState)}</td>
+      <td data-sort="${stateToNumber(i.dashboardAudit)}" class="text- bg-na bg-${i.dashboardAudit}">${humanize(i.dashboardAudit)} ${i.dashboardAuditURL ? html`<a href="${i.dashboardAuditURL}" title="Audit Report" target="_blank" rel="noopener noreferrer"><i class="gg-external gg-s-half"></i></a>`: ''} </td>
     </tr>
     `: '')}
   </tbody>

content/intro/_index.md

@@ -3,8 +3,8 @@ title: Introduction
 weight: 1
 
 dashboardWeight: 0.2
-dashboardState: incomplete
-dashboardAudit: 0
+dashboardState: reliable
+dashboardAudit: n/a
 ---
 
 # Introduction
@@ -50,21 +50,25 @@ Each section of the spec must be stable and audited before it is considered done
   <thead>
   <tbody>
     <tr>
-      <td>Final, will not change before mainnet launch</td>
+      <td>Final, will not change before mainnet launch.</td>
       <td class="text-black bg-stable">Stable</td>
     </tr>
     <tr>
-      <td>Correct, but some details are missing</td>
-      <td class="text-black bg-incomplete">Incomplete</td>
+      <td>Reliable and likely to not change.</td>
+      <td class="text-black bg-reliable">Reliable</td>
     </tr>
     <tr>
-      <td>Likely to change. Details still being finalised</td>
-      <td class="text-black bg-wip">WIP</td>
+      <td>Work has started but not yet finished.</td>
+      <td class="text-black bg-wip">Draft/WIP</td>
     </tr>
     <tr>
-      <td>Do not follow. Important things have changed</td>
+      <td>Do not follow. Important things have changed.</td>
       <td class="text-black bg-incorrect">Incorrect</td>
     </tr>
+    <tr>
+      <td>No work has been done yet.</td>
+      <td class="text-black bg-missing">Missing</td>
+    </tr>
   </tbody>
 </table>
 

content/intro/arch.md

@@ -2,8 +2,8 @@
 title: "Architecture Diagrams"
 audit: 1
 dashboardWeight: 0.2
-dashboardState: incomplete
-dashboardAudit: 0
+dashboardState: reliable
+dashboardAudit: n/a
 ---
 
 # Architecture Diagrams

layouts/_default/_markup/render-heading.html

@@ -35,7 +35,7 @@
   - headings get numbered by css; changing the nesting requires updating numbered.scss.
   - heading text is grabbed by toc.js as the ToC link text
 */}}
-<h{{ $level }} id="{{ $anchor | safeURL }}" class="level-{{ $level }}" data-page="{{if eq $originalLevel 1 }}true{{end}}" data-dashboard-weight="{{.Page.Params.dashboardWeight}}" data-dashboard-state="{{.Page.Params.dashboardState}}" data-dashboard-audit="{{.Page.Params.dashboardAudit}}">
+<h{{ $level }} id="{{ $anchor | safeURL }}" class="level-{{ $level }}" data-page="{{if eq $originalLevel 1 }}true{{end}}" data-dashboard-weight="{{.Page.Params.dashboardWeight}}" data-dashboard-state="{{.Page.Params.dashboardState}}" data-dashboard-audit="{{.Page.Params.dashboardAudit}}" data-dashboard-audit-url="{{.Page.Params.dashboardAuditURL}}">
   <a href="#{{ $anchor | safeURL }}">{{ .Text | safeHTML }}</a>
 </h{{ $level }}>
 <div class="section-badges">

package.json

@@ -15,12 +15,12 @@
     "d3-zoomable": "^1.1.3",
     "gumshoejs": "^5.1.2",
     "katex": "^0.12.0",
-    "lit-html": "^1.2.1",
+    "lit-html": "^1.3.0",
     "panzoom": "^9.2.5",
     "tablesort": "^5.2.1"
   },
   "devDependencies": {
     "debounce-fn": "^4.0.0",
-    "hugo-extended": "^0.74.2"
+    "hugo-extended": "^0.74.3"
   }
 }