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

@@ -1,39 +1,47 @@
-using System.Threading.Tasks;
+using System.Threading.Tasks;
-using Docs.Shortcodes;
+using Docs.Shortcodes;
-using Statiq.App;
+using Statiq.App;
-using Statiq.Common;
+using Statiq.Common;
-using Statiq.Web;
+using Statiq.Web;
-
+
-namespace Docs
+namespace Docs
-{
+{
-    public static class Program
+    public static class Program
-    {
+    {
-        public static async Task<int> Main(string[] args) =>
+        public static async Task<int> Main(string[] args) =>
-            await Bootstrapper.Factory
+            await Bootstrapper.Factory
-                .CreateWeb(args)
+                .CreateWeb(args)
-                .AddSetting(Keys.Host, "spectreconsole.net")
+                .AddSetting(Keys.Host, "spectreconsole.net")
-                .AddSetting(Keys.LinksUseHttps, true)
+                .AddSetting(Keys.LinksUseHttps, true)
-                .AddSetting(Constants.EditLink, ConfigureEditLink())
+                .AddSetting(Constants.EditLink, ConfigureEditLink())
-                .ConfigureSite("spectreconsole", "spectre.console", "main")
+                .ConfigureSite("spectreconsole", "spectre.console", "main")
-                .ConfigureDeployment(deployBranch: "docs")
+                .ConfigureDeployment(deployBranch: "docs")
-                .AddShortcode("Children", typeof(ChildrenShortcode))
+                .AddShortcode("Children", typeof(ChildrenShortcode))
-                .AddShortcode("ColorTable", typeof(ColorTableShortcode))
+                .AddShortcode("ColorTable", typeof(ColorTableShortcode))
-                .AddShortcode("EmojiTable", typeof(EmojiTableShortcode))
+                .AddShortcode("EmojiTable", typeof(EmojiTableShortcode))
-                .AddShortcode("Alert", typeof(AlertShortcode))
+                .AddShortcode("Alert", typeof(AlertShortcode))
-                .AddShortcode("AsciiCast", typeof(AsciiCastShortcode))
+                .AddShortcode("AsciiCast", typeof(AsciiCastShortcode))
-                .AddPipelines()
+                .AddPipelines()
-                .RunAsync();
+                .AddProcess(ProcessTiming.Initialization, _ => new ProcessLauncher("npm", "install")
-
+                {
-        private static Config<string> ConfigureEditLink()
+                    LogErrors = false
-        {
+                })
-            return Config.FromDocument((doc, ctx) =>
+                .AddProcess(ProcessTiming.BeforeDeployment, _ => new ProcessLauncher("npm", "run build:tailwind")
-            {
+                {
-                return string.Format("https://github.com/{0}/{1}/edit/{2}/docs/input/{3}",
+                    LogErrors = false
-                    ctx.GetString(Constants.Site.Owner),
+                })
-                    ctx.GetString(Constants.Site.Repository),
+                .RunAsync();
-                    ctx.GetString(Constants.Site.Branch),
+
-                    doc.Source.GetRelativeInputPath());
+        private static Config<string> ConfigureEditLink()
-            });
+        {
-        }
+            return Config.FromDocument((doc, ctx) =>
-    }
+            {
-}
+                return string.Format("https://github.com/{0}/{1}/edit/{2}/docs/input/{3}",
+                    ctx.GetString(Constants.Site.Owner),
+                    ctx.GetString(Constants.Site.Repository),
+                    ctx.GetString(Constants.Site.Branch),
+                    doc.Source.GetRelativeInputPath());
+            });
+        }
+    }
+}

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 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.
-
-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.
 
 ## 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

@@ -1,63 +1,64 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require("tailwindcss/defaultTheme");
-const colors = require("tailwindcss/colors");
+const colors = require("tailwindcss/colors");
-
+
-module.exports = {
+module.exports = {
-    purge: ["./output/**/*.html"],
+    purge: ["./output/**/*.html"],
-    darkMode: false, // or 'media' or 'class'
+    mode: 'jit',
-    theme: {
+    darkMode: false, // or 'media' or 'class'
-        extend: {
+    theme: {
-            fontFamily: {
+        extend: {
-                sans: ["Poppins", ...defaultTheme.fontFamily.sans],
+            fontFamily: {
-                mono: ["Cascadia Code", ...defaultTheme.fontFamily.mono],
+                sans: ["Poppins", ...defaultTheme.fontFamily.sans],
-            },
+                mono: ["ui-monospace", "Cascadia Mono", "Cascadia Code", "Menlo", "Consolas", "Liberation Mono", "Lucida Console", "WebCascadiaMonoPL", "monospace"],
-            container: {
+            },
-                center: true,
+            container: {
-                padding: {
+                center: true,
-                    DEFAULT: "2rem",
+                padding: {
-                    sm: "2rem",
+                    DEFAULT: "2rem",
-                    lg: "4rem",
+                    sm: "2rem",
-                    xl: "5rem",
+                    lg: "4rem",
-                    "2xl": "6rem",
+                    xl: "5rem",
-                },
+                    "2xl": "6rem",
-            },
+                },
-            typography: (theme) => ({
+            },
-                DEFAULT: {
+            typography: (theme) => ({
-                    css: {
+                DEFAULT: {
-                        color: defaultTheme.colors.gray[900],
+                    css: {
-                        a: {
+                        color: defaultTheme.colors.gray[900],
-                            color: defaultTheme.colors.blue[700],
+                        a: {
-                            fontWeight: defaultTheme.fontWeight.normal,
+                            color: defaultTheme.colors.blue[700],
-                            "&:hover": {
+                            fontWeight: defaultTheme.fontWeight.normal,
-                                color: defaultTheme.colors.blue[600],
+                            "&:hover": {
-                            },
+                                color: defaultTheme.colors.blue[600],
-                        },
+                            },
-                        "pre code": {
+                        },
-                            fontWeight: defaultTheme.fontWeight.light,
+                        "pre code": {
-                        },
+                            fontWeight: defaultTheme.fontWeight.light,
-                        code: {
+                        },
-                            color: defaultTheme.colors.blue[900],
+                        code: {
-                            fontWeight: defaultTheme.fontWeight.normal,
+                            color: defaultTheme.colors.blue[900],
-                        },
+                            fontWeight: defaultTheme.fontWeight.normal,
-                        "code::before": {
+                        },
-                            content: " ",
+                        "code::before": {
-                        },
+                            content: " ",
-                        "code::after": {
+                        },
-                            content: " ",
+                        "code::after": {
-                        },
+                            content: " ",
-                        h2: {
+                        },
-                            marginTop: "1em",
+                        h2: {
-                            marginBottom: ".5em"
+                            marginTop: "1em",
-                        }
+                            marginBottom: ".5em"
-                    },
+                        }
-                },
+                    },
-            }),
+                },
-        },
+            }),
-    },
+        },
-    variants: {
+    },
-        extend: {},
+    variants: {
-    },
+        extend: {},
-    plugins: [
+    },
-        require('@tailwindcss/forms'),
+    plugins: [
-        require("@tailwindcss/typography")
+        require('@tailwindcss/forms'),
-    ],
+        require("@tailwindcss/typography")
-};
+    ],
+};

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:tailwind": "tailwind build ./input/tailwind.css  -c ./input/tailwind.config.js  -o ./output/assets/styles.css",
-    "build": "cross-env NODE_ENV=production tailwind build tailwind.css -o ./output/assets/styles.css"
+    "build": "cross-env NODE_ENV=production dotnet run -- -o public"
   },
   "repository": {
     "url": "https://github.com/spectreconsole/spectre.console"