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
.opencode/fixtures/test-site/README.md
+69
View File
@@ -0,0 +1,69 @@
# Capture-fixture site
A small static site that exercises the capture-side ailing patterns we found on real WordPress / Elementor targets:
| Section | What it tests |
| ------------------------ | ---------------------------------------------------------------------------------------------------- |
| `#hero` | `min-height: calc(100vh - var(--nav-h))` — vh detection should flag this |
| `#features` | full-width gradient + content `max-width` inner — `full_width` detection |
| `#features .card.reveal` | IntersectionObserver-driven opacity reveal — only renders correctly when capture scrolls into view |
| `#bg` | lazy-loaded background-image (class toggle on intersection) — CSS-rule extraction must catch the URL |
| `#bg::after` | `::before/::after` decorative bg-image — pseudo-element styles must be captured |
| `#marquee` | CSS-keyframes infinite scroll with offscreen items — capture should still see all 8 logos |
| `#detailed-svg` | inline SVG with `<defs>`, `<linearGradient>`, complex paths — must be preserved verbatim |
## Serve
```bash
cd .opencode/fixtures/test-site
python3 -m http.server 8765
# http://localhost:8765
```
## Run capture against the fixture
```bash
SLUG=fixture
TS=$(date +%Y%m%d-%H%M%S)
WS=".clone-workspace/${SLUG}-${TS}"
mkdir -p "$WS"
python3 .opencode/scripts/capture.py \
--url http://localhost:8765 \
--viewports 1280 \
--output "$WS/capture"
```
Then verify the new signals are present:
```bash
# vh detection
jq '.[0:5]' "$WS/vh-flags.json" # expect #hero or .hero with vh ≈ 91 (= (720-64)/720*100)
# CSS asset extraction
jq '.assets[] | select(.from_css)' "$WS/capture/meta.json" # expect ./hero-bg.svg + ./decoration.svg
# section discovery
jq '.[0].selector,.[1].selector,.[2].selector' "$WS/capture/sections/1280.json"
# per-section screenshots
ls "$WS/capture/section-shots/1280/"
```
## Iterate fast
```bash
# Replay only the post-process (vh-flags, meta.json) — sub-second
python3 .opencode/scripts/capture.py --replay --output "$WS/capture"
# Diff a rendered clone vs the captured fixture
python3 .opencode/scripts/dump-rendered.py \
--url http://localhost:3000/ \
--output /tmp/rendered.json \
--viewport 1280 --scroll-y 0
python3 .opencode/scripts/dom-diff.py \
--captured "$WS/capture/dom/1280/step-00.json" \
--rendered /tmp/rendered.json \
--root-selector "#hero"
```
The fixture is intentionally tiny so a full capture takes <5s. Use it to validate any capture-side change before re-running against a real site.
.opencode/fixtures/test-site/decoration.svg
+5
View File
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="28" fill="none" stroke="#22c55e" stroke-width="3" />
<path d="M20 36 L28 44 L46 22" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

.opencode/fixtures/test-site/hero-bg.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0c4a6e" />
<stop offset="1" stop-color="#082f49" />
</linearGradient>
<radialGradient id="glow" cx="50%" cy="40%" r="50%">
<stop offset="0" stop-color="#22c55e" stop-opacity="0.5" />
<stop offset="1" stop-color="#22c55e" stop-opacity="0" />
</radialGradient>
</defs>
<rect width="1200" height="600" fill="url(#sky)" />
<circle cx="600" cy="240" r="220" fill="url(#glow)" />
<g stroke="#22c55e" stroke-width="2" fill="none" opacity="0.4">
<path d="M0 480 Q 300 360, 600 480 T 1200 480" />
<path d="M0 520 Q 300 420, 600 520 T 1200 520" />
<path d="M0 560 Q 300 480, 600 560 T 1200 560" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 895 B

