From 5f36c323544c9b82c42e2a5fc091230fda018ec6 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 10:17:25 +0000 Subject: [PATCH 1/2] Move live comment demo into the hero, with a code toggle The real, server-rendered ATProto thread now leads the page instead of appearing near the bottom. A "View the code" button in the hero reveals the install snippet inline next to the live thread, so visitors see proof before pitch. Removes the now-redundant standalone demo section further down the page. --- apps/host/src/routes/+page.svelte | 209 ++++++++++++++---------------- 1 file changed, 94 insertions(+), 115 deletions(-) diff --git a/apps/host/src/routes/+page.svelte b/apps/host/src/routes/+page.svelte index b592494..50cbf61 100644 --- a/apps/host/src/routes/+page.svelte +++ b/apps/host/src/routes/+page.svelte @@ -4,6 +4,7 @@ let { data }: PageProps = $props(); const threadUri = $derived(data.thread); + let showCode = $state(false); const quickstart = `pnpm add @svebcomponents/atproto.comments @@ -153,45 +154,84 @@ import "@svebcomponents/atproto.comments";`;

Your post.
Their voices.

Any ATProto thread, as a native comment section — no database, no - lock-in. + lock-in. The thread below is real, not a screenshot.

Add to your site - See it live +

MIT licensed · framework-agnostic · hosted backend included

-
+
- article.html + Live ATProto thread +
+
+ {#if data.threadData} + + {:else} +

+ The public AppView did not return this thread. Try another post with + the query parameter below. +

+ {/if}
- 
<!-- no install, straight from jsDelivr -->
+      {#if showCode}
+        
<!-- no install, straight from jsDelivr -->
 <script type="module"
+            >="module"
   src="https://cdn.jsdelivr.net/npm/@svebcomponents/atproto.comments">
+              >"https://cdn.jsdelivr.net/npm/@svebcomponents/atproto.comments">
 </script>
 
-<!-- one component -->
+<!-- one component, pointed at the thread above -->
 <atproto-comments
   thread="https://bsky.app/…"
+              >"https://bsky.app/…"
 ></atproto-comments>

+          >
+ {/if}
Live updates connected + Open original ↗
+

+ Try another post with + ?thread=<AT URI or bsky.app URL>. +

@@ -320,45 +360,6 @@ import "@svebcomponents/atproto.comments";`;
-
-
-
-

The real component

-

Not a screenshot.

-
-

- This thread is server-rendered below, hydrated in place, and subscribed - to the same hosted event bridge your site gets by default. -

-
-
-
- Live ATProto thread - Open original ↗ -
- {#if data.threadData} - - {:else} -

- The public AppView did not return this thread. Try another post with - the query parameter below. -

- {/if} -
-

- Try another post with ?thread=<AT URI or bsky.app URL>. -

-
-

Designed for the public web

@@ -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 { @@ -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; @@ -782,11 +787,22 @@ 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 .demo-unavailable { + margin: 0; padding: clamp(1.4rem, 4vw, 2.5rem); + color: #67635d; + font-size: 0.88rem; + line-height: 1.6; + } + + .hero-demo-code { + padding: clamp(1.2rem, 3.5vw, 2rem); + border-top: 1px solid #34343a; white-space: pre-wrap; overflow-wrap: anywhere; } @@ -821,8 +837,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%; @@ -870,8 +891,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; } @@ -967,14 +987,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; @@ -983,44 +995,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); @@ -1033,6 +1007,8 @@ import "@svebcomponents/atproto.comments";`; } .demo-hint { + margin: 0; + padding: 0.75rem 1rem 1rem; color: #8f8d96; font-size: 0.78rem; text-align: center; @@ -1306,7 +1282,7 @@ import "@svebcomponents/atproto.comments";`; padding-top: 4rem; } - .hero-code { + .hero-demo { transform: none; } @@ -1319,7 +1295,6 @@ import "@svebcomponents/atproto.comments";`; border-left: 0; } - .demo-heading, .reference-heading, .events-grid { grid-template-columns: 1fr; @@ -1377,19 +1352,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 { From 3cd3808d6d01211882ecfdec5085f32911db31db Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 10:33:58 +0000 Subject: [PATCH 2/2] Rewrite hero copy as the eventual announcement post, size demo to match code Headline becomes "Introducing " and the lede reads as what the real launch reply will say, since the placeholder thread will be swapped for the actual @svebcomponents.dev announcement. The live comment panel is capped to the same height as the code snippet and scrolls internally, so the two states in the hero card line up visually. --- apps/host/src/routes/+page.svelte | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/host/src/routes/+page.svelte b/apps/host/src/routes/+page.svelte index 50cbf61..bc8d290 100644 --- a/apps/host/src/routes/+page.svelte +++ b/apps/host/src/routes/+page.svelte @@ -151,10 +151,10 @@ import "@svebcomponents/atproto.comments";`;
Open social comments
-

Your post.
Their voices.

+

Introducing
<atproto-comments>

- Any ATProto thread, as a native comment section — no database, no - lock-in. The thread below is real, not a screenshot. + 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.

Add to your site @@ -792,6 +792,10 @@ import "@svebcomponents/atproto.comments";`; 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); @@ -801,8 +805,10 @@ import "@svebcomponents/atproto.comments";`; } .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; }