+13 -4

internal/web/components/shared.templ

··· 171 171 172 172 templ WelcomeUnauthenticated() { 173 173 <div> 174 174 - <p class="text-brown-800 mb-6 text-center text-lg">Please log in with your <a href="/atproto" class="link-bold">atproto handle</a> to start tracking your brews.</p> 174 174 + <p class="text-brown-800 mb-2 text-center text-lg">Connect with your Atmosphere account to start tracking your brews.</p> 175 175 + <details class="mb-6 max-w-md mx-auto"> 176 176 + <summary class="text-brown-600 text-sm italic cursor-pointer text-center hover:text-brown-800 transition-colors">What's an Atmosphere account?</summary> 177 177 + <p class="text-brown-600 mt-2 text-sm italic"> 178 178 + Arabica uses the <a href="/atproto" class="link">AT Protocol</a> to power its social features, allowing you to own your data and use one account for all compatible applications. Once you create an account, you can use other apps like <a href="https://bsky.app" class="link" target="_blank" rel="noopener noreferrer">Bluesky</a> and <a href="https://leaflet.pub" class="link" target="_blank" rel="noopener noreferrer">Leaflet</a> with the same account. 179 179 + <a href="/join/create" class="link">(Create an account)</a> 180 180 + </p> 181 181 + </details> 175 182 <form method="POST" action="/auth/login" class="max-w-md mx-auto"> 176 183 <div class="relative"> 177 177 - <label for="handle" class="block text-sm font-medium text-brown-900 mb-2">Your Handle</label> 184 184 + <label for="handle" class="block text-sm font-medium text-brown-900 mb-2">Handle</label> 178 185 <input 179 186 type="text" 180 187 id="handle" ··· 234 241 }) 235 242 </a> 236 243 <div class="flex-1 min-w-0"> 237 237 - <div class={ templ.Classes( 244 244 + <div 245 245 + class={ templ.Classes( 238 246 "flex items-center gap-2", 239 247 templ.KV("flex-wrap", props.Size == "sm"), 240 240 - ) }> 248 248 + ) } 249 249 + > 241 250 if props.DisplayName != "" { 242 251 <a 243 252 href={ templ.SafeURL(props.ProfileURL) }

+7 -4

internal/web/pages/atproto.templ

··· 17 17 <div class="prose prose-lg max-w-none space-y-6"> 18 18 <section class="bg-gradient-to-br from-brown-100 to-brown-200 p-6 rounded-xl border border-brown-300"> 19 19 <h2 class="text-2xl font-semibold text-brown-900 mb-4">What is the AT Protocol?</h2> 20 20 + <p class="text-brown-800 leading-relaxed mb-3"> 21 21 + Arabica uses the <strong>AT Protocol</strong> (Authenticated Transfer Protocol) to power many of its social features, 22 22 + allowing you to own your data and use one account across all compatible applications. 23 23 + </p> 20 24 <p class="text-brown-800 leading-relaxed"> 21 21 - The <strong>AT Protocol</strong> (Authenticated Transfer Protocol) is a decentralized social networking 22 22 - protocol that puts you in control of your data and identity. It's the technology that powers 23 23 - <a href="https://bsky.app" class="link-bold" target="_blank" rel="noopener noreferrer">Bluesky</a>, 24 24 - <a href="https://leaflet.pub" class="link-bold" target="_blank" rel="noopener noreferrer">Leaflet</a>, Arabica and more. 25 25 + Once you create an account, you can use other apps like 26 26 + <a href="https://bsky.app" class="link-bold" target="_blank" rel="noopener noreferrer">Bluesky</a> and 27 27 + <a href="https://tangled.sh" class="link-bold" target="_blank" rel="noopener noreferrer">Tangled</a> with the same account. 25 28 </p> 26 29 </section> 27 30 <section>

+14 -14

internal/web/pages/create_account.templ

··· 60 60 United States 61 61 </p> 62 62 } 63 63 - @pdsCard("https://bsky.social") { 64 64 - <p class="flex items-baseline gap-2 text-lg font-semibold text-brown-900"> 65 65 - Bluesky 66 66 - <span class="relative -top-px inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> 67 67 - Open 68 68 - </span> 69 69 - </p> 70 70 - <p class="text-sm text-brown-700">Maintained by Bluesky PBC.</p> 71 71 - <p class="flex items-center gap-1 text-xs text-brown-500"> 72 72 - bsky.social · 73 73 - @locationPin() 74 74 - United States 75 75 - </p> 76 76 - } 63 63 + // @pdsCard("https://bsky.app") { 64 64 + // <p class="flex items-baseline gap-2 text-lg font-semibold text-brown-900"> 65 65 + // Bluesky 66 66 + // <span class="relative -top-px inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> 67 67 + // Open 68 68 + // </span> 69 69 + // </p> 70 70 + // <p class="text-sm text-brown-700">Maintained by Bluesky PBC.</p> 71 71 + // <p class="flex items-center gap-1 text-xs text-brown-500"> 72 72 + // bsky.social · 73 73 + // @locationPin() 74 74 + // United States 75 75 + // </p> 76 76 + // } 77 77 </div> 78 78 <p class="text-sm text-brown-600 mt-6 text-center"> 79 79 Already have an account?