feat: add leaderboard

docs/astro.config.mjs

@@ -54,19 +54,19 @@ export default defineConfig({
         ru: 'Руководство'
       }
     },
-    //   {
+      {
-    //   label: 'Leaderboard',
+      label: 'Leaderboard',
-    //   autogenerate: {
+      autogenerate: {
-    //     directory: 'leaderboard',
+        directory: 'leaderboard',
-    //     collapsed: true
+        collapsed: true
-    //   },
+      },
-    //   translations: {
+      translations: {
-    //     es: 'Leaderboard',
+        es: 'Leaderboard',
-    //     fr: 'Leaderboard',
+        fr: 'Leaderboard',
-    //     pt: 'Leaderboard',
+        pt: 'Leaderboard',
-    //     ru: 'Leaderboard'
+        ru: 'Leaderboard'
-    //   }
+      }
-    // },
+    },
     {
       label: 'Challenges',
       autogenerate: {

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

@@ -1,6 +1,7 @@
 import { derived, writable } from 'svelte/store';
 
 export const token = writable<string | null>(null);
+export const isConnected = writable(false);
 
 export const isLoading = writable(true);
 export const error = writable(false);
@@ -18,6 +19,9 @@ export function loadToken() {
   const persistedToken = localStorage.getItem(TOKEN_KEY);
   if (persistedToken) {
     token.set(JSON.parse(persistedToken));
+    isConnected.set(true);
+  } else {
+    isConnected.set(false);
   }
 }
 

docs/src/components/leaderboard/LeaderboardAnswer.svelte

@@ -1,7 +1,7 @@
 <script>
   import UserBox from './UserBox.svelte';
   import Spinner from './Spinner.svelte';
-  import { token } from '../github/github-store';
+  import { isConnected, token } from '../github/github-store';
 
   let users = [];
   let loading = true;
@@ -11,7 +11,7 @@
     if (token) {
       fetchGitHubUsers();
     }
-  })
+  });
 
   async function fetchGitHubUsers() {
     try {
@@ -71,6 +71,9 @@
 
 </script>
 
+{#if !$isConnected}
+  <div class="important-block not-connected">Log in to Github to see the list</div>
+{:else}
   {#if loading}
     <Spinner />
   {:else if error}
@@ -85,8 +88,13 @@
       {/each}
     </div>
   {/if}
+{/if}
 
 <style>
+  .not-connected {
+    margin-top: 1rem;
+  }
+
   .box {
     display: flex;
     flex-wrap: wrap;

docs/src/components/leaderboard/LeaderboardChallenge.svelte

@@ -1,7 +1,7 @@
 <script>
   import UserBox from './UserBox.svelte';
   import Spinner from './Spinner.svelte';
-  import { token } from '../github/github-store';
+  import { isConnected, token } from '../github/github-store';
 
 
   let users = [];
@@ -12,7 +12,7 @@
     if (token) {
       fetchGitHubUsers();
     }
-  })
+  });
 
   const createUser = (items) => {
     const prCounts = {};
@@ -55,6 +55,9 @@
   }
 </script>
 
+{#if !$isConnected}
+  <div class="important-block not-connected">Log in to Github to see the list</div>
+{:else}
   {#if loading}
     <Spinner />
   {:else if error}
@@ -68,8 +71,13 @@
       {/each}
     </div>
   {/if}
+{/if}
 
 <style>
+  .not-connected {
+    margin-top: 1rem;
+  }
+  
   .box {
     display: flex;
     flex-wrap: wrap;

docs/src/components/leaderboard/LeaderboardCommit.svelte

@@ -1,7 +1,7 @@
 <script>
   import UserBox from './UserBox.svelte';
   import Spinner from './Spinner.svelte';
-  import { token } from '../github/github-store';
+  import { isConnected, token } from '../github/github-store';
 
   let users = [];
   let loading = true;
@@ -11,7 +11,7 @@
     if (token) {
       fetchGitHubUsers();
     }
-  })
+  });
 
   async function fetchGitHubUsers() {
     try {
@@ -71,6 +71,9 @@
   }
 </script>
 
+{#if !$isConnected}
+  <div class="important-block not-connected">Log in to Github to see the list</div>
+{:else}
   {#if loading}
     <Spinner />
   {:else if error}
@@ -84,8 +87,13 @@
       {/each}
     </div>
   {/if}
+{/if}
 
 <style>
+  .not-connected {
+    margin-top: 1rem;
+  }
+
   .box {
     display: flex;
     flex-wrap: wrap;