mirror your GitHub repos to tangled.org automatically
1<script setup lang="ts">
2// If already signed in, bounce to the dashboard.
3const { data: session } = await useFetch('/api/me/whoami', {
4 // Don't blow up the page on the (very common) 401.
5 ignoreResponseError: true,
6})
7
8if (session.value && typeof session.value === 'object' && 'did' in session.value) {
9 await navigateTo('/dashboard')
10}
11
12const installUrl = 'https://github.com/apps/synchub-to/installations/new'
13</script>
14
15<template>
16 <main>
17 <h1>synchub.to</h1>
18 <p>Mirror your GitHub repos to tangled.org, automatically.</p>
19
20 <section class="signin">
21 <h2>Sign in</h2>
22 <p class="muted">
23 Already installed the GitHub App and connected your tangled
24 identity? Enter your handle to sign in on this device.
25 </p>
26 <form action="/api/atproto/login" method="get">
27 <label>
28 Handle
29 <input
30 type="text"
31 name="handle"
32 required
33 placeholder="alice.bsky.social"
34 autocomplete="username"
35 autocapitalize="none"
36 autocorrect="off"
37 spellcheck="false"
38 >
39 </label>
40 <button type="submit">Sign in</button>
41 </form>
42 </section>
43
44 <section class="install">
45 <h2>New here?</h2>
46 <p class="muted">
47 First install the GitHub App on the repos you'd like to mirror,
48 then come back and sign in with your tangled handle.
49 </p>
50 <a class="button" :href="installUrl">
51 Install the GitHub App
52 </a>
53 </section>
54 </main>
55</template>
56
57<style scoped>
58main {
59 max-width: 36rem;
60 margin: 4rem auto;
61 padding: 0 1.5rem;
62 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
63 line-height: 1.5;
64}
65h1 {
66 font-size: 2rem;
67 margin-bottom: 0.25rem;
68}
69h2 {
70 font-size: 1.1rem;
71 margin-bottom: 0.5rem;
72}
73.muted {
74 color: #555;
75 margin-bottom: 0.75rem;
76}
77section {
78 margin-top: 2.5rem;
79 padding-top: 1.5rem;
80 border-top: 1px solid #eee;
81}
82form {
83 display: flex;
84 flex-direction: column;
85 gap: 0.5rem;
86}
87label {
88 display: flex;
89 flex-direction: column;
90 gap: 0.25rem;
91 font-size: 0.875rem;
92}
93input {
94 padding: 0.5rem 0.75rem;
95 border: 1px solid #ccc;
96 border-radius: 4px;
97 font-size: 1rem;
98 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
99}
100button, .button {
101 display: inline-block;
102 padding: 0.5rem 1rem;
103 background: #111;
104 color: #fff;
105 border: 0;
106 border-radius: 4px;
107 font-size: 1rem;
108 cursor: pointer;
109 text-decoration: none;
110 text-align: center;
111 width: fit-content;
112}
113button:hover, .button:hover {
114 background: #333;
115}
116</style>