spectreconsole · phil-scott-78 · Apr 5, 2026 · Apr 5, 2026
diff --git a/Spectre.Docs/Components/App.razor b/Spectre.Docs/Components/App.razor
@@ -1,12 +1,16 @@
-<!DOCTYPE html>
+@using Microsoft.AspNetCore.WebUtilities
+@inject IWebHostEnvironment WebHostEnvironment
+
+<!DOCTYPE html>
 <html lang="en" class="scroll-smooth">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-
-    <link rel="stylesheet" href="/styles.css" />
-    <script src="/_content/MyLittleContentEngine.UI/scripts.js" defer ></script>
-
+
+    <link rel="stylesheet" href="@GetVersioned("/styles.css")">
+    <script src="@GetVersioned("/_content/MyLittleContentEngine.UI/scripts.js")" defer></script>
+    <script src="@GetVersioned("/_content/MyLittleContentEngine.UI/spa-engine.js")" defer></script>
+
     <script>
         // Dark mode initialization
         if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -15,15 +19,29 @@
             document.documentElement.classList.remove('dark')
         }
     </script>
-    
+
     <HeadOutlet/>
 </head>
 
 <body data-sidebar-open="false" class="bg-white dark:bg-base-900 text-base-900 dark:text-base-100 transition-colors duration-200 dark:scheme-dark data-[sidebar-open=true]:overflow-hidden">
     <Routes/>
-
+
+    <script>
+        document.addEventListener('spa:before-navigate', () => {
+            const overlay = document.getElementById('sidebar-overlay');
+            if (overlay && !overlay.classList.contains('hidden')) {
+                overlay.classList.add('hidden');
+                document.body.setAttribute('data-sidebar-open', 'false');
+            }
+        });
+    </script>
 </body>
 </html>
 
 @code {
+    static readonly string Version = DateTime.Now.Ticks.ToString();
+
+    string GetVersioned(string url) => WebHostEnvironment.IsDevelopment()
+        ? QueryHelpers.AddQueryString(url, "v", DateTime.Now.Ticks.ToString()) // if we are in dev mode, always cache bust
+        : QueryHelpers.AddQueryString(url, "v", Version); // in prod we'll use the static tick that we stored for all pages
 }
diff --git a/Spectre.Docs/Components/Layouts/MainLayout.razor b/Spectre.Docs/Components/Layouts/MainLayout.razor
@@ -38,7 +38,7 @@
             }
 
             <!-- Main Content -->
-            <main class="flex-1 min-w-0 lg:py-8 ">
+            <main data-spa-island="content" data-spa-loading="skeleton" class="flex-1 min-w-0 lg:py-8 ">
                 <div class="bg-white dark:bg-base-900 lg:rounded-lg lg:shadow-sm lg:border lg:border-base-200 lg:dark:border-base-800">
                     <div class="p-6 lg:p-8">
                         @Body

diff --git a/Spectre.Docs/Components/Pages/Blog.razor b/Spectre.Docs/Components/Pages/Blog.razor
@@ -1,4 +1,4 @@
-@page "/blog"
+@page "/blog/"
 @using Spectre.Console
 @layout BlogLayout
 @inject IMarkdownContentService<BlogFrontMatter> BlogService
@@ -63,7 +63,7 @@
                                     }
                                 </div>
                             </div>
-                            <svg class="ml-4 h-5 w-5 text-base-400 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors" 
+                            <svg class="ml-4 h-5 w-5 text-base-400 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors"
                                  viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                             </svg>

diff --git a/Spectre.Docs/Components/Pages/CliIndex.razor b/Spectre.Docs/Components/Pages/CliIndex.razor
@@ -1,4 +1,4 @@
-@page "/cli"
+@page "/cli/"
 @using Spectre.Console
 @inject IMarkdownContentService<SpectreConsoleCliFrontMatter> CliContentServices
 @inject ContentEngineOptions ContentEngineOptions

diff --git a/Spectre.Docs/Components/Pages/ConsoleIndex.razor b/Spectre.Docs/Components/Pages/ConsoleIndex.razor
@@ -1,4 +1,4 @@
-@page "/console"
+@page "/console/"
 @using Spectre.Console
 @inject IMarkdownContentService<SpectreConsoleFrontMatter> ConsoleContentServices
 @inject ContentEngineOptions ContentEngineOptions

diff --git a/Spectre.Docs/Content/_redirects.yml b/Spectre.Docs/Content/_redirects.yml
@@ -45,7 +45,6 @@ redirects:
   /cli/unit-testing: /cli/how-to/testing-command-line-applications
   /cli/migration: /cli/
   /cli/opencli: /cli/
-  /cli: /cli/tutorials/quick-start-your-first-cli-app
 
   # Appendix Section
   /appendix/styles: /console/reference/text-style-reference

diff --git a/Spectre.Docs/Program.cs b/Spectre.Docs/Program.cs
@@ -6,12 +6,14 @@
 using MyLittleContentEngine;
 using MyLittleContentEngine.MonorailCss;
 using MyLittleContentEngine.Services.Content.CodeAnalysis.Configuration;
+using MyLittleContentEngine.Services.Spa;
 using MyLittleContentEngine.UI.Components;
 using Spectre.Docs.Components;
 using Spectre.Docs.Components.Layouts;
 using Spectre.Docs.Components.Reference;
 using Spectre.Docs.Components.Shared;
 using Spectre.Docs.Services;
+using Spectre.Docs.Slots;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -54,6 +56,11 @@
     {
         SolutionPath = "../Spectre.Docs.slnx",
     })
