feat: UI tweaks & Docs Page

deno.json

@@ -25,6 +25,7 @@
     "autoprefixer": "npm:autoprefixer@^10.4.20",
     "bits-ui": "npm:bits-ui@^0.21.16",
     "clsx": "npm:clsx@^2.1.1",
+    "detect-url-change": "npm:detect-url-change@^1.0.2",
     "lucide-svelte": "npm:lucide-svelte@^0.462.0",
     "mode-watcher": "npm:mode-watcher@^0.5.0",
     "postcss": "npm:postcss@^8.4.49",

routes/repository.ts

@@ -88,4 +88,49 @@ app.get('/repositories', async (c) => {
   }
 });
 
+app.get('/repositories/search', async (c) => {
+  console.log('Searching repositories');
+
+  try {
+    const text = c.req.query('text') || '';
+
+    if (!text) {
+      return c.json({ error: 'Search text is required' }, 400);
+    }
+
+    console.log('Received query parameters:', {
+      text: c.req.query('text'),
+      page: c.req.query('page'),
+      limit: c.req.query('limit'),
+    });
+
+    const repositories = await sql`
+      SELECT *
+      FROM repository
+      WHERE name ILIKE '%' || ${text} || '%'
+        OR author ILIKE '%' || ${text} || '%'
+        LIMIT ${LIMIT_PER_PAGE};
+    `;
+
+    return c.json({
+      data: repositories,
+      pagination: {
+        currentPage: 1,
+        totalPages: 1,
+        totalItems: repositories.length,
+        itemsPerPage: LIMIT_PER_PAGE,
+        hasNextPage: false,
+        hasPrevPage: false,
+      },
+      sort: {
+        sortBy: 'stars',
+        order: 'desc',
+      },
+    });
+  } catch (error) {
+    console.error('Error searching Neon database:', error);
+    return c.json({ error: 'Failed to search repositories' }, 500);
+  }
+});
+
 export default app;

src/App.svelte

@@ -1,40 +1,15 @@
 <script>
-  import { Router, Link, Route } from 'svelte-routing';
+  import { Router, Route } from 'svelte-routing';
 
   import { Navigation } from '$lib/components/navigation';
   import HomePage from '$lib/pages/home/page.svelte';
+  import DocsPage from '$lib/pages/docs/page.svelte';
   import OtherPage from '$lib/pages/other/page.svelte';
   import { ModeWatcher } from 'mode-watcher';
-  import { ScrollArea } from '$lib/components/scroll-area';
-
-  import logo from '$lib/assets/logo.svg';
 
   import './style.css';
 
   export let url = '';
-
-  const tags = [
-    {
-      label: 'All projects',
-      to: '/',
-    },
-    {
-      label: 'Most forked',
-      to: '/stats/forks',
-    },
-    {
-      label: 'Most popular license',
-      to: '/stats/license',
-    },
-    {
-      label: 'Top 20 contributors',
-      to: '/stats/contributors',
-    },
-    {
-      label: 'Top 10 languages',
-      to: '/stats/languages',
-    },
-  ];
 </script>
 
 <ModeWatcher />
@@ -43,43 +18,14 @@
   <main class="w-full">
     <Navigation />
 
