euparliamentmonitor 0.9.7 → 0.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "euparliamentmonitor",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "type": "module",
   "description": "European Parliament Intelligence Platform - Monitor political activity with systematic transparency",
   "main": "scripts/index.js",
@@ -70,6 +70,7 @@
     "generate-article:all": "node scripts/aggregator/article-generator.js --all",
     "generate-news-indexes": "node scripts/generators/news-indexes.js",
     "generate-sitemap": "node scripts/generators/sitemap.js",
+    "image:generate": "node scripts/generate-responsive-images.js",
     "optimize-css": "node scripts/optimize-css.js",
     "minify-assets": "node scripts/minify-assets.js",
     "validate-ep-api": "npx tsx src/utils/validate-ep-api.ts",
@@ -173,7 +174,8 @@
     "mermaid": "11.15.0",
     "papaparse": "5.5.3",
     "prettier": "3.8.3",
-    "purgecss": "7.0.2",
+    "purgecss": "8.0.0",
+    "sharp": "^0.34.5",
     "terser": "^5.47.1",
     "ts-api-utils": "2.5.0",
     "tsx": "4.21.0",

package/scripts/aggregator/article-html.js

@@ -23,7 +23,7 @@ import { buildHeadFreshnessTags } from '../constants/build-info-meta.js';
 import { ALL_LANGUAGES, LANGUAGE_NAMES, LANGUAGE_FLAGS, PAGE_TITLES, SKIP_LINK_TEXTS, TOC_ARIA_LABELS, ARTICLE_TYPE_LABELS, BACK_TO_NEWS_LABELS, ARTICLE_NAV_LABELS, VIEW_SOURCE_MARKDOWN_LABELS, ARTICLE_TYPE_ICONS, FOOTER_SITEMAP_LABELS, FOOTER_POLITICAL_INTELLIGENCE_LABELS, TRADECRAFT_HEADING_LABELS, TRADECRAFT_INTRO_LABELS, TRADECRAFT_METHODOLOGIES_LABELS, TRADECRAFT_TEMPLATES_LABELS, ANALYSIS_INDEX_HEADING_LABELS, ANALYSIS_INDEX_INTRO_LABELS, ANALYSIS_INDEX_COL_SECTION_LABELS, ANALYSIS_INDEX_COL_ARTIFACT_LABELS, ANALYSIS_INDEX_COL_PATH_LABELS, KEY_TAKEAWAYS_HEADING_LABELS, SUPPLEMENTARY_HEADING_LABELS, SECTION_TITLE_LABELS, getLocalizedString, getTextDirection, } from '../constants/languages.js';
 import { ArticleCategory } from '../types/index.js';
 import { escapeHTML } from '../utils/file-utils.js';
-import { buildSiteFooter, buildSiteHeader, buildPageBanner, } from '../templates/section-builders.js';
+import { buildResponsiveIconLinks, buildResponsiveSocialImageMeta, buildSiteFooter, buildSiteHeader, buildPageBanner, } from '../templates/section-builders.js';
 import { READER_GUIDE_SECTION_ID } from './reader-guide-constants.js';
 import { READER_GUIDE_TITLE_LABELS, getReaderGuideSectionIcon, } from './reader-intelligence-guide.js';
 import { TRADECRAFT_SECTION_ID, MANIFEST_SECTION_ID, SUPPLEMENTARY_SECTION_ID, } from './artifact-order.js';
