chore: improve ui

README.md

@@ -1,6 +1,19 @@
 # naija-stars
 
-Visualization of the most starred repositories on GitHub by Nigerian developers.
+Visualization of the open source projects built by Nigerian developers.
+
+## Tech Stack
+
+- [Deno](https://deno.com/) - Backend + Runtime
+- [Deno Deploy](https://deno.com/deploy) - Deployment
+- [Svelte + Vite](https://svelte.dev/) - Frontend
+- [Hono](https://hono.dev/) - API
+- [Neon](https://neon.tech/) - Database
+- [Upstash](https://upstash.com/) - Redis + Rate Limiting
+
+## Demo
+
+> add video here
 
 ## Commands
 
@@ -12,3 +25,9 @@ Before running any command, make sure you copy the contents of `.env.example` to
 - `deno run fe:dev` - Start the frontend server.
 - `deno run fe:build` - Build the frontend.
 - `deno run fe:preview` - Preview the frontend.
+
+## Credits
+
+### Built with ❤️ by [@classroomio](https://github.com/classroomio)
+
+### Data from [@madeinnigeria](https://github.com/acekyd/made-in-nigeria)

main.ts

@@ -39,8 +39,8 @@ app.use('/v1/*', cors());
 app.get(
   '/v1/*',
   cache({
-    cacheName: 'naijastars-api',
-    cacheControl: 'max-age=3600',
+    cacheName: 'nsapi',
+    cacheControl: 'max-age=900',
     wait: true,
   })
 );

src/lib/components/border-beam/border-beam.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  export let size = 200;
+  export let duration = 15;
+  export let anchor = 90;
+  export let borderWidth = 1.5;
+  export let colorFrom = '#ffaa40';
+  export let colorTo = '#9c40ff';
+  export let delay = 0;
+  let delaySec = delay + 's';
+
+  let className: any = '';
+  export { className as class };
+</script>
+
+<div
+  style:--border-width={borderWidth}
+  style:--size={size}
+  style:--color-from={colorFrom}
+  style:--color-to={colorTo}
+  style:--delay={delaySec}
+  style:--anchor={anchor}
+  style:--duration={duration}
+  class={cn(
+    'pointer-events-none absolute inset-[0] rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
+
+    // mask styles
+    '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',
+
+    // pseudo styles
+    'after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',
+    className
+  )}
+></div>

src/lib/components/border-beam/index.ts

@@ -0,0 +1,3 @@
+import Root from './border-beam.svelte';
+
+export { Root, Root as BorderBeam };

src/lib/pages/home/table.svelte

@@ -21,8 +21,9 @@
   import type { Repository, ApiMetadata } from '$lib/types/repository';
 
   // import Actions from './table-actions.svelte';
-  import * as Table from '$lib/components/table/index.js';
-  import { Button } from '$lib/components/button/index.js';
+  import * as Table from '$lib/components/table';
+  import { Button } from '$lib/components/button';
+  import { BorderBeam } from '$lib/components/border-beam';
 
   export let data: Repository[] = [];
   export let apiMetadata: ApiMetadata;
@@ -154,7 +155,8 @@
 </script>
 
 <div class="w-full">
-  <div class="rounded-md my-4 border">
+  <div class="relative rounded-md my-4 border">
+    <BorderBeam size={200} duration={12} />
     <div class="m-2">
       <Input
         placeholder="Filter repositories..."

src/lib/pages/shared/coming-soon.svelte

@@ -10,7 +10,7 @@
       class="h-full w-full rounded-md object-cover"
     />
     <h2
-      class="text-center scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+      class="text-center scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 dark:text-black"
     >
       Coming soon
     </h2>

src/lib/pages/shared/sidebar.svelte

@@ -28,7 +28,7 @@
 </script>
 
 <aside
-  class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
+  class="fixed top-14 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">
     <div class="">

tailwind.config.js

@@ -57,6 +57,17 @@ const config = {
       fontFamily: {
         sans: ['Inter', ...fontFamily.sans],
       },
+
+      animation: {
+        'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
+      },
+      keyframes: {
+        'border-beam': {
+          '100%': {
+            'offset-distance': '100%',
+          },
+        },
+      },
     },
   },
 };