bzuccaro/ditto.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Samraaj Bath
2026-06-29 15:11:48 -07:00
commit 66dfdcc58d
404 changed files with 45970 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/fixtures/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 B

compiler/fixtures/brand.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="12" fill="#123456"/>
<path d="M18 39h28v6H18zM18 19h28v6H18zM18 29h20v6H18z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

compiler/fixtures/carousel.html
+72
View File
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carousel fixture</title>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 48px 24px; }
h1 { font-size: 30px; }
/* A Swiper-like single-slide carousel: a clipped viewport, a flex track moved
by translateX, prev/next buttons, and pagination bullets. */
.swiper { position: relative; overflow: hidden; border-radius: 12px; margin-top: 20px; }
.swiper-wrapper { display: flex; transition: transform .35s ease; will-change: transform; }
.swiper-slide { flex: 0 0 100%; min-width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; }
.s0 { background: #4f46e5; } .s1 { background: #0891b2; } .s2 { background: #16a34a; } .s3 { background: #db2777; } .s4 { background: #ea580c; }
.swiper-button-prev, .swiper-button-next {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255,255,255,.85); color: #1a1a1a; font-size: 20px;
}
.swiper-button-prev { left: 12px; } .swiper-button-next { right: 12px; }
.swiper-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #d1d5db; }
.swiper-pagination-bullet-active { background: #4f46e5; }
</style>
</head>
<body>
<main>
<h1>Carousel</h1>
<p>A single-slide, transform-positioned carousel with prev/next and pagination.</p>
<div class="swiper" aria-roledescription="carousel" aria-label="Featured">
<div class="swiper-wrapper">
<div class="swiper-slide s0" aria-roledescription="slide" aria-label="1 of 5">Slide 1</div>
<div class="swiper-slide s1" aria-roledescription="slide" aria-label="2 of 5">Slide 2</div>
<div class="swiper-slide s2" aria-roledescription="slide" aria-label="3 of 5">Slide 3</div>
<div class="swiper-slide s3" aria-roledescription="slide" aria-label="4 of 5">Slide 4</div>
<div class="swiper-slide s4" aria-roledescription="slide" aria-label="5 of 5">Slide 5</div>
</div>
<button class="swiper-button-prev" aria-label="Previous slide">‹</button>
<button class="swiper-button-next" aria-label="Next slide">›</button>
<div class="swiper-pagination">
<button class="swiper-pagination-bullet swiper-pagination-bullet-active" aria-label="Go to slide 1"></button>
<button class="swiper-pagination-bullet" aria-label="Go to slide 2"></button>
<button class="swiper-pagination-bullet" aria-label="Go to slide 3"></button>
<button class="swiper-pagination-bullet" aria-label="Go to slide 4"></button>
<button class="swiper-pagination-bullet" aria-label="Go to slide 5"></button>
</div>
</div>
</main>
<script>
document.querySelectorAll(".swiper").forEach((root) => {
const wrap = root.querySelector(".swiper-wrapper");
const slides = [...root.querySelectorAll(".swiper-slide")];
const bullets = [...root.querySelectorAll(".swiper-pagination-bullet")];
let i = 0;
const go = (n) => {
i = Math.max(0, Math.min(slides.length - 1, n));
wrap.style.transform = "translateX(-" + (i * 100) + "%)";
bullets.forEach((b, k) => b.classList.toggle("swiper-pagination-bullet-active", k === i));
};
root.querySelector(".swiper-button-next").addEventListener("click", () => go(i + 1));
root.querySelector(".swiper-button-prev").addEventListener("click", () => go(i - 1));
bullets.forEach((b, k) => b.addEventListener("click", () => go(k)));
});
</script>
</body>
</html>
compiler/fixtures/components.html
+91
View File
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Component extraction fixture</title>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
header { border-bottom: 1px solid #e5e5e5; }
nav { max-width: 960px; margin: 0 auto; padding: 16px 24px; display: flex; gap: 24px; }
nav a { color: #374151; text-decoration: none; font-size: 15px; font-weight: 500; }
main { max-width: 960px; margin: 0 auto; padding: 48px 24px; }
h1 { font-size: 34px; margin: 0 0 8px; }
.intro { color: #6b7280; font-size: 17px; margin: 0 0 40px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.card-link { display: block; padding: 20px; color: inherit; text-decoration: none; }
.badge { display: inline-block; background: #eef2ff; color: #4f46e5; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.card-title { font-size: 19px; margin: 14px 0 6px; line-height: 1.3; }
.card-body { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 14px; }
.card-cta { font-size: 14px; font-weight: 600; color: #4f46e5; }
footer { max-width: 960px; margin: 0 auto; padding: 32px 24px; color: #9ca3af; font-size: 13px; border-top: 1px solid #e5e5e5; }
</style>
</head>
<body>
<header>
<nav aria-label="Primary">
<a href="https://example.com/">Home</a>
<a href="https://example.com/features">Features</a>
<a href="https://example.com/pricing">Pricing</a>
<a href="https://example.com/docs">Docs</a>
</nav>
</header>
<main>
<h1>From the blog</h1>
<p class="intro">Notes, guides, and release updates from the team.</p>
<div class="grid">
<article class="card">
<a class="card-link" href="https://example.com/post/alpha">
<span class="badge">News</span>
<h3 class="card-title">Announcing the alpha release</h3>
<p class="card-body">A first look at everything that shipped in our earliest public build.</p>
<span class="card-cta">Read more &rarr;</span>
</a>
</article>
<article class="card">
<a class="card-link" href="https://example.com/post/grid-guide">
<span class="badge">Guide</span>
<h3 class="card-title">A practical guide to CSS grid</h3>
<p class="card-body">Lay out responsive card collections without fighting the box model.</p>
<span class="card-cta">Read more &rarr;</span>
</a>
</article>
<article class="card">
<a class="card-link" href="https://example.com/post/perf">
<span class="badge">Engineering</span>
<h3 class="card-title">Shipping faster pages in 2026</h3>
<p class="card-body">The performance budget we hold every release to, and why it matters.</p>
<span class="card-cta">Read more &rarr;</span>
</a>
</article>
<article class="card">
<a class="card-link" href="https://example.com/post/changelog">
<span class="badge">News</span>
<h3 class="card-title">What changed this month</h3>
<p class="card-body">A roundup of the fixes and features that landed across the platform.</p>
<span class="card-cta">Read more &rarr;</span>
</a>
</article>
<article class="card">
<a class="card-link" href="https://example.com/post/design">
<span class="badge">Design</span>
<h3 class="card-title">Rethinking our color system</h3>
<p class="card-body">How we moved to semantic tokens and what we learned along the way.</p>
<span class="card-cta">Read more &rarr;</span>
</a>
</article>
<article class="card">
<a class="card-link" href="https://example.com/post/community">
<span class="badge">Community</span>
<h3 class="card-title">Highlights from the meetup</h3>
<p class="card-body">Talks, demos, and conversations from our first in-person gathering.</p>
<span class="card-cta">Read more &rarr;</span>
</a>
</article>
</div>
</main>
<footer>&copy; 2026 Example, Inc. All rights reserved.</footer>
</body>
</html>
compiler/fixtures/disclosure.html
+96
View File
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disclosure fixture — dropdown, mega-menu, modal</title>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
main { max-width: 820px; margin: 0 auto; padding: 48px 24px; }
h1 { font-size: 30px; } h2 { font-size: 20px; margin-top: 40px; }
nav { display: flex; gap: 8px; }
.menu-root { position: relative; }
.menu-trigger, .modal-trigger {
appearance: none; border: 1px solid #d1d5db; background: #fff; border-radius: 8px;
padding: 10px 16px; font-size: 15px; cursor: pointer; color: #1a1a1a;
}
.menu-trigger[aria-expanded="true"] { background: #eef2ff; border-color: #4f46e5; color: #4f46e5; }
.menu-panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
min-width: 200px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 8px; list-style: none; margin: 0;
}
.menu-panel[hidden] { display: none; }
.menu-panel li > a { display: block; padding: 8px 12px; border-radius: 6px; color: #1a1a1a; text-decoration: none; }
.mega { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50;
display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
.modal-dialog { background: #fff; border-radius: 14px; padding: 28px; max-width: 440px; width: 90%; }
.modal-dialog h3 { margin: 0 0 8px; font-size: 22px; }
.modal-close { float: right; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
</style>
</head>
<body>
<main>
<h1>Disclosure patterns</h1>
<h2>Dropdown menu</h2>
<nav>
<div class="menu-root">
<button class="menu-trigger" id="mt1" aria-haspopup="menu" aria-expanded="false" aria-controls="m1">Products ▾</button>
<ul class="menu-panel" id="m1" role="menu" aria-labelledby="mt1" hidden>
<li role="none"><a role="menuitem" href="#search">Search</a></li>
<li role="none"><a role="menuitem" href="#recommend">Recommend</a></li>
<li role="none"><a role="menuitem" href="#analytics">Analytics</a></li>
</ul>
</div>
<div class="menu-root">
<button class="menu-trigger" id="mt2" aria-haspopup="menu" aria-expanded="false" aria-controls="m2">Solutions ▾</button>
<ul class="menu-panel mega" id="m2" role="menu" aria-labelledby="mt2" hidden>
<li role="none"><a role="menuitem" href="#ecommerce">Ecommerce — fast product discovery</a></li>
<li role="none"><a role="menuitem" href="#media">Media — content recommendations</a></li>
<li role="none"><a role="menuitem" href="#saas">SaaS — in-app search</a></li>
<li role="none"><a role="menuitem" href="#marketplaces">Marketplaces — ranking</a></li>
</ul>
</div>
</nav>
<h2>Modal dialog</h2>
<button class="modal-trigger" id="open-dlg" aria-haspopup="dialog" aria-controls="dlg">Open dialog</button>
<div class="modal-backdrop" id="dlg-backdrop" hidden>
<div class="modal-dialog" id="dlg" role="dialog" aria-modal="true" aria-labelledby="dlg-title">
<button class="modal-close" id="dlg-close" aria-label="Close dialog">×</button>
<h3 id="dlg-title">Subscribe</h3>
<p>Get product updates in your inbox. We send at most one email a month.</p>
</div>
</div>
</main>
<script>
// Dropdown menus: toggle on click, open on hover, close on outside click / Escape.
document.querySelectorAll(".menu-root").forEach((root) => {
const trigger = root.querySelector(".menu-trigger");
const panel = document.getElementById(trigger.getAttribute("aria-controls"));
const set = (open) => { trigger.setAttribute("aria-expanded", open ? "true" : "false"); panel.hidden = !open; };
trigger.addEventListener("click", () => set(trigger.getAttribute("aria-expanded") !== "true"));
root.addEventListener("mouseenter", () => set(true));
root.addEventListener("mouseleave", () => set(false));
});
document.addEventListener("keydown", (e) => { if (e.key === "Escape") document.querySelectorAll(".menu-trigger").forEach((t) => { t.setAttribute("aria-expanded", "false"); document.getElementById(t.getAttribute("aria-controls")).hidden = true; }); });
// Modal: open from trigger, close from close button / backdrop / Escape.
const backdrop = document.getElementById("dlg-backdrop");
const openModal = (open) => { backdrop.hidden = !open; };
document.getElementById("open-dlg").addEventListener("click", () => openModal(true));
document.getElementById("dlg-close").addEventListener("click", () => openModal(false));
backdrop.addEventListener("click", (e) => { if (e.target === backdrop) openModal(false); });
document.addEventListener("keydown", (e) => { if (e.key === "Escape") openModal(false); });
</script>
</body>
</html>
compiler/fixtures/favicon.ico
+5
View File
@@ -0,0 +1,5 @@
<svg viewBox="0 0 48 48" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" id="Calque_1">
<rect fill="#82a3f7" height="48" width="48"></rect>
<path d="M36,25.7c-4.8,0-5-11-5-11h-3.1s-.4,11-3.4,11-3.4-11-3.4-11h-3.1s-.1,11-5,11h-.7v7h.7c6.7,0,6-11.3,6.1-12.1h.6c.1.9-.4,12.1,4.5,12.1s4.4-11.3,4.5-12.1h.6c.1.9-.6,12.1,6.1,12.1h.7v-7h-.4Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

compiler/fixtures/hover-transition.html
+27
View File
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hover transition fixture</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; padding: 60px; }
/* a button whose hover EASES (transition), not snaps */
.btn {
display: inline-block; padding: 12px 24px; border-radius: 8px;
background: rgb(238, 238, 238); color: rgb(51, 51, 51);
transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
cursor: pointer;
}
.btn:hover { background: rgb(43, 80, 214); color: rgb(255, 255, 255); transform: translateY(-2px); }
/* a link with no transition: its hover should NOT gain a transition rule */
.plain { display: inline-block; margin-left: 24px; color: rgb(43, 80, 214); }
.plain:hover { color: rgb(20, 30, 90); }
</style>
</head>
<body>
<a class="btn" href="/go">Hover me (eased)</a>
<a class="plain" href="/plain">Plain hover (snaps)</a>
</body>
</html>
compiler/fixtures/interactive.html
+100
View File
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interactive patterns fixture</title>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 48px 24px; }
h1 { font-size: 32px; }
h2 { font-size: 22px; margin-top: 48px; }
/* Tabs */
.tabs { margin-top: 16px; }
[role="tablist"] { display: flex; gap: 4px; border-bottom: 2px solid #e5e5e5; }
[role="tab"] {
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 10px 18px; font-size: 15px; color: #6b7280;
border-bottom: 3px solid transparent; margin-bottom: -2px;
}
[role="tab"][aria-selected="true"] { color: #4f46e5; border-bottom-color: #4f46e5; font-weight: 600; }
[role="tabpanel"] { padding: 20px 4px; font-size: 15px; line-height: 1.6; }
[role="tabpanel"][hidden] { display: none; }
/* Accordion */
.accordion { margin-top: 16px; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; }
.accordion-item + .accordion-item { border-top: 1px solid #e5e5e5; }
.accordion-trigger {
appearance: none; width: 100%; text-align: left; border: 0; background: #fafafa;
padding: 16px 18px; font-size: 16px; cursor: pointer; color: #1a1a1a;
display: flex; justify-content: space-between; align-items: center;
}
.accordion-trigger[aria-expanded="true"] { background: #eef2ff; color: #4f46e5; }
.accordion-trigger .chev { transition: transform .15s; }
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.accordion-panel { padding: 4px 18px 20px; font-size: 15px; line-height: 1.6; color: #4b5563; }
.accordion-panel[hidden] { display: none; }
</style>
</head>
<body>
<main>
<h1>Interactive patterns</h1>
<p>A fixture exercising the recognized Stage-4 patterns with panels kept in the DOM.</p>
<h2>Tabs</h2>
<div class="tabs">
<div role="tablist" aria-label="Fruit">
<button role="tab" id="t1" aria-controls="p1" aria-selected="true">Apples</button>
<button role="tab" id="t2" aria-controls="p2" aria-selected="false" tabindex="-1">Oranges</button>
<button role="tab" id="t3" aria-controls="p3" aria-selected="false" tabindex="-1">Pears</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1"><p>Apples are crisp and come in many varieties such as Fuji and Gala.</p></div>
<div role="tabpanel" id="p2" aria-labelledby="t2" hidden><p>Oranges are citrus fruits rich in vitamin C and very juicy.</p></div>
<div role="tabpanel" id="p3" aria-labelledby="t3" hidden><p>Pears have a soft, sweet flesh and a distinctive shape.</p></div>
</div>
<h2>Accordion</h2>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-trigger" id="a1" aria-controls="s1" aria-expanded="true"><span>What is your return policy?</span><span class="chev">▾</span></button>
<div class="accordion-panel" id="s1" role="region" aria-labelledby="a1"><p>You can return any item within 30 days of purchase for a full refund.</p></div>
</div>
<div class="accordion-item">
<button class="accordion-trigger" id="a2" aria-controls="s2" aria-expanded="false"><span>Do you ship internationally?</span><span class="chev">▾</span></button>
<div class="accordion-panel" id="s2" role="region" aria-labelledby="a2" hidden><p>Yes, we ship to over 50 countries with tracked delivery.</p></div>
</div>
<div class="accordion-item">
<button class="accordion-trigger" id="a3" aria-controls="s3" aria-expanded="false"><span>How do I track my order?</span><span class="chev">▾</span></button>
<div class="accordion-panel" id="s3" role="region" aria-labelledby="a3" hidden><p>A tracking link is emailed to you as soon as your order ships.</p></div>
</div>
</div>
</main>
<script>
// Minimal ARIA tabs: keep panels mounted, toggle [hidden] + aria-selected.
document.querySelectorAll('[role="tablist"]').forEach((list) => {
const tabs = [...list.querySelectorAll('[role="tab"]')];
tabs.forEach((tab) => tab.addEventListener('click', () => {
tabs.forEach((t) => {
const sel = t === tab;
t.setAttribute('aria-selected', sel ? 'true' : 'false');
t.tabIndex = sel ? 0 : -1;
const panel = document.getElementById(t.getAttribute('aria-controls'));
if (panel) panel.hidden = !sel;
});
}));
});
// Minimal accordion: toggle [hidden] + aria-expanded.
document.querySelectorAll('.accordion-trigger').forEach((btn) => {
btn.addEventListener('click', () => {
const open = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', open ? 'false' : 'true');
const panel = document.getElementById(btn.getAttribute('aria-controls'));
if (panel) panel.hidden = open;
});
});
</script>
</body>
</html>
compiler/fixtures/layout-links.html
+55
View File
@@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout + Links fixture</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; }
body { font-family: system-ui, sans-serif; color: #101010; }
/* full-bleed sections: authored fluid (width:100%), must stay fluid in the clone */
.bleed { width: 100%; background: #eef2fd; padding: 16px 0; }
.bleed.alt { background: #f6f6f6; }
/* centered, capped container: fluid up to 960px, capped beyond */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
nav { display: flex; gap: 16px; align-items: center; }
nav a { color: #2b50d6; text-decoration: none; }
h1 { font-size: 40px; line-height: 1.2; margin: 24px 0; }
/* a genuinely fixed-width element: must NOT be made fluid */
.fixed-box { width: 220px; height: 80px; background: #ccd; }
/* an absolute bar pinned to both edges (sticky-nav shape): width is redundant
with left:0;right:0 and must stay fluid */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 36px; background: rgb(20, 24, 40); color: #fff; z-index: 100; }
</style>
</head>
<body>
<div class="topbar">pinned bar</div>
<header class="bleed">
<nav class="container">
<a href="/">Home</a>
<a href="/pricing">Pricing</a>
<a href="/enterprise">Enterprise</a>
<a href="https://example.com/external">External</a>
<a href="#features">Features</a>
</nav>
</header>
<main>
<!-- a full-bleed replaced element (svg): its width:100% must NOT become width:auto,
which would collapse it to its intrinsic viewBox width at every viewport -->
<svg class="bleed-svg" viewBox="0 0 100 12" preserveAspectRatio="none" style="display:block;width:100%;height:12px;background:rgb(200,60,60)"><rect width="100" height="12" fill="rgb(200,60,60)"/></svg>
<section class="bleed alt">
<div class="container">
<h1 id="features">A full-width hero band</h1>
<p>The band background should reach both window edges at any width.</p>
<div class="fixed-box">fixed 220px</div>
</div>
</section>
<section class="bleed">
<div class="container">
<p>Second full-bleed band.</p>
</div>
</section>
</main>
</body>
</html>
compiler/fixtures/llms-full.txt
+3
View File
@@ -0,0 +1,3 @@
# Source LLMS Full
This longer source file should be preserved when the fixture exposes it.
compiler/fixtures/llms.txt
+3
View File
@@ -0,0 +1,3 @@
# Source LLMS
This text comes from the source fixture and should be preserved by the generated app.
compiler/fixtures/manifest-icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 B

compiler/fixtures/mask.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M8 8h48v48H8z" fill="#000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 108 B

compiler/fixtures/menu-mount.html
+65
View File
@@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mount-on-open menu fixture</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; }
header { display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 24px; border-bottom: 1px solid #eee; }
.brand { font-weight: 700; }
nav { display: flex; gap: 8px; }
.trigger { background: none; border: 0; font: inherit; padding: 8px 12px; border-radius: 6px; cursor: pointer; color: #333; }
.trigger[aria-expanded="true"] { background: #eef2fd; color: #2b50d6; }
/* the panel is mounted into <body> on open (Radix-style portal) and removed on close */
.menu-panel { position: absolute; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 16px; width: 320px; display: grid; gap: 8px; }
.menu-panel a { display: block; padding: 10px 12px; border-radius: 8px; color: #222; text-decoration: none; }
.menu-panel a:hover { background: #f4f6fe; }
.menu-panel .label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .04em; padding: 4px 12px; }
main { padding: 48px 24px; }
</style>
</head>
<body>
<header>
<span class="brand">Acme</span>
<nav>
<button class="trigger" id="t-product" aria-haspopup="menu" aria-expanded="false" aria-controls="panel-product">Product</button>
<a class="trigger" href="/pricing">Pricing</a>
</nav>
</header>
<main>
<h1>Mount-on-open menu</h1>
<p>The Product menu mounts its panel into &lt;body&gt; on open and removes it on close.</p>
</main>
<script>
const t = document.getElementById('t-product');
let panel = null;
function open() {
if (panel) return;
panel = document.createElement('div');
panel.className = 'menu-panel';
panel.id = 'panel-product';
panel.setAttribute('role', 'menu');
const r = t.getBoundingClientRect();
panel.style.left = (r.left + window.scrollX) + 'px';
panel.style.top = (r.bottom + window.scrollY + 8) + 'px';
panel.innerHTML = '<div class="label">Build</div>' +
'<a href="/features">Features</a>' +
'<a href="/integrations">Integrations</a>' +
'<a href="/changelog">Changelog</a>' +
'<div class="label">Learn</div>' +
'<a href="/docs">Documentation</a>' +
'<a href="/guides">Guides</a>';
document.body.appendChild(panel);
t.setAttribute('aria-expanded', 'true');
}
function close() {
if (panel) { panel.remove(); panel = null; }
t.setAttribute('aria-expanded', 'false');
}
t.addEventListener('click', () => (t.getAttribute('aria-expanded') === 'true' ? close() : open()));
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
</script>
</body>
</html>
compiler/fixtures/motion.html
+79
View File
@@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Motion fixture — CSS keyframes</title>
<style>
:root { --bg: #0b0b10; --fg: #f5f5f7; --muted: #9aa0aa; --accent: #6d6aff; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: var(--bg); color: var(--fg);
font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 64px 24px 96px; }
/* 1) Finite entrance: fade + slide up, ends at rest (fill forwards). */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px;
animation: fadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero p {
font-size: 20px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 560px;
animation: fadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
/* 2) Infinite spinner. */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 48px; height: 48px; margin: 56px 0 0; border-radius: 9999px;
border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--accent);
animation: spin 1s linear infinite;
}
/* 3) Infinite pulse (opacity + scale). */
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.08); }
}
.badge {
display: inline-block; margin-top: 40px; padding: 8px 16px; border-radius: 9999px;
background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
animation: pulse 1.8s ease-in-out infinite;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.card {
background: #15151d; border: 1px solid #23232e; border-radius: 14px; padding: 20px;
animation: fadeUp 600ms ease-out both;
}
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.footer { margin-top: 80px; color: var(--muted); font-size: 14px; }
</style>
</head>
<body>
<main class="wrap">
<section class="hero">
<h1>Motion that replays</h1>
<p>A deterministic fixture: heading and subtext animate in, the loader spins forever, and the badge pulses.</p>
<div class="spinner" aria-label="Loading"></div>
<span class="badge">Live</span>
</section>
<section class="grid">
<div class="card"><h3>Entrance</h3><p>Cards fade and slide up on load via a CSS keyframes animation.</p></div>
<div class="card"><h3>Looping</h3><p>The spinner uses an infinite linear rotation that never settles.</p></div>
<div class="card"><h3>Pulsing</h3><p>The badge eases between two opacity and scale states forever.</p></div>
</section>
<p class="footer">Reconstructed deterministically — the clone should replay each of these.</p>
</main>
</body>
</html>
compiler/fixtures/motion2.html
+64
View File
@@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Motion fixture 2 — WAAPI + rotating text</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
background: #ffffff; color: #111418;
font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 80px 24px; }
h1 { font-size: 48px; line-height: 1.1; font-weight: 800; margin: 0 0 24px; letter-spacing: -0.02em; }
.rot { color: #5b5bff; }
p { font-size: 18px; line-height: 1.6; color: #5a626e; margin: 0 0 16px; max-width: 600px; }
.orbit { width: 56px; height: 56px; margin-top: 56px; border-radius: 12px; background: #5b5bff; }
.fade { margin-top: 48px; padding: 24px; border: 1px solid #e6e8ec; border-radius: 14px; }
.fade h3 { margin: 0 0 8px; font-size: 18px; }
.fade p { margin: 0; }
</style>
</head>
<body>
<main class="wrap">
<h1>Build <span class="rot" id="rot">faster</span></h1>
<p>The highlighted word rotates on an interval. The square orbits via the Web Animations API, and the card below fades in via WAAPI on load.</p>
<div class="orbit" id="orbit" aria-hidden="true"></div>
<div class="fade" id="fade">
<h3>WAAPI entrance</h3>
<p>This card is animated with element.animate(), not CSS keyframes.</p>
</div>
<ul style="margin-top:40px;padding:0;list-style:none;display:grid;gap:12px">
<li style="padding:14px 16px;border:1px solid #e6e8ec;border-radius:10px">Deterministic reconstruction from observed evidence.</li>
<li style="padding:14px 16px;border:1px solid #e6e8ec;border-radius:10px">Recognized-pattern allowlist, fixed templates, no synthesis.</li>
<li style="padding:14px 16px;border:1px solid #e6e8ec;border-radius:10px">Gate-verified motion: reproduce, or freeze honestly.</li>
</ul>
<footer style="margin-top:56px;color:#9aa0aa;font-size:14px">Motion replays on load; the gates grade the settled frame.</footer>
</main>
<script>
// Rotating text on an interval (the shopify/notion pattern).
(function () {
var el = document.getElementById('rot');
var words = ['faster', 'cleaner', 'smarter', 'together'];
var i = 0;
setInterval(function () { i = (i + 1) % words.length; el.textContent = words[i]; }, 1400);
})();
// WAAPI: infinite orbit (translate loop) — persistent, observable at capture time.
document.getElementById('orbit').animate(
[
{ transform: 'translateX(0) rotate(0deg)' },
{ transform: 'translateX(120px) rotate(180deg)' },
{ transform: 'translateX(0) rotate(360deg)' }
],
{ duration: 2400, iterations: Infinity, easing: 'ease-in-out' }
);
// WAAPI: finite fade+rise entrance on the card.
document.getElementById('fade').animate(
[ { opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'translateY(0)' } ],
{ duration: 600, easing: 'ease-out', fill: 'both' }
);
</script>
</body>
</html>
compiler/fixtures/motion3.html
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Motion fixture 3 — scroll-triggered reveals</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #0c0d12; color: #eef0f4; font-family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.wrap { max-width: 760px; margin: 0 auto; padding: 64px 24px 160px; }
h1 { font-size: 44px; line-height: 1.1; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }
.lede { font-size: 18px; color: #9aa2ad; margin: 0 0 48px; }
/* Scroll-reveal: start hidden + lifted, transition in when .in is added on intersection. */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.card { margin: 28px 0; padding: 28px; background: #15171f; border: 1px solid #242732; border-radius: 16px; }
.card h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.card p { margin: 0; color: #9aa2ad; line-height: 1.6; }
.spacer { height: 40vh; }
</style>
</head>
<body>
<main class="wrap">
<h1>Scroll to reveal</h1>
<p class="lede">Each card below starts hidden and animates in when it scrolls into view.</p>
<div class="spacer"></div>
<section class="card reveal"><h2>First reveal</h2><p>Fades and slides up as it enters the viewport, driven by IntersectionObserver toggling a class with a CSS transition.</p></section>
<section class="card reveal"><h2>Second reveal</h2><p>The same entrance, staggered down the page so it is comfortably below the initial fold.</p></section>
<section class="card reveal"><h2>Third reveal</h2><p>A deterministic reproduction target: hidden at load, revealed on scroll, settling to full opacity.</p></section>
<section class="card reveal"><h2>Fourth reveal</h2><p>The clone should hide these on load and reveal them on scroll, then the gate verifies it.</p></section>
<section class="card reveal"><h2>Fifth reveal</h2><p>Content is never lost: a force-reveal timer guarantees everything appears even without scrolling.</p></section>
</main>
<script>
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { rootMargin: '0px 0px -10% 0px' });
document.querySelectorAll('.reveal').forEach(function (el) { io.observe(el); });
</script>
</body>
</html>
compiler/fixtures/nonaria.html
+69
View File
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Non-ARIA interactive patterns</title>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 48px 24px; }
h1 { font-size: 30px; } h2 { font-size: 20px; margin-top: 40px; }
/* A custom dropdown with NO aria — just a div with a click handler. */
.cmenu { position: relative; display: inline-block; }
.cbtn { cursor: pointer; user-select: none; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 16px; font-size: 15px; background: #fff; }
.cbtn.is-open { background: #eef2ff; border-color: #4f46e5; color: #4f46e5; }
.cpanel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 8px; }
.cpanel { display: none; }
.cpanel.is-open { display: block; }
.cpanel a { display: block; padding: 8px 12px; border-radius: 6px; color: #1a1a1a; text-decoration: none; }
/* A custom modal with NO aria — div trigger + div overlay. */
.open-x { cursor: pointer; display: inline-block; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 16px; font-size: 15px; }
.ovl { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; display: none; align-items: center; justify-content: center; }
.ovl.is-open { display: flex; }
.box { background: #fff; border-radius: 14px; padding: 28px; max-width: 440px; width: 90%; }
.x { float: right; cursor: pointer; font-size: 22px; }
</style>
</head>
<body>
<main>
<h1>Non-ARIA patterns</h1>
<p>A custom dropdown and modal built from plain &lt;div&gt;s with click handlers and no ARIA at all — the kind the recognizer can only find via real event listeners + drive-and-diff.</p>
<h2>Custom dropdown</h2>
<div class="cmenu">
<div class="cbtn" id="cbtn">Resources ▾</div>
<div class="cpanel" id="cpanel">
<a href="#docs">Documentation</a>
<a href="#guides">Guides</a>
<a href="#api">API reference</a>
</div>
</div>
<h2>Custom modal</h2>
<div class="open-x" id="openx">Contact us</div>
<div class="ovl" id="ovl">
<div class="box">
<span class="x" id="closex">×</span>
<h3>Contact us</h3>
<p>Reach the team at hello@example.com — we usually reply within a day.</p>
</div>
</div>
</main>
<script>
const cbtn = document.getElementById("cbtn"), cpanel = document.getElementById("cpanel");
cbtn.addEventListener("click", () => {
const open = cpanel.classList.toggle("is-open");
cbtn.classList.toggle("is-open", open);
});
const ovl = document.getElementById("ovl");
document.getElementById("openx").addEventListener("click", () => ovl.classList.add("is-open"));
document.getElementById("closex").addEventListener("click", () => ovl.classList.remove("is-open"));
ovl.addEventListener("click", (e) => { if (e.target === ovl) ovl.classList.remove("is-open"); });
document.addEventListener("keydown", (e) => { if (e.key === "Escape") { ovl.classList.remove("is-open"); cpanel.classList.remove("is-open"); cbtn.classList.remove("is-open"); } });
</script>
</body>
</html>
compiler/fixtures/numeric-section.html
+9
View File
@@ -0,0 +1,9 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Numeric Heading Repro</title>
<style>*{margin:0;box-sizing:border-box}body{font-family:system-ui}section,footer{display:block;min-height:240px;padding:48px}h1{font-size:40px}h2{font-size:32px}h3{font-size:24px}</style></head>
<body>
<section><h1>Build faster than ever</h1><p>Lead paragraph for the hero block goes here.</p></section>
<section><h2>0019 Iterate Faster</h2><p>This section heading starts with a numeric layer id.</p><a href="/x">Learn more</a></section>
<section><h3>Pricing plans</h3><ul><li>Free</li><li>Pro</li><li>Team</li></ul></section>
<section><h2>Frequently asked questions</h2><p>Answers to common questions.</p><span>more</span></section>
<footer><p>&copy; 2026 Example</p></footer>
</body></html>
compiler/fixtures/og-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 B

compiler/fixtures/polish.html
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Polish fixture — iframe + inline-block headings</title>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; color: #111; background: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
section { margin: 0 0 64px; }
.label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin: 0 0 16px; }
/* Control: plain block heading */
h1.plain { font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 520px; margin: 0; }
/* The linear/notion pattern: each word an inline-block, wraps across lines */
h1.words { font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 520px; margin: 0; }
h1.words .w { display: inline-block; }
/* Same, plus zero-width inline spacer spans between words (staggered-text rigs) */
h1.spacer { font-size: 56px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 520px; margin: 0; }
h1.spacer .w { display: inline-block; }
h1.spacer .sp { display: inline-block; width: 0.28em; }
/* iframe embed: a sized box that should be preserved as a placeholder */
.embed { width: 100%; max-width: 560px; height: 315px; border: 1px solid #ddd; border-radius: 12px; display: block; }
.map { width: 320px; height: 200px; border: 0; margin-top: 24px; }
.grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.chip { display: inline-block; background: #f1f5f9; border-radius: 8px; padding: 10px 16px; font-size: 15px; }
footer { border-top: 1px solid #eee; padding: 24px; text-align: center; color: #999; font-size: 13px; }
</style>
</head>
<body>
<main>
<section>
<p class="label">Control · plain heading</p>
<h1 class="plain">Build better products with a faster planning tool</h1>
</section>
<section>
<p class="label">Words · inline-block per word</p>
<h1 class="words"><span class="w">Build</span> <span class="w">better</span> <span class="w">products</span> <span class="w">with</span> <span class="w">a</span> <span class="w">faster</span> <span class="w">planning</span> <span class="w">tool</span></h1>
</section>
<section>
<p class="label">Words + zero-width spacers</p>
<h1 class="spacer"><span class="w">Build</span><span class="sp"></span><span class="w">better</span><span class="sp"></span><span class="w">products</span><span class="sp"></span><span class="w">with</span><span class="sp"></span><span class="w">a</span><span class="sp"></span><span class="w">faster</span><span class="sp"></span><span class="w">planning</span><span class="sp"></span><span class="w">tool</span></h1>
</section>
<section>
<p class="label">iframe · video embed placeholder</p>
<iframe class="embed" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Embedded video" allowfullscreen></iframe>
<iframe class="map" src="https://www.openstreetmap.org/export/embed.html" title="Map"></iframe>
</section>
<section>
<p class="label">flex chips (inline-block, control for layout)</p>
<div class="grid">
<span class="chip">Planning</span>
<span class="chip">Issues</span>
<span class="chip">Roadmaps</span>
<span class="chip">Insights</span>
</div>
</section>
</main>
<footer>Polish fixture · deterministic local test</footer>
</body>
</html>
compiler/fixtures/robots.txt
+3
View File
@@ -0,0 +1,3 @@
User-agent: *
Allow: /
Sitemap: /sitemap.xml
compiler/fixtures/seo-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 B

compiler/fixtures/seo-rich.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SEO Rich Fixture</title>
<meta name="description" content="A local fixture with rich SEO metadata for generator tests.">
<meta name="keywords" content="clone, seo, fixture">
<meta name="robots" content="index,follow">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="theme-color" content="#123456">
<meta name="color-scheme" content="light dark">
<link rel="canonical" href="/seo-rich.html">
<link rel="alternate" hreflang="en" href="/seo-rich.html">
<link rel="alternate" hreflang="es" href="/es/seo-rich.html">
<link rel="icon" type="image/png" sizes="32x32" href="/seo-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/mask.svg" color="#123456">
<link rel="manifest" href="/site.webmanifest">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">
<meta property="og:title" content="SEO Rich Fixture OG">
<meta property="og:description" content="Open Graph description from the source page.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Fixture Site">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO Rich Fixture Twitter">
<meta name="twitter:description" content="Twitter card description from the source page.">
<meta name="twitter:image" content="/twitter-image.png">
<script type="application/ld+json" id="fixture-jsonld">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "SEO Rich Fixture",
"url": "https://fixtures.example/seo-rich.html"
}
</script>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: #172033; background: #f7fafc; }
main { max-width: 880px; margin: 0 auto; padding: 64px 24px; }
h1 { font-size: 42px; margin: 0 0 12px; letter-spacing: 0; }
p { font-size: 18px; line-height: 1.6; margin: 0 0 18px; color: #48566f; }
.panel { margin-top: 32px; padding: 24px; border: 1px solid #d9e2ef; border-radius: 8px; background: #fff; }
</style>
</head>
<body>
<main>
<h1>SEO Rich Fixture</h1>
<p>This page exercises generator-level SEO inventory, metadata emission, icons, manifests, structured data, and llms.txt preservation.</p>
<section class="panel">
<h2>Captured content</h2>
<p>The generated llms fallback can summarize useful page and route content when the source does not expose its own llms.txt.</p>
</section>
</main>
</body>
</html>
compiler/fixtures/site.webmanifest
+19
View File
@@ -0,0 +1,19 @@
{
"name": "SEO Rich Fixture",
"short_name": "SEOFixture",
"icons": [
{
"src": "/manifest-icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/brand.svg",
"sizes": "any",
"type": "image/svg+xml"
}
],
"theme_color": "#123456",
"background_color": "#ffffff",
"display": "standalone"
}
compiler/fixtures/site/blog.html
+75
View File
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acme — Blog</title>
<style>
*{box-sizing:border-box} body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;margin:0;color:#1a1a1a;background:#fff}
header{border-bottom:1px solid #e5e7eb}
nav{max-width:960px;margin:0 auto;padding:16px 24px;display:flex;gap:20px;align-items:center}
nav .brand{font-weight:700;margin-right:auto}
nav a{color:#374151;text-decoration:none;font-size:15px;font-weight:500}
main{max-width:760px;margin:0 auto;padding:48px 24px}
h1{font-size:32px;margin:0 0 28px}
.posts{list-style:none;margin:0;padding:0}
.posts li{padding:20px 0;border-top:1px solid #eee}
.posts a{color:inherit;text-decoration:none;display:block}
.posts .date{font-size:13px;color:#9ca3af}
.posts h2{font-size:20px;margin:6px 0 4px}
.posts p{font-size:14px;color:#6b7280;line-height:1.6;margin:0}
footer{max-width:960px;margin:0 auto;padding:32px 24px;color:#9ca3af;font-size:13px;border-top:1px solid #e5e5e5}
</style>
</head>
<body>
<header>
<nav aria-label="Primary">
<span class="brand">Acme</span>
<a href="/">Home</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
</nav>
</header>
<main>
<h1>From the blog</h1>
<ul class="posts">
<li>
<a href="blog.html">
<span class="date">Jun 2, 2026</span>
<h2>Announcing the alpha release</h2>
<p>A first look at everything that shipped in our earliest public build.</p>
</a>
</li>
<li>
<a href="blog.html">
<span class="date">May 21, 2026</span>
<h2>A practical guide to CSS grid</h2>
<p>Lay out responsive collections without fighting the box model.</p>
</a>
</li>
<li>
<a href="blog.html">
<span class="date">May 9, 2026</span>
<h2>Shipping faster pages in 2026</h2>
<p>The performance budget we hold every release to, and why it matters.</p>
</a>
</li>
<li>
<a href="blog.html">
<span class="date">Apr 27, 2026</span>
<h2>Rethinking our color system</h2>
<p>How we moved to semantic tokens and what we learned along the way.</p>
</a>
</li>
<li>
<a href="blog.html">
<span class="date">Apr 14, 2026</span>
<h2>Highlights from the meetup</h2>
<p>Talks, demos, and conversations from our first in-person gathering.</p>
</a>
</li>
</ul>
</main>
<footer>&copy; 2026 Acme, Inc. All rights reserved.</footer>
</body>
</html>
compiler/fixtures/site/faq.html
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acme — FAQ</title>
<style>
*{box-sizing:border-box} body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;margin:0;color:#1a1a1a;background:#fff}
header{border-bottom:1px solid #e5e7eb}
nav{max-width:960px;margin:0 auto;padding:16px 24px;display:flex;gap:20px;align-items:center}
nav .brand{font-weight:700;margin-right:auto}
nav a{color:#374151;text-decoration:none;font-size:15px;font-weight:500}
main{max-width:760px;margin:0 auto;padding:48px 24px}
h1{font-size:32px;margin:0 0 24px}
.acc{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
.acc-item+.acc-item{border-top:1px solid #e5e7eb}
.acc-trigger{appearance:none;width:100%;text-align:left;border:0;background:#fafafa;padding:16px 18px;font-size:16px;cursor:pointer;color:#1a1a1a}
.acc-trigger[aria-expanded=true]{background:#eef2ff;color:#4f46e5}
.acc-panel{padding:4px 18px 20px;font-size:15px;line-height:1.6;color:#4b5563}
.acc-panel[hidden]{display:none}
footer{max-width:960px;margin:0 auto;padding:32px 24px;color:#9ca3af;font-size:13px;border-top:1px solid #e5e5e5}
</style>
</head>
<body>
<header>
<nav aria-label="Primary">
<span class="brand">Acme</span>
<a href="/">Home</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
</nav>
</header>
<main>
<h1>Frequently asked questions</h1>
<div class="acc">
<div class="acc-item">
<button class="acc-trigger" id="a1" aria-controls="s1" aria-expanded="true">How do I get started?</button>
<div class="acc-panel" id="s1" role="region" aria-labelledby="a1"><p>Sign up for the Starter plan and follow the onboarding guide.</p></div>
</div>
<div class="acc-item">
<button class="acc-trigger" id="a2" aria-controls="s2" aria-expanded="false">Can I upgrade later?</button>
<div class="acc-panel" id="s2" role="region" aria-labelledby="a2" hidden><p>Yes — upgrade to Pro anytime from your account settings.</p></div>
</div>
<div class="acc-item">
<button class="acc-trigger" id="a3" aria-controls="s3" aria-expanded="false">Do you offer refunds?</button>
<div class="acc-panel" id="s3" role="region" aria-labelledby="a3" hidden><p>We offer a 30-day money-back guarantee on all paid plans.</p></div>
</div>
</div>
</main>
<footer>&copy; 2026 Acme, Inc. All rights reserved.</footer>
<script>
document.querySelectorAll('.acc-trigger').forEach((btn)=>{btn.addEventListener('click',()=>{const open=btn.getAttribute('aria-expanded')==='true';btn.setAttribute('aria-expanded',open?'false':'true');const p=document.getElementById(btn.getAttribute('aria-controls'));if(p)p.hidden=open;});});
</script>
</body>
</html>
compiler/fixtures/site/index.html
+71
View File
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acme — Home</title>
<style>
*{box-sizing:border-box} body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;margin:0;color:#1a1a1a;background:#fff}
header{border-bottom:1px solid #e5e7eb}
nav{max-width:960px;margin:0 auto;padding:16px 24px;display:flex;gap:20px;align-items:center}
nav .brand{font-weight:700;margin-right:auto}
nav a{color:#374151;text-decoration:none;font-size:15px;font-weight:500}
main{max-width:960px;margin:0 auto;padding:48px 24px}
h1{font-size:34px;margin:0 0 8px}
.intro{color:#6b7280;font-size:17px;margin:0 0 40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{border:1px solid #e5e7eb;border-radius:12px;padding:22px}
.feature .ico{width:36px;height:36px;border-radius:8px;background:#eef2ff}
.feature h3{font-size:18px;margin:14px 0 6px}
.feature p{font-size:14px;color:#6b7280;line-height:1.6;margin:0}
footer{max-width:960px;margin:0 auto;padding:32px 24px;color:#9ca3af;font-size:13px;border-top:1px solid #e5e5e5}
</style>
</head>
<body>
<header>
<nav aria-label="Primary">
<span class="brand">Acme</span>
<a href="/">Home</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
</nav>
</header>
<main>
<h1>Build faster with Acme</h1>
<p class="intro">Everything your team needs to ship, in one place.</p>
<div class="grid">
<div class="feature">
<div class="ico"></div>
<h3>Fast by default</h3>
<p>Sensible defaults and zero-config builds get you to production quickly.</p>
</div>
<div class="feature">
<div class="ico"></div>
<h3>Collaborative</h3>
<p>Share previews and gather feedback without leaving your editor.</p>
</div>
<div class="feature">
<div class="ico"></div>
<h3>Secure</h3>
<p>SSO, audit logs, and granular permissions for every workspace.</p>
</div>
<div class="feature">
<div class="ico"></div>
<h3>Observable</h3>
<p>Built-in metrics and tracing so you always know what shipped.</p>
</div>
<div class="feature">
<div class="ico"></div>
<h3>Extensible</h3>
<p>A plugin API and webhooks connect Acme to the rest of your stack.</p>
</div>
<div class="feature">
<div class="ico"></div>
<h3>Supported</h3>
<p>Priority support and a responsive community keep you unblocked.</p>
</div>
</div>
</main>
<footer>&copy; 2026 Acme, Inc. All rights reserved.</footer>
</body>
</html>
compiler/fixtures/sitemap.xml
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>/seo-rich.html</loc></url>
</urlset>
compiler/fixtures/twitter-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 B