feat: add button to check position of user

docs/src/components/github/GitHubStats.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { token } from './github-store';
+  import { token, username } from './github-store';
 
   let error = false;
   let loading = true;
@@ -12,6 +12,7 @@
     if (token) {
       fetchStats();
       isStar();
+      getUser();
     }
   });
 
@@ -25,7 +26,6 @@
       });
       if (response.ok) {
         isStarByUser = !isStarByUser;
-        console.log('Starred', isStarByUser);
       }
     } catch (e) {
       console.error(e);
@@ -50,6 +50,25 @@
     }
   }
 
+  async function getUser() {
+    try {
+      const response = await fetch(`https://api.github.com/user`, {
+        method: 'GET',
+        headers: {
+          Authorization: `token ${$token}`
+        }
+      });
+      if (response.ok) {
+        const { login } = await response.json();
+        username.set(login);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      loadingStar = false;
+    }
+  }
+
 
   async function fetchStats() {
     try {

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

@@ -3,6 +3,8 @@ import { derived, writable } from 'svelte/store';
 export const token = writable<string | null>(null);
 export const isConnected = writable(false);
 
+export const username = writable(null);
+
 export const isLoading = writable(true);
 export const error = writable(false);
 export const data = writable<any[]>([]);

docs/src/components/leaderboard/LeaderboardAnswer.svelte

@@ -1,11 +1,12 @@
 <script>
   import UserBox from './UserBox.svelte';
   import Spinner from './Spinner.svelte';
-  import { isConnected, token } from '../github/github-store';
+  import { isConnected, token, username } from '../github/github-store';
 
   let users = [];
   let loading = true;
   let error = null;
+  let isUsernamePresent = false;
 
   token.subscribe(token => {
     if (token) {
@@ -54,11 +55,13 @@
         page++;
       }
 
+      isUsernamePresent = Object.keys(prCounts).some((value) => value === $username);
+
       users = Object.entries(prCounts).map(([login, pr]) => ({
         login,
         avatar: pr.avatar,
         count: pr.count,
-        challengeNumber: pr.challengeNumber.sort((a, b) => a - b)
+        challengeNumber: pr.challengeNumber.sort((a, b) => a - b),
       })).filter((r) => r.login !== 'allcontributors[bot]').sort((a, b) => b.count - a.count);
 
     } catch (e) {
@@ -70,10 +73,14 @@
   }
 
 </script>
-
 {#if !$isConnected}
   <div class="important-block not-connected">Log in to Github to see the list</div>
 {:else}
+  {#if isUsernamePresent}
+    <div class="link-username">
+      <a href={`#${$username}`}>Check my position</a>
+    </div>
+  {/if}
   {#if loading}
     <Spinner />
   {:else if error}
@@ -95,12 +102,19 @@
     margin-top: 1rem;
   }
 
+  .link-username {
+    margin-top: 2rem;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .box {
     display: flex;
     flex-wrap: wrap;
     justify-items: center;
     gap: 1.5rem;
-    margin-top: 2rem;
+    margin-top: 0.5rem;
   }
 
   .challenge-number {

docs/src/components/leaderboard/LeaderboardChallenge.svelte

@@ -1,12 +1,13 @@
 <script>
   import UserBox from './UserBox.svelte';
   import Spinner from './Spinner.svelte';
-  import { isConnected, token } from '../github/github-store';
+  import { isConnected, token, username } from '../github/github-store';
 
 
   let users = [];
   let loading = true;
   let error = null;
+  let isUsernamePresent = false;
 
   token.subscribe(token => {
     if (token) {
@@ -28,6 +29,8 @@
       }
     });
 
+    isUsernamePresent = Object.keys(prCounts).some((value) => value === $username);
+
     return Object.entries(prCounts).map(([login, pr]) => ({
       login,
       avatar: pr.avatar,
@@ -58,6 +61,11 @@
 {#if !$isConnected}
   <div class="important-block not-connected">Log in to Github to see the list</div>
 {:else}
+  {#if isUsernamePresent}
+    <div class="link-username">
+      <a href={`#${$username}`}>Check my position</a>
+    </div>
+  {/if}
   {#if loading}
     <Spinner />
   {:else if error}
@@ -78,11 +86,18 @@
     margin-top: 1rem;
   }
 
+  .link-username {
+    margin-top: 2rem;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .box {
     display: flex;
     flex-wrap: wrap;
     justify-items: center;
     gap: 1rem;
-    margin-top: 2rem;
+    margin-top: 0.5rem;
   }
 </style>

docs/src/components/leaderboard/LeaderboardCommit.svelte

@@ -1,11 +1,12 @@
 <script>
   import UserBox from './UserBox.svelte';
   import Spinner from './Spinner.svelte';
-  import { isConnected, token } from '../github/github-store';
+  import { isConnected, token, username } from '../github/github-store';
 
   let users = [];
   let loading = true;
   let error = null;
+  let isUsernamePresent = false;
 
   token.subscribe(token => {
     if (token) {
@@ -55,6 +56,8 @@
 
       }
 
+      isUsernamePresent = Object.keys(prCounts).some((value) => value === $username);
+
       users = Object.entries(prCounts).map(([login, pr]) => ({
         login,
         avatar: pr.avatar,
@@ -74,6 +77,11 @@
 {#if !$isConnected}
   <div class="important-block not-connected">Log in to Github to see the list</div>
 {:else}
+  {#if isUsernamePresent}
+    <div class="link-username">
+      <a href={`#${$username}`}>Check my position</a>
+    </div>
+  {/if}
   {#if loading}
     <Spinner />
   {:else if error}
@@ -94,11 +102,18 @@
     margin-top: 1rem;
   }
 
+  .link-username {
+    margin-top: 2rem;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .box {
     display: flex;
     flex-wrap: wrap;
     justify-items: center;
     gap: 1rem;
-    margin-top: 2rem;
+    margin-top: 0.5rem;
   }
 </style>

docs/src/components/leaderboard/UserBox.svelte

@@ -1,10 +1,12 @@
 <script>
+  import { username } from '../github/github-store';
+
   export let avatar;
  export let login;
  export let index;
 </script>
 
-<div class="user-box">
+<div class={`user-box ${login === $username ? 'own-box' : ''}`} id={login === $username ? $username: index}>
   <div class="user-info">
     <img src={avatar} alt="" width="40" height="40" class="avatar" />
     <div class="name-box">
@@ -38,6 +40,10 @@
     width: 100%;
   }
 
+  .own-box {
+    border: 1px solid red;
+  }
+
   .user-info {
     display: flex;
     padding: 1rem 0 1rem 1rem;