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.

.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 System.Threading.Tasks;
 using Docs.Shortcodes;
 using Statiq.App;
 using Statiq.Common;
+using Statiq.Core;
 using Statiq.Web;
 
 namespace Docs
@@ -16,16 +17,26 @@ namespace Docs
                 .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;

docs/package.json

@@ -12,13 +12,14 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@tailwindcss/forms": "^0.3.2",
-    "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.5",
+    "@tailwindcss/forms": "^0.3.4",
+    "@tailwindcss/typography": "^0.4.1",
+    "asciinema-player": "^3.0.0-beta.4",
+    "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "playwright": "^1.12.3",
-    "postcss": "^8.2.10",
+    "playwright": "^1.16.3",
+    "postcss": "^8.4.4",
     "postcss-cli": "^8.3.1",
-    "tailwindcss": "^2.1.1"
+    "tailwindcss": "^2.2.19"
   }
 }

dotnet-tools.json

@@ -19,6 +19,12 @@
       "commands": [
         "dotnet-example"
       ]
+    },
+    "microsoft.playwright.cli": {
+      "version": "1.2.0",
+      "commands": [
+        "playwright"
+      ]
     }
   }
 }