From e13ba02fc7e069c7b80161a34b402f4eef1c25ad Mon Sep 17 00:00:00 2001
From: Luke Fretwell <luke@lukefretwell.com>
Date: Thu, 27 Aug 2026 08:03:06 -0700
Subject: [PATCH] Sync scangov.css + details.html + sidenav from components;
 wire optimizedImage shortcode

---
 _includes/details.html | 30 +++++++++++++++++++++++++++++-
 _includes/image.html   |  2 +-
 _includes/sidenav.html |  2 +-
 eleventy.config.js     | 26 +++++++++++++++++++++++++-
 public/css/scangov.css |  4 ++--
 5 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/_includes/details.html b/_includes/details.html
index b706a603..d38563dd 100644
--- a/_includes/details.html
+++ b/_includes/details.html
@@ -30,7 +30,24 @@
      per deployment (managing org, full-scan upsell, request-update link). To
      support another deployment, add a branch here and re-sync - don't fork
      the file.
+
+  4. `showLastUpdated` - set in page front matter for non-profile pages that
+     need a "Last updated" row (e.g. /pulse/). Renders a single-item ul with
+     the same mono/border-bottom styling as the profile list above.
 #}
+{% if showLastUpdated and not profile %}
+<ul class="small list-unstyled text-body-secondary font-monospace mt-2 mb-0">
+    <li>
+        Last scan:
+        <span id="updated">{{ updates }}</span>
+        {% set infoHref = "https://docs.scangov.org/scans/" %}
+        {% set infoLabel = "Last scan" %}
+        {% set infoDescription = "How often ScanGov scans this site." %}
+        {% set infoMatchTextColor = true %}
+        {% include "info-icon.html" %}
+    </li>
+</ul>
+{% endif %}
 {% if profile %}
 <ul class="small list-unstyled text-body-secondary font-monospace">
     {% if not mapPage and not orgPage %}
@@ -40,9 +57,15 @@
         <a href="/org/{{ domain.name | slugify }}/">{{ domain.name }}</a>
     </li>
     {% endif %}
+    {% if domain.status %}
+    <li>
+        Status:
+        <a href="/status/{{ domain.status }}/">{{ domain.status }}</a>
+    </li>
+    {% endif %}
     {% if site.url == 'https://scangov.org' %}
     <li>
-        Pages: 1
+        Pages: 1 (homepage only)
         &middot; <a href="https://scangov.com/plans">Get full site scan</a>
     </li>
     {% elif site.url == 'https://my.scangov.com' %}
@@ -56,6 +79,11 @@
     <li>
         Last scan:
         <span id="updated">{{ updates }}</span>
+        {% set infoHref = "https://docs.scangov.org/scans/" %}
+        {% set infoLabel = "Last scan" %}
+        {% set infoDescription = "How often ScanGov scans this site." %}
+        {% set infoMatchTextColor = true %}
+        {% include "info-icon.html" %}
     </li>
     {% elif site.url == 'https://my.scangov.com' %}
     <li>
diff --git a/_includes/image.html b/_includes/image.html
index 94fc69b5..5692aeff 100644
--- a/_includes/image.html
+++ b/_includes/image.html
@@ -1,6 +1,6 @@
 {% if imgOg %}
   <figure class="mb-5">
-    <img src="/assets/img/posts/{{ imgOg }}" alt="{{ imgAlt }}" type="{{ folder }}" loading="lazy" class="border img-fluid">
+    {% optimizedImage "./public/assets/img/posts/" + imgOg, imgAlt, "border img-fluid" %}
     {% if imgCaption %}
       <figcaption>
         <p class="small mt-3 mb-4 pb-3 border-bottom">
diff --git a/_includes/sidenav.html b/_includes/sidenav.html
index e0ba9c60..00665436 100644
--- a/_includes/sidenav.html
+++ b/_includes/sidenav.html
@@ -1,4 +1,4 @@
-<nav class="d-none d-md-block js-sidenav position-sticky">
+<nav class="d-none d-md-block js-sidenav position-sticky" style="top: 1rem;">
   <ul class="nav flex-column small">
     {% for item in sidenav %}
       {% if item.items %}
diff --git a/eleventy.config.js b/eleventy.config.js
index 4754f3a3..5ccfc24a 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -6,7 +6,7 @@ import {
 import { feedPlugin } from '@11ty/eleventy-plugin-rss'
 import pluginSyntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
 import pluginNavigation from '@11ty/eleventy-navigation'
-import { eleventyImageTransformPlugin } from '@11ty/eleventy-img'
+import Image from '@11ty/eleventy-img'
 import { EleventyRenderPlugin } from '@11ty/eleventy'
 import pluginFilters from './_config/filters.js'
 import { getData } from './scripts/getdata.js';
@@ -72,6 +72,30 @@ export default async function (eleventyConfig) {
     // selector: "h1,h2,h3,h4,h5,h6", // default
   })
 
+  // Responsive, optimized <picture> output (webp + original-format
+  // fallback, multiple widths, explicit width/height to avoid layout
+  // shift) for images referenced via the imgOg frontmatter field —
+  // see _includes/image.html. Source images live in public/assets/img/
+  // posts/ (passthrough-copied as-is too, for OG/social meta tags,
+  // which need one fixed image, not a responsive set).
+  eleventyConfig.addAsyncShortcode('optimizedImage', async function (src, alt, cssClass) {
+    let metadata = await Image(src, {
+      widths: [400, 800, 1200, null],
+      formats: ['webp', null],
+      outputDir: './_site/assets/img/optimized/',
+      urlPath: '/assets/img/optimized/',
+      sharpPngOptions: { compressionLevel: 9 },
+    });
+
+    return Image.generateHTML(metadata, {
+      alt,
+      loading: 'lazy',
+      decoding: 'async',
+      class: cssClass,
+      sizes: '(min-width: 992px) 800px, 100vw',
+    });
+  })
+
   eleventyConfig.addShortcode('currentBuildDate', () => {
     return new Date().toISOString()
   })
diff --git a/public/css/scangov.css b/public/css/scangov.css
index b4d657ec..31ee730c 100644
--- a/public/css/scangov.css
+++ b/public/css/scangov.css
@@ -500,8 +500,8 @@ button:not(.card *) {
     font-family: "JetBrains Mono ExtraBold", monospace !important;
     color: var(--bs-body-color) !important;
     text-decoration: none;
-    margin-left: 0.5rem;
-    padding-left: 0.5rem;
+    margin-left: 1.25rem;
+    padding-left: 1.25rem;
     border-left: 1px solid var(--bs-border-color);
 }