From 9246e914fee4454858ea8723f6b509e30af5315b Mon Sep 17 00:00:00 2001
From: Nathan McCarty <thatonelutenist@stranger.systems>
Date: Mon, 10 Feb 2025 18:30:33 -0500
Subject: [PATCH] Improve unit test styling

---
 lib/DB.rakumod          | 10 ++++++----
 lib/Render/Util.rakumod |  1 +
 resources/code.css      |  2 +-
 resources/colors.css    |  5 ++++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/DB.rakumod b/lib/DB.rakumod
index ec89780..2757668 100644
--- a/lib/DB.rakumod
+++ b/lib/DB.rakumod
@@ -157,10 +157,12 @@ class PostDB {
        # Create the resources folder and copy over our style sheets
        my $res-dir = $out-dir.add('resources/');
        mkdir $res-dir unless $res-dir.e;
-       $res-dir.add('colors.css').spurt: %?RESOURCES<colors.css>.slurp;
-       $res-dir.add('main.css').spurt: %?RESOURCES<main.css>.slurp;
-       $res-dir.add('code.css').spurt: %?RESOURCES<code.css>.slurp;
-       $res-dir.add('admonitions.css').spurt: %?RESOURCES<admonitions.css>.slurp;
+       # symlink the resources directory to make "interactive" styling eaiser
+       # TODO: Directories support
+       %?RESOURCES<colors.css>.IO.symlink: $res-dir.add('colors.css');
+       %?RESOURCES<main.css>.IO.symlink: $res-dir.add('main.css');
+       %?RESOURCES<code.css>.IO.symlink: $res-dir.add('code.css');
+       %?RESOURCES<admonitions.css>.IO.symlink: $res-dir.add('admonitions.css');
    }
 
    #| Get a list of posts sorted by date
diff --git a/lib/Render/Util.rakumod b/lib/Render/Util.rakumod
index 4b26e28..1dca304 100644
--- a/lib/Render/Util.rakumod
+++ b/lib/Render/Util.rakumod
@@ -13,6 +13,7 @@ sub show-html($html) is export {
    $out ~~ s:g/\s+ ',' \s+ '<span'/, <span/;
    # Fixup unit test divs
    $out ~~ s:g/'<div class="unit-test">' \s* '<pre><code class="idris-code">&nbsp;&nbsp;'/<div class="unit-test"><span><i class='bx bx-check-circle'><\/i>Unit Test<\/span><pre><code class="idris-code">/;
+   $out ~~ s:g/'<div class="warn-unit-test">' \s* '<pre><code class="idris-code">&nbsp;&nbsp;'/<div class="unit-test"><span><i class='bx bx-info-circle'><\/i>Unit Test<\/span><pre><code class="idris-code">/;
    $out
 }
 
diff --git a/resources/code.css b/resources/code.css
index a3e1758..57cf553 100644
--- a/resources/code.css
+++ b/resources/code.css
@@ -40,7 +40,7 @@ pre {
     border-radius: 0.55rem / 0.5rem;
 }
 .unit-test > pre {
-    width: auto;
+    width: 100%;
 }
 .unit-test i {
     font-size: 1.5rem;
diff --git a/resources/colors.css b/resources/colors.css
index 5c9ec9c..7332a48 100644
--- a/resources/colors.css
+++ b/resources/colors.css
@@ -85,9 +85,12 @@ blockquote {
   background-color: var(--bg-2);
   color: var(--fg-1);
 }
-.unit-test i {
+.unit-test .bx-check-circle {
   color: var(--green);
 }
+.unit-test .bx-info-circle {
+  color: var(--yellow);
+}
 
 /* Colorization for idris code blocks */
 code {