Using Statiq processes for tailwind commands

Tweaks tailwind to use jit mode and misc content tweaks


Changes point in which tailwind is built

.github/workflows/ci.yaml

@@ -41,9 +41,7 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       run: |
         cd docs
-        npm i
         dotnet run --configuration Release
-        npm run build
 
     - name: Archive doc generation
       uses: actions/upload-artifact@v2

.github/workflows/docs.yaml

@@ -44,7 +44,5 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       run: |
         cd docs
-        npm i
         dotnet run --configuration Release
-        npm run build
         dotnet run -- deploy

docs/Docs.csproj

@@ -31,7 +31,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Statiq.Web" Version="1.0.0-beta.26" />
+    <PackageReference Include="Statiq.Web" Version="1.0.0-beta.27" />
     <PackageReference Include="MinVer" PrivateAssets="All" Version="2.3.1" />
   </ItemGroup>
 

docs/Program.cs

@@ -22,6 +22,14 @@ namespace Docs
                 .AddShortcode("Alert", typeof(AlertShortcode))
                 .AddShortcode("AsciiCast", typeof(AsciiCastShortcode))
                 .AddPipelines()
+                .AddProcess(ProcessTiming.Initialization, _ => new ProcessLauncher("npm", "install")
+                {
+                    LogErrors = false
+                })
+                .AddProcess(ProcessTiming.BeforeDeployment, _ => new ProcessLauncher("npm", "run build:tailwind")
+                {
+                    LogErrors = false
+                })
                 .RunAsync();
 
         private static Config<string> ConfigureEditLink()

docs/README.md

@@ -1,6 +1,6 @@
 # Documentation
 
-To start contributing to the [Spectre.Console](https://github.com/spectreconsole/spectre.console) documentation, you will need the [.NET Core SDK](https://dot.net) 3.1 or higher.
+To start contributing to the [Spectre.Console](https://github.com/spectreconsole/spectre.console) documentation, you will need the [.NET Core SDK](https://dot.net) 5.0.202 or higher (as defined in the repository root `global.json` file).
 
 ## Running Preview Site
 
@@ -10,15 +10,11 @@ The documentation site uses [Statiq](https://statiq.dev), a static site generato
 > Preview.ps1
 ```
 
-After the build is complete, you can navigate to [http://localhost:5080/spectre.console](http://localhost:5080/spectre.console).
+After the build is complete, you can navigate to [http://localhost:5080](http://localhost:5080).
 
-**Note that the site runs under a virtual directory.**
+## Npm
 
-## Building the CSS
-
-The documentation uses tailwind for the CSS. Committed to the repository is a large 4gb file with all possible styles at `assets/style.css`. This file is generated from the root files tailwind.config.js and tailwind.css. Any changes to the overall design style (e.g. colors, markdown styling, etc) can be made in these two files.
-
- For production, `npm run build:tailwind` should be ran post Statiq build. This process will look at all the styles in the HTML and prune the tailwind file down to a much more manageable 30kb or so file.
+The site uses some tools from the JavaScript ecosystem including npm. While Statiq will execute `npm install` and other commands as needed, you need to have [npm installed](https://www.npmjs.com/get-npm) before running a site build.
 
 ## Editing Content
 
@@ -27,7 +23,7 @@ The documentation is written using [Markdown](https://www.markdownguide.org/basi
 Markdown files can be found under the following directories:
 
 - [/input](./input)
-  - [/appendix](./input/appendix)
+- [/appendix](./input/appendix)
     
 ## Editing Layout
 

docs/input/index.md

@@ -25,9 +25,6 @@ for Python written by Will McGugan.
 
 ## Examples
 
-<?# AsciiCast cast="all-samples" /?>
-
-
 ![Sample of Spectre.Console output](./assets/images/example.png)
 
 <video autoplay muted loop class="mt-4">

docs/input/tailwind.config.js

@@ -3,12 +3,13 @@ const colors = require("tailwindcss/colors");
 
 module.exports = {
     purge: ["./output/**/*.html"],
+    mode: 'jit',
     darkMode: false, // or 'media' or 'class'
     theme: {
         extend: {
             fontFamily: {
                 sans: ["Poppins", ...defaultTheme.fontFamily.sans],
-                mono: ["Cascadia Code", ...defaultTheme.fontFamily.mono],
+                mono: ["ui-monospace", "Cascadia Mono", "Cascadia Code", "Menlo", "Consolas", "Liberation Mono", "Lucida Console", "WebCascadiaMonoPL", "monospace"],
             },
             container: {
                 center: true,

docs/input/tailwind.css

@@ -1,6 +1,9 @@
 /*
-use npm run build:tailwind to take this file plus tailwind.config.js and build the one in the assets/styles.css.
-that file will be quite large, but we'll minimize it on production build.
+this file is used in the build process to generate the css that will be outputted to
+/output/assets/styles.css.
+
+in addition to the tailwind includes, it also contains styling for the source control highlighting
+and the ascii terminal player.
 */
 
 @import "tailwindcss/base";
@@ -246,7 +249,7 @@ code.language-markup .token.script .token.keyword {
     border-style: solid;
     cursor: text;
     border-width: 0.5em;
-    font-family: 'Cascadia Mono PL', 'Cascadia Mono', 'Cascadia Code',  Menlo, Consolas, Liberation Mono, Lucida Console,  'WebCascadiaMonoPL', monospace;
+    font-family: 'ui-monospace', 'Cascadia Mono PL', 'Cascadia Mono', 'Cascadia Code',  Menlo, Consolas, Liberation Mono, Lucida Console,  'WebCascadiaMonoPL', monospace;
     line-height: 1;
   }
   .asciinema-player pre {
@@ -276,9 +279,12 @@ code.language-markup .token.script .token.keyword {
   .asciinema-terminal.font-small {
     font-size: 12px;
   }
-  .asciinema-terminal.font-medium {
-    font-size: 18px;
+  @media only screen and (min-width: 1080px) {
+    .asciinema-terminal.font-small {
+      font-size: 15px;
+    }
   }
+
   .asciinema-terminal.font-big {
     font-size: 24px;
   }
@@ -1917,10 +1923,10 @@ code.language-markup .token.script .token.keyword {
     background-color: #d9d9d9;
   }
   .asciinema-theme-asciinema .fg-8 {
-    color: #4d4d4d;
+    color: #808080;
   }
   .asciinema-theme-asciinema .bg-8 {
-    background-color: #4d4d4d;
+    background-color: #808080;
   }
   .asciinema-theme-asciinema .fg-9 {
     color: #dd3c69;

docs/package.json

@@ -4,8 +4,8 @@
   "description": "Docs for Spectre.Console",
   "main": "index.js",
   "scripts": {
-    "build:tailwind": "tailwindcss build ./tailwind.css -o ./input/assets/styles.css",
-    "build": "cross-env NODE_ENV=production tailwind build tailwind.css -o ./output/assets/styles.css"
+    "build:tailwind": "tailwind build ./input/tailwind.css  -c ./input/tailwind.config.js  -o ./output/assets/styles.css",
+    "build": "cross-env NODE_ENV=production dotnet run -- -o public"
   },
   "repository": {
     "url": "https://github.com/spectreconsole/spectre.console"