Updates asciinema update

.github/workflows/ci.yaml

@@ -18,15 +18,17 @@ jobs:
     - name: Checkout
       uses: actions/checkout@master
 
-    - name: Setup dotnet 6.0.100
+    - name: Setup dotnet 5 and 6.0.100
       uses: actions/setup-dotnet@v1
       with:
-        dotnet-version: 6.0.100
+        dotnet-version: | 
+          5.0.x
+          6.0.100
 
     - name: Setup Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '16'
 
     - name: Cache dependencies
       uses: actions/cache@v2

.github/workflows/docs.yaml

@@ -32,7 +32,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v2
       with:
-        node-version: '14'
+        node-version: '16'
 
     - name: Cache dependencies
       uses: actions/cache@v2

docs/Program.cs

@@ -2,6 +2,7 @@
 using Docs.Shortcodes;
 using Statiq.App;
 using Statiq.Common;
+using Statiq.Core;
 using Statiq.Web;
 
 namespace Docs
@@ -16,16 +17,26 @@ await Bootstrapper.Factory
                 .AddSetting(Constants.EditLink, ConfigureEditLink())
                 .ConfigureSite("spectreconsole", "spectre.console", "main")
                 .ConfigureDeployment(deployBranch: "docs")
+
                 .AddShortcode("Children", typeof(ChildrenShortcode))
                 .AddShortcode("ColorTable", typeof(ColorTableShortcode))
                 .AddShortcode("EmojiTable", typeof(EmojiTableShortcode))
                 .AddShortcode("Alert", typeof(AlertShortcode))
                 .AddShortcode("AsciiCast", typeof(AsciiCastShortcode))
                 .AddPipelines()
-                .AddProcess(ProcessTiming.Initialization, _ => new ProcessLauncher("npm", "install", "--audit", "false", "--fund", "false")
+                .BuildPipeline(
+			        "Bootstrap",
+			            builder => builder
+				            .WithInputReadFiles("../node_modules/asciinema-player/dist/bundle/asciinema-player.js")
+				            .WithProcessModules(new SetDestination(Config.FromDocument(doc => new NormalizedPath($"./assets/{doc.Source.FileName}")), true))
+				    .WithOutputWriteFiles()
+                )
+                .AddProcess(ProcessTiming.Initialization, _ => new ProcessLauncher("npm", "install --audit false --fund false --progress false")
                 {
                     LogErrors = false
                 })
+                .AddProcess(ProcessTiming.Initialization, _ => new ProcessLauncher("dotnet", "tool install Microsoft.Playwright.CLI"))
+                .AddProcess(ProcessTiming.Initialization, _ => new ProcessLauncher("dotnet", "playwright install chromium"))
                 .AddProcess(ProcessTiming.BeforeDeployment, _ => new ProcessLauncher("npm", "run build:tailwind")
                 {
                     LogErrors = false

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;