Redesign Scout site with mascot and theme gallery

site/README.md

@@ -1,15 +1,19 @@
-# WinGet Scout website
+# Scout for WinGet website
 
 The website lives in `site/` and is deployed by [Pages](../.github/workflows/pages.yml)
 when site files reach `main`. It uses plain HTML, CSS, JavaScript, and Python's standard
 library. [SkillView](https://github.com/harder/gh-skillview) uses the same build/deploy
-shape, but this site has its own Windows-inspired design.
+shape, but this site has its own warm, window-inspired design and original dog mascot.
 
 Run `python site/build.py` from the repository root to copy published files to
 `site/_build/` and check local links. The Pages workflow runs the same check on PRs.
-The real application captures in `site/media/` were recorded with
-[tuirec](https://github.com/tui-cs/tuirec) in `--mock` mode. They show demo data and do not
-change installed packages.
+The four theme screenshots in `site/media/` were recorded from the v0.2.0
+application with [tuirec](https://github.com/tui-cs/tuirec) in `--mock` mode.
+They show demo data and do not change installed packages. To refresh them, run
+`site/capture-themes.ps1 -AppPath <path-to-wingetscout.exe> -TuirecPath <path-to-tuirec.exe>`
+on Windows. The script removes `NO_COLOR` for its child processes and requests
+true color, so the built-in Sage, Amber, Moss & Olive, and Dusty Rose palettes
+remain distinguishable in captures.
 
 ## Set up wingetscout.com
 

site/app.js

@@ -10,13 +10,22 @@ if (sectionLinks.length && 'IntersectionObserver' in window) {
   document.querySelectorAll('.docs-content section[id]').forEach(section => observer.observe(section));
 }
 
-const tourImage = document.querySelector('[data-tour-image]');
-const tourToggle = document.querySelector('[data-tour-toggle]');
-if (tourImage && tourToggle) {
-  tourToggle.addEventListener('click', () => {
-    const playing = tourToggle.getAttribute('aria-pressed') !== 'true';
-    tourToggle.setAttribute('aria-pressed', String(playing));
-    tourToggle.textContent = playing ? 'Pause tour' : 'Play tour';
-    tourImage.src = playing ? tourImage.dataset.animatedSrc : tourImage.dataset.staticSrc;
-  });
+const themePicker = document.querySelector('[data-theme-picker]');
+if (themePicker) {
+  const image = themePicker.querySelector('[data-theme-image]');
+  const title = themePicker.querySelector('[data-theme-title]');
+  const caption = themePicker.querySelector('[data-theme-caption]');
+  const choices = [...themePicker.querySelectorAll('.theme-choice')];
+
+  choices.forEach(choice => choice.addEventListener('click', () => {
+    choices.forEach(button => {
+      const selected = button === choice;
+      button.setAttribute('aria-pressed', String(selected));
+      button.classList.toggle('is-active', selected);
+    });
+    image.src = choice.dataset.themeSrc;
+    image.alt = choice.dataset.themeAlt;
+    title.textContent = choice.dataset.themeTitle;
+    caption.textContent = choice.dataset.themeCaption;
+  }));
 }

site/build.py

@@ -9,8 +9,9 @@
 OUTPUT = SOURCE / "_build"
 FILES = (
     "index.html", "docs.html", "styles.css", "app.js", "favicon.svg",
-    "CNAME", "robots.txt", "sitemap.xml", "media/scout-discover.png",
-    "media/scout-installed.png", "media/scout-tour.gif",
+    "CNAME", "robots.txt", "sitemap.xml", "media/scout-dog.svg",
+    "media/scout-sage-search.png", "media/scout-amber-installed.png",
+    "media/scout-moss-upgrades.png", "media/scout-rose-search.png",
 )
 
 
@@ -21,7 +22,7 @@ def __init__(self):
 
     def handle_starttag(self, tag, attrs):
         for name, value in attrs:
-            if name in {"href", "src", "data-static-src", "data-animated-src"} and value:
+            if name in {"href", "src", "data-theme-src"} and value:
                 self.values.append(value)
 
 

site/capture-themes.ps1

@@ -0,0 +1,46 @@
+<# Capture the four site screenshots from a Scout build without changing packages. #>
+[CmdletBinding()]
+param(
+  [Parameter(Mandatory)] [string]$AppPath,
+  [string]$TuirecPath = 'tuirec'
+)
+
+$ErrorActionPreference = 'Stop'
+$app = (Resolve-Path -LiteralPath $AppPath).Path.Replace('\', '/')
+$recorder = (Get-Command $TuirecPath -ErrorAction Stop).Source
+$castDirectory = Join-Path $env:TEMP 'wingetscout-theme-casts'
+New-Item -ItemType Directory -Path $castDirectory -Force | Out-Null
+
+$captures = @(
+  @{ Name = 'scout-sage-search'; Theme = 'sage'; Keys = 'wait:500,CursorLeft,`git`,Enter,wait:1200'; Contains = 'Git.Git' },
+  @{ Name = 'scout-amber-installed'; Theme = 'amber'; Keys = 'wait:1200'; Contains = 'Installed (10)' },
+  @{ Name = 'scout-moss-upgrades'; Theme = 'moss'; Keys = 'wait:500,CursorRight,wait:1100'; Contains = 'Upgrades (4' },
+  @{ Name = 'scout-rose-search'; Theme = 'rose'; Keys = 'wait:500,CursorLeft,`visual`,Enter,wait:1100'; Contains = 'Visual Studio Code' }
+)
+
+# Some automation hosts set NO_COLOR and TERM=dumb. Those settings collapse all
+# four RGB palettes into nearly identical 16-color captures.
+$oldNoColor = $env:NO_COLOR
+$oldTerm = $env:TERM
+$oldColorTerm = $env:COLORTERM
+try {
+  $env:NO_COLOR = $null
+  $env:TERM = 'xterm-256color'
+  $env:COLORTERM = 'truecolor'
+
+  foreach ($capture in $captures) {
+    $output = Join-Path $PSScriptRoot "media/$($capture.Name).png"
+    $cast = Join-Path $castDirectory "$($capture.Name).cast"
+    & $recorder snapshot --binary $app --args=--mock "--args=--theme=$($capture.Theme)" `
+      --keystrokes $capture.Keys --startup-delay 1600 --drain 200 `
+      --cols 100 --rows 30 --font-size 17 --output $output `
+      --cast-output $cast --assert-contains $capture.Contains --verbosity quiet
+    if ($LASTEXITCODE -ne 0) { throw "Failed to capture $($capture.Name)" }
+    Write-Host "Captured $output"
+  }
+}
+finally {
+  $env:NO_COLOR = $oldNoColor
+  $env:TERM = $oldTerm
+  $env:COLORTERM = $oldColorTerm
+}