From d4c4b2e400666b04f7adcd254acd0e1a9cb8fa6a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 10 Jul 2026 13:23:39 +0200
Subject: [PATCH] fix: simplify homepage to real install steps with inline
 sign-in

---
 app/pages/index.vue | 159 ++++++++++++++++++--------------------------
 1 file changed, 64 insertions(+), 95 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 85ddeaf..361543e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -23,7 +23,7 @@ router.afterEach(() => {
   <div class="shell">
     <a class="skip-link" href="#main">skip to main content</a>
     <header class="nav-term">
-      <nav class="nav-term__line" aria-label="primary"><span class="prompt" aria-hidden="true">&gt;</span> <a class="nav-term__mark" href="/"><SynchubMark :wordmark="true" :size="18" /></a> <ul class="nav-term__args"><li><a href="#start">--start</a></li> <li><a href="#signin">--sign-in</a></li></ul><span class="caret" aria-hidden="true"></span></nav>
+      <nav class="nav-term__line" aria-label="primary"><span class="prompt" aria-hidden="true">&gt;</span> <a class="nav-term__mark" href="/"><SynchubMark :wordmark="true" :size="18" /></a><span class="caret" aria-hidden="true"></span></nav>
     </header>
 
     <main id="main">
@@ -32,56 +32,44 @@ router.afterEach(() => {
         <p class="hero__lede">
           synchub mirrors your public repositories to
           <a href="https://tangled.org">tangled.org</a>.
-          install the github app, connect your tangled identity, and your branches
-          and tags will stay in sync.
+          three steps, then every push stays in sync.
         </p>
 
-        <pre class="session" role="img" aria-label="How synchub works"><span class="c"># 1 · install the github app on the repos to mirror</span>
-<span class="p">$</span> gh app install <span class="a">synchub-to</span>
-
-<span class="c"># 2 · connect your tangled identity</span>
-<span class="p">$</span> synchub-to <span class="a">@alice.bsky.social</span>
-
-<span class="c"># 3 · push as usual</span>
-<span class="p">$</span> git push origin main
-<span class="ok">✓</span> mirrored alice/widget → tangled.org <span class="dim">(2 refs)</span><span class="caret" aria-hidden="true"></span></pre>
-      </section>
-
-      <section id="start" class="panel reveal" style="--i: 1">
-        <h2 class="panel__title">new here?</h2>
-        <p class="panel__body">
-          install the github app on the repositories you'd like to mirror,
-          then come back and sign in with your tangled handle. (only public,
-          non-fork repos are synced.)
-        </p>
-        <a class="btn btn--primary" :href="installUrl">install the github app</a>
-      </section>
-
-      <section id="signin" class="panel reveal" style="--i: 2">
-        <h2 class="panel__title">returning?</h2>
-        <p class="panel__body">
-          already connected on another device? just enter your handle.
-        </p>
-        <form class="signin" action="/api/atproto/login" method="get">
-          <div class="signin__group">
-            <label class="signin__label" for="handle">handle</label>
-            <span class="signin__field">
-              <span class="signin__prompt" aria-hidden="true">@</span>
-              <input
-                id="handle"
-                type="text"
-                name="handle"
-                required
-                placeholder="alice.bsky.social"
-                autocomplete="username"
-                autocapitalize="none"
-                autocorrect="off"
-                spellcheck="false"
-              >
+        <ol class="steps">
+          <li class="steps__item">
+            <span>
+              install the github app on the repositories you'd like to mirror
+              (only public, non-fork repos are synced)
             </span>
-          </div>
-          <button class="btn" type="submit">sign in</button>
-        </form>
+            <a class="btn btn--primary" :href="installUrl">install the github app</a>
+          </li>
+          <li class="steps__item">
+            <span>sign in with your tangled handle</span>
+            <form class="signin" action="/api/atproto/login" method="get">
+              <div class="signin__group">
+                <label class="signin__label" for="handle">handle</label>
+                <span class="signin__field">
+                  <span class="signin__prompt" aria-hidden="true">@</span>
+                  <input
+                    id="handle"
+                    type="text"
+                    name="handle"
+                    required
+                    placeholder="alice.bsky.social"
+                    autocomplete="username"
+                    autocapitalize="none"
+                    autocorrect="off"
+                    spellcheck="false"
+                  >
+                </span>
+              </div>
+              <button class="btn" type="submit">sign in</button>
+            </form>
+          </li>
+          <li class="steps__item">
+            <span>push as usual; your branches and tags mirror to tangled.org</span>
+          </li>
+        </ol>
       </section>
     </main>
 
@@ -127,27 +115,6 @@ router.afterEach(() => {
 
 .nav-term__mark:hover { color: inherit; }
 
-.nav-term__args {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.9ch;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav-term__args a {
-  display: inline-flex;
-  align-items: center;
-  min-height: 44px;
-  color: var(--color-muted);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  white-space: nowrap;
-}
-
-.nav-term__args a:hover { color: var(--color-ink); }
-
 .caret {
   display: inline-block;
   width: 0.55ch;
@@ -182,41 +149,43 @@ router.afterEach(() => {
   margin: 0 0 var(--space-xl);
 }
 
-.session {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  line-height: 1.7;
-  background: var(--color-paper-2);
-  border: var(--rule-hair) solid var(--color-rule);
-  border-radius: var(--radius-md);
-  padding: var(--space-lg);
+.steps {
+  list-style: none;
+  counter-reset: step;
   margin: 0;
-  overflow-x: auto;
-  color: var(--color-ink);
+  padding: 0;
+  max-width: var(--measure);
 }
 
-.session .c { color: var(--color-neutral); }
-.session .p { color: var(--color-accent); }
-.session .a { color: var(--color-info); }
-.session .ok { color: var(--color-ok); }
-.session .dim { color: var(--color-neutral); }
-
-.panel {
-  padding-block: var(--space-xl);
-  border-top: var(--rule-hair) solid var(--color-rule);
+.steps__item {
+  counter-increment: step;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  padding-left: calc(var(--space-lg) + var(--space-sm));
+  margin-bottom: var(--space-lg);
+  color: var(--color-muted);
+  font-size: var(--text-md);
+  line-height: 1.6;
 }
 
-.panel__title {
-  font-size: var(--text-lg);
-  margin: 0 0 var(--space-sm);
+.steps__item::before {
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  font-family: var(--font-mono);
+  color: var(--color-accent);
 }
 
-.panel__body {
-  max-width: var(--measure);
-  color: var(--color-muted);
-  margin: 0 0 var(--space-lg);
+.steps__item a:not(.btn) {
+  color: var(--color-info);
+  text-decoration: underline;
 }
 
+.steps__item a:not(.btn):hover { color: var(--color-ink); }
+
 .signin {
   display: flex;
   flex-wrap: wrap;
-- 
2.51.2