-    <div
-      class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
-    >
-      <aside
-        class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
-      >
-        <ScrollArea class="fixed 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" />
-            </div>
-
-            <ul>
-              {#each tags as tag}
-                <li class="px-3 py-2">
-                  <Link
-                    to={tag.to}
-                    class="transition-colors text-foreground/50 hover:underline cursor-pointer"
-                    let:active
-                  >
-                    <span class={active ? 'text-foreground/90' : ''}>
-                      {tag.label}
-                    </span>
-                  </Link>
-                </li>
-              {/each}
-            </ul>
-          </div>
-        </ScrollArea>
-      </aside>
-
-      <div class=" py-6 lg:gap-10 lg:py-8">
-        <Route path="/stats/:id" component={OtherPage} />
-        <Route path="/">
-          <HomePage />
-        </Route>
-      </div>
+    <div class="">
+      <Route path="/stats/:id" component={OtherPage} />
+      <Route path="/">
+        <HomePage />
+      </Route>
+      <Route path="/docs">
+        <DocsPage />
+      </Route>
     </div>
   </main>
 </Router>

src/lib/components/navigation/navigation.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { Link } from 'svelte-routing';
   import Sun from 'lucide-svelte/icons/sun';
   import Moon from 'lucide-svelte/icons/moon';
   import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
@@ -59,10 +60,18 @@
   </p>
   <div class="container flex h-14 max-w-screen-2xl items-center">
     <div class="mr-4 hidden md:flex">
-      <a href="/" class="mr-6 flex items-center space-x-2">
+      <a href="/" class="mr-6 flex items-center space-x-4">
         <img src={logo192} alt="Naija Stars" class="h-8 w-8" />
 
         <span class="hidden font-bold xl:inline-block">Naija Stars</span>
+
+        <Link
+          to={'/docs'}
+          class="transition-colors text-foreground/50 hover:underline cursor-pointer"
+          let:active
+        >
+          <span class={active ? 'text-foreground/90' : ''}> Docs </span>
+        </Link>
       </a>
       <!-- <nav class="flex items-center gap-3 text-sm">
 

src/lib/components/table/table.svelte

@@ -8,7 +8,7 @@
   export { className as class };
 </script>
 
-<div class="relative w-full overflow-auto">
+<div class="max-h-[50vh] relative w-full overflow-auto">
   <table
     class={cn('w-full caption-bottom text-sm', className)}
     {...$$restProps}

src/lib/functions/debounce.ts

@@ -1,9 +1,9 @@
+let timeoutId: ReturnType<typeof setTimeout>;
+
 export function debounce<T extends (...args: any[]) => any>(
   func: T,
   wait: number
 ): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout>;
-
   return (...args: Parameters<T>) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {

src/lib/pages/docs/get.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  const parameters = [
+    {
+      name: 'page',
+      type: 'number',
+      description: 'Page number of repository e.g. 1 | 2 | 3',
+    },
+    {
+      name: 'limit',
+      type: 'number',
+      description: 'Limit per page e.g. 10',
+    },
+    {
+      name: 'sortBy',
+      type: 'string',
+      description: 'Sort by stars e.g. stars | author | forks',
+    },
+    {
+      name: 'order',
+      type: 'string',
+      description: 'Order of sorting e.g. asc | desc',
+    },
+  ];
+</script>
+
+<section
+  class="border w-full rounded-md flex flex-col md:flex-row item-start gap-5 p-5"
+>
+  <section class="md:w-2/4 w-full">
+    <h1 class="text-xl">Get Repositories</h1>
+    <p class="text-sm mt-1">Get Repositories from the database</p>
+
+    <div class="border-2 rounded-md p-2.5 my-5 text-sm">
+      <span class="bg-green-900 text-green-500 px-2 py-1 text-sm rounded-sm">
+        GET
+      </span>
+      <span class="tracking-wide ml-1">/v1/repositories</span>
+    </div>
+
+    <h1 class="text-xl">Request</h1>
+    <p class="text-sm mt-2">Query Parameters</p>
+
+    {#each parameters as param}
+      <div class="≈p-2.5 mt-10 text-sm">
+        <div class="flex items-center gap-5 mb-4">
+          <p>{param.name}</p>
+          <p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">
+            {param.type}
+          </p>
+        </div>
+
+        <p>{param.description}</p>
+      </div>
+    {/each}
+  </section>
+
+  <section class="md:w-2/4 w-full flex flex-col gap-5">
+    <div
+      class="flex flex-col gap-3 bg-white dark:bg-transparent border dark:text-white rounded-md h-auto p-4 text-xs"
+    >
+      <p>curl --request GET \</p>
+      <p>--url https://api.naijastars.dev/v1/repositories \</p>
+    </div>
+
+    <div
+      class="bg-white dark:bg-transparent border dark:text-white rounded-md h-[75vh] overflow-y-auto"
+    >
+      <pre>
+        <code class="language-json text-xs">
+          {`{
+  "status": "success",
+  "data": [   [
+    {
+        "id": 34,
+        "name": "chakra-ui",
+        "link": "https://github.com/chakra-ui/chakra-ui",
+        "description": "⚡️ Simple, Modular & Accessible UI Components for your React Applications",
+        "author": "chakra-ui",
+        "author_link": "https://github.com/chakra-ui",
+        "author_avatar": "https://avatars.githubusercontent.com/u/54212428?v=4",
+        "stars": 38073,
+        "topics": [
+            "a11y",
+            "accessible",
+            "ark-ui",
+            "chakra-ui",
+            "component",
+            "css-in-js",
+            "dark-mode",
+            "design-system",
+            "react",
+            "react-components",
+            "reactjs",
+            "styled",
+            "ui-components",
+            "ui-library",
+            "uikit",
+            "wai-aria"
+        ],
+        "license": {
+            "key": "mit",
+            "url": "https://api.github.com/licenses/mit",
+            "name": "MIT License"
+        },
+        "forks": 3285,
+        "open_issues_count": 12,
+        "archived": false,
+        "disabled": false,
+        "original_created_at": "2019-08-17T14:27:54.000Z",
+        "original_updated_at": "2024-12-03T07:58:40.000Z",
+        "created_at": "2024-12-01T14:44:03.981Z",
+        "updated_at": "2024-12-03T10:04:43.429Z",
+        "author_link_madeinnigeria": "https://twitter.com/thesegunadebayo",
+        "author_madeinnigeria": "@thesegunadebayo"
+    }
+]
+}`}
+        </code>
+      </pre>
+    </div>
+  </section>
+</section>