Skip to content

Commit

Permalink
chore: improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
rotimi-best committed Dec 4, 2024
1 parent 582ebd7 commit d3b071a
Show file tree
Hide file tree
Showing 14 changed files with 315 additions and 310 deletions.
1 change: 1 addition & 0 deletions deno.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 11 additions & 0 deletions deno.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 12 additions & 4 deletions routes/repository.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,14 +108,23 @@ app.get('/repositories/search', async (c) => {
SELECT *
FROM repository
WHERE name ILIKE '%' || ${text} || '%'
OR author ILIKE '%' || ${text} || '%';
OR author ILIKE '%' || ${text} || '%'
LIMIT ${LIMIT_PER_PAGE};
`;

return c.json({
data: repositories,
search: {
text,
pagination: {
currentPage: 1,
totalPages: 1,
totalItems: repositories.length,
itemsPerPage: LIMIT_PER_PAGE,
hasNextPage: false,
hasPrevPage: false,
},
sort: {
sortBy: 'stars',
order: 'desc',
},
});
} catch (error) {
Expand All @@ -124,5 +133,4 @@ app.get('/repositories/search', async (c) => {
}
});


export default app;
83 changes: 9 additions & 74 deletions src/App.svelte
Original file line number Diff line number Diff line change
@@ -1,45 +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 = '';
let isDocsPage = false;
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'
}
];
$: isDocsPage = window.location.pathname.includes('/docs');
</script>

<ModeWatcher />
Expand All @@ -48,49 +18,14 @@
<main class="w-full">
<Navigation />

<div
class="container flex-1 items-start {!isDocsPage &&
'md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10'}"
>
{#if !isDocsPage}
<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>
{/if}

<div class=" py-6 lg:gap-10 lg:py-8">
<Route path="/stats/:id" component={OtherPage} />
<Route path="/">
<HomePage />
</Route>
<Route path="/docs">
<DocsPage />
</Route>
</div>
<div class="">
<Route path="/stats/:id" component={OtherPage} />
<Route path="/">
<HomePage />
</Route>
<Route path="/docs">
<DocsPage />
</Route>
</div>
</main>
</Router>
2 changes: 1 addition & 1 deletion src/lib/components/table/table.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/functions/debounce.ts
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand Down
108 changes: 43 additions & 65 deletions src/lib/pages/docs/get.svelte
Original file line number Diff line number Diff line change
@@ -1,91 +1,69 @@
<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 h-[80vh] overflow-hidden overflow-y-auto"
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 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"> / api / repositories</span>
<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>

<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>page</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">number</p>
</div>

<p>Page number of repository e.g. 1 | 2 | 3</p>
</div>
{#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>

<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>limit</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">number</p>
<p>{param.description}</p>
</div>

<p>Limit per page e.g. 10</p>
</div>

<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>sortBy</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">string</p>
</div>

<p>Sort by stars e.g. stars | author | forks</p>
</div>

<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>order</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">string</p>
</div>

<p>Order of sorting e.g. asc | desc</p>
</div>
<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>limit</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">number</p>
</div>

<p>Limit per page e.g. 10</p>
</div>

<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>sortBy</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">string</p>
</div>

<p>Sort by stars e.g. stars | author | forks</p>
</div>

<div class="≈p-2.5 mt-10 text-sm">
<div class="flex items-center gap-5 mb-4">
<p>order</p>
<p class="text-xs px-2 py-0.5 bg-red-50 text-black rounded-md">string</p>
</div>

<p>Order of sorting e.g. asc | desc</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 http://localhost:8000/api/repositories \</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-[90%] md:h-[80%] overflow-auto"
class="bg-white dark:bg-transparent border dark:text-white rounded-md h-[75vh] overflow-y-auto"
>
<pre>
<code class="language-json text-xs">
Expand Down
26 changes: 15 additions & 11 deletions src/lib/pages/docs/page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,36 @@
const navigation = [
{
label: 'get',
text: 'Get Repositories'
text: 'Get Repositories',
},
{
label: 'search',
text: 'Search Repositories'
}
text: 'Search Repositories',
},
];
</script>

<Router {url}>
<main
class="relative 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:h-[80vh] overflow-hidden overflow-y-auto"
class="relative 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">Repositories</button>
<button on:click={() => (state = '')} class="mb-3 p-2 text-xl">
Repositories
</button>

<ul class="flex flex-col gap-1 mt-2">
<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 {state === nav.label &&
'dark:bg-gray-800 text-black border border-gray-900'}"
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 {state ===
nav.label &&
'dark:bg-neutral-800 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'}"
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'}"
>
{nav.label}
</span>
Expand All @@ -50,7 +54,7 @@
<div class="h-full">
{#if state === ''}
<section
class="flex flex-col justify-center items-center gap-5 rounded-md border h-[60vh] md:h-full p-5"
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 Docs</h1>
<img src={logo} alt="logo" class="w-28 h-28" />
Expand Down
Loading

0 comments on commit d3b071a

Please sign in to comment.