feat: add line numbers to HTML preview (#24)

gha-common · May 14, 2024 · c5a1047 · c5a1047
1 parent 55d7a78
commit c5a1047
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 51 deletions.
diff --git a/action.yaml b/action.yaml
@@ -37,13 +37,18 @@ runs:
           rm .git/index
           git clean -fdx
           touch index.html
-          cp ${GITHUB_ACTION_PATH}/assets/nord.css .
-          git add index.html nord.css
-          git config user.email "go-coverage-action@github.com"
-          git config user.name "go-coverage-action"
-          git commit -m "chore: initial commit"
-          git push origin ${{ inputs.branch }}
         fi
+        cp ${GITHUB_ACTION_PATH}/assets/* .
+        git add .
+        git config user.email "go-coverage-action@github.com"
+        git config user.name "go-coverage-action"
+        if git diff --quiet; then
+          echo "No changes to commit"
+          exit 0
+        fi
+        git commit -m "chore: update assets"
+        git push origin ${{ inputs.branch }}
+
 
     - name: Push Coverage
       shell: bash
@@ -52,6 +57,7 @@ runs:
         cd go-cover
         mv ../cover.html ${REVISION}.html
         ex -sc '%s/<style>/<style>@import url("nord.css");/' -c 'x' ${REVISION}.html
+        ex -sc '%s/<\/script>/<\/script><script src="ln.js"><\/script>/' -c 'x' ${REVISION}.html
         git add -f ${REVISION}.html
         git config user.email "go-coverage-action@github.com"
         git config user.name "go-coverage-action"

diff --git a/assets/ln.js b/assets/ln.js
@@ -0,0 +1,8 @@
+let pres = document.querySelectorAll('#content pre');
+
+pres.forEach((pre) => {
+  let lines = pre.innerHTML.split('\n');
+  pre.style.setProperty('--ln-width', lines.length.toString().length);
+  let linesWithNumbers = lines.map((l, i) => `<span class="ln">${i+1}</span>${l}`);
+  pre.innerHTML = linesWithNumbers.join('\n');
+});
diff --git a/assets/nord.css b/assets/nord.css
@@ -1,35 +1,36 @@
 :root {
-	--nord-deep-dark: #242931;
-	--nord0: #2e3440;
-	--nord0-pale: rgba(46, 52, 64, 0.3);
-	--nord1: #3b4252;
-	--nord1-pale: rgba(59, 66, 82, 0.3);
-	--nord2: #434c5e;
-	--nord2-pale: rgba(67, 76, 94, 0.3);
-	--nord3: #4c566a;
-	--nord3-pale: rgba(76, 86, 106, 0.3);
-	--nord4: #d8dee9;
-	--nord4-pale: rgba(216, 222, 232, 0.3);
-	--nord5: #e5e9f0;
-	--nord5-pale: rgba(229, 233, 240, 0.3);
-	--nord6: #eceff4;
-	--nord6-pale: rgba(236, 239, 244, 0.3);
-	--nord7: #8fbcbb;
-	--nord7-pale: rgba(143, 188, 187, 0.3);
-	--nord8: #88c0d0;
-	--nord9: #81a1c1;
-	--nord10: #5e81ac;
-	--nord10-pale: rgba(94, 129, 172, 0.3);
-	--nord11: #bf616a;
-	--nord11-pale: rgba(191, 97, 106, 0.3);
-	--nord12: #d08770;
-	--nord12-pale: rgba(208, 135, 112, 0.3);
-	--nord13: #ebcb8b;
-	--nord13-pale: rgba(235, 203, 139, 0.3);
-	--nord14: #a3be8c;
-	--nord14-pale: rgba(163, 190, 140, 0.3);
-	--nord15: #b48ead;
-	--nord15-pale: rgba(180, 140, 173, 0.3);
+  --ln-width: 3;
+  --nord-deep-dark: #242931;
+  --nord0: #2e3440;
+  --nord0-pale: rgba(46, 52, 64, 0.3);
+  --nord1: #3b4252;
+  --nord1-pale: rgba(59, 66, 82, 0.3);
+  --nord2: #434c5e;
+  --nord2-pale: rgba(67, 76, 94, 0.3);
+  --nord3: #4c566a;
+  --nord3-pale: rgba(76, 86, 106, 0.3);
+  --nord4: #d8dee9;
+  --nord4-pale: rgba(216, 222, 232, 0.3);
+  --nord5: #e5e9f0;
+  --nord5-pale: rgba(229, 233, 240, 0.3);
+  --nord6: #eceff4;
+  --nord6-pale: rgba(236, 239, 244, 0.3);
+  --nord7: #8fbcbb;
+  --nord7-pale: rgba(143, 188, 187, 0.3);
+  --nord8: #88c0d0;
+  --nord9: #81a1c1;
+  --nord10: #5e81ac;
+  --nord10-pale: rgba(94, 129, 172, 0.3);
+  --nord11: #bf616a;
+  --nord11-pale: rgba(191, 97, 106, 0.3);
+  --nord12: #d08770;
+  --nord12-pale: rgba(208, 135, 112, 0.3);
+  --nord13: #ebcb8b;
+  --nord13-pale: rgba(235, 203, 139, 0.3);
+  --nord14: #a3be8c;
+  --nord14-pale: rgba(163, 190, 140, 0.3);
+  --nord15: #b48ead;
+  --nord15-pale: rgba(180, 140, 173, 0.3);
 }
 
 * {
@@ -39,9 +40,8 @@
 }
 
 body {
-	background: var(--nord0) !important;
-	color: var(--nord4) !important;
-  padding: 10px;
+  background: var(--nord0) !important;
+  color: var(--nord4) !important;
 }
 
 #topbar {
@@ -57,14 +57,27 @@ select {
   padding: 2px;
 }
 
-.cov0  { color: var(--nord11) !important; }
-.cov1  { color: var(--nord13) !important; }
-.cov2  { color: var(--nord14) !important; }
-.cov3  { color: var(--nord14) !important; }
-.cov4  { color: var(--nord14) !important; }
-.cov5  { color: var(--nord14) !important; }
-.cov6  { color: var(--nord14) !important; }
-.cov7  { color: var(--nord14) !important; }
-.cov8  { color: var(--nord14) !important; }
-.cov9  { color: var(--nord14) !important; }
-.cov10 { color: var(--nord14) !important; }
+pre {
+  line-height: 1.4em;
+}
+
+.ln {
+  display: inline-block;
+  min-width: calc(0.48em * (var(--ln-width) + 1));
+  text-align: right;
+  margin-right: 15px;
+  padding-right: 10px;
+  color: var(--nord3);
+}
+
+.cov0, .cov0 .ln   { color: var(--nord11) !important; }
+.cov1, .cov1 .ln   { color: var(--nord13) !important; }
+.cov2, .cov2 .ln   { color: var(--nord14) !important; }
+.cov3, .cov3 .ln   { color: var(--nord14) !important; }
+.cov4, .cov4 .ln   { color: var(--nord14) !important; }
+.cov5, .cov5 .ln   { color: var(--nord14) !important; }
+.cov6, .cov6 .ln   { color: var(--nord14) !important; }
+.cov7, .cov7 .ln   { color: var(--nord14) !important; }
+.cov8, .cov8 .ln   { color: var(--nord14) !important; }
+.cov9, .cov9 .ln   { color: var(--nord14) !important; }
+.cov10, .cov10 .ln { color: var(--nord14) !important; }