Skip to content

Marquee feature carousel, roomier footer, full SEO pass #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
djdevpro merged 1 commit into from
Jun 12, 2026
Merged

Marquee feature carousel, roomier footer, full SEO pass #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 124 additions & 15 deletions landing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,40 @@
content="A DevTools panel that turns noisy network traffic into a compact, secret-free TOON digest. Small enough to paste into an LLM, complete enough to debug with."
/>
<link rel="icon" href="./icon.svg" />
<link rel="apple-touch-icon" href="./icon/128.png" />
<link rel="canonical" href="https://djdevpro.github.io/net-digest/" />
<meta name="theme-color" content="#0a101c" />
<meta name="author" content="Youcef Djidjelli" />

<meta property="og:type" content="website" />
<meta property="og:site_name" content="NetDigest" />
<meta property="og:title" content="NetDigest · Network → tokens" />
<meta property="og:description" content="Turn DevTools network traffic into a compact, secret-free TOON digest your LLM can actually read. 7x smaller than a HAR, with recorded user flow and real initiators." />
<meta property="og:url" content="https://djdevpro.github.io/net-digest/" />
<meta property="og:image" content="https://djdevpro.github.io/net-digest/og.jpg" />
<meta property="og:image:width" content="2560" />
<meta property="og:image:height" content="1380" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="NetDigest · Network → tokens" />
<meta name="twitter:description" content="Turn DevTools network traffic into a compact, secret-free TOON digest your LLM can actually read. 7x smaller than a HAR, with recorded user flow and real initiators." />
<meta name="twitter:image" content="https://djdevpro.github.io/net-digest/og.jpg" />

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "NetDigest",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Chrome",
"description": "Turn DevTools network traffic into a compact, secret-free TOON digest your LLM can actually read. 7x smaller than a HAR, with recorded user flow and real initiators.",
"url": "https://djdevpro.github.io/net-digest/",
"image": "https://djdevpro.github.io/net-digest/og.jpg",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"license": "https://github.com/djdevpro/net-digest/blob/main/LICENSE",
"author": { "@type": "Person", "name": "Youcef Djidjelli", "url": "https://djidjelli.fr" },
"codeRepository": "https://github.com/djdevpro/net-digest"
}
</script>
<style>
:root {
--bg: #0a101c;
Expand Down Expand Up @@ -41,6 +75,16 @@
min-height: 100vh;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}

