feat: UI update

classroomio · Dec 5, 2024 · a8cef43 · a8cef43 · deno-deploy · Dec 5, 2024
1 parent 517379a
commit a8cef43
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -8,24 +8,22 @@
 
   <!-- HTML Meta Tags -->
   <title>Naija Stars | By ClassroomIO</title>
-  <meta name="description" content="Open source projects built by Nigerians">
+  <meta name="description" content="Visualization tool for Open Source projects built by Nigerians">
 
   <!-- Facebook Meta Tags -->
   <meta property="og:url" content="https://naijastars.dev">
   <meta property="og:type" content="website">
   <meta property="og:title" content="Naija Stars | By ClassroomIO">
-  <meta property="og:description" content="Open source projects built by Nigerians">
+  <meta property="og:description" content="Visualization tool for Open Source projects built by Nigerians">
   <meta property="og:image" content="src/static/og-image.png">
 
   <!-- Twitter Meta Tags -->
   <meta name="twitter:card" content="summary_large_image">
   <meta property="twitter:domain" content="naijastars.dev">
   <meta property="twitter:url" content="https://naijastars.dev">
   <meta name="twitter:title" content="Naija Stars | By ClassroomIO">
-  <meta name="twitter:description" content="Open source projects built by Nigerians">
+  <meta name="twitter:description" content="Visualization tool for Open Source projects built by Nigerians">
   <meta name="twitter:image" content="src/static/og-image.png">
-
-  <!-- Meta Tags Generated via https://www.opengraph.xyz -->
 </head>
 
 <body>

diff --git a/src/lib/pages/api/page.svelte b/src/lib/pages/api/page.svelte
@@ -1,20 +1,23 @@
 <script>
+  import { fade } from 'svelte/transition';
   import { Router } from 'svelte-routing';
   import GetPage from './get.svelte';
   import SearchPage from './search.svelte';
   import logo from '$lib/assets/logo.svg';
 
   export let url = '';
 
-  let state = '';
+  let id = 1;
 
   const navigation = [
     {
+      id: 1,
       label: 'get',
       text: 'Get Repositories',
     },
     {
-      label: 'search',
+      id: 2,
+      label: 'get',
       text: 'Search Repositories',
     },
   ];
@@ -25,22 +28,21 @@
     class="relative p-10 flex flex-col gap-y-5 w-full md:items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-10 md:min-h-[80vh]"
   >
     <aside class="md:sticky top-0 z-30 h-full w-full shrink-0">
-      <button on:click={() => (state = '')} class="mb-3 p-2 text-xl">
+      <button on:click={() => (id = 0)} class="mb-3 p-2 text-xl">
         Repositories
       </button>
 
       <ul class="flex flex-col gap-3 p-1">
         {#each navigation as nav}
           <button
-            on:click={() => (state = nav.label)}
-            class="p-2 flex items-center gap-5 rounded-md border-2 border-background hover:border-2 hover:border-gray-200 dark:hover:border-neutral-800 cursor-pointer {state ===
-              nav.label &&
+            on:click={() => (id = nav.id)}
+            class="p-2 flex items-center gap-5 rounded-md border-2 border-background hover:border-2 hover:border-gray-200 dark:hover:border-neutral-800 cursor-pointer {id ===
+              nav.id &&
               ' text-black dark:text-white border-2 border-gray-200 dark:border-neutral-800'}"
           >
             <span
               class="px-2 py-1 text-xs rounded-sm uppercase w-[30%] {nav.label ===
-                'get' && 'bg-green-900 text-green-400'} {nav.label ===
-                'search' && 'bg-gray-900 text-white'}"
+                'get' && 'bg-green-900 text-green-400'}"
             >
               {nav.label}
             </span>
@@ -51,19 +53,21 @@
       </ul>
     </aside>
 
-    <div class="h-full">
-      {#if state === ''}
-        <section
-          class="flex flex-col justify-center items-center gap-5 rounded-md border md:h-full p-5"
-        >
-          <h1 class="text-4xl text-center">Welcome to Naija Stars API</h1>
-          <img src={logo} alt="logo" class="w-28 h-28" />
-        </section>
-      {:else if state === 'get'}
-        <GetPage />
-      {:else if state === 'search'}
-        <SearchPage />
-      {/if}
-    </div>
+    {#key id}
+      <div class="h-full" transition:fade>
+        {#if id === 0}
+          <section
+            class="flex flex-col justify-center items-center gap-5 rounded-md border md:h-full p-5"
+          >
+            <h1 class="text-4xl text-center">Welcome to Naija Stars API</h1>
+            <img src={logo} alt="logo" class="w-28 h-28" />
+          </section>
+        {:else if id === 1}
+          <GetPage />
+        {:else if id === 2}
+          <SearchPage />
+        {/if}
+      </div>
+    {/key}
   </main>
 </Router>
diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte
@@ -122,7 +122,7 @@
     <h2
       class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight text-center transition-colors first:mt-0"
     >
-      All Projects
+      All Open Source Projects By Nigerians
     </h2>
     {#if isFetching && !isMounted}
       <div class="rounded-md border w-full">

diff --git a/src/lib/pages/home/table.svelte b/src/lib/pages/home/table.svelte
@@ -219,7 +219,7 @@
                       <!-- wrap it around the link of the repo -->
                       <a
                         href={`${cell.render()}`}
-                        class="text-right font-medium underline"
+                        class="text-left font-medium underline"
                         target="_blank"
                       >
                         <Render

diff --git a/src/lib/pages/shared/sidebar.svelte b/src/lib/pages/shared/sidebar.svelte
@@ -12,10 +12,6 @@
       label: 'Most forked',
       to: '/stats/forks',
     },
-    {
-      label: 'Most popular license',
-      to: '/stats/license',
-    },
     {
       label: 'Top 20 contributors',
       to: '/stats/contributors',
@@ -24,13 +20,17 @@
       label: 'Top 10 languages',
       to: '/stats/languages',
     },
+    {
+      label: 'Most popular license',
+      to: '/stats/license',
+    },
   ];
 </script>
 
 <aside
-  class="fixed top-14 z-30 -ml-2 hidden h-[80vh] w-full shrink-0 md:sticky md:block"
+  class="fixed top-20 z-30 -ml-2 hidden h-[80vh] w-full shrink-0 md:sticky md:block"
 >
-  <ScrollArea class="fixed left-0 h-screen py-5 px-8">
+  <ScrollArea class="fixed top-20 left-0 h-screen py-5 px-8">
     <div class="">
       <div class="w-full flex justify-center mb-5">
         <img src={logo} alt="logo" class="w-28 h-28" />