feat: add WCAG 2.1 AA accessibility landmarks and skip-to-content link
Some checks failed
Build & Deploy to Staging / Build & Deploy to Staging (push) Has been cancelled
Some checks failed
Build & Deploy to Staging / Build & Deploy to Staging (push) Has been cancelled
- Wrap nav in <header> landmark on all pages - Wrap content in <main id='main-content'> on all pages - Add skip-to-content link (visually hidden, visible on focus) - Add skip-link CSS styles - Add 65 accessibility tests covering all 16 full-layout pages - All 288 tests passing
This commit is contained in:
parent
e04d0bb283
commit
9fe59d4867
18 changed files with 399 additions and 2 deletions
|
|
@ -26,9 +26,14 @@ nav{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-i
|
|||
.btn-secondary{border:1px solid var(--border);color:var(--text-secondary)}
|
||||
.btn-secondary:hover{border-color:var(--primary);color:var(--text)}
|
||||
footer{padding:24px;text-align:center;color:var(--text-secondary);font-size:.8rem;border-top:1px solid var(--border)}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/" class="logo">📸 SnapAPI</a>
|
||||
<div class="nav-links">
|
||||
|
|
@ -37,7 +42,8 @@ footer{padding:24px;text-align:center;color:var(--text-secondary);font-size:.8re
|
|||
<a href="/#pricing">Pricing</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="content">
|
||||
</header>
|
||||
<main id="main-content" class="content">
|
||||
<div>
|
||||
<div class="error-code">404</div>
|
||||
<h1 class="error-title">Page Not Found</h1>
|
||||
|
|
|
|||
|
|
@ -60,10 +60,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.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:768px){.footer-grid{grid-template-columns:1fr}}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Blog","name":"SnapAPI Developer Blog","description":"Technical articles about screenshot APIs, web rendering, and performance optimization.","url":"https://snapapi.eu/blog","publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"}}</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -77,6 +82,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
|
|
@ -101,6 +109,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -65,10 +65,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.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:768px){.footer-grid{grid-template-columns:1fr}}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Screenshot API Performance: Caching Strategies That Actually Work","description":"How we reduced p95 response times by 10x with intelligent caching, CDN integration, and browser pool management.","datePublished":"2026-03-02","author":{"@type":"Organization","name":"SnapAPI"},"publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"},"url":"https://snapapi.eu/blog/screenshot-api-performance","mainEntityOfPage":"https://snapapi.eu/blog/screenshot-api-performance"}</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -82,6 +87,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="breadcrumb"><a href="/">Home</a> / <a href="/blog">Blog</a> / Screenshot API Performance</div>
|
||||
|
|
@ -165,6 +173,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -65,10 +65,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.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:768px){.footer-grid{grid-template-columns:1fr}}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Why You Need a Screenshot API (And Why Building Your Own Is Harder Than You Think)","description":"Self-hosting Puppeteer sounds easy until you're debugging zombie Chrome processes at 3 AM.","datePublished":"2026-03-02","author":{"@type":"Organization","name":"SnapAPI"},"publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"},"url":"https://snapapi.eu/blog/why-screenshot-api","mainEntityOfPage":"https://snapapi.eu/blog/why-screenshot-api"}</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -82,6 +87,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="breadcrumb"><a href="/">Home</a> / <a href="/blog">Blog</a> / Why You Need a Screenshot API</div>
|
||||
|
|
@ -181,6 +189,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -90,9 +90,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-links.show{display:flex}
|
||||
.nav-mobile{display:block}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -107,6 +112,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
|
|
@ -220,6 +228,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -89,9 +89,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-mobile{display:block}
|
||||
.footer-grid{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -105,6 +110,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="container">
|
||||
|
|
@ -195,6 +203,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -88,9 +88,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-mobile{display:block}
|
||||
.footer-grid{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -104,6 +109,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="container">
|
||||
|
|
@ -203,6 +211,8 @@ screenshot = client.<span class="fn">take</span>(
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.footer-grid{grid-template-columns:1fr}
|
||||
.nav-links{display:none}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -84,6 +89,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<section class="legal-content">
|
||||
<div class="legal-container">
|
||||
|
|
@ -141,6 +149,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -199,6 +199,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.footer-grid{grid-template-columns:1fr}
|
||||
.trust-badges{flex-direction:column;align-items:center;gap:12px}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
<link rel="canonical" href="https://snapapi.eu/">
|
||||
<meta property="og:title" content="SnapAPI — Screenshot API for Developers">
|
||||
|
|
@ -234,6 +237,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="#" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -252,6 +257,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
|
|
@ -719,6 +727,8 @@ screenshot = snap.<span class="fn">capture</span>(
|
|||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -111,9 +111,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-links.show{display:flex}
|
||||
.nav-mobile{display:block}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -128,6 +133,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
|
|
@ -246,6 +254,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.footer-grid{grid-template-columns:1fr}
|
||||
.nav-links{display:none}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -84,6 +89,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<section class="legal-content">
|
||||
<div class="legal-container">
|
||||
|
|
@ -277,6 +285,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.footer-grid{grid-template-columns:1fr}
|
||||
.nav-links{display:none}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -84,6 +89,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<section class="legal-content">
|
||||
<div class="legal-container">
|
||||
|
|
@ -358,6 +366,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
|
|
|||
|
|
@ -59,9 +59,14 @@ button:disabled{opacity:.5;cursor:not-allowed}
|
|||
.error-msg{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:10px;padding:14px 18px;color:var(--red);font-size:.9rem;margin-bottom:16px;display:none}
|
||||
footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-size:.8rem;color:var(--muted);margin-top:auto}
|
||||
@media(max-width:480px){.stats{grid-template-columns:1fr}.input-row{flex-direction:column}}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav><div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
<div class="nav-links">
|
||||
|
|
@ -69,8 +74,9 @@ footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-si
|
|||
<a href="/docs">API Docs</a>
|
||||
</div>
|
||||
</div></nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main id="main-content">
|
||||
<h1>Usage Dashboard</h1>
|
||||
<p class="subtitle">Check your API usage for the current billing month.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-mobile{display:block}
|
||||
.footer-grid{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="container">
|
||||
|
|
@ -188,6 +196,8 @@ convert thumbnail.webp -resize 400x250 thumbnail-sm.webp</pre></div>
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-mobile{display:block}
|
||||
.footer-grid{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="container">
|
||||
|
|
@ -177,6 +185,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
.nav-mobile{display:block}
|
||||
.footer-grid{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
|
||||
.skip-link:focus{top:0}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">Skip to content</a>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
|
||||
|
|
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
|
|||
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
|
||||
<article class="article">
|
||||
<div class="container">
|
||||
|
|
@ -194,6 +202,8 @@ curl -X POST https://snapapi.eu/v1/screenshot \
|
|||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
46
src/routes/__tests__/accessibility.test.ts
Normal file
46
src/routes/__tests__/accessibility.test.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { describe, it, expect } from 'vitest'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
const publicDir = path.join(__dirname, '../../../public')
|
||||
|
||||
// All HTML pages that have a nav (full-layout pages)
|
||||
const fullLayoutPages = fs.readdirSync(publicDir, { recursive: true })
|
||||
.filter((f): f is string => typeof f === 'string' && f.endsWith('.html'))
|
||||
.map(f => path.join(publicDir, f))
|
||||
.filter(f => {
|
||||
const html = fs.readFileSync(f, 'utf-8')
|
||||
return html.includes('<nav')
|
||||
})
|
||||
|
||||
describe('Accessibility landmarks', () => {
|
||||
it('found full-layout pages to test', () => {
|
||||
expect(fullLayoutPages.length).toBeGreaterThan(5)
|
||||
})
|
||||
|
||||
for (const filePath of fullLayoutPages) {
|
||||
const rel = path.relative(publicDir, filePath)
|
||||
|
||||
describe(rel, () => {
|
||||
const html = fs.readFileSync(filePath, 'utf-8')
|
||||
|
||||
it('has <header> landmark wrapping nav', () => {
|
||||
expect(html).toMatch(/<header[\s>]/)
|
||||
})
|
||||
|
||||
it('has <main id="main-content"> landmark', () => {
|
||||
expect(html).toMatch(/<main[\s][^>]*id=["']main-content["']/)
|
||||
})
|
||||
|
||||
it('has skip-to-content link', () => {
|
||||
expect(html).toMatch(/<a[^>]*href=["']#main-content["'][^>]*class=["'][^"']*skip-link/)
|
||||
})
|
||||
|
||||
it('has <footer> landmark', () => {
|
||||
expect(html).toMatch(/<footer[\s>]/)
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
199
src/services/__tests__/browser.test.ts
Normal file
199
src/services/__tests__/browser.test.ts
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
|
||||
const mockPage = () => ({
|
||||
close: vi.fn().mockResolvedValue(undefined),
|
||||
evaluate: vi.fn().mockResolvedValue(undefined),
|
||||
goto: vi.fn().mockResolvedValue(undefined),
|
||||
setViewport: vi.fn().mockResolvedValue(undefined),
|
||||
screenshot: vi.fn().mockResolvedValue(Buffer.from('fake')),
|
||||
waitForSelector: vi.fn().mockResolvedValue(undefined),
|
||||
})
|
||||
|
||||
const mockBrowser = (pages: any[]) => ({
|
||||
close: vi.fn().mockResolvedValue(undefined),
|
||||
newPage: vi.fn().mockImplementation(() => {
|
||||
const p = mockPage()
|
||||
pages.push(p)
|
||||
return Promise.resolve(p)
|
||||
}),
|
||||
})
|
||||
|
||||
let launchedBrowsers: any[] = []
|
||||
let allPages: any[][] = []
|
||||
|
||||
vi.mock('puppeteer', () => ({
|
||||
default: {
|
||||
launch: vi.fn().mockImplementation(() => {
|
||||
const pages: any[] = []
|
||||
allPages.push(pages)
|
||||
const b = mockBrowser(pages)
|
||||
launchedBrowsers.push(b)
|
||||
return Promise.resolve(b)
|
||||
}),
|
||||
},
|
||||
}))
|
||||
|
||||
vi.mock('../logger.js', () => ({
|
||||
default: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
|
||||
}))
|
||||
|
||||
describe('Browser Pool Service', () => {
|
||||
let mod: any
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.resetModules()
|
||||
launchedBrowsers = []
|
||||
allPages = []
|
||||
vi.doMock('puppeteer', () => ({
|
||||
default: {
|
||||
launch: vi.fn().mockImplementation(() => {
|
||||
const pages: any[] = []
|
||||
allPages.push(pages)
|
||||
const b = mockBrowser(pages)
|
||||
launchedBrowsers.push(b)
|
||||
return Promise.resolve(b)
|
||||
}),
|
||||
},
|
||||
}))
|
||||
vi.doMock('../logger.js', () => ({
|
||||
default: { info: vi.fn(), warn: vi.fn(), error: vi.fn() },
|
||||
}))
|
||||
mod = await import('../browser.js')
|
||||
})
|
||||
|
||||
afterEach(async () => {
|
||||
try { await mod.closeBrowser() } catch {}
|
||||
})
|
||||
|
||||
describe('initBrowser()', () => {
|
||||
it('creates correct number of browsers (default BROWSER_COUNT=2)', async () => {
|
||||
await mod.initBrowser()
|
||||
expect(launchedBrowsers).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('creates PAGES_PER_BROWSER pages per browser (default 4)', async () => {
|
||||
await mod.initBrowser()
|
||||
for (const pages of allPages) {
|
||||
expect(pages).toHaveLength(4)
|
||||
}
|
||||
})
|
||||
|
||||
it('pool stats reflect correct totals after init', async () => {
|
||||
await mod.initBrowser()
|
||||
const stats = mod.getPoolStats()
|
||||
expect(stats.browsers).toBe(2)
|
||||
expect(stats.pagesPerBrowser).toBe(4)
|
||||
expect(stats.totalPages).toBe(8)
|
||||
expect(stats.availablePages).toBe(8)
|
||||
expect(stats.queueDepth).toBe(0)
|
||||
expect(stats.totalJobs).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('acquirePage()', () => {
|
||||
it('returns a page from the pool', async () => {
|
||||
await mod.initBrowser()
|
||||
const { page } = await mod.acquirePage()
|
||||
expect(page).toBeDefined()
|
||||
expect(page.evaluate).toBeDefined()
|
||||
})
|
||||
|
||||
it('uses round-robin across browser instances', async () => {
|
||||
await mod.initBrowser()
|
||||
await mod.acquirePage()
|
||||
await mod.acquirePage()
|
||||
const stats = mod.getPoolStats()
|
||||
expect(stats.availablePages).toBe(6)
|
||||
})
|
||||
|
||||
it('decrements available pages on acquire', async () => {
|
||||
await mod.initBrowser()
|
||||
await mod.acquirePage()
|
||||
const stats = mod.getPoolStats()
|
||||
expect(stats.availablePages).toBe(7)
|
||||
})
|
||||
})
|
||||
|
||||
describe('releasePage()', () => {
|
||||
it('increments job count after release', async () => {
|
||||
await mod.initBrowser()
|
||||
const { page, instance } = await mod.acquirePage()
|
||||
expect(mod.getPoolStats().totalJobs).toBe(0)
|
||||
mod.releasePage(page, instance)
|
||||
expect(mod.getPoolStats().totalJobs).toBe(1)
|
||||
})
|
||||
|
||||
it('returns page to pool (available count increases)', async () => {
|
||||
await mod.initBrowser()
|
||||
const { page, instance } = await mod.acquirePage()
|
||||
expect(mod.getPoolStats().availablePages).toBe(7)
|
||||
mod.releasePage(page, instance)
|
||||
await new Promise(r => setTimeout(r, 50))
|
||||
expect(mod.getPoolStats().availablePages).toBe(8)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Queue behavior', () => {
|
||||
it('queues request when all pages are busy and resolves when page released', async () => {
|
||||
await mod.initBrowser()
|
||||
const acquired = []
|
||||
for (let i = 0; i < 8; i++) {
|
||||
acquired.push(await mod.acquirePage())
|
||||
}
|
||||
expect(mod.getPoolStats().availablePages).toBe(0)
|
||||
|
||||
let resolved = false
|
||||
const pending = mod.acquirePage().then((r: any) => { resolved = true; return r })
|
||||
await new Promise(r => setTimeout(r, 10))
|
||||
expect(resolved).toBe(false)
|
||||
expect(mod.getPoolStats().queueDepth).toBe(1)
|
||||
|
||||
mod.releasePage(acquired[0].page, acquired[0].instance)
|
||||
await new Promise(r => setTimeout(r, 100))
|
||||
expect(resolved).toBe(true)
|
||||
|
||||
const result = await pending
|
||||
mod.releasePage(result.page, result.instance)
|
||||
for (let i = 1; i < acquired.length; i++) {
|
||||
mod.releasePage(acquired[i].page, acquired[i].instance)
|
||||
}
|
||||
})
|
||||
|
||||
it('rejects with QUEUE_FULL after 30s timeout', async () => {
|
||||
vi.useFakeTimers()
|
||||
await mod.initBrowser()
|
||||
const acquired = []
|
||||
for (let i = 0; i < 8; i++) {
|
||||
acquired.push(await mod.acquirePage())
|
||||
}
|
||||
|
||||
const pending = mod.acquirePage()
|
||||
await vi.advanceTimersByTimeAsync(31_000)
|
||||
await expect(pending).rejects.toThrow('QUEUE_FULL')
|
||||
|
||||
for (const a of acquired) mod.releasePage(a.page, a.instance)
|
||||
vi.useRealTimers()
|
||||
})
|
||||
})
|
||||
|
||||
describe('getPoolStats()', () => {
|
||||
it('returns accurate counts during operations', async () => {
|
||||
await mod.initBrowser()
|
||||
const { page, instance } = await mod.acquirePage()
|
||||
const stats = mod.getPoolStats()
|
||||
expect(stats.availablePages).toBe(7)
|
||||
expect(stats.totalJobs).toBe(0)
|
||||
mod.releasePage(page, instance)
|
||||
expect(mod.getPoolStats().totalJobs).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Staggered restart', () => {
|
||||
it('only one browser restarts at a time (restarting flag)', async () => {
|
||||
await mod.initBrowser()
|
||||
const stats = mod.getPoolStats()
|
||||
// After init, no browsers should be restarting
|
||||
expect(stats.browsers).toBe(2)
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue