Integrate live demo into hero section and add code toggle#10
Open
Theo-Steiner wants to merge 2 commits into
Open
Integrate live demo into hero section and add code toggle#10Theo-Steiner wants to merge 2 commits into
Theo-Steiner wants to merge 2 commits into
Conversation
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.
…ch code Headline becomes "Introducing <atproto-comments>" 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restructured the homepage to integrate the live ATProto thread demo directly into the hero section, replacing the separate demo section. Added a toggle to show/hide the implementation code snippet.
Key Changes
showCodestate to allow users to toggle between viewing the live demo and the code implementationaria-expanded).hero-codeto.hero-demoand restructured it to contain both the live component panel and optional code displaydemo-sectionwith its heading and toolbar, consolidating all demo content into the heroImplementation Details
.hero-demo-codeelement via Svelte's conditional renderingcursor: pointer,border: none, andbackground: noneto properly style the toggle buttonshowCodeis true, reducing initial DOM sizehttps://claude.ai/code/session_01VMmkwD4VkGZqB21wNoFGB6