Refresh canonical hub design system

.github/workflows/validate-site.yml

@@ -0,0 +1,58 @@
+name: Validate site
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - name: Validate local assets and SVG accessibility
+        shell: python
+        run: |
+          from html.parser import HTMLParser
+          from pathlib import Path
+          from urllib.parse import urlparse
+          import xml.etree.ElementTree as ET
+
+          root = Path(".")
+
+          class LocalAssetParser(HTMLParser):
+              def handle_starttag(self, tag, attrs):
+                  values = dict(attrs)
+                  for attribute in ("href", "src"):
+                      value = values.get(attribute)
+                      if not value or urlparse(value).scheme or value.startswith(("#", "mailto:")):
+                          continue
+                      path = root / value.split("?", 1)[0].split("#", 1)[0]
+                      if not path.is_file():
+                          raise SystemExit(f"Missing local asset: {value}")
+
+          html = (root / "index.html").read_text(encoding="utf-8")
+          LocalAssetParser().feed(html)
+
+          if "style-src 'self'" not in html or "img-src 'self'" not in html:
+              raise SystemExit("The CSP must restrict styles and images to local assets.")
+
+          for path in sorted((root / "assets").glob("*.svg")):
+              svg = ET.parse(path).getroot()
+              if svg.get("role") != "img":
+                  raise SystemExit(f"{path} is missing role=img")
+              labels = svg.get("aria-labelledby", "").split()
+              ids = {element.get("id") for element in svg.iter() if element.get("id")}
+              if len(labels) != 2 or not set(labels).issubset(ids):
+                  raise SystemExit(f"{path} has an invalid accessible label")
+
+          css = (root / "style.css").read_text(encoding="utf-8")
+          if "transition: all" in css:
+              raise SystemExit("Avoid transition: all.")
+          if "prefers-reduced-motion" not in css or ":focus-visible" not in css:
+              raise SystemExit("Reduced-motion and visible-focus styles are required.")

README.md

@@ -1,12 +1,16 @@
-# vartaxe.github.io
+<p align="center">
+  <img src="assets/brand-mark.svg" alt="vartaxe Windows endpoint automation" width="180" height="180">
+</p>
 
