feat: add 3 SEO use case pages with clean URLs, sitemap, and index section

2026-03-02 09:07:57 +01:00 · 2026-03-02 09:07:57 +01:00 · e9ee3a6c2c
commit e9ee3a6c2c
parent 195a656a7d
8 changed files with 729 additions and 2 deletions
--- a/public/use-cases/website-monitoring.html
+++ b/public/use-cases/website-monitoring.html
@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Visual Website Monitoring & Regression Testing with a Screenshot API | SnapAPI</title>
+<meta name="description" content="Use SnapAPI for automated visual website monitoring and regression testing. Take scheduled screenshots to detect layout changes, broken pages, and visual bugs.">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📸</text></svg>">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="canonical" href="https://snapapi.eu/use-cases/website-monitoring">
+<meta property="og:title" content="Visual Website Monitoring & Regression Testing with a Screenshot API">
+<meta property="og:description" content="Automate visual regression testing with scheduled screenshots via SnapAPI.">
+<meta property="og:type" content="article">
+<meta property="og:url" content="https://snapapi.eu/use-cases/website-monitoring">
+<meta property="og:image" content="https://snapapi.eu/og-image.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Visual Website Monitoring & Regression Testing with a Screenshot API">
+<meta name="twitter:description" content="Automate visual regression testing with scheduled screenshots via SnapAPI.">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"Article","headline":"Visual Website Monitoring & Regression Testing with a Screenshot API","description":"Use SnapAPI for automated visual website monitoring and regression testing.","author":{"@type":"Organization","name":"Cloonar Technologies GmbH"},"publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"},"datePublished":"2026-03-02","url":"https://snapapi.eu/use-cases/website-monitoring"}
+</script>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0a0e17;--bg2:#0f1420;--card:#141a28;--card-hover:#1a2235;
+  --border:#1e2a3f;--border-light:#2a3752;
+  --text:#f0f2f7;--text-secondary:#94a3c0;--muted:#6b7a96;
+  --primary:#4f8fff;--primary-light:#6da3ff;--primary-dark:#3a6fd8;--primary-glow:rgba(79,143,255,0.15);
+  --accent:#10b981;--accent-glow:rgba(16,185,129,0.15);
+  --purple:#a78bfa;--orange:#f59e0b;--pink:#ec4899;
+  --gradient:linear-gradient(135deg,#4f8fff 0%,#a78bfa 50%,#ec4899 100%);
+  --radius:12px;--radius-lg:16px;--radius-xl:24px;
+}
+html{scroll-behavior:smooth}
+body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
+a{color:var(--primary-light);text-decoration:none;transition:color .2s}
+a:hover{color:var(--primary)}
+::selection{background:var(--primary);color:#fff}
+.container{max-width:800px;margin:0 auto;padding:0 24px}
+.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:10px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:all .2s;font-family:inherit}
+.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 20px rgba(79,143,255,0.3)}
+.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 28px rgba(79,143,255,0.4);color:#fff}
+.btn-lg{padding:16px 36px;font-size:1.05rem;border-radius:12px}
+nav{position:sticky;top:0;z-index:100;background:rgba(10,14,23,0.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(30,42,63,0.5);padding:0 24px}
+.nav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
+.nav-logo{font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--text)}
+.nav-logo span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
+.nav-links{display:flex;gap:32px;align-items:center}
+.nav-links a{color:var(--muted);font-size:.9rem;font-weight:500;transition:color .2s}
+.nav-links a:hover{color:var(--text)}
+.nav-cta{margin-left:8px}
+.nav-mobile{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
+.article{padding:80px 0 60px}
+.article h1{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:24px}
+.article h2{font-size:1.6rem;font-weight:700;margin:48px 0 16px}
+.article h3{font-size:1.2rem;font-weight:600;margin:32px 0 12px}
+.article p{color:var(--text-secondary);font-size:1rem;line-height:1.8;margin-bottom:16px}
+.article ul,.article ol{color:var(--text-secondary);margin:0 0 16px 24px;line-height:1.8}
+.article li{margin-bottom:8px}
+.code-window{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin:24px 0;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
+.code-titlebar{display:flex;align-items:center;gap:8px;padding:14px 20px;background:rgba(0,0,0,0.2);border-bottom:1px solid var(--border)}
+.code-dot{width:12px;height:12px;border-radius:50%}
+.code-dot:nth-child(1){background:#ff5f57}.code-dot:nth-child(2){background:#ffbd2e}.code-dot:nth-child(3){background:#28c840}
+.code-titlebar span{flex:1;text-align:center;font-size:.8rem;color:var(--muted);font-weight:500}
+.code-body{padding:24px;font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.9;overflow-x:auto;color:var(--text-secondary)}
+.code-body .kw{color:var(--purple)}.code-body .str{color:var(--accent)}.code-body .cmt{color:#475569;font-style:italic}.code-body .fn{color:var(--primary-light)}.code-body .prop{color:var(--orange)}
+.cta-box{background:linear-gradient(135deg,rgba(79,143,255,0.1) 0%,rgba(167,139,250,0.1) 100%);border:1px solid rgba(79,143,255,0.2);border-radius:var(--radius-xl);padding:48px;text-align:center;margin:48px 0}
+.cta-box h2{font-size:1.8rem;font-weight:800;margin-bottom:12px}
+.cta-box p{color:var(--text-secondary);margin-bottom:24px}
+.related{margin:48px 0;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg)}
+.related h3{font-size:1.1rem;font-weight:700;margin-bottom:16px}
+.related a{display:block;padding:8px 0;font-size:.95rem}
+footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(--bg2)}
+.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
+.footer-brand h4{font-size:1.1rem;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
+.footer-brand p{color:var(--muted);font-size:.85rem;line-height:1.6;max-width:280px}
+.footer-col h5{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px}
+.footer-col a{display:block;color:var(--text-secondary);font-size:.88rem;padding:4px 0;transition:color .2s}
+.footer-col a:hover{color:var(--text)}
+.footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
+@media(max-width:640px){
+  .article{padding:40px 0 30px}
+  .article h1{font-size:1.8rem}
+  .nav-links{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:rgba(10,14,23,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 24px;gap:16px;z-index:99}
+  .nav-links.show{display:flex}
+  .nav-mobile{display:block}
+  .footer-grid{grid-template-columns:1fr}
+}
+</style>
+</head>
+<body>
+<nav>
+  <div class="nav-inner">
+    <a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
+    <div class="nav-links">
+      <a href="/#features">Features</a>
+      <a href="/#playground">Try It Free</a>
+      <a href="/#pricing">Pricing</a>
+      <a href="/docs">API Docs</a>
+      <a href="/#pricing" class="btn btn-primary btn-sm nav-cta">Get API Key</a>
+    </div>
+    <button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
+  </div>
+</nav>
+
+<article class="article">
+  <div class="container">
+    <h1>Visual Website Monitoring & Regression Testing</h1>
+
+    <p>CSS changes, dependency updates, or CMS edits can silently break your site's layout. Traditional uptime monitoring checks if a page returns 200 — but it won't tell you if your hero section is now overlapping your navigation bar.</p>
+
+    <p><strong>Visual monitoring</strong> solves this by taking periodic screenshots and comparing them against a known-good baseline. SnapAPI provides the screenshot capture part — you bring the comparison logic or just review the images manually.</p>
+
+    <h2>How It Works</h2>
+
+    <ol>
+      <li><strong>Schedule screenshots</strong> — Use a cron job or CI pipeline to call SnapAPI at regular intervals (daily, hourly, per-deploy).</li>
+      <li><strong>Store the results</strong> — Save screenshots to S3, a database, or your local filesystem with timestamps.</li>
+      <li><strong>Compare</strong> — Use pixel-diff tools like <code>pixelmatch</code> or <code>resemble.js</code> to detect visual changes. Alert when the diff exceeds a threshold.</li>
+    </ol>
+
+    <h2>Code Example</h2>
+
+    <h3>Daily Screenshot Cron Job</h3>
+    <div class="code-window">
+      <div class="code-titlebar"><span class="code-dot"></span><span class="code-dot"></span><span class="code-dot"></span><span>Node.js</span></div>
+      <div class="code-body"><pre><span class="kw">import</span> fs <span class="kw">from</span> <span class="str">'fs'</span>;
+
+<span class="kw">const</span> PAGES = [
+  <span class="str">'https://yoursite.com'</span>,
+  <span class="str">'https://yoursite.com/pricing'</span>,
+  <span class="str">'https://yoursite.com/docs'</span>,
+];
+
+<span class="kw">for</span> (<span class="kw">const</span> url <span class="kw">of</span> PAGES) {
+  <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="str">'https://snapapi.eu/v1/screenshot'</span>, {
+    method: <span class="str">'POST'</span>,
+    headers: {
+      <span class="str">'Content-Type'</span>: <span class="str">'application/json'</span>,
+      <span class="str">'X-API-Key'</span>: process.env.<span class="prop">SNAPAPI_KEY</span>
+    },
+    body: JSON.stringify({
+      url,
+      width: <span class="prop">1440</span>,
+      height: <span class="prop">900</span>,
+      format: <span class="str">'png'</span>,
+      fullPage: <span class="prop">true</span>
+    })
+  });
+
+  <span class="kw">const</span> slug = <span class="kw">new</span> URL(url).pathname.replace(<span class="str">/\//g</span>, <span class="str">'_'</span>) || <span class="str">'home'</span>;
+  <span class="kw">const</span> date = <span class="kw">new</span> Date().toISOString().slice(<span class="prop">0</span>, <span class="prop">10</span>);
+  fs.<span class="fn">writeFileSync</span>(<span class="str">`screenshots/${slug}_${date}.png`</span>,
+    Buffer.from(<span class="kw">await</span> res.<span class="fn">arrayBuffer</span>()));
+}
+
+<span class="cmt">// Run via: node monitor.mjs (cron: 0 6 * * *)</span></pre></div>
+    </div>
+
+    <h3>CI Pipeline Integration</h3>
+    <p>Add visual regression checks to your deployment pipeline. Take a screenshot after each deploy and compare it to the previous version:</p>
+
+    <div class="code-window">
+      <div class="code-titlebar"><span class="code-dot"></span><span class="code-dot"></span><span class="code-dot"></span><span>Bash</span></div>
+      <div class="code-body"><pre><span class="cmt"># In your CI pipeline (GitHub Actions, GitLab CI, etc.)</span>
+curl -X POST https://snapapi.eu/v1/screenshot \
+  -H <span class="str">"Content-Type: application/json"</span> \
+  -H <span class="str">"X-API-Key: $SNAPAPI_KEY"</span> \
+  -d <span class="str">'{"url":"https://staging.yoursite.com","width":1440,"height":900,"format":"png"}'</span> \
+  --output screenshot-after-deploy.png
+
+<span class="cmt"># Compare with baseline using pixelmatch, ImageMagick, etc.</span></pre></div>
+    </div>
+
+    <h2>Use Cases for Visual Monitoring</h2>
+    <ul>
+      <li><strong>Pre/post deploy checks</strong> — Catch CSS regressions before users see them.</li>
+      <li><strong>Third-party widget monitoring</strong> — Detect when embedded widgets (chat, analytics banners) break your layout.</li>
+      <li><strong>Competitor tracking</strong> — Screenshot competitor pages periodically to track pricing or feature changes.</li>
+      <li><strong>Compliance archiving</strong> — Keep dated visual records of your pages for regulatory requirements.</li>
+    </ul>
+
+    <div class="cta-box">
+      <h2>Start Monitoring Visually</h2>
+      <p>Try SnapAPI free in the playground. Set up your first visual monitor in minutes.</p>
+      <a href="/#pricing" class="btn btn-primary btn-lg">Get Your API Key →</a>
+    </div>
+
+    <div class="related">
+      <h3>Related Use Cases</h3>
+      <a href="/use-cases/social-media-previews">Generate OG Images & Social Media Previews →</a>
+      <a href="/use-cases/pdf-reports">Generate Visual Reports & Thumbnails from Web Content →</a>
+    </div>
+  </div>
+</article>
+
+<footer>
+  <div class="footer-grid">
+    <div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>
+    <div class="footer-col"><h5>Product</h5><a href="/#features">Features</a><a href="/#pricing">Pricing</a><a href="/#playground">Playground</a><a href="/docs">API Docs</a></div>
+    <div class="footer-col"><h5>Developers</h5><a href="/docs">Swagger / OpenAPI</a><a href="/health">Status</a></div>
+    <div class="footer-col"><h5>Legal</h5><a href="/impressum.html">Impressum</a><a href="/privacy.html">Privacy Policy</a><a href="/terms.html">Terms of Service</a></div>
+  </div>
+  <div class="footer-bottom">
+    <span>© 2026 Cloonar Technologies GmbH · FN 631089y · ATU81280034</span>
+    <span>Linzer Straße 192/1/2, 1140 Wien, Austria 🇦🇹</span>
+    <span>EU-hosted 🇪🇺 · All data stays in Europe</span>
+  </div>
+</footer>
+</body>
+</html>