feat: add bsky logo

src/components/SignInAtproto.vue

@@ -5,6 +5,15 @@ import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
 
 const { handle, isLoggedIn, signIn, signOut } = useATProtoLogin()
 
+withDefaults(
+  defineProps<{
+    withSignOut?: boolean
+  }>(),
+  {
+    withSignOut: true,
+  },
+)
+
 const inputHandle = ref("")
 
 const onSignIn = () => {
@@ -17,7 +26,9 @@ const onSignIn = () => {
 <template>
   <div v-if="isLoggedIn" class="sign-in-atproto is-signed-in">
     <span>{{ handle }}</span>
-    <button class="btn" @click="signOut">Sign out</button>
+    <button class="btn btn-sm" @click="signOut" v-if="withSignOut">
+      Sign out
+    </button>
   </div>
   <div v-else class="sign-in-atproto join">
     <input
@@ -28,7 +39,19 @@ const onSignIn = () => {
       @keyup.enter="onSignIn"
     />
     <button class="btn input-sm join-item" @click="onSignIn">
-      Sign in with Bluesky
+      Sign in with
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 600 530"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
+          fill="#1185fe"
+        />
+      </svg>
     </button>
   </div>
 </template>

src/components/SignInGithub.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-const GITHUB_URL = 'https://github.com/login/oauth/authorize'
+const GITHUB_URL = "https://github.com/login/oauth/authorize"
 
-const CLIENT_ID = 'Iv1.12dc43d013ce3623'
+const CLIENT_ID = "Iv1.12dc43d013ce3623"
-const SCOPE = 'repo%20workflow'
+const SCOPE = "repo%20workflow"
 const REDIRECT_URI = window.location.origin
 
 const url = new URL(GITHUB_URL)
-url.searchParams.set('client_id', CLIENT_ID)
+url.searchParams.set("client_id", CLIENT_ID)
-url.searchParams.set('scope', SCOPE)
+url.searchParams.set("scope", SCOPE)
-url.searchParams.set('redirect_uri', REDIRECT_URI)
+url.searchParams.set("redirect_uri", REDIRECT_URI)
 
 const href = url.toString()
 </script>
 
 <template>
-  <a :href="href" class="sign-in-github btn btn-primary">
+  <a :href="href" class="sign-in-github btn btn-sm btn-primary">
     Sign in with
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/components/WelcomeWorld.vue

@@ -23,8 +23,8 @@ const { userInput, repoInput, submit } = useForm()
     <last-visited />
 
     <div class="get-started">
+      <sign-in-atproto :with-sign-out="false" />
       <sign-in-github />
-      <sign-in-atproto />
       <router-link v-if="isLogged" :to="{ name: 'RepoList' }" class="btn"
         >Manage your repos</router-link
       >
@@ -77,7 +77,7 @@ const { userInput, repoInput, submit } = useForm()
           name: 'FluxNoteView',
           params: { user: 'remanso-space', repo: 'getting-started' },
         }"
-        class="btn"
+        class="btn btn-sm"
         >Get started</router-link
       >
     </footer>