danielroe.dev
mirror your GitHub repos to tangled.org automatically
synchub.to
mirror
sync
tangled
github
git
fix: simplify homepage to real install steps with inline sign-in
author
Daniel Roe
date
(Jul 10, 2026, 1:23 PM +0200)
commit
d4c4b2e4
d4c4b2e400666b04f7adcd254acd0e1a9cb8fa6a
parent
a286f9ff
a286f9ffbdbc571e3daaa48b1ef95a91e1aa5c22
+64
-95
+64
-95
app/pages/index.vue
+64
-95
app/pages/index.vue
···
23
23
<div class="shell">
24
24
<a class="skip-link" href="#main">skip to main content</a>
25
25
<header class="nav-term">
26
-
<nav class="nav-term__line" aria-label="primary"><span class="prompt" aria-hidden="true">></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>
26
+
<nav class="nav-term__line" aria-label="primary"><span class="prompt" aria-hidden="true">></span> <a class="nav-term__mark" href="/"><SynchubMark :wordmark="true" :size="18" /></a><span class="caret" aria-hidden="true"></span></nav>
27
27
</header>
28
28
29
29
<main id="main">
···
32
32
<p class="hero__lede">
33
33
synchub mirrors your public repositories to
34
34
<a href="https://tangled.org">tangled.org</a>.
35
-
install the github app, connect your tangled identity, and your branches
36
-
and tags will stay in sync.
37
-
</p>
38
-
39
-
<pre class="session" role="img" aria-label="How synchub works"><span class="c"># 1 · install the github app on the repos to mirror</span>
40
-
<span class="p">$</span> gh app install <span class="a">synchub-to</span>
41
-
42
-
<span class="c"># 2 · connect your tangled identity</span>
43
-
<span class="p">$</span> synchub-to <span class="a">@alice.bsky.social</span>
44
-
45
-
<span class="c"># 3 · push as usual</span>
46
-
<span class="p">$</span> git push origin main
47
-
<span class="ok">✓</span> mirrored alice/widget → tangled.org <span class="dim">(2 refs)</span><span class="caret" aria-hidden="true"></span></pre>
48
-
</section>
49
-
50
-
<section id="start" class="panel reveal" style="--i: 1">
51
-
<h2 class="panel__title">new here?</h2>
52
-
<p class="panel__body">
53
-
install the github app on the repositories you'd like to mirror,
54
-
then come back and sign in with your tangled handle. (only public,
55
-
non-fork repos are synced.)
35
+
three steps, then every push stays in sync.
56
36
</p>
57
-
<a class="btn btn--primary" :href="installUrl">install the github app</a>
58
-
</section>
59
37
60
-
<section id="signin" class="panel reveal" style="--i: 2">
61
-
<h2 class="panel__title">returning?</h2>
62
-
<p class="panel__body">
63
-
already connected on another device? just enter your handle.
64
-
</p>
65
-
<form class="signin" action="/api/atproto/login" method="get">
66
-
<div class="signin__group">
67
-
<label class="signin__label" for="handle">handle</label>
68
-
<span class="signin__field">
69
-
<span class="signin__prompt" aria-hidden="true">@</span>
70
-
<input
71
-
id="handle"
72
-
type="text"
73
-
name="handle"
74
-
required
75
-
placeholder="alice.bsky.social"
76
-
autocomplete="username"
77
-
autocapitalize="none"
78
-
autocorrect="off"
79
-
spellcheck="false"
80
-
>
38
+
<ol class="steps">
39
+
<li class="steps__item">
40
+
<span>
41
+
install the github app on the repositories you'd like to mirror
42
+
(only public, non-fork repos are synced)
81
43
</span>
82
-
</div>
83
-
<button class="btn" type="submit">sign in</button>
84
-
</form>
44
+
<a class="btn btn--primary" :href="installUrl">install the github app</a>
45
+
</li>
46
+
<li class="steps__item">
47
+
<span>sign in with your tangled handle</span>
48
+
<form class="signin" action="/api/atproto/login" method="get">
49
+
<div class="signin__group">
50
+
<label class="signin__label" for="handle">handle</label>
51
+
<span class="signin__field">
52
+
<span class="signin__prompt" aria-hidden="true">@</span>
53
+
<input
54
+
id="handle"
55
+
type="text"
56
+
name="handle"
57
+
required
58
+
placeholder="alice.bsky.social"
59
+
autocomplete="username"
60
+
autocapitalize="none"
61
+
autocorrect="off"
62
+
spellcheck="false"
63
+
>
64
+
</span>
65
+
</div>
66
+
<button class="btn" type="submit">sign in</button>
67
+
</form>
68
+
</li>
69
+
<li class="steps__item">
70
+
<span>push as usual; your branches and tags mirror to tangled.org</span>
71
+
</li>
72
+
</ol>
85
73
</section>
86
74
</main>
87
75
···
127
115
128
116
.nav-term__mark:hover { color: inherit; }
129
117
130
-
.nav-term__args {
131
-
display: inline-flex;
132
-
align-items: center;
133
-
gap: 0.9ch;
134
-
list-style: none;
135
-
margin: 0;
136
-
padding: 0;
137
-
}
138
-
139
-
.nav-term__args a {
140
-
display: inline-flex;
141
-
align-items: center;
142
-
min-height: 44px;
143
-
color: var(--color-muted);
144
-
text-decoration: underline;
145
-
text-underline-offset: 2px;
146
-
white-space: nowrap;
147
-
}
148
-
149
-
.nav-term__args a:hover { color: var(--color-ink); }
150
-
151
118
.caret {
152
119
display: inline-block;
153
120
width: 0.55ch;
···
182
149
margin: 0 0 var(--space-xl);
183
150
}
184
151
185
-
.session {
186
-
font-family: var(--font-mono);
187
-
font-size: var(--text-sm);
188
-
line-height: 1.7;
189
-
background: var(--color-paper-2);
190
-
border: var(--rule-hair) solid var(--color-rule);
191
-
border-radius: var(--radius-md);
192
-
padding: var(--space-lg);
152
+
.steps {
153
+
list-style: none;
154
+
counter-reset: step;
193
155
margin: 0;
194
-
overflow-x: auto;
195
-
color: var(--color-ink);
156
+
padding: 0;
157
+
max-width: var(--measure);
196
158
}
197
159
198
-
.session .c { color: var(--color-neutral); }
199
-
.session .p { color: var(--color-accent); }
200
-
.session .a { color: var(--color-info); }
201
-
.session .ok { color: var(--color-ok); }
202
-
.session .dim { color: var(--color-neutral); }
160
+
.steps__item {
161
+
counter-increment: step;
162
+
position: relative;
163
+
display: flex;
164
+
flex-direction: column;
165
+
align-items: flex-start;
166
+
gap: var(--space-sm);
167
+
padding-left: calc(var(--space-lg) + var(--space-sm));
168
+
margin-bottom: var(--space-lg);
169
+
color: var(--color-muted);
170
+
font-size: var(--text-md);
171
+
line-height: 1.6;
172
+
}
203
173
204
-
.panel {
205
-
padding-block: var(--space-xl);
206
-
border-top: var(--rule-hair) solid var(--color-rule);
174
+
.steps__item::before {
175
+
content: counter(step);
176
+
position: absolute;
177
+
left: 0;
178
+
font-family: var(--font-mono);
179
+
color: var(--color-accent);
207
180
}
208
181
209
-
.panel__title {
210
-
font-size: var(--text-lg);
211
-
margin: 0 0 var(--space-sm);
182
+
.steps__item a:not(.btn) {
183
+
color: var(--color-info);
184
+
text-decoration: underline;
212
185
}
213
186
214
-
.panel__body {
215
-
max-width: var(--measure);
216
-
color: var(--color-muted);
217
-
margin: 0 0 var(--space-lg);
218
-
}
187
+
.steps__item a:not(.btn):hover { color: var(--color-ink); }
219
188
220
189
.signin {
221
190
display: flex;