diff --git a/packages/gui/.eslintrc.cjs b/packages/gui/.eslintrc.cjs index 22e9c92..6524f50 100644 --- a/packages/gui/.eslintrc.cjs +++ b/packages/gui/.eslintrc.cjs @@ -1,5 +1,8 @@ module.exports = { root: true, + globals: { + NodeJS: true + }, parser: '@typescript-eslint/parser', extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], plugins: ['svelte3', '@typescript-eslint'], diff --git a/packages/gui/package.json b/packages/gui/package.json index f6941a0..187132a 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -42,7 +42,8 @@ "dependencies": { "@tauri-apps/api": "^1.2.0", "buffer": "^6.0.3", - "fuse.js": "^6.6.2" + "fuse.js": "^6.6.2", + "svelte-watch-resize": "^1.0.3" }, "pnpm": { "onlyBuiltDependencies": [ diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte new file mode 100644 index 0000000..31025de --- /dev/null +++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte @@ -0,0 +1,57 @@ + + +
+ {pkg.name} +
+ + + +

{pkg.name}

+ {#if pkg.maintainer} +

• {pkg.maintainer}

+ {/if} +
+
+ + diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte index 182910c..75d8d20 100644 --- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte +++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte @@ -1,6 +1,88 @@ - +
+ +
+

FEATURED PACKAGES

+
    + {#each featuredPackages as pkg, i} +
+
+
+
+ {#each featuredPackages as pkg} +
+ + + +
+ {/each} +
+
+
diff --git a/packages/gui/src/components/PageHeader/PageHeader.svelte b/packages/gui/src/components/PageHeader/PageHeader.svelte index 66e5aa1..0037feb 100644 --- a/packages/gui/src/components/PageHeader/PageHeader.svelte +++ b/packages/gui/src/components/PageHeader/PageHeader.svelte @@ -1,3 +1,3 @@ -
+
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts index 39a2100..5831955 100644 --- a/packages/gui/src/libs/api/mock.ts +++ b/packages/gui/src/libs/api/mock.ts @@ -152,3 +152,7 @@ const packages: Package[] = [ export async function getPackages(): Promise { return packages; } + +export async function getFeaturedPackages(): Promise { + return packages.slice(0, 4); +} diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts index 1ad6917..5d9f920 100644 --- a/packages/gui/src/libs/api/tauri.ts +++ b/packages/gui/src/libs/api/tauri.ts @@ -13,6 +13,7 @@ import { getClient } from '@tauri-apps/api/http'; import { Buffer } from 'buffer'; import type { Package } from '../types'; +import * as mock from './mock'; const username = 'user'; const password = 'password'; @@ -49,3 +50,8 @@ export async function getPackages(): Promise { const packages = await get('packages'); return packages; } + +export async function getFeaturedPackages(): Promise { + const packages = await mock.getFeaturedPackages(); + return packages; +} diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts index b5b204a..cb85595 100644 --- a/packages/gui/src/libs/stores.ts +++ b/packages/gui/src/libs/stores.ts @@ -1,13 +1,20 @@ import { writable } from 'svelte/store'; import type { Package } from './types'; -import { getPackages } from '@api'; +import { getPackages, getFeaturedPackages } from '@api'; export const backLink = writable('/'); export const packages = writable([]); +export const featuredPackages = writable([]); + export const initializePackages = async () => { const newPackages = await getPackages(); packages.set(newPackages); }; + +export const initializeFeaturedPackages = async () => { + const packages = await getFeaturedPackages(); + featuredPackages.set(packages); +}; diff --git a/packages/gui/src/routes/+layout.svelte b/packages/gui/src/routes/+layout.svelte index a35153a..5b4e057 100644 --- a/packages/gui/src/routes/+layout.svelte +++ b/packages/gui/src/routes/+layout.svelte @@ -48,7 +48,7 @@ figure { position: absolute; z-index: 0; - top: 180px; + top: 220px; left: 0px; right: 0px; bottom: 0px; diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte index 8c174e7..d02fee2 100644 --- a/packages/gui/src/routes/packages/[slug]/+page.svelte +++ b/packages/gui/src/routes/packages/[slug]/+page.svelte @@ -9,18 +9,21 @@ /** @type {import('./$types').PageData} */ export let data; - import { packages as packagesStore } from '$libs/stores'; + import { packages, featuredPackages } from '$libs/stores'; import type { Package } from '@tea/ui/types'; let pkg: Package; - packagesStore.subscribe((allPackages) => { - const foundPackage = allPackages.find(({ slug }) => slug === data?.slug) as Package; - if (foundPackage) { + const setPkg = (pkgs: Package[]) => { + const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package; + if (!pkg && foundPackage) { pkg = foundPackage; } - }); + }; + + packages.subscribe(setPkg); + featuredPackages.subscribe(setPkg);
diff --git a/packages/gui/tsconfig.json b/packages/gui/tsconfig.json index 813ed05..80cda19 100644 --- a/packages/gui/tsconfig.json +++ b/packages/gui/tsconfig.json @@ -12,7 +12,7 @@ "paths": { "$appcss": ["src/app.css"], "$libs/*": ["src/libs/*"], - "@api": ["src/lib/api/tauri.ts"], + "@api": ["src/libs/api/tauri.ts"], "$components/*": ["src/components/*"], "@tea/ui/*": ["../ui/src/*"] } diff --git a/packages/ui/tailwind.config.cjs b/packages/ui/tailwind.config.cjs index 23645c1..ff7dbaf 100644 --- a/packages/ui/tailwind.config.cjs +++ b/packages/ui/tailwind.config.cjs @@ -1,15 +1,21 @@ /** @type {import('tailwindcss').Config} */ -const primary = '#00ffd0'; +const green = '#00ffd0'; const black = '#1a1a1a'; const white = '#fff'; const gray = '#949494'; +const purple = '#8000FF'; module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { colors: { - primary, - green: primary, + primary: green, + accent: purple, + green, + purple: { + 700: purple, + 900: '#B076EC' + }, black, white, gray diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7fac30c..617e036 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -28,6 +28,7 @@ importers: svelte: ^3.49.0 svelte-check: ^2.8.0 svelte-preprocess: ^4.10.7 + svelte-watch-resize: ^1.0.3 svelte2tsx: ^0.5.20 tailwindcss: ^3.2.4 tslib: ^2.3.1 @@ -37,6 +38,7 @@ importers: '@tauri-apps/api': 1.2.0 buffer: 6.0.3 fuse.js: 6.6.2 + svelte-watch-resize: 1.0.3 devDependencies: '@playwright/test': 1.25.0 '@sveltejs/adapter-auto': 1.0.0-next.90 @@ -4202,6 +4204,10 @@ packages: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: false + /batch-processor/1.0.0: + resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==} + dev: false + /better-opn/2.1.1: resolution: {integrity: sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA==} engines: {node: '>8.0.0'} @@ -5043,6 +5049,12 @@ packages: resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==} dev: true + /element-resize-detector/1.2.4: + resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==} + dependencies: + batch-processor: 1.0.0 + dev: false + /emoji-regex/8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} dev: true @@ -9575,6 +9587,12 @@ packages: typescript: 4.9.3 dev: true + /svelte-watch-resize/1.0.3: + resolution: {integrity: sha512-ktqTnkdqfx4YRqeMJcX1jeSnQ2kJUVlj4/rLdaLbhM+RrxN87vS2EZ0cxlGZ7eXV86Ef05Q3dVqEiR+12PeoIw==} + dependencies: + element-resize-detector: 1.2.4 + dev: false + /svelte/3.53.1: resolution: {integrity: sha512-Q4/hHkktZogGhN5iqxqSi9sjEVoe/NbIxX4hXEHoasTxj+TxEQVAq66LnDMdAZxjmsodkoI5F3slqsS68U7FNw==} engines: {node: '>= 8'}