Skip to content

Commit b253fb2

Browse files
ctkrugctkrug
committed
feat(seo): add a below-fold explainer, FAQ, and Open Graph tags
The servable app doubles as its own landing page, so give it search- intent copy: what it does, why token-level diffing matters, how to use it, and a five-question FAQ, plus og:title/og:description for link previews. Two-column on desktop, stacked under 900px.
1 parent c700899 commit b253fb2

2 files changed

Lines changed: 159 additions & 2 deletions

File tree

‎index.html‎

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
<title>Diff Poster — paste a diff, get a shareable image</title>
77
<meta
88
name="description"
9-
content="Paste a before/after code snippet and get a single beautiful, shareable diff image. No login, no export dialog."
9+
content="Paste a before/after code snippet and get a single clean, shareable image of just the change: token-level diff, sized for social, no login."
10+
/>
11+
<meta property="og:type" content="website" />
12+
<meta property="og:title" content="Diff Poster — paste a diff, get a shareable image" />
13+
<meta
14+
property="og:description"
15+
content="Turn a before/after code snippet into one clean, share-sized image that highlights exactly which tokens changed. Runs in your browser, no login."
1016
/>
1117
<link
1218
rel="icon"
@@ -73,7 +79,7 @@ <h1 class="wordmark">Diff<span class="wordmark-accent">Poster</span></h1>
7379
</button>
7480
</div>
7581
<p class="privacy-note">
76-
Everything runs in your browser — nothing is uploaded or stored.
82+
Everything runs in your browser. Nothing is uploaded or stored.
7783
</p>
7884
</section>
7985

@@ -102,6 +108,80 @@ <h1 class="wordmark">Diff<span class="wordmark-accent">Poster</span></h1>
102108
</section>
103109
</main>
104110

111+
<section class="about" aria-label="About Diff Poster">
112+
<div class="about-col">
113+
<h2 class="about-heading">Share a code change, not a screenshot</h2>
114+
<p>
115+
Diff Poster turns a before/after snippet into a single clean image
116+
of just the change. Paste the original code in one pane and the
117+
edited code in the other, pick the language, and it renders a
118+
token-level diff styled like a tidy editor window, sized 1200×675
119+
for Twitter, Bluesky, and Slack previews. Copy it to your clipboard
120+
or download the PNG. The tokenizing, diffing, and image rendering
121+
all happen in your browser; nothing is uploaded.
122+
</p>
123+
124+
<h2 class="about-heading">Why token-level, not line-level</h2>
125+
<p>
126+
Most diff screenshots paint a whole changed line red or green. When
127+
you rewrite <code>return 'hi ' + name;</code> as
128+
<code>return `hello, ${name}!`;</code>, a line diff just says "this
129+
line changed" and hides what actually changed. Diff Poster diffs at
130+
the token level (identifiers, operators, literals, strings), so
131+
only the swapped tokens are marked. The reader sees the exact
132+
substitution, which is the whole reason to share the change.
133+
</p>
134+
135+
<h2 class="about-heading">How to use it</h2>
136+
<ol class="about-steps">
137+
<li>Paste the original code into Before, the edited code into After.</li>
138+
<li>Choose JavaScript, Python, or plain text for syntax coloring.</li>
139+
<li>Click Generate image.</li>
140+
<li>Copy the image to your clipboard, or download the PNG.</li>
141+
</ol>
142+
</div>
143+
144+
<div class="about-col">
145+
<h2 class="about-heading">FAQ</h2>
146+
<dl class="faq">
147+
<dt>Is my code uploaded anywhere?</dt>
148+
<dd>
149+
No. Every step runs in your browser. There is no backend and
150+
nothing is stored; close the tab and nothing is kept.
151+
</dd>
152+
153+
<dt>Which languages are supported?</dt>
154+
<dd>
155+
Syntax coloring covers JavaScript and Python, plus a plain-text
156+
mode for anything else. The diff itself is language-agnostic, so
157+
plain text still highlights exactly which tokens changed.
158+
</dd>
159+
160+
<dt>How big can a snippet be?</dt>
161+
<dd>
162+
It is built for function-sized changes, not whole files. A very
163+
large paste shows a size notice instead of freezing the tab, and
164+
a long snippet scales down or shows a "+N more lines" marker
165+
rather than cropping silently.
166+
</dd>
167+
168+
<dt>What size is the image?</dt>
169+
<dd>
170+
1200×675 pixels, the 16:9 frame Twitter, Bluesky, and Slack use
171+
for previews, rendered at your screen's pixel density so it stays
172+
crisp on retina displays.
173+
</dd>
174+
175+
<dt>Can I copy straight to my clipboard?</dt>
176+
<dd>
177+
Yes, where the browser supports image clipboard writes. Where it
178+
doesn't, the Copy button is clearly disabled and Download PNG
179+
always works.
180+
</dd>
181+
</dl>
182+
</div>
183+
</section>
184+
105185
<footer class="site-footer">
106186
<a class="footer-cta" href="https://github.com/ctkrug/diff-poster">
107187
View on GitHub

‎src/style.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,78 @@ body {
353353
text-align: center;
354354
}
355355

356+
.about {
357+
display: grid;
358+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
359+
gap: var(--space-6);
360+
margin-top: var(--space-8);
361+
padding-top: var(--space-6);
362+
border-top: 1px solid var(--surface-2);
363+
}
364+
365+
.about-col {
366+
max-width: 60ch;
367+
}
368+
369+
.about-heading {
370+
font-family: var(--font-display);
371+
font-weight: 600;
372+
font-size: 1.25rem;
373+
color: var(--ink);
374+
margin: var(--space-3) 0 var(--space-1);
375+
}
376+
377+
.about-col > .about-heading:first-child {
378+
margin-top: 0;
379+
}
380+
381+
.about p {
382+
margin: 0 0 var(--space-2);
383+
color: var(--ink-muted);
384+
font-size: 0.95rem;
385+
line-height: 1.7;
386+
}
387+
388+
.about code {
389+
font-family: var(--font-mono);
390+
font-size: 0.85em;
391+
color: var(--ink);
392+
background: var(--surface-2);
393+
padding: 1px 5px;
394+
border-radius: 4px;
395+
}
396+
397+
.about-steps {
398+
margin: 0;
399+
padding-left: 1.4em;
400+
color: var(--ink-muted);
401+
font-size: 0.95rem;
402+
line-height: 1.7;
403+
}
404+
405+
.about-steps li {
406+
margin-bottom: var(--space-1);
407+
}
408+
409+
.faq {
410+
margin: 0;
411+
}
412+
413+
.faq dt {
414+
font-family: var(--font-display);
415+
font-weight: 600;
416+
font-size: 0.95rem;
417+
color: var(--ink);
418+
margin-top: var(--space-2);
419+
}
420+
421+
.faq dd {
422+
margin: var(--space-1) 0 var(--space-2);
423+
color: var(--ink-muted);
424+
font-size: 0.9rem;
425+
line-height: 1.65;
426+
}
427+
356428
.site-footer {
357429
display: flex;
358430
flex-wrap: wrap;
@@ -421,6 +493,11 @@ body {
421493
grid-template-columns: 1fr;
422494
}
423495

496+
.about {
497+
grid-template-columns: 1fr;
498+
gap: var(--space-4);
499+
}
500+
424501
.editor {
425502
height: 32vh;
426503
}

0 commit comments

Comments
 (0)