+    .WithFlatFileRedirects() // this will allow links without a trailing slash to redirect to the new URL with a trailing slash
+    .WithSpaNavigation(spa =>
+    {
+        spa.AddIsland<SpectreArticleIslandRenderer>();
+    })
     // this allows us to use blazor components within Markdown.
     // see https://phil-scott-78.github.io/MyLittleContentEngine/guides/markdown-extensions#blazor-within-markdown
     .AddMdazor()
@@ -129,5 +136,6 @@
 // this adds the route for styles.css which is generated dynamically based on the used
 // CSS classes.
 app.UseMonorailCss();
+app.UseSpaNavigation();
 
 await app.RunOrBuildContent(args);
diff --git a/Spectre.Docs/Slots/Components/SpectreArticle.razor b/Spectre.Docs/Slots/Components/SpectreArticle.razor
@@ -0,0 +1,45 @@
+@using MyLittleContentEngine.UI.Components
+
+<div class="bg-white dark:bg-base-900 lg:rounded-lg lg:shadow-sm lg:border lg:border-base-200 lg:dark:border-base-800">
+    <div class="p-6 lg:p-8">
+        <div class="max-w-7xl mx-auto">
+            <header class="mb-8 pb-8 border-b border-base-200 dark:border-base-700">
+                <h1 class="text-3xl lg:text-4xl font-extrabold text-base-900 dark:text-base-100 mb-3 text-pretty">
+                    @Title
+                </h1>
+
+                @if (!string.IsNullOrEmpty(Description))
+                {
+                    <p class="text-lg text-base-600 dark:text-base-400 text-pretty">
+                        @Description
+                    </p>
+                }
+            </header>
+
+            <div class="lg:flex lg:gap-8">
+                <article class="flex-1 min-w-0">
+                    <div class="prose dark:prose-invert max-w-full prose-headings:scroll-m-20">
+                        @((MarkupString)HtmlContent)
+                    </div>
+                </article>
+
+                <aside class="hidden xl:block w-64 shrink-0">
+                    <div class="sticky top-24">
+                        <h3 class="text-sm font-semibold text-base-900 dark:text-base-100 uppercase tracking-wider mb-3">
+                            On this page
+                        </h3>
+                        <div class="text-sm">
+                            <OutlineNavigation ContentSelector="article" />
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Title { get; set; } = "";
+    [Parameter] public string Description { get; set; } = "";
+    [Parameter] public string HtmlContent { get; set; } = "";
+}
diff --git a/Spectre.Docs/Slots/SpectreArticleIslandRenderer.cs b/Spectre.Docs/Slots/SpectreArticleIslandRenderer.cs
@@ -0,0 +1,45 @@
+using MyLittleContentEngine.Services.Content;
+using MyLittleContentEngine.Services.Spa;
+using Spectre.Console;
+
+namespace Spectre.Docs.Slots;
+
+internal class SpectreArticleIslandRenderer(
+    IMarkdownContentService<SpectreConsoleFrontMatter> consoleContentService,
+    IMarkdownContentService<SpectreConsoleCliFrontMatter> cliContentService,
+    ComponentRenderer renderer) : RazorIslandRenderer<Components.SpectreArticle>(renderer)
+{
+    public override string IslandName => "content";
+
+    protected override async Task<IDictionary<string, object?>?> BuildParametersAsync(string url)
+    {
+        // Try console content first, then CLI
+        var consoleResult = await consoleContentService.GetRenderedContentPageByUrlOrDefault(url);
+        if (consoleResult is not null)
+        {
+            return BuildParams(
+                consoleResult.Value.Page.FrontMatter.Title,
+                consoleResult.Value.Page.FrontMatter.Description,
+                consoleResult.Value.HtmlContent);
+        }
+
+        var cliResult = await cliContentService.GetRenderedContentPageByUrlOrDefault(url);
+        if (cliResult is not null)
+        {
+            return BuildParams(
+                cliResult.Value.Page.FrontMatter.Title,
+                cliResult.Value.Page.FrontMatter.Description,
+                cliResult.Value.HtmlContent);
+        }
+
+        return null;
+    }
+
+    private static Dictionary<string, object?> BuildParams(string title, string description, string htmlContent) =>
+        new()
+        {
+            [nameof(Components.SpectreArticle.Title)] = title,
+            [nameof(Components.SpectreArticle.Description)] = description,
+            [nameof(Components.SpectreArticle.HtmlContent)] = htmlContent,
+        };
+}
diff --git a/Spectre.Docs/Spectre.Docs.csproj b/Spectre.Docs/Spectre.Docs.csproj
@@ -16,9 +16,9 @@
     library where if you don't reference it directly they don't include the BuildHost folders. Include for now.
     -->
     <PackageReference Include="Microsoft.CodeAnalysis.Workspaces.MSBuild" Version="5.0.0" />
-    <PackageReference Include="MyLittleContentEngine" Version="0.0.0-alpha.0.277" />
-    <PackageReference Include="MyLittleContentEngine.MonorailCss" Version="0.0.0-alpha.0.277" />
-    <PackageReference Include="MyLittleContentEngine.UI" Version="0.0.0-alpha.0.277" />
+    <PackageReference Include="MyLittleContentEngine" Version="0.0.2-alpha.0.6" />
+    <PackageReference Include="MyLittleContentEngine.MonorailCss" Version="0.0.2-alpha.0.6" />
+    <PackageReference Include="MyLittleContentEngine.UI" Version="0.0.2-alpha.0.6" />
     <PackageReference Include="SixLabors.ImageSharp" Version="3.1.12" />
     <PackageReference Include="Spectre.Console" Version="0.54.1-alpha.0.7" />
     <PackageReference Include="Spectre.Console.Cli" Version="1.0.0-alpha.0.11" />