Landing page: SEO, GA4 with consent, publish robots/sitemap

stuchain · stuchain · commit 439290f4797b · 2026-03-29T00:13:32.000+02:00
- Progressive-enhancement reveal, meta/OG, JSON-LD, intro h2
- Add robots.txt and sitemap.xml; publish_feeds copies them with index
- Google Analytics (gtag), Consent Mode banner, file_download on download CTAs

Made-with: Cursor
diff --git a/gh-pages-root/index.html b/gh-pages-root/index.html
@@ -2,22 +2,66 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <script>document.documentElement.classList.add('js-reveal');</script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Consent Mode defaults (before gtag.js); restored choice from localStorage if any -->
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    (function () {
+      var key = 'cuepoint_ga_consent';
+      var stored = null;
+      try { stored = localStorage.getItem(key); } catch (e) {}
+      gtag('consent', 'default', {
+        ad_storage: 'denied',
+        ad_user_data: 'denied',
+        ad_personalization: 'denied',
+        analytics_storage: 'denied',
+        wait_for_update: 500
+      });
+      if (stored === 'granted') {
+        gtag('consent', 'update', {
+          ad_storage: 'granted',
+          ad_user_data: 'granted',
+          ad_personalization: 'granted',
+          analytics_storage: 'granted'
+        });
+      }
+    })();
+  </script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-4QM1M6Q2ZT"></script>
+  <script>
+    gtag('js', new Date());
+    gtag('config', 'G-4QM1M6Q2ZT');
+  </script>
   <title>CuePoint – Accurate metadata for Rekordbox</title>
   <meta name="description" content="Match Rekordbox tracks to Beatport for key, BPM, label, genre, and release date. Desktop app for Windows and macOS with a full audit trail.">
+  <meta name="robots" content="index, follow, max-image-preview:large">
+  <meta name="theme-color" content="#0d1117">
   <link rel="canonical" href="https://stuchain.github.io/CuePoint/">
   <meta property="og:title" content="CuePoint – Accurate metadata for Rekordbox">
   <meta property="og:description" content="Match Rekordbox tracks to Beatport for key, BPM, label, genre, and release date. Desktop app for Windows and macOS with a full audit trail.">
   <meta property="og:url" content="https://stuchain.github.io/CuePoint/">
   <meta property="og:type" content="website">
+  <meta property="og:site_name" content="CuePoint">
+  <meta property="og:locale" content="en_US">
   <meta property="og:image" content="https://stuchain.github.io/CuePoint/logo.png">
+  <meta property="og:image:width" content="120">
+  <meta property="og:image:height" content="120">
+  <meta property="og:image:alt" content="CuePoint logo">
   <meta name="twitter:card" content="summary">
   <meta name="twitter:title" content="CuePoint – Accurate metadata for Rekordbox">
   <meta name="twitter:description" content="Match Rekordbox tracks to Beatport for key, BPM, label, genre, and release date. Desktop app for Windows and macOS with a full audit trail.">
   <meta name="twitter:image" content="https://stuchain.github.io/CuePoint/logo.png">
   <link rel="icon" href="logo.png" type="image/png">
   <link rel="shortcut icon" href="logo.png" type="image/png">
   <link rel="apple-touch-icon" href="logo.png">