-Root GitHub Pages site for the [ConfigMgr OSD Script Hub](https://vartaxe.github.io/).
-It contains the public landing page formerly hosted by
+# Windows endpoint automation
+
+Canonical GitHub Pages hub for the
+[vartaxe Windows endpoint automation projects](https://vartaxe.github.io/).
+It unifies the public profile and the ConfigMgr OSD landing page formerly hosted by
 [`vartaxe/ConfigMgr-OSD`](https://github.com/vartaxe/ConfigMgr-OSD), while the
 individual script repositories remain the authoritative sources for code,
 documentation, tests, releases, and checksums.
 
-The broader profile and maintained-fork portfolio is at
-[vartaxe.github.io/vartaxe](https://vartaxe.github.io/vartaxe/).
-
-GitHub Pages publishes `index.html` directly from the root of `main`.
+GitHub Pages publishes the dependency-free `index.html`, `style.css`, and local SVG
+artwork directly from `main`. The page supports light and dark color schemes,
+keyboard navigation, reduced motion, safe-area insets, and a restrictive CSP.

index.html

@@ -4,12 +4,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light dark">
-  <meta name="theme-color" content="#155799">
+  <meta name="theme-color" content="#155799" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0d1520" media="(prefers-color-scheme: dark)">
   <meta name="referrer" content="no-referrer">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; style-src 'self'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
   <title>Windows Endpoint Automation | vartaxe</title>
   <meta name="description" content="Safety-focused PowerShell tools for ConfigMgr OSD and Windows endpoint automation.">
   <link rel="canonical" href="https://vartaxe.github.io/">
+  <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -23,36 +25,57 @@
         <a href="https://github.com/vartaxe">GitHub</a>
         <a href="https://github.com/sponsors/vartaxe">Sponsor</a>
       </nav>
-      <p class="eyebrow">Claudio Mendes · <span translate="no">@vartaxe</span></p>
-      <h1>Windows endpoint automation</h1>
-      <p class="tagline">Safety-focused Windows PowerShell 5.1 tools for Configuration Manager operating-system deployment and endpoint management.</p>
+      <div class="hero">
+        <div class="hero-copy">
+          <p class="eyebrow">Claudio Mendes · <span translate="no">@vartaxe</span></p>
+          <h1>Windows endpoint automation</h1>
+          <p class="tagline">Safety-focused Windows PowerShell 5.1 tools for Configuration Manager operating-system deployment and endpoint management.</p>
+          <div class="hero-actions">
+            <a class="button button-primary" href="#scripts">Explore the scripts</a>
+            <a class="button" href="https://github.com/vartaxe">Browse GitHub</a>
+          </div>
+          <ul class="trust-list" aria-label="Project principles">
+            <li>MIT licensed</li>
+            <li>PowerShell 5.1</li>
+            <li>Validation first</li>
+          </ul>
+        </div>
+        <img class="brand-mark" src="assets/brand-mark.svg" alt="Terminal prompt and deployment nodes representing vartaxe automation" width="240" height="240" fetchpriority="high">
+      </div>
     </div>
   </header>
   <main id="main-content" tabindex="-1">
     <h2 id="scripts">ConfigMgr OSD scripts</h2>
     <div class="grid">
       <section class="card" aria-labelledby="ad-title">
+        <img class="card-icon" src="assets/ad-groups.svg" alt="" width="48" height="48" aria-hidden="true">
+        <p class="card-kicker">Active Directory</p>
         <h3 id="ad-title">Add computers to AD groups</h3>
         <p>Add a computer account to Active Directory groups during an OSD task sequence with Kerberos over LDAPS, membership verification, bounded retries, and CMTrace logging.</p>
-        <p><a href="https://github.com/vartaxe/ConfigMgr-OSD-AddComputerToADGroup">Source</a> · <a href="https://vartaxe.github.io/ConfigMgr-OSD-AddComputerToADGroup/">Documentation</a></p>
+        <p class="card-links"><a href="https://vartaxe.github.io/ConfigMgr-OSD-AddComputerToADGroup/">Read the guide</a><a href="https://github.com/vartaxe/ConfigMgr-OSD-AddComputerToADGroup">View source</a></p>
       </section>
       <section class="card" aria-labelledby="logs-title">
+        <img class="card-icon" src="assets/osd-logs.svg" alt="" width="48" height="48" aria-hidden="true">
+        <p class="card-kicker">Diagnostics</p>
         <h3 id="logs-title">Copy OSD logs to a file share</h3>
         <p>Collect and archive deployment logs, then upload the verified ZIP to an SMB share with retries and remote size checks.</p>
-        <p><a href="https://github.com/vartaxe/ConfigMgr-OSD-CopyOSDLogToFileShare">Source</a> · <a href="https://vartaxe.github.io/ConfigMgr-OSD-CopyOSDLogToFileShare/">Documentation</a></p>
+        <p class="card-links"><a href="https://vartaxe.github.io/ConfigMgr-OSD-CopyOSDLogToFileShare/">Read the guide</a><a href="https://github.com/vartaxe/ConfigMgr-OSD-CopyOSDLogToFileShare">View source</a></p>
       </section>
       <section class="card" aria-labelledby="disk-title">
+        <img class="card-icon" src="assets/disk-layout.svg" alt="" width="48" height="48" aria-hidden="true">
+        <p class="card-kicker">WinPE storage</p>
         <h3 id="disk-title">Disk partition layout</h3>
         <p>Create a firmware-appropriate GPT or MBR layout in WinPE with fail-closed target selection and explicit safety checks.</p>
-        <p><strong>Warning:</strong> this irreversibly cleans and repartitions the target disk.</p>
-        <p><a href="https://github.com/vartaxe/ConfigMgr-OSD-DiskPartitionLayout">Source</a> · <a href="https://vartaxe.github.io/ConfigMgr-OSD-DiskPartitionLayout/">Documentation</a></p>
+        <p class="warning"><strong>Warning:</strong> this irreversibly cleans and repartitions the target disk.</p>
+        <p class="card-links"><a href="https://vartaxe.github.io/ConfigMgr-OSD-DiskPartitionLayout/">Read the guide</a><a href="https://github.com/vartaxe/ConfigMgr-OSD-DiskPartitionLayout">View source</a></p>
       </section>
     </div>
     <div class="callout" role="note">
       <strong>Validate before rollout.</strong> Automated checks cover syntax, static analysis, and mocked scenarios. Live ConfigMgr, Active Directory, WinPE, and SMB testing remains environment-specific; use a lab and disposable hardware first.
     </div>
     <h2 id="maintenance">Related maintenance</h2>
-    <div class="card">
+    <div class="card maintenance-card">
+      <img class="card-icon" src="assets/driver-automation.svg" alt="" width="48" height="48" aria-hidden="true">
       <p>Driver and BIOS package automation is maintained in <a href="https://github.com/vartaxe/DriverAutomationTool">Driver Automation Tool</a>, including the consolidated modern management scripts and vendor BIOS apply scripts.</p>
       <p>The former standalone Modern Driver Management and Modern BIOS Management repositories are archived compatibility sources. New maintenance belongs in DAT.</p>
     </div>