feat: test-auth

docs/src/components/GitHubStats.svelte

@@ -31,15 +31,15 @@
 
 {#if !error && !loading}
   <div class="github">
-    <a class="category star" href="https://github.com/tomalaforge/angular-challenges">
+    <a class="category" href="https://github.com/tomalaforge/angular-challenges" target="_blank">
       <slot name="star"/>
       <div>{stargazersCount}</div>
     </a>
 
-    <div class="category">
+    <a class="category" href="https://github.com/tomalaforge/angular-challenges/fork" target="_blank">
       <slot name="fork"/>
       <div>{forksCount}</div>
-    </div>
+    </a>
   </div>
 {/if}
 
@@ -56,14 +56,11 @@
     align-items: center;
     font-size: 12px;
     gap: 0.25rem;
-  }
-
-  .star {
     color: var(--sl-color-text);
     text-decoration: none;
   }
 
-  .star:hover {
+  .category:hover {
     color: var(--sl-color-accent-high);
   }
 

docs/src/components/SiteTitle.astro

@@ -2,16 +2,18 @@
 import Default from '@astrojs/starlight/components/SiteTitle.astro';
 import GitHubStats from './GitHubStats.svelte';
 import MyIcon from './MyIcon.astro';
-
+import SignUp from './github/SignUp.svelte';
 ---
 
 <Default {...Astro.props}>
   <slot />
 </Default>
 
-<GitHubStats client:load >
-  <MyIcon name="star" slot="star" />
-  <MyIcon name="fork" viewBox="0 0 16 16" slot="fork"/>
-</GitHubStats>
+<SignUp client:load />
+
+<!--<GitHubStats client:load >-->
+<!--  <MyIcon name="star" slot="star" />-->
+<!--  <MyIcon name="fork" viewBox="0 0 16 16" slot="fork"/>-->
+<!--</GitHubStats>-->
 
 

docs/src/components/github/AnsweredUser.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { data, error, isLoaded, isLoading, totalCount } from './github-store';
+  import { data, error, isLoaded, isLoading, token, totalCount } from './github-store';
 
   export let challengeNumber;
 
@@ -36,18 +36,22 @@
 
 </script>
 
+token: {$token}
 {#if $isLoaded}
   <div class="solution-container" id="answers">
     <div>Answered by</div>
-    {#each $data as { user }}
+    {#each $data as { user, html_url }}
+      <a href={html_url} target="_blank">
       <img
         loading="lazy"
         src={user.avatar_url}
         width="30"
         height="30"
         alt=""
+        title={user.login}
         class="avatar"
       />
+      </a>
     {/each}
   </div>
 {/if}

docs/src/components/github/SignUp.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { loadToken, test } from './github-store';
+  import { onMount } from 'svelte';
+
+  // Function to redirect the user to GitHub's signup page
+  async function redirectToGitHubSignup() {
+    // token.set('test-token');
+    // window.location.href = `/auth/authorize?redirect_uri=${window.location.href}&test=dklsfj`;
+    await fetch(`/auth/authorize?redirect_uri=${window.location.href}&state=jsqhd&client_id=Iv1.711903007f608691`)
+  }
+
+  onMount(() => {
+    loadToken();
+  });
+
+</script>
+
+{$test}
+<button on:click={redirectToGitHubSignup}>
+  Sign Up for GitHub
+</button>
+
+
+<style>
+  button {
+    background-color: #2ea44f;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 5px;
+  }
+
+  button:hover {
+    background-color: #218838;
+  }
+</style>

docs/src/components/github/github-store.ts

@@ -1,6 +1,6 @@
 import { derived, writable } from 'svelte/store';
 
-export const count = writable(0);
+export const token = writable<string | null>(null);
 
 export const isLoading = writable(true);
 export const error = writable(false);
@@ -11,3 +11,24 @@ export const isLoaded = derived(
   [isLoading, error],
   ([$isLoading, $error]) => !$isLoading && !$error,
 );
+
+const TOKEN_KEY = 'TOKEN';
+
+export function loadToken() {
+  // Get the current value from localStorage if it exists, otherwise use the startValue
+  const persistedValue = localStorage.getItem(TOKEN_KEY);
+  if (persistedValue) {
+    token.set(JSON.parse(persistedValue));
+    return;
+  }
+
+  token.set('API call');
+}
+
+token.subscribe((value) => {
+  if (value) {
+    localStorage.setItem(TOKEN_KEY, JSON.stringify(value));
+  }
+});
+
+export const test = writable('test');