@@ -888,7 +888,7 @@ export function wrapArticleHtml(options) {
         dateModified: options.date,
         inLanguage: safeLang,
         url: canonicalUrl,
-        image: `${BASE_URL}/images/og-image.jpg`,
+        image: `${BASE_URL}/images/og-image-1200.jpg`,
         author: { '@type': 'Organization', name: PUBLISHER_NAME, url: 'https://hack23.com' },
         publisher: {
             '@type': 'Organization',
@@ -969,18 +969,11 @@ ${hreflangLinks}
   <meta property="og:url" content="${canonicalUrl}">
   <meta property="og:site_name" content="EU Parliament Monitor">
   <meta property="og:locale" content="${safeLang}">
-  <meta property="og:image" content="${BASE_URL}/images/og-image.jpg">
-  <meta property="og:image:alt" content="${escapeHTML(options.title)} — EU Parliament Monitor">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
+${buildResponsiveSocialImageMeta(`${options.title} — EU Parliament Monitor`)}
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="${escapeHTML(options.title)}">
   <meta name="twitter:description" content="${escapeHTML(options.description)}">
-  <meta name="twitter:image" content="${BASE_URL}/images/og-image.jpg">
-  <link rel="icon" type="image/x-icon" href="../favicon.ico">
-  <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
+${buildResponsiveIconLinks('../')}
   <link rel="manifest" href="../site.webmanifest">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#003399" media="(prefers-color-scheme: light)">

package/scripts/constants/config.d.ts

@@ -82,7 +82,12 @@ export declare const BUILD_SHORT: string;
 /**
  * ISO 8601 timestamp for when this build was produced. Precedence:
  *   1. `process.env.BUILD_TIME` (CI sets this in the workflow)
- *   2. `new Date().toISOString()` fallback
+ *   2. Commit timestamp of {@link BUILD_ID} (`git log -1 --format=%cI`) —
+ *      deterministic for a given commit, so workflow_dispatch re-runs of the
+ *      same SHA produce a byte-identical `build-info.json` and `sw.js` and
+ *      `aws s3 sync` correctly skips them as unchanged.
+ *   3. `new Date().toISOString()` fallback (only hits when both env and git
+ *      are unavailable, e.g. tarball builds outside a git checkout).
  */
 export declare const BUILD_TIME: string;
 /**

package/scripts/constants/config.js

@@ -207,12 +207,29 @@ export const BUILD_SHORT = BUILD_ID.slice(0, 7);
 /**
  * ISO 8601 timestamp for when this build was produced. Precedence:
  *   1. `process.env.BUILD_TIME` (CI sets this in the workflow)
- *   2. `new Date().toISOString()` fallback
+ *   2. Commit timestamp of {@link BUILD_ID} (`git log -1 --format=%cI`) —
+ *      deterministic for a given commit, so workflow_dispatch re-runs of the
+ *      same SHA produce a byte-identical `build-info.json` and `sw.js` and
+ *      `aws s3 sync` correctly skips them as unchanged.
+ *   3. `new Date().toISOString()` fallback (only hits when both env and git
+ *      are unavailable, e.g. tarball builds outside a git checkout).
  */
 export const BUILD_TIME = (() => {
     const fromEnv = (process.env.BUILD_TIME ?? '').trim();
     if (fromEnv)
         return fromEnv;
+    try {
+        const fromGit = execSync('git log -1 --format=%cI', {
+            encoding: 'utf-8',
+            stdio: ['ignore', 'pipe', 'ignore'],
+            cwd: PROJECT_ROOT,
+        }).trim();
+        if (fromGit)
+            return fromGit;
+    }
+    catch {
+        /* git unavailable or not a repo — fall through to wall-clock fallback */
+    }
     return new Date().toISOString();
 })();
 /**

package/scripts/copy-vendor.js

@@ -30,7 +30,17 @@
  *     skip it; we want the deploy to succeed without diagrams rather than fail.
  */
 
-import { copyFileSync, cpSync, existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
+import {
+  copyFileSync,
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  statSync,
+  writeFileSync,
+} from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
 
@@ -42,12 +52,55 @@ function ensureDir(dir) {
   mkdirSync(dir, { recursive: true });
 }
 
+/**
+ * Copy `src` → `dst` only when their bytes differ. Returns `true` when an
+ * actual copy happened, `false` when the destination already had identical
+ * content and was left untouched (mtime preserved). This keeps
+ * `aws s3 sync` (which compares size + mtime) from re-uploading vendor
+ * bundles that the prebuild step regenerated identically.
+ */
+function copyFileIfChanged(src, dst) {
+  if (existsSync(dst)) {
+    try {
+      const srcStat = statSync(src);
+      const dstStat = statSync(dst);
+      if (srcStat.size === dstStat.size) {
+        const srcBuf = readFileSync(src);
+        const dstBuf = readFileSync(dst);
+        if (srcBuf.equals(dstBuf)) {
+          return false;
+        }
+      }
+    } catch {
+      // Fall through to copy — read failures must not block deploy.
+    }
+  }
+  copyFileSync(src, dst);
+  return true;
+}
+
+function writeIfChanged(dst, content) {
+  const desired = Buffer.isBuffer(content) ? content : Buffer.from(content, 'utf8');
+  if (existsSync(dst)) {
+    try {
+      const existing = readFileSync(dst);
+      if (existing.equals(desired)) {
+        return false;
+      }
+    } catch {
+      // Fall through to overwrite.
+    }
+  }
+  writeFileSync(dst, desired);
+  return true;
+}
+
 function writeLicense(targetPath, copyrightText, licenseId) {
   // REUSE-compliant sidecar — see REUSE.toml for path-level annotations.
-  writeFileSync(
+  // Idempotent: don't touch the sidecar's mtime when content is unchanged.
+  writeIfChanged(
     `${targetPath}.license`,
     `SPDX-FileCopyrightText: ${copyrightText}\nSPDX-License-Identifier: ${licenseId}\n`,
-    'utf8',
   );
 }
 
@@ -59,9 +112,9 @@ function copyOrFail(label, srcRel, dstRel, license) {
     process.exit(1);
   }
   ensureDir(path.dirname(dst));
-  copyFileSync(src, dst);
+  const wrote = copyFileIfChanged(src, dst);
   writeLicense(dst, license.copyright, license.spdx);
-  process.stdout.write(`  ✓ ${dstRel}\n`);
+  process.stdout.write(`  ${wrote ? '✓' : '·'} ${dstRel}${wrote ? '' : ' (unchanged)'}\n`);
 }
 
 function copyMermaid() {
@@ -73,44 +126,113 @@ function copyMermaid() {
     );
     return;
   }
-  // Idempotency: wipe the existing mermaid tree before copying so stale
-  // chunks from a previous mermaid version (or a previous filter set) cannot
-  // leak into the deployed bundle. cpSync({force:true}) only overwrites
-  // matching paths; it does not remove orphans.
-  if (existsSync(target)) {
-    rmSync(target, { recursive: true, force: true });
-  }
   ensureDir(target);
 
-  // Copy the minified ESM entry plus its chunk directory. Skip the dev /
-  // unminified flavours (`mermaid.esm.mjs`, `mermaid.core.mjs`,
-  // `mermaid.js`, etc.) AND skip sourcemaps to keep the deployed payload
-  // small (saves ~6 MB and 60+ HTTP requests).
+  // Per-file idempotency: walk the source tree and only copy files whose
+  // bytes differ from what's already in `js/vendor/mermaid/`. Replaces the
+  // earlier `rmSync` + `cpSync` approach which always touched every chunk's
+  // mtime — `aws s3 sync` (size+mtime by default) then re-uploaded the
+  // entire mermaid bundle on every deploy even though the bundle is byte-
+  // identical until the pinned mermaid version in package.json changes.
+  //
+  // Filename contract preserved exactly: entry stays at
+  // `js/vendor/mermaid/mermaid.esm.min.mjs` and chunks stay at
+  // `js/vendor/mermaid/chunks/mermaid.esm.min/*.mjs` so every existing
+  // `<script type="module" src="../js/vendor/mermaid/mermaid.esm.min.mjs">`
+  // and dynamic `import()` from the entry continues to resolve.
+
+  // Build the set of source files we want to ship (filter mirrors the
+  // previous cpSync filter exactly).
   const wantedTopLevel = new Set(['mermaid.esm.min.mjs']);
+  const wantedFiles = []; // { src, rel } — `rel` is relative to mermaidDist
 
-  cpSync(mermaidDist, target, {
-    recursive: true,
-    force: true,
-    filter: (src) => {
-      const rel = path.relative(mermaidDist, src);
-      if (rel === '') return true; // root dist dir
-      // Skip sourcemaps — we deploy minified-only.
-      if (src.endsWith('.map')) return false;
-      const segments = rel.split(path.sep);
-      const top = segments[0];
-      // Always allow the chunks directory tree we need.
-      if (top === 'chunks') {
-        if (segments.length === 1) return true;
-        const flavour = segments[1];
-        return flavour === 'mermaid.esm.min';
+  function shouldShip(rel) {
+    if (rel.endsWith('.map')) return false;
+    const segments = rel.split(path.sep);
+    const top = segments[0];
+    if (top === 'chunks') {
+      if (segments.length === 1) return false; // directory itself, not a file
+      const flavour = segments[1];
+      return flavour === 'mermaid.esm.min';
+    }
+    if (segments.length === 1) {
+      return wantedTopLevel.has(top);
+    }
+    return false;
+  }
+
+  function walkSource(dir) {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      const rel = path.relative(mermaidDist, full);
+      if (entry.isDirectory()) {
+        walkSource(full);
+      } else if (entry.isFile() && shouldShip(rel)) {
+        wantedFiles.push({ src: full, rel });
       }
-      // Top-level: only allow the minified ESM entry.
-      if (segments.length === 1) {
-        return wantedTopLevel.has(top);
+    }
+  }
+  walkSource(mermaidDist);
+
+  // Copy only-if-changed.
+  let copied = 0;
+  let unchanged = 0;
+  for (const { src, rel } of wantedFiles) {
+    const dst = path.join(target, rel);
+    ensureDir(path.dirname(dst));
+    if (copyFileIfChanged(src, dst)) {
+      copied++;
+    } else {
+      unchanged++;
+    }
+  }
+
+  // Remove orphaned files in the destination tree that no longer have a
+  // matching wanted source — this preserves the "no stale chunks from a
+  // previous mermaid version" guarantee that the old `rmSync` provided,
+  // without touching any current chunk's mtime.
+  const wantedDstSet = new Set(
+    wantedFiles.map(({ rel }) => path.join(target, rel)),
+  );
+  // Allow our REUSE sidecar files alongside their primary file.
+  function isAllowedSidecar(absPath) {
+    if (!absPath.endsWith('.license')) return false;
+    const primary = absPath.slice(0, -'.license'.length);
+    return wantedDstSet.has(primary);
+  }
+  // Also allow the chunks-dir flavour-level license sidecar we drop below.
+  const flavourLicensePath = path.join(
+    target,
+    'chunks',
+    'mermaid.esm.min.license',
+  );
+
+  function pruneOrphans(dir) {
+    if (!existsSync(dir)) return;
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        pruneOrphans(full);
+        // Remove now-empty directories so a flavour rename leaves no shell.
+        try {
+          if (readdirSync(full).length === 0) {
+            rmSync(full, { recursive: true, force: true });
+          }
+        } catch {
+          // best-effort
+        }
+      } else if (entry.isFile()) {
+        if (
+          !wantedDstSet.has(full) &&
+          !isAllowedSidecar(full) &&
+          full !== flavourLicensePath
+        ) {
+          rmSync(full, { force: true });
+        }
       }
-      return false;
-    },
-  });
+    }
+  }
+  pruneOrphans(target);
 
   // REUSE sidecar for the entry file + flavour directory.
   const entry = path.join(target, 'mermaid.esm.min.mjs');
@@ -121,13 +243,14 @@ function copyMermaid() {
   // generated tree without us having to enumerate every chunk by name.
   const chunksDir = path.join(target, 'chunks', 'mermaid.esm.min');
   if (existsSync(chunksDir)) {
-    writeFileSync(
-      path.join(target, 'chunks', 'mermaid.esm.min.license'),
+    writeIfChanged(
+      flavourLicensePath,
       'SPDX-FileCopyrightText: 2014-2026 Mermaid contributors\nSPDX-License-Identifier: MIT\n',
-      'utf8',
     );
   }
-  process.stdout.write(`  ✓ mermaid/ (entry + ${countMjs(target)} mjs chunks)\n`);
+  process.stdout.write(
+    `  ✓ mermaid/ (${copied} copied, ${unchanged} unchanged; ${countMjs(target)} total mjs chunks)\n`,
+  );
 }
 
 function countMjs(dir) {

package/scripts/generate-responsive-images.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+
+// SPDX-FileCopyrightText: 2024-2026 Hack23 AB
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Generate responsive image variants for the static site.
+ *
+ * Source assets remain the canonical artwork; this script derives optimized
+ * AVIF/WebP/JPEG renditions used by the HTML `srcset` markup and deploy
+ * workflow. It is intentionally deterministic so deploys can regenerate
+ * variants before upload and local contributors can refresh them after artwork
+ * changes with `npm run image:generate`.
+ */
+
+import { mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import sharp from 'sharp';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const repoRoot = path.resolve(__dirname, '..');
+
+// Quality targets keep banner/social images below the 500 KB page-image budget
+// while preserving sharp text and logo edges: AVIF 55/WebP 78 are visually close
+// to mozjpeg 82 for this artwork, with materially smaller transfer sizes.
+const jpegOptions = { quality: 82, mozjpeg: true };
+const webpOptions = { quality: 78, effort: 6 };
+const avifOptions = { quality: 55, effort: 7 };
+
+const assets = [
+  {
+    source: 'images/banner.png',
+    basename: 'banner',
+    aspectRatio: 3 / 1,
+    widths: [320, 480, 768, 1200],
+    formats: ['avif', 'webp', 'jpg'],
+  },
+  {
+    source: 'images/og-image.png',
+    basename: 'og-image',
+    aspectRatio: 1200 / 630,
+    widths: [600, 1200],
+    formats: ['avif', 'webp', 'jpg'],
+  },
+  {
+    source: 'images/twitter-card.png',
+    basename: 'twitter-card',
+    aspectRatio: 2 / 1,
+    widths: [600, 1200],
+    formats: ['avif', 'webp', 'jpg'],
+  },
+  {
+    source: 'images/logo-full.png',
+    basename: 'logo-full',
+    aspectRatio: 3 / 2,
+    widths: [384, 768, 1536],
+    formats: ['avif', 'webp'],
+  },
+];
+
+function outputPathFor(asset, width, format) {
+  const extension = format === 'jpg' ? 'jpg' : format;
+  return path.join(repoRoot, 'images', `${asset.basename}-${width}.${extension}`);
+}
+
+function applyFormat(pipeline, format) {
+  if (format === 'avif') {
+    return pipeline.avif(avifOptions);
+  }
+
+  if (format === 'webp') {
+    return pipeline.webp(webpOptions);
+  }
+
+  return pipeline.jpeg(jpegOptions);
+}
+
+async function generateAsset(asset) {
+  const sourcePath = path.join(repoRoot, asset.source);
+  for (const width of asset.widths) {
+    const height = Math.round(width / asset.aspectRatio);
+    for (const format of asset.formats) {
+      const target = outputPathFor(asset, width, format);
+      const pipeline = sharp(sourcePath)
+        .rotate()
+        .resize({
+          width,
+          height,
+          fit: 'cover',
+          position: 'centre',
+          withoutEnlargement: true,
+        });
+
+      await applyFormat(pipeline, format).toFile(target);
+      console.log(`Generated ${path.relative(repoRoot, target)} (${width}x${height})`);
+    }
+  }
+}
+
+await mkdir(path.join(repoRoot, 'images'), { recursive: true });
+
+for (const asset of assets) {
+  await generateAsset(asset);
+}

package/scripts/generators/build-info.js

@@ -36,6 +36,7 @@ import {
   BUILD_TIME,
   RELEASE_TAG,
 } from '../constants/config.js';
+import { writeFileIfChanged } from '../utils/file-utils.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -51,8 +52,13 @@ function main() {
   };
 
   const outPath = path.join(PROJECT_ROOT, 'build-info.json');
-  fs.writeFileSync(outPath, JSON.stringify(payload, null, 2) + '\n', 'utf-8');
-  console.log(`✅ Wrote build-info.json (buildShort=${BUILD_SHORT}, appVersion=${APP_VERSION})`);
+  // build-info.json content is BUILD_ID-keyed so it changes per commit by
+  // design; using writeFileIfChanged still pays off on workflow_dispatch
+  // re-runs of the same SHA — same BUILD_ID, same payload, no mtime drift.
+  const wrote = writeFileIfChanged(outPath, JSON.stringify(payload, null, 2) + '\n');
+  console.log(
+    `${wrote ? '✅' : '·'} ${wrote ? 'Wrote' : 'Unchanged'} build-info.json (buildShort=${BUILD_SHORT}, appVersion=${APP_VERSION})`,
+  );
 
   // Render the service-worker from its template — substitutes the build id
   // into `CACHE_VERSION` so old caches are evicted on every deploy.
@@ -63,8 +69,10 @@ function main() {
     const rendered = tpl
       .replace(/__BUILD_ID__/g, BUILD_ID)
       .replace(/__BUILD_SHORT__/g, BUILD_SHORT);
-    fs.writeFileSync(swPath, rendered, 'utf-8');
-    console.log(`✅ Rendered sw.js from template (CACHE_VERSION=${BUILD_SHORT})`);
+    const swWrote = writeFileIfChanged(swPath, rendered);
+    console.log(
+      `${swWrote ? '✅' : '·'} ${swWrote ? 'Rendered' : 'Unchanged'} sw.js from template (CACHE_VERSION=${BUILD_SHORT})`,
+    );
   } else {
     console.warn(`⚠️  sw.js.template not found at ${tplPath} — skipping sw.js render`);
   }

package/scripts/generators/news-indexes.js

@@ -14,7 +14,7 @@ import { PROJECT_ROOT, APP_VERSION, BUILD_SHORT, NEWS_DIR, BASE_URL } from '../c
 import { getNewsIndexSeo } from './seo-copy.js';
 import { buildHeadFreshnessTags } from '../constants/build-info-meta.js';
 import { ALL_LANGUAGES, LANGUAGE_NAMES, LANGUAGE_FLAGS, PAGE_TITLES, PAGE_DESCRIPTIONS, SECTION_HEADINGS, NO_ARTICLES_MESSAGES, SKIP_LINK_TEXTS, AI_SECTION_CONTENT, FILTER_LABELS, ARTICLE_TYPE_LABELS, HEADER_SUBTITLE_LABELS, getLocalizedString, getTextDirection, } from '../constants/languages.js';
-import { buildSiteFooter, buildSiteHeader } from '../templates/section-builders.js';
+import { buildResponsiveBannerPicture, buildResponsiveIconLinks, buildResponsiveSocialImageMeta, buildSiteFooter, buildSiteHeader, } from '../templates/section-builders.js';
 import { getNewsArticles, groupArticlesByLanguage, formatSlug, parseArticleFilename, extractArticleMeta, escapeHTML, atomicWrite, } from '../utils/file-utils.js';
 import { writeMetadataDatabase } from '../utils/news-metadata.js';
 import { detectCategory } from '../utils/article-category.js';
@@ -400,7 +400,6 @@ export function generateIndexHTML(lang, articles, metaMap = new Map()) {
         : '';
     const seo = getNewsIndexSeo(lang);
     const canonicalUrl = `${BASE_URL}/${selfHref}`;
-    const ogImage = `${BASE_URL}/images/og-image.jpg`;
     const websiteJsonLd = JSON.stringify({
         '@context': SCHEMA_ORG,
         '@type': 'WebSite',
@@ -511,21 +510,13 @@ export function generateIndexHTML(lang, articles, metaMap = new Map()) {
   <meta property="og:url" content="${canonicalUrl}">
   <meta property="og:site_name" content="EU Parliament Monitor">
   <meta property="og:locale" content="${lang}">
-  <meta property="og:image" content="${ogImage}">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
-  <meta property="og:image:alt" content="${escapeHTML(seo.ogImageAlt)}">
+${buildResponsiveSocialImageMeta(seo.ogImageAlt)}
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="${heroTitle}">
   <meta name="twitter:description" content="${description}">
-  <meta name="twitter:image" content="${ogImage}">
-  <meta name="twitter:image:alt" content="${escapeHTML(seo.ogImageAlt)}">
   ${buildHreflangTags()}
   <!-- Favicons -->
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+${buildResponsiveIconLinks('')}
   <link rel="manifest" href="site.webmanifest">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#003399" media="(prefers-color-scheme: light)">
@@ -552,10 +543,13 @@ ${buildHeadFreshnessTags('')}
         <h1 class="hero__title">${heroTitle}</h1>
         <p class="hero__description">${description}</p>
       </div>
-      <picture class="hero__banner">
-        <source srcset="images/banner.webp" type="image/webp">
-        <img src="images/banner.jpg" alt="EU Parliament Monitor — AI-Disrupted Parliamentary Intelligence" class="hero__banner-img" width="1200" height="400" loading="eager">
-      </picture>
+      ${buildResponsiveBannerPicture({
+        pathPrefix: '',
+        pictureClass: 'hero__banner',
+        imageClass: 'hero__banner-img',
+        alt: 'EU Parliament Monitor — AI-Disrupted Parliamentary Intelligence',
+        sizes: '100vw',
+    })}
     </div>
   </section>
 

package/scripts/generators/political-intelligence/html.js

@@ -16,7 +16,7 @@ import { BASE_URL, BUILD_SHORT, THEME_TOGGLE_SCRIPT } from '../../constants/conf
 import { buildHeadFreshnessTags } from '../../constants/build-info-meta.js';
 import { ALL_LANGUAGES, LANGUAGE_FLAGS, LANGUAGE_NAMES, PAGE_TITLES, SKIP_LINK_TEXTS, getLocalizedString, getTextDirection, } from '../../constants/languages.js';
 import { FOOTER_SITEMAP_LABELS } from '../../constants/language-ui.js';
-import { buildSiteFooter, buildSiteHeader, buildPageBanner, } from '../../templates/section-builders.js';
+import { buildResponsiveIconLinks, buildResponsiveSocialImageMeta, buildSiteFooter, buildSiteHeader, buildPageBanner, } from '../../templates/section-builders.js';
 import { escapeHTML } from '../../utils/file-utils.js';
 import { blobUrl, treeUrl } from '../../aggregator/infra/github-urls.js';
 import { getCuratedDescription, getCuratedTitle, getRunTypeInfo, getArtifactInfo, } from '../political-intelligence-descriptions.js';
@@ -250,7 +250,6 @@ export function generatePoliticalIntelligenceHTML(lang, data) {
         ? `      <p class="pi-source-note" role="note">${escapeHTML(copy.sourceInEnglishNote)}</p>`
         : '';
     const seo = getPoliticalIntelligenceSeo(safeLang);
-    const ogImage = `${BASE_URL}/images/og-image.jpg`;
     const publisher = {
         '@type': 'Organization',
         '@id': `${BASE_URL}/#organization`,
@@ -379,20 +378,12 @@ ${hreflangLinks}
   <meta property="og:url" content="${canonicalUrl}">
   <meta property="og:site_name" content="EU Parliament Monitor">
   <meta property="og:locale" content="${safeLang}">
-  <meta property="og:image" content="${ogImage}">
-  <meta property="og:image:alt" content="${escapeHTML(seo.ogImageAlt)}">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
+${buildResponsiveSocialImageMeta(seo.ogImageAlt)}
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="${escapeHTML(copy.title)}">
   <meta name="twitter:description" content="${escapeHTML(description)}">
-  <meta name="twitter:image" content="${ogImage}">
-  <meta name="twitter:image:alt" content="${escapeHTML(seo.ogImageAlt)}">
   <!-- Favicons -->
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+${buildResponsiveIconLinks('')}
   <link rel="manifest" href="site.webmanifest">
   <meta name="theme-color" content="#003399">
   <link rel="stylesheet" href="styles.css?v=${BUILD_SHORT}">

package/scripts/generators/sitemap/html.js

@@ -26,7 +26,7 @@ import { ALL_LANGUAGES, LANGUAGE_NAMES, LANGUAGE_FLAGS, PAGE_TITLES, PAGE_DESCRI
 import { escapeHTML } from '../../utils/file-utils.js';
 import { detectCategory } from '../../utils/article-category.js';
 import { ARTICLE_TYPE_LABELS, FOOTER_POLITICAL_INTELLIGENCE_LABELS, } from '../../constants/language-ui.js';
-import { buildSiteFooter, buildSiteHeader, buildPageBanner, } from '../../templates/section-builders.js';
+import { buildResponsiveIconLinks, buildResponsiveSocialImageMeta, buildSiteFooter, buildSiteHeader, buildPageBanner, } from '../../templates/section-builders.js';
 import { getPoliticalIntelligenceFilename } from '../political-intelligence.js';
 import { SITEMAP_TITLES, SITEMAP_SECTIONS, DOCS_LABELS, CATEGORY_ORDER, DEFAULT_SITEMAP_TITLE, getSitemapCopy, } from './copy.js';
 /**
@@ -178,7 +178,6 @@ ${items}
       </section>`
         : '';
     const seo = getSitemapSeo(lang);
-    const ogImage = `${BASE_URL}/images/og-image.jpg`;
     const jsonLd = {
         '@context': SCHEMA_ORG,
         '@type': 'CollectionPage',
@@ -287,20 +286,12 @@ ${hreflangLinks}
   <meta property="og:url" content="${canonicalUrl}">
   <meta property="og:site_name" content="EU Parliament Monitor">
   <meta property="og:locale" content="${lang}">
-  <meta property="og:image" content="${ogImage}">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
-  <meta property="og:image:alt" content="${escapeHTML(seo.ogImageAlt)}">
+${buildResponsiveSocialImageMeta(seo.ogImageAlt)}
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="${escapeHTML(sitemapTitle)}">
   <meta name="twitter:description" content="${escapeHTML(description)}">
-  <meta name="twitter:image" content="${ogImage}">
-  <meta name="twitter:image:alt" content="${escapeHTML(seo.ogImageAlt)}">
   <!-- Favicons -->
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+${buildResponsiveIconLinks('')}
   <link rel="manifest" href="site.webmanifest">
   <meta name="theme-color" content="#003399">
   <link rel="stylesheet" href="styles.css?v=${BUILD_SHORT}">