Skip to content

Commit

Permalink
feat: search + docs (#4)
Browse files Browse the repository at this point in the history
* feat: base changes

* feat: add docs route

* feat: quick fix for docs routing

* feat: docs page

* feat: docs page

* feat: light mode support

* chore: improvement

---------

Co-authored-by: Rotimi Best <[email protected]>
  • Loading branch information
tunny17 and rotimi-best authored Dec 4, 2024
1 parent f678243 commit 75c2655
Show file tree
Hide file tree
Showing 16 changed files with 753 additions and 273 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.

45 changes: 45 additions & 0 deletions routes/repository.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
74 changes: 10 additions & 64 deletions src/App.svelte
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -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>
19 changes: 13 additions & 6 deletions src/lib/components/navigation/navigation.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -106,16 +115,14 @@
<span class="sr-only" data-svelte-h="svelte-1t6m3jq">Toggle Menu</span
></button
>
<div
class="flex flex-1 items-center justify-between space-x-2 md:justify-end"
>
<div class="flex flex-1 items-center space-x-2 justify-end">
<nav class="flex items-center">
<Button
variant="link"
href="https://www.madeinnigeria.dev"
target="_blank"
rel="noreferrer noopener"
class="flex items-center gap-0"
class="hidden md:flex items-center gap-0"
>
Made in Nigeria

Expand All @@ -126,7 +133,7 @@
href="https://www.classroomio.com"
target="_blank"
rel="noreferrer noopener"
class="flex items-center gap-0"
class="hidden md:flex items-center gap-0"
>
ClassroomIO

Expand Down
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
122 changes: 122 additions & 0 deletions src/lib/pages/docs/get.svelte
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 75c2655

Please sign in to comment.