Skip to content

Integrate live demo into hero section and add code toggle #10

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

Open
Theo-Steiner wants to merge 2 commits into
base: main
Choose a base branch
from
+102 −117
Open

Integrate live demo into hero section and add code toggle #10

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f36c32
Move live comment demo into the hero, with a code toggle
claude Jul 25, 2026
3cd3808
Rewrite hero copy as the eventual announcement post, size demo to mat…
claude Jul 25, 2026
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
219 changes: 102 additions & 117 deletions apps/host/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

let { data }: PageProps = $props();
const threadUri = $derived(data.thread);
let showCode = $state(false);

const quickstart = `pnpm add @svebcomponents/atproto.comments

Expand Down Expand Up @@ -150,48 +151,87 @@ import "@svebcomponents/atproto.comments";`;
<section class="hero">
<div class="hero-copy">
<div class="eyebrow"><span></span> Open social comments</div>
<h1>Your post.<br /><em>Their voices.</em></h1>
<h1>Introducing<br /><em>&lt;atproto-comments&gt;</em></h1>
<p class="lede">
Any ATProto thread, as a native comment section — no database, no
lock-in.
Comments for your site, straight from the AT Protocol — no database, no
lock-in. Reply to this post and watch it show up live below.
</p>
<div class="hero-actions">
<a class="button primary" href="#start">Add to your site</a>
<a class="button secondary" href="#demo">See it live</a>
<button
class="button secondary"
type="button"
onclick={() => (showCode = !showCode)}
aria-expanded={showCode}
>
{showCode ? "Hide the code" : "View the code"}
</button>
</div>
<p class="microcopy">
MIT licensed · framework-agnostic · hosted backend included
</p>
</div>

