Update asciinema (#648)

* Updating doc build dependencies

Updates playwright to latest version. This requires an update in how it is ran as part of the statiq build set up to ensure dependencies exist for the run.

Also brings misc packages up to date to fix vulnerabilities.

* Updates CI to use node v16 and dotnet 5

Playwright CLI currently needs net5 to execute. There is a PR in the works to get it running on net6 but until then the recommended steps it to have both installed.

docs/input/_layout.cshtml

@@ -157,5 +157,10 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous"></script>
 	    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-zc7WDnCM3aom2EziyDIRAtQg1mVXLdILE09Bo+aE1xk0AM2c2cVLfSW9NrxE5tKTX44WBY0Z2HClZ05ur9vB6A==" crossorigin="anonymous"></script>
         <script src="@Context.GetLink("/assets/asciinema-player.js")"></script>
+        <script>
+            document.querySelectorAll('asciinema-player').forEach(cast => {
+                AsciinemaPlayer.create(cast.attributes['src'].value, cast, {autoplay: true, fit: 'none', fontSize: 'inherit'});
+            });
+        </script>
     </body>
 </html>

docs/input/tailwind.css

@@ -135,6 +135,8 @@ code.language-markup .token.script .token.keyword {
     position: relative;
     outline: none;
     margin-bottom: 1rem;
+    font-size: 15px;
+    line-height: 1.1em;
   }
 
   .asciinema-player-wrapper:fullscreen {
@@ -231,7 +233,6 @@ code.language-markup .token.script .token.keyword {
     -webkit-box-sizing: content-box;
     overflow: hidden;
     max-width: 100%;
-
   }
   .asciinema-terminal {
     box-sizing: content-box;
@@ -257,12 +258,30 @@ code.language-markup .token.script .token.keyword {
     transition: width .25s ease-out, height .25s ease-out;
     font-variant-ligatures: none;
     font-feature-settings: "liga" 0;
+    line-height: 1.2em !important;
+  }
+  .asciinema-terminal .line .cursor-a {
+    display: inline-block;
+  }
+  .asciinema-terminal .line .cursor-b {
+    display: none;
+    border-radius: 0.05em;
+  }
+  .asciinema-terminal .line .blink {
+    visibility: hidden;
+  }
+  .asciinema-terminal.cursor .line .cursor-a {
+    display: none;
+  }
+  .asciinema-terminal.cursor .line .cursor-b {
+    display: inline-block;
+  }
+  .asciinema-terminal.blink .line .blink {
+    visibility: visible;
   }
-
   .asciinema-terminal .line {
     letter-spacing: normal;
     overflow: hidden;
-    line-height: 1rem;
   }
   .asciinema-terminal .line {
     display: block;