diff --git a/deno.json b/deno.json index 85db2d7..5f6bca6 100644 --- a/deno.json +++ b/deno.json @@ -1,5 +1,6 @@ { "tasks": { + "dev": "deno run fe:dev & deno run be:dev", "fe:dev": "deno run -A --node-modules-dir npm:vite", "fe:build": "deno run -A --node-modules-dir npm:vite build", "fe:preview": "deno run -A --node-modules-dir npm:vite preview", diff --git a/src/lib/assets/star.svg b/src/lib/assets/star.svg new file mode 100644 index 0000000..9038ea0 --- /dev/null +++ b/src/lib/assets/star.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/src/lib/components/marquee/index.ts b/src/lib/components/marquee/index.ts new file mode 100644 index 0000000..ca2105d --- /dev/null +++ b/src/lib/components/marquee/index.ts @@ -0,0 +1,4 @@ +import Root from './marquee.svelte'; +import MarqueeCard from './marquee-card.svelte'; + +export { Root, Root as Marquee, MarqueeCard }; diff --git a/src/lib/components/marquee/marquee-card.svelte b/src/lib/components/marquee/marquee-card.svelte new file mode 100644 index 0000000..1b20f64 --- /dev/null +++ b/src/lib/components/marquee/marquee-card.svelte @@ -0,0 +1,47 @@ + + + +
+
+ +
+ +
+ {name} +
+

{author}

+
+
+
+ +

{stars}

+
+
+
{description}
+ diff --git a/src/lib/components/marquee/marquee.svelte b/src/lib/components/marquee/marquee.svelte new file mode 100644 index 0000000..657c9b4 --- /dev/null +++ b/src/lib/components/marquee/marquee.svelte @@ -0,0 +1,34 @@ + + +
+ {#each { length: repeat } as _, i (i)} +
+ Default +
+ {/each} +
diff --git a/src/lib/pages/home/author-display.svelte b/src/lib/pages/home/author-display.svelte new file mode 100644 index 0000000..f9989ec --- /dev/null +++ b/src/lib/pages/home/author-display.svelte @@ -0,0 +1,15 @@ + + +
+ + + + + {data.author} +
diff --git a/src/lib/pages/home/hero.svelte b/src/lib/pages/home/hero.svelte new file mode 100644 index 0000000..6c5f2ab --- /dev/null +++ b/src/lib/pages/home/hero.svelte @@ -0,0 +1,37 @@ + + +
+ +

+ The Odogwu's +

+ + {#each firstRow as item} + + {/each} + + + {#each secondRow as item} + + {/each} + +
+
+
diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte index 8dc8915..47d74f5 100644 --- a/src/lib/pages/home/page.svelte +++ b/src/lib/pages/home/page.svelte @@ -8,6 +8,7 @@ import detectUrlChange from 'detect-url-change'; import Table from './table.svelte'; + import Hero from './hero.svelte'; let repositories: Repository[] = []; let apiMetadata: ApiMetadata = { @@ -118,7 +119,7 @@ > -
+
{#if isFetching && !isMounted}
@@ -132,21 +133,25 @@
{:else}
-

- Open source projects in Nigeria -

+ + +
+

+ All Projects +

+
+ {#key gettingFreshData} + + {/key} - {#key gettingFreshData} -
- {/key} {/if} diff --git a/src/lib/pages/home/table.svelte b/src/lib/pages/home/table.svelte index 2632cae..7520997 100644 --- a/src/lib/pages/home/table.svelte +++ b/src/lib/pages/home/table.svelte @@ -3,6 +3,7 @@ import { Render, Subscribe, + createRender, // createRender, createTable, } from 'svelte-headless-table'; @@ -24,6 +25,7 @@ import * as Table from '$lib/components/table'; import { Button } from '$lib/components/button'; import { BorderBeam } from '$lib/components/border-beam'; + import AuthorDisplay from './author-display.svelte'; export let data: Repository[] = []; export let apiMetadata: ApiMetadata; @@ -62,15 +64,14 @@ header: 'Name', accessor: 'link', }), - table.column({ - header: '', - accessor: 'author_avatar', - cell: ({ value }) => value.toLowerCase(), - }), table.column({ header: 'Author', - accessor: 'author', - cell: ({ value }) => value.toLowerCase(), + accessor: (data) => data, + cell: ({ value }) => { + return createRender(AuthorDisplay, { + data: value, + }); + }, }), table.column({ header: 'Stars', @@ -109,8 +110,6 @@ const ids = flatColumns.map((c) => c.id); let hideForId = Object.fromEntries(ids.map((id) => [id, true])); - const { filterValue } = pluginStates.filter; - function goToPage(page: number) { const url = new URL(window.location.href); url.searchParams.set('page', page.toString()); diff --git a/tailwind.config.js b/tailwind.config.js index ee8a036..19cd85b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,8 +10,8 @@ const config = { center: true, padding: '2rem', screens: { - '2xl': '1400px', - }, + '2xl': '1400px' + } }, extend: { colors: { @@ -22,54 +22,64 @@ const config = { foreground: 'hsl(var(--foreground) / )', primary: { DEFAULT: 'hsl(var(--primary) / )', - foreground: 'hsl(var(--primary-foreground) / )', + foreground: 'hsl(var(--primary-foreground) / )' }, secondary: { DEFAULT: 'hsl(var(--secondary) / )', - foreground: 'hsl(var(--secondary-foreground) / )', + foreground: 'hsl(var(--secondary-foreground) / )' }, destructive: { DEFAULT: 'hsl(var(--destructive) / )', - foreground: 'hsl(var(--destructive-foreground) / )', + foreground: 'hsl(var(--destructive-foreground) / )' }, muted: { DEFAULT: 'hsl(var(--muted) / )', - foreground: 'hsl(var(--muted-foreground) / )', + foreground: 'hsl(var(--muted-foreground) / )' }, accent: { DEFAULT: 'hsl(var(--accent) / )', - foreground: 'hsl(var(--accent-foreground) / )', + foreground: 'hsl(var(--accent-foreground) / )' }, popover: { DEFAULT: 'hsl(var(--popover) / )', - foreground: 'hsl(var(--popover-foreground) / )', + foreground: 'hsl(var(--popover-foreground) / )' }, card: { DEFAULT: 'hsl(var(--card) / )', - foreground: 'hsl(var(--card-foreground) / )', - }, + foreground: 'hsl(var(--card-foreground) / )' + } }, borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', + sm: 'calc(var(--radius) - 4px)' }, fontFamily: { - sans: ['Inter', ...fontFamily.sans], + sans: ['Inter', ...fontFamily.sans] }, animation: { 'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear', + marquee: 'marquee var(--duration) linear infinite', + 'marquee-vertical': 'marquee-vertical var(--duration) linear infinite' }, keyframes: { 'border-beam': { '100%': { - 'offset-distance': '100%', - }, + 'offset-distance': '100%' + } }, - }, - }, - }, + marquee: { + from: { transform: 'translateX(0)' }, + to: { transform: 'translateX(calc(-100% - var(--gap)))' } + }, + 'marquee-vertical': { + from: { transform: 'translateY(0)' }, + to: { transform: 'translateY(calc(-100% - var(--gap)))' } + } + } + } + } }; export default config;