<div class="hero-code" aria-label="Minimal usage example">
<div
class="hero-demo"
aria-label="Live ATProto thread, rendered by this component"
>
<div class="window-bar">
<span></span><span></span><span></span>
<small>article.html</small>
<small>Live ATProto thread</small>
</div>
<div class="hero-demo-panel">
{#if data.threadData}
<atproto-comments
thread={threadUri}
threadData={data.threadData}
service="/atproto"
showRoot
></atproto-comments>
{:else}
<p class="demo-unavailable">
The public AppView did not return this thread. Try another post with
the query parameter below.
</p>
{/if}
</div>
<pre><code
><span class="code-muted"
>&lt;!-- no install, straight from jsDelivr --&gt;</span
>
{#if showCode}
<pre class="hero-demo-code"><code
><span class="code-muted"
>&lt;!-- no install, straight from jsDelivr --&gt;</span
>
&lt;<span class="code-pink">script</span> <span class="code-blue">type</span
>=<span class="code-green">"module"</span>
>=<span class="code-green">"module"</span>
<span class="code-blue">src</span>=<span class="code-green"
>"https://cdn.jsdelivr.net/npm/<wbr />@svebcomponents/<wbr
/>atproto.comments"</span
>&gt;
>"https://cdn.jsdelivr.net/npm/<wbr />@svebcomponents/<wbr
/>atproto.comments"</span
>&gt;
&lt;/<span class="code-pink">script</span>&gt;

<span class="code-muted">&lt;!-- one component --&gt;</span>
<span class="code-muted"
>&lt;!-- one component, pointed at the thread above --&gt;</span
>
&lt;<span class="code-pink">atproto-comments</span>
<span class="code-blue">thread</span>=<span class="code-green"
>"https://bsky.app/…"</span
>
>"https://bsky.app/…"</span
>
&gt;&lt;/<span class="code-pink">atproto-comments</span>&gt;</code
></pre>
></pre>
{/if}
<div class="code-foot">
<span class="pulse" aria-hidden="true"></span>
Live updates connected
<a
class="code-foot-link"
href="https://bsky.app/profile/theosteiner.de/post/3mreni33v7k2c"
target="_blank"
rel="noreferrer">Open original ↗</a
>
</div>
<p class="demo-hint">
Try another post with
<code>?thread=&lt;AT URI or bsky.app URL&gt;</code>.
</p>
</div>
</section>

Expand Down Expand Up @@ -320,45 +360,6 @@ import "@svebcomponents/atproto.comments";`;
</div>
</section>

<section id="demo" class="section demo-section">
<div class="demo-heading">
<div>
<p class="kicker">The real component</p>
<h2>Not a screenshot.</h2>
</div>
<p>
This thread is server-rendered below, hydrated in place, and subscribed
to the same hosted event bridge your site gets by default.
</p>
</div>
<div class="demo-frame">
<div class="demo-toolbar">
<span><i></i> Live ATProto thread</span>
<a
href="https://bsky.app/profile/theosteiner.de/post/3mreni33v7k2c"
target="_blank"
rel="noreferrer">Open original ↗</a
>
</div>
{#if data.threadData}
<atproto-comments
thread={threadUri}
threadData={data.threadData}
service="/atproto"
showRoot
></atproto-comments>
{:else}
<p class="demo-unavailable">
The public AppView did not return this thread. Try another post with
the query parameter below.
</p>
{/if}
</div>
<p class="demo-hint">
Try another post with <code>?thread=&lt;AT URI or bsky.app URL&gt;</code>.
</p>
</section>

<section class="section architecture">
<div class="section-intro">
<p class="kicker">Designed for the public web</p>
Expand Down Expand Up @@ -703,10 +704,14 @@ import "@svebcomponents/atproto.comments";`;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
border: none;
border-radius: 999px;
background: none;
font-family: inherit;
font-size: 0.9rem;
font-weight: 750;
text-decoration: none;
cursor: pointer;
}

.button.primary {
Expand All @@ -732,7 +737,7 @@ import "@svebcomponents/atproto.comments";`;
margin-top: 1.2rem;
}

.hero-code {
.hero-demo {
overflow: hidden;
border: 1px solid #34343a;
border-radius: 18px;
Expand Down Expand Up @@ -782,11 +787,28 @@ import "@svebcomponents/atproto.comments";`;
monospace;
}

.hero-code pre {
min-height: 300px;
display: flex;
align-items: center;
.hero-demo-panel {
background: #fff;
color: #202025;
}

.hero-demo-panel :global(atproto-comments) {
max-height: 320px;
}

.hero-demo-panel .demo-unavailable {
margin: 0;
padding: clamp(1.4rem, 4vw, 2.5rem);
color: #67635d;
font-size: 0.88rem;
line-height: 1.6;
}

.hero-demo-code {
max-height: 320px;
padding: clamp(1.2rem, 3.5vw, 2rem);
border-top: 1px solid #34343a;
overflow-y: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
Expand Down Expand Up @@ -821,8 +843,13 @@ import "@svebcomponents/atproto.comments";`;
monospace;
}

.pulse,
.demo-toolbar i {
.code-foot-link {
margin-left: auto;
color: #ff8fb6;
text-decoration: none;
}

.pulse {
width: 7px;
height: 7px;
border-radius: 50%;
Expand Down Expand Up @@ -870,8 +897,7 @@ import "@svebcomponents/atproto.comments";`;

.principles p,
.section-intro > p:last-child,
.reference-heading > p,
.demo-heading > p {
.reference-heading > p {
color: #656159;
line-height: 1.65;
}
Expand Down Expand Up @@ -967,14 +993,6 @@ import "@svebcomponents/atproto.comments";`;
border-radius: 9px;
}

.demo-section {
width: auto;
padding-inline: max(1.5rem, calc((100vw - 1180px) / 2));
background: #222228;
color: #f8f6f1;
}

.demo-heading,
.reference-heading {
display: grid;
grid-template-columns: 1fr 0.8fr;
Expand All @@ -983,44 +1001,6 @@ import "@svebcomponents/atproto.comments";`;
margin-bottom: 3rem;
}

.demo-heading .kicker {
color: #ff83ad;
}

.demo-heading > p {
color: #b6b4bd;
}

.demo-frame {
overflow: hidden;
max-width: 900px;
margin: 0 auto;
border: 1px solid #44444d;
border-radius: 18px;
background: #fff;
color: #202025;
}

.demo-toolbar {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.1rem;
border-bottom: 1px solid #e5e1da;
color: #67635d;
font-size: 0.76rem;
}

.demo-toolbar span {
display: flex;
align-items: center;
gap: 0.55rem;
}

.demo-toolbar a {
text-decoration: none;
}

:global(atproto-comments) {
display: block;
max-height: min(68vh, 660px);
Expand All @@ -1033,6 +1013,8 @@ import "@svebcomponents/atproto.comments";`;
}

.demo-hint {
margin: 0;
padding: 0.75rem 1rem 1rem;
color: #8f8d96;
font-size: 0.78rem;
text-align: center;
Expand Down Expand Up @@ -1306,7 +1288,7 @@ import "@svebcomponents/atproto.comments";`;
padding-top: 4rem;
}

.hero-code {
.hero-demo {
transform: none;
}

Expand All @@ -1319,7 +1301,6 @@ import "@svebcomponents/atproto.comments";`;
border-left: 0;
}

.demo-heading,
.reference-heading,
.events-grid {
grid-template-columns: 1fr;
Expand Down Expand Up @@ -1377,19 +1358,23 @@ import "@svebcomponents/atproto.comments";`;
min-height: 0;
}

.hero-code pre {
.hero-demo-code {
font-size: 0.68rem;
}

.demo-section,
.reference {
width: auto;
padding-inline: 1rem;
}

.demo-toolbar {
.code-foot {
align-items: flex-start;
flex-direction: column;
gap: 0.3rem;
}

.code-foot-link {
margin-left: 0;
}

.architecture-notes {
Expand Down