+  <script type="application/ld+json">
+  {"@context":"https://schema.org","@graph":[
+    {"@type":"WebSite","name":"CuePoint","url":"https://stuchain.github.io/CuePoint/","description":"Match Rekordbox tracks to Beatport for key, BPM, label, genre, and release date. Desktop app for Windows and macOS with a full audit trail."},
+    {"@type":"SoftwareApplication","name":"CuePoint","url":"https://stuchain.github.io/CuePoint/","applicationCategory":"DesktopApplication","operatingSystem":"Windows, macOS","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"downloadUrl":"https://github.com/stuchain/CuePoint/releases/latest"}
+  ]}
+  </script>
   <style>
     :root {
       --bg: #0d1117;
@@ -53,10 +97,23 @@
     /* Layout */
     .page { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
     section { padding: 4rem 0; }
-    section.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
-    section.reveal.visible { opacity: 1; transform: translateY(0); }
+    html.js-reveal section.reveal,
+    html.js-reveal footer.reveal {
+      opacity: 0;
+      transform: translateY(24px);
+      transition: opacity 0.6s ease, transform 0.6s ease;
+    }
+    html.js-reveal section.reveal.visible,
+    html.js-reveal footer.reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
     @media (prefers-reduced-motion: reduce) {
-      section.reveal { transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; }
+      html.js-reveal section.reveal,
+      html.js-reveal footer.reveal {
+        transform: translateY(8px);
+        transition: opacity 0.2s ease, transform 0.2s ease;
+      }
     }
 
     /* Hero */
@@ -146,6 +203,7 @@
     }
 
     /* Intro */
+    .intro .section-title { margin-bottom: 1rem; }
     .intro .lead {
       font-size: 1.25rem;
       color: var(--muted);
@@ -327,6 +385,48 @@
       margin: 0 auto;
       line-height: 1.5;
     }
+
+    /* Cookie / analytics consent (Consent Mode + EEA guidance) */
+    .consent-banner {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 9999;
+      background: var(--surface);
+      border-top: 1px solid var(--border);
+      padding: 1rem 1.25rem;
+      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
+      display: none;
+    }
+    .consent-banner.is-visible { display: block; }
+    .consent-inner {
+      max-width: 960px;
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .consent-banner p { margin: 0; font-size: 0.875rem; color: var(--text); flex: 1 1 240px; line-height: 1.5; }
+    .consent-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .consent-actions a {
+      color: var(--link);
+      font-size: 0.8125rem;
+      text-decoration: none;
+      margin-right: 0.25rem;
+    }
+    .consent-actions a:hover { color: var(--link-hover); text-decoration: underline; }
+    .consent-actions .btn { padding: 0.45rem 0.9rem; font-size: 0.8125rem; border: none; cursor: pointer; }
+    .consent-actions .btn-secondary { background: var(--border); color: var(--text); }
+    .consent-actions .btn-secondary:hover { background: #484f58; color: var(--text); }
   </style>
 </head>
 <body>
@@ -343,8 +443,9 @@ <h1>CuePoint</h1>
   </header>
 
   <main>
-    <section class="intro reveal">
+    <section class="intro reveal" aria-labelledby="intro-heading">
       <div class="page">
+        <h2 id="intro-heading" class="section-title">About CuePoint</h2>
         <p class="lead">Match your Rekordbox tracks to Beatport and get key, BPM, label, genre, and release date without manual lookup.</p>
         <p class="sub">Export from Rekordbox → run CuePoint → review or re-import. Full audit trail for every match.</p>
         <p class="tools-line">CuePoint includes <strong>inKey</strong> (Beatport metadata for Rekordbox playlists) and <strong>inCrate</strong> (inventory, charts, new releases, and Beatport playlists from your collection).</p>
@@ -413,6 +514,50 @@ <h2>Download</h2>
     </div>
   </footer>
 
+  <div id="consent-banner" class="consent-banner" role="dialog" aria-labelledby="consent-heading" aria-describedby="consent-desc" hidden>
+    <div class="consent-inner">
+      <p id="consent-desc"><strong id="consent-heading">Analytics</strong> — We use Google Analytics to understand traffic to this page. You can accept measurement cookies or decline; the site works either way.</p>
+      <div class="consent-actions">
+        <a href="https://github.com/stuchain/CuePoint/blob/main/PRIVACY_NOTICE.md" target="_blank" rel="noopener noreferrer">Privacy notice</a>
+        <button type="button" class="btn btn-secondary" id="consent-decline">Decline</button>
+        <button type="button" class="btn" id="consent-accept">Accept</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    (function () {
+      var key = 'cuepoint_ga_consent';
+      var banner = document.getElementById('consent-banner');
+      if (!banner) return;
+      var stored = null;
+      try { stored = localStorage.getItem(key); } catch (e) {}
+      if (stored !== null) return;
+      banner.removeAttribute('hidden');
+      banner.classList.add('is-visible');
+      function hide() {
+        banner.classList.remove('is-visible');
+        banner.setAttribute('hidden', '');
+      }
+      document.getElementById('consent-accept').addEventListener('click', function () {
+        try { localStorage.setItem(key, 'granted'); } catch (e) {}
+        if (typeof gtag === 'function') {
+          gtag('consent', 'update', {
+            ad_storage: 'granted',
+            ad_user_data: 'granted',
+            ad_personalization: 'granted',
+            analytics_storage: 'granted'
+          });
+        }
+        hide();
+      });
+      document.getElementById('consent-decline').addEventListener('click', function () {
+        try { localStorage.setItem(key, 'declined'); } catch (e) {}
+        hide();
+      });
+    })();
+  </script>
+
   <script>
     (function () {
       var LATEST = 'https://github.com/stuchain/CuePoint/releases/latest';
@@ -421,6 +566,19 @@ <h2>Download</h2>
       var statusEl = document.getElementById('dl-status');
       var versionEl = document.getElementById('dl-version');
 
+      function trackDownloadClick(el, fileExtension) {
+        if (typeof gtag !== 'function') return;
+        var href = el.getAttribute('href');
+        if (!href || href === '#') return;
+        gtag('event', 'file_download', {
+          link_url: href,
+          link_text: el.textContent.trim(),
+          file_extension: fileExtension
+        });
+      }
+      winEl.addEventListener('click', function () { trackDownloadClick(winEl, 'exe'); });
+      macEl.addEventListener('click', function () { trackDownloadClick(macEl, 'dmg'); });
+
       function finishLoading() {
         statusEl.classList.add('is-hidden');
         winEl.removeAttribute('aria-disabled');
diff --git a/gh-pages-root/robots.txt b/gh-pages-root/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://stuchain.github.io/CuePoint/sitemap.xml
diff --git a/gh-pages-root/sitemap.xml b/gh-pages-root/sitemap.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://stuchain.github.io/CuePoint/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
diff --git a/scripts/publish_feeds.py b/scripts/publish_feeds.py
@@ -12,7 +12,7 @@
 import subprocess
 import sys
 from pathlib import Path
-from typing import Optional
+from typing import Dict, Optional
 
 
 def run_command(cmd: list, cwd: Path = None) -> tuple:
@@ -89,6 +89,7 @@ def publish_feeds(
     print("Saving generated appcast content before branch checkout...")
     saved_index_content: Optional[str] = None
     saved_logo_bytes: Optional[bytes] = None
+    saved_seo_static: Dict[str, str] = {}
     if index_path:
         index_file = Path(index_path)
         if not index_file.is_absolute():
@@ -100,6 +101,14 @@ def publish_feeds(
             if logo_file.exists():
                 saved_logo_bytes = logo_file.read_bytes()
                 print(f"  Saved logo from: {logo_file.relative_to(repo_root)} ({len(saved_logo_bytes)} bytes)")
+            for static_name in ("robots.txt", "sitemap.xml"):
+                static_path = index_file.parent / static_name
+                if static_path.exists():
+                    saved_seo_static[static_name] = static_path.read_text(encoding="utf-8")
+                    print(
+                        f"  Saved {static_name} from: {static_path.relative_to(repo_root)} "
+                        f"({len(saved_seo_static[static_name])} bytes)"
+                    )
         else:
             print(f"  Warning: Index file not found: {index_path}", file=sys.stderr)
     generated_appcast_content = {}
@@ -226,7 +235,13 @@ def publish_feeds(
         print(f"  Restored logo: {logo_dest.relative_to(repo_root)}")
         run_command(["git", "add", "logo.png"], cwd=repo_root)
         print("  Added logo.png to git")
-    
+    for static_name, static_content in saved_seo_static.items():
+        static_dest = repo_root / static_name
+        static_dest.write_text(static_content, encoding="utf-8")
+        print(f"  Restored {static_name}: {static_dest.relative_to(repo_root)}")
+        run_command(["git", "add", static_name], cwd=repo_root)
+        print(f"  Added {static_name} to git")
+
     # Copy appcast files to repository
     for appcast_file in appcast_files:
         appcast_path = Path(appcast_file)