.wrap {
max-width: 1160px;
margin: 0 auto;
Expand Down Expand Up @@ -235,11 +279,43 @@

/* ---- Features ---- */

.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
.features-zone {
padding: 64px 0 10px;
}

.carousel {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.track {
display: flex;
gap: 14px;
padding: 56px 0 8px;
width: max-content;
animation: marquee 42s linear infinite;
}

.carousel:hover .track {
animation-play-state: paused;
}

@keyframes marquee {
to {
transform: translateX(calc(-50% - 7px));
}
}

@media (prefers-reduced-motion: reduce) {
.track {
animation: none;
flex-wrap: wrap;
width: auto;
}

.track .card[aria-hidden] {
display: none;
}
}

@property --spin {
Expand All @@ -250,6 +326,8 @@

.card {
position: relative;
width: 312px;
flex: none;
padding: 1px;
border-radius: 14px;
background: rgba(138, 184, 232, 0.1);
Expand Down Expand Up @@ -279,11 +357,11 @@
}
}

.card:nth-child(2)::before { animation-duration: 9s; animation-delay: -3.2s; }
.card:nth-child(3)::before { animation-duration: 8s; animation-delay: -5.1s; }
.card:nth-child(4)::before { animation-duration: 10s; animation-delay: -1.6s; }
.card:nth-child(5)::before { animation-duration: 8.5s; animation-delay: -6.4s; }
.card:nth-child(6)::before { animation-duration: 9.5s; animation-delay: -2.4s; }
.card:nth-child(6n + 2)::before { animation-duration: 9s; animation-delay: -3.2s; }
.card:nth-child(6n + 3)::before { animation-duration: 8s; animation-delay: -5.1s; }
.card:nth-child(6n + 4)::before { animation-duration: 10s; animation-delay: -1.6s; }
.card:nth-child(6n + 5)::before { animation-duration: 8.5s; animation-delay: -6.4s; }
.card:nth-child(6n)::before { animation-duration: 9.5s; animation-delay: -2.4s; }

.card:hover {
transform: translateY(-4px);
Expand Down Expand Up @@ -336,7 +414,7 @@
gap: 26px;
justify-content: center;
flex-wrap: wrap;
padding: 44px 0 26px;
padding: 52px 0 36px;
color: var(--muted);
font-size: 15px;
}
Expand All @@ -363,7 +441,7 @@
text-align: center;
color: var(--faint);
font-size: 13.5px;
padding: 84px 0 72px;
padding: 96px 0 128px;
display: grid;
gap: 10px;
}
Expand Down Expand Up @@ -417,7 +495,8 @@ <h1>NetDigest</h1>
</div>
</header>

<section class="frame-zone wrap">
<section class="frame-zone wrap" aria-labelledby="demo-h">
<h2 id="demo-h" class="sr-only">Live demo of the NetDigest DevTools panel</h2>
<div class="frame">
<div class="frame-inner">
<div class="titlebar">
Expand All @@ -432,8 +511,11 @@ <h1>NetDigest</h1>
</p>
</section>

<section class="features wrap">
<div class="card"><div class="card-inner">
<section class="features-zone wrap" aria-labelledby="features-h">
<h2 id="features-h" class="sr-only">Features: dedup, redaction, token budget, flow recorder, API map, initiators</h2>
<div class="carousel">
<div class="track">
<div class="card"><div class="card-inner">
<h3><span class="tag">×12</span> Dedup &amp; diff</h3>
<p>Identical calls collapse into a single entry, and after the first array item you only see what changed. You pay for the shape once.</p>
</div></div>
Expand All @@ -457,9 +539,36 @@ <h3><span class="tag">{ }</span> API map</h3>
<h3><span class="tag">src/</span> Initiators</h3>
<p>Source maps trace every call back to the hook that fired it: <code>useArticles.useQuery</code> instead of a hashed chunk.</p>
</div></div>
<div class="card" aria-hidden="true"><div class="card-inner">
<h3><span class="tag">×12</span> Dedup &amp; diff</h3>
<p>Identical calls collapse into a single entry, and after the first array item you only see what changed. You pay for the shape once.</p>
</div></div>
<div class="card" aria-hidden="true"><div class="card-inner">
<h3><span class="tag">***</span> Secrets redacted</h3>
<p>Passwords, tokens, API keys and anything that looks like a JWT get stripped the moment they are captured. Auth headers never even reach memory.</p>
</div></div>
<div class="card" aria-hidden="true"><div class="card-inner">
<h3><span class="tag">S·M·L</span> Budget control</h3>
<p>Three detail levels, a live token counter, and per-endpoint overrides for the one response that deserves more room.</p>
</div></div>
<div class="card" aria-hidden="true"><div class="card-inner">
<h3><span class="tag">⚑ REC</span> Flow recorder</h3>
<p>Clicks, form submits and SPA navigations become timeline steps, so the model knows what triggered every request.</p>
</div></div>
<div class="card" aria-hidden="true"><div class="card-inner">
<h3><span class="tag">{ }</span> API map</h3>
<p>One click condenses the whole session into a normalized endpoint contract: methods, statuses, query keys, example shapes.</p>
</div></div>
<div class="card" aria-hidden="true"><div class="card-inner">
<h3><span class="tag">src/</span> Initiators</h3>
<p>Source maps trace every call back to the hook that fired it: <code>useArticles.useQuery</code> instead of a hashed chunk.</p>
</div></div>
</div>
</div>
</section>

<section class="steps wrap">
<section class="steps wrap" aria-labelledby="steps-h">
<h2 id="steps-h" class="sr-only">How to use NetDigest in three steps</h2>
<span><span class="n">1</span><b>Install</b> the extension</span>
<span><span class="n">2</span>Open DevTools → <b>NetDigest</b> tab</span>
<span><span class="n">3</span><b>Copy TOON</b> into your LLM</span>
Expand Down
16 changes: 15 additions & 1 deletion scripts/build-landing.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,27 @@ for (const dir of ['chunks', 'assets']) {
// demo.html = the real panel page, with root-relative URLs made relative
// (GitHub Pages serves under /net-digest/) and the demo bridge injected
// BEFORE the panel module script (classic script in <head> runs first).
// noindex: search engines should rank the landing, not the bare app frame.
let html = readFileSync(`${SRC}/devtools-panel.html`, 'utf8');
html = html.replaceAll('"/chunks/', '"./chunks/').replaceAll('"/assets/', '"./assets/');
html = html.replace('</head>', ' <script src="./demo-bridge.js"></script>\n</head>');
html = html.replace(
'</head>',
' <meta name="robots" content="noindex" />\n <script src="./demo-bridge.js"></script>\n</head>',
);
writeFileSync(`${OUT}/app/demo.html`, html);

cpSync('landing/demo-bridge.js', `${OUT}/app/demo-bridge.js`);
cpSync('landing/index.html', `${OUT}/index.html`);
cpSync('public/icon.svg', `${OUT}/icon.svg`);
cpSync('public/icon', `${OUT}/icon`, { recursive: true });
cpSync('.github/assets/hero.jpg', `${OUT}/og.jpg`); // social sharing image

// crawler plumbing
const BASE = 'https://djdevpro.github.io/net-digest/';
writeFileSync(`${OUT}/robots.txt`, `User-agent: *\nAllow: /\nDisallow: /app/\nSitemap: ${BASE}sitemap.xml\n`);
writeFileSync(
`${OUT}/sitemap.xml`,
`<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n <url><loc>${BASE}</loc><changefreq>monthly</changefreq></url>\n</urlset>\n`,
);

console.log('landing/dist ready — preview with: npx serve landing/dist');
Loading