.opencode/fixtures/test-site/index.html
+132
View File
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Capture Fixture — vh, lazy-bg, marquee, SVG, IO reveal</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header class="nav">
<a href="#" class="logo">Fixture</a>
<nav>
<a href="#hero">Hero</a>
<a href="#features">Features</a>
<a href="#bg">Lazy BG</a>
<a href="#marquee">Marquee</a>
<a href="#footer">Footer</a>
</nav>
</header>
<!-- Section A: vh-relative hero. 100vh - 64px nav. -->
<section id="hero" class="hero">
<h1>Full-fold hero</h1>
<p>
This section's height is <code>min-height: calc(100vh - 64px)</code>. At a 1280×720 capture it resolves to
656px; at 1280×1080 it resolves to 1016px. The <code>vh-flags.json</code> output should pick this up and set
<code>vh_value: 91</code>.
</p>
<a href="#" class="cta">Get started</a>
</section>
<!-- Section B: full-width gradient, content max-width inside -->
<section id="features" class="features">
<div class="inner">
<h2>Three cards</h2>
<ul class="grid">
<li class="card reveal">
<svg class="icon" viewBox="0 0 32 32">
<path d="M4 16 L14 26 L28 6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" />
</svg>
<h3>Reveal me</h3>
<p>
I fade in via IntersectionObserver. A capture that doesn't trigger the IO callback will leave me at
opacity 0.
</p>
</li>
<li class="card reveal">
<svg class="icon" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="12" stroke="currentColor" stroke-width="3" fill="none" />
</svg>
<h3>Reveal me too</h3>
<p>Same pattern. Stagger delay applied via inline style.</p>
</li>
<li class="card reveal">
<svg class="icon" viewBox="0 0 32 32">
<rect x="6" y="6" width="20" height="20" rx="3" stroke="currentColor" stroke-width="3" fill="none" />
</svg>
<h3>And me</h3>
<p>Three cards = repeated_pattern candidate.</p>
</li>
</ul>
</div>
</section>
<!-- Section C: lazy-loaded background image. The CSS sets bg via a class that we toggle with IO. -->
<section id="bg" class="lazy-bg">
<div class="inner">
<h2>Background loads on scroll</h2>
<p>
Until I'm intersected, my background-image is "none". After IO fires I get a CSS-driven background. Capture
must either scroll into view or follow the CSS rule from
<code>css-rules/&lt;vp&gt;.json</code> to know the bg URL.
</p>
</div>
</section>
<!-- Section D: Swiper-style marquee with offscreen items the response listener misses -->
<section id="marquee" class="marquee">
<h2>Marquee</h2>
<div class="track">
<!-- 8 logos; the first 4 are visible at the capture viewport, the rest drift in via translate -->
<div class="logo-tile" data-idx="1">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A1</text></svg>
</div>
<div class="logo-tile" data-idx="2">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A2</text></svg>
</div>
<div class="logo-tile" data-idx="3">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A3</text></svg>
</div>
<div class="logo-tile" data-idx="4">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A4</text></svg>
</div>
<div class="logo-tile" data-idx="5">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B1</text></svg>
</div>
<div class="logo-tile" data-idx="6">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B2</text></svg>
</div>
<div class="logo-tile" data-idx="7">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B3</text></svg>
</div>
<div class="logo-tile" data-idx="8">
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B4</text></svg>
</div>
</div>
</section>
<!-- Section E: detailed SVG. Inline; the agent should preserve every path. -->
<section id="detailed-svg" class="detailed-svg">
<h2>Detailed SVG</h2>
<svg viewBox="0 0 200 100" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0ea5e9" />
<stop offset="100%" stop-color="#22c55e" />
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#g1)" rx="8" />
<path d="M10 80 Q 50 20, 100 50 T 190 30" stroke="#fff" stroke-width="3" fill="none" />
<circle cx="100" cy="50" r="6" fill="#fff" />
<text x="50%" y="92%" text-anchor="middle" font-size="12" fill="#fff">cluster</text>
</svg>
</section>
<footer id="footer" class="footer">
<p>© Fixture site — for capture-side regression testing only.</p>
</footer>
<script src="./reveal.js"></script>
</body>
</html>
.opencode/fixtures/test-site/reveal.js
+27
View File
@@ -0,0 +1,27 @@
// Minimal IntersectionObserver-driven reveal + lazy-bg trigger.
// The capture pipeline must scroll into view (or follow the CSS rule) for
// these to fire. This is the same pattern Elementor and most WP themes use.
(() => {
const reveals = document.querySelectorAll('.reveal');
const lazyBg = document.querySelector('.lazy-bg');
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) {
if (e.target.classList.contains('reveal')) e.target.classList.add('is-visible');
if (e.target === lazyBg) e.target.classList.add('is-loaded');
io.unobserve(e.target);
}
}
},
{ threshold: 0.15 }
);
reveals.forEach((r, i) => {
r.style.transitionDelay = `${i * 120}ms`;
io.observe(r);
});
if (lazyBg) io.observe(lazyBg);
})();
.opencode/fixtures/test-site/styles.css
+265
View File
@@ -0,0 +1,265 @@
/* Capture fixture stylesheet — deliberately includes patterns that the cropin clone got wrong:
vh-based heights, full-bleed widths, lazy-load gating via class toggle, marquee transform,
pseudo-element decoration, multi-stop gradient. */
:root {
--nav-h: 64px;
--accent: #22c55e;
--accent-dark: #166534;
--bg: #f8fafc;
--text: #0f172a;
--muted: #64748b;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.5;
}
.nav {
position: sticky;
top: 0;
z-index: 50;
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
background: white;
border-bottom: 1px solid #e2e8f0;
}
.nav .logo {
font-weight: 700;
text-decoration: none;
color: var(--text);
}
.nav nav {
display: flex;
gap: 16px;
}
.nav nav a {
color: var(--muted);
text-decoration: none;
}
.nav nav a:hover {
color: var(--text);
}
/* === Section A: vh-relative hero ===
The point of this section: computed.minHeight resolves to 656px at capture,
1016px on the user's 1080-tall viewport. The capture's vh-detection pass
should flag this as ~91vh. */
.hero {
min-height: calc(100vh - var(--nav-h));
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 32px;
text-align: center;
background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
}
.hero h1 {
font-size: clamp(36px, 6vw, 64px);
margin: 0;
}
.hero p {
max-width: 56ch;
margin: 0;
color: var(--muted);
}
.hero .cta {
display: inline-block;
padding: 12px 24px;
background: var(--accent);
color: white;
font-weight: 600;
border-radius: 9999px;
text-decoration: none;
transition: transform 200ms;
}
.hero .cta:hover {
transform: translateY(-2px);
}
/* === Section B: full-width gradient with inner max-width container === */
.features {
width: 100vw;
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
padding: 80px 0;
}
.features .inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.features h2 {
font-size: 36px;
margin: 0 0 32px;
}
.grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.card .icon {
width: 32px;
height: 32px;
color: var(--accent-dark);
margin-bottom: 12px;
}
.card h3 {
margin: 0 0 8px;
font-size: 20px;
}
.card p {
margin: 0;
color: var(--muted);
}
/* IntersectionObserver reveal — class .is-visible toggled via reveal.js */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* === Section C: lazy-loaded background image ===
The class .is-loaded is added once IO fires. Until then, no bg image — and the
browser does NOT GET-request the URL. capture/css-rules/<vp>.json will still
contain the rule though, so a CSS-asset-extraction pass should pick it up. */
.lazy-bg {
width: 100%;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: #0f172a;
color: white;
text-align: center;
padding: 64px 24px;
overflow: hidden;
}
.lazy-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.7) 100%);
z-index: 1;
}
.lazy-bg .inner {
position: relative;
z-index: 2;
max-width: 720px;
}
.lazy-bg h2 {
margin: 0 0 16px;
font-size: 36px;
}
.lazy-bg p {
margin: 0;
color: rgba(255, 255, 255, 0.85);
}
.lazy-bg.is-loaded {
background-image: url('./hero-bg.svg');
background-size: cover;
background-position: center;
}
/* Decorative content-image ::before that uses url() but is set in the stylesheet only. */
.lazy-bg::after {
content: '';
position: absolute;
right: 24px;
bottom: 24px;
width: 64px;
height: 64px;
background-image: url('./decoration.svg');
background-size: contain;
background-repeat: no-repeat;
z-index: 2;
opacity: 0.85;
}
/* === Section D: marquee with overflow + transform translation === */
.marquee {
padding: 64px 0;
background: white;
text-align: center;
overflow-x: hidden;
}
.marquee h2 {
margin: 0 0 24px;
font-size: 36px;
}
.marquee .track {
display: flex;
gap: 48px;
animation: scroll 20s linear infinite;
width: max-content;
padding: 0 24px;
}
.logo-tile {
flex: 0 0 auto;
height: 32px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.logo-tile svg {
height: 100%;
width: 100%;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* === Section E: detailed inline SVG === */
.detailed-svg {
padding: 64px 24px;
text-align: center;
}
.detailed-svg h2 {
margin: 0 0 24px;
font-size: 36px;
}
.detailed-svg svg {
display: block;
margin: 0 auto;
}
/* === Footer === */
.footer {
padding: 32px 24px;
background: #0f172a;
color: rgba(255, 255, 255, 0.7);
text-align: center;
}