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/pdf-reports.html
+++ b/public/use-cases/pdf-reports.html
@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Generate Visual Reports & Thumbnails from Web Content | SnapAPI</title>
+<meta name="description" content="Use SnapAPI to generate website thumbnails, link preview images, and visual reports from any URL. Create web page previews for dashboards, directories, and content platforms.">
+<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/pdf-reports">
+<meta property="og:title" content="Generate Visual Reports & Thumbnails from Web Content">
+<meta property="og:description" content="Create website thumbnails and visual reports from any URL with SnapAPI's screenshot API.">
+<meta property="og:type" content="article">
+<meta property="og:url" content="https://snapapi.eu/use-cases/pdf-reports">
+<meta property="og:image" content="https://snapapi.eu/og-image.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Generate Visual Reports & Thumbnails from Web Content">
+<meta name="twitter:description" content="Create website thumbnails and visual reports from any URL with SnapAPI's screenshot API.">
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"Article","headline":"Generate Visual Reports & Thumbnails from Web Content","description":"Use SnapAPI to generate website thumbnails, link preview images, and visual reports from any URL.","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/pdf-reports"}
+</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>Generate Visual Reports & Thumbnails from Web Content</h1>
+
+    <p>Building a link directory, content aggregator, or dashboard? You need thumbnail previews of web pages. Rather than relying on unreliable meta images or building your own headless browser infrastructure, use SnapAPI to generate accurate website thumbnails on demand.</p>
+
+    <h2>Common Use Cases</h2>
+
+    <ul>
+      <li><strong>Link preview thumbnails</strong> — Show visual previews of URLs in chat apps, bookmarking tools, or CMS platforms.</li>
+      <li><strong>Report generation</strong> — Capture web dashboards (Grafana, analytics) as images for PDF reports or email digests.</li>
+      <li><strong>Content directories</strong> — Generate thumbnails for website listings, app stores, or portfolio showcases.</li>
+      <li><strong>Email newsletters</strong> — Embed live website previews in newsletters instead of stale static images.</li>
+    </ul>
+
+    <h2>Code Example</h2>
+
+    <h3>Generate a Website Thumbnail</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">async function</span> <span class="fn">getThumbnail</span>(url) {
+  <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">1280</span>,
+      height: <span class="prop">800</span>,
+      format: <span class="str">'webp'</span>,    <span class="cmt">// Smaller file size</span>
+      quality: <span class="prop">80</span>
+    })
+  });
+
+  <span class="kw">return</span> Buffer.from(<span class="kw">await</span> res.<span class="fn">arrayBuffer</span>());
+}
+
+<span class="cmt">// Generate thumbnails for a list of URLs</span>
+<span class="kw">const</span> urls = [<span class="str">'https://github.com'</span>, <span class="str">'https://news.ycombinator.com'</span>];
+<span class="kw">for</span> (<span class="kw">const</span> url <span class="kw">of</span> urls) {
+  <span class="kw">const</span> img = <span class="kw">await</span> <span class="fn">getThumbnail</span>(url);
+  <span class="cmt">// Store in database, upload to CDN, etc.</span>
+}</pre></div>
+    </div>
+
+    <h3>Batch Processing with Caching</h3>
+    <p>For high-volume use, cache thumbnails and refresh them periodically:</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"># Quick thumbnail via cURL</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://example.com","width":1280,"height":800,"format":"webp"}'</span> \
+  --output thumbnail.webp
+
+<span class="cmt"># Resize locally for smaller thumbnails</span>
+convert thumbnail.webp -resize 400x250 thumbnail-sm.webp</pre></div>
+    </div>
+
+    <h2>Why SnapAPI for Thumbnails?</h2>
+    <ul>
+      <li><strong>Accurate rendering</strong> — Real Chromium browser captures the page exactly as users see it, including JavaScript-rendered content.</li>
+      <li><strong>Multiple formats</strong> — PNG for lossless quality, WebP for smaller file sizes, JPEG for maximum compatibility.</li>
+      <li><strong>Custom viewport</strong> — Set any width/height to capture desktop, tablet, or mobile views.</li>
+      <li><strong>EU-hosted</strong> — All screenshots rendered in Germany. GDPR compliant by default.</li>
+    </ul>
+
+    <div class="cta-box">
+      <h2>Start Generating Thumbnails</h2>
+      <p>Try it free in the playground — no signup needed.</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/website-monitoring">Visual Website Monitoring & Regression Testing →</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>