#33 FeaturedPackages component

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": [

packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import '$appcss';
+	import type { Package } from '@tea/ui/types';
+	export let pkg: Package;
+</script>
+
+<figure class="w-full h-full relative">
+	<img
+		src={!pkg.thumb_image_url.includes('https://tea.xyz')
+			? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
+			: pkg.thumb_image_url}
+		alt={pkg.name}
+	/>
+	<article class="card-thumb-label">
+		<i class="icon-tea-logo-iconasset-1">
+			<!-- TODO: replace with icon.svg -->
+		</i>
+		<h3 class="text-3xl">{pkg.name}</h3>
+		{#if pkg.maintainer}
+			<h4 class="text-lg mt-2">&#x2022;&nbsp;{pkg.maintainer}</h4>
+		{/if}
+	</article>
+</figure>
+
+<style>
+	img {
+		box-shadow: 0px 0px 12px #0c0c0c !important;
+		width: 100%;
+		height: 100%;
+	}
+	.card-thumb-label i {
+		font-size: 1.5vw;
+		color: black;
+	}
+
+	.card-thumb-label h3 {
+		color: black;
+		line-height: 1.8vw;
+		margin: 0px 0px 0.5vw 0vw;
+		padding: 0px;
+	}
+
+	.card-thumb-label {
+		position: absolute;
+		background: rgba(255, 255, 255, 0.9);
+		left: 0;
+		bottom: 20px;
+		padding: 1.116vw;
+		text-align: left;
+		min-width: 40%;
+		height: 40%;
+	}
+
+	.card-thumb-label h4 {
+		color: black;
+	}
+</style>

packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte

@@ -1,6 +1,107 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+	import { onDestroy } from 'svelte';
+	import { watchResize } from 'svelte-watch-resize';
+	import type { Package } from '@tea/ui/types';
+	import FeaturedPackage from './FeaturedPackage.svelte';
+
+	let featuredPackages: Package[] = [
+		{
+			slug: 'mesonbuild_com',
+			homepage: 'https://mesonbuild.com',
+			name: 'mesonbuild.com',
+			version: '0.63.3',
+			last_modified: '2022-10-06T15:45:08.000Z',
+			full_name: 'mesonbuild.com',
+			dl_count: 270745,
+			thumb_image_name: 'mesonbuild_com_option 1.jpg ',
+			maintainer: '',
+			desc: 'Fast and user friendly build system',
+			thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
+			installs: 0
+		},
+		{
+			slug: 'pixman_org',
+			homepage: 'http://www.pixman.org/',
+			maintainer: 'freedesktop',
+			name: 'pixman.org',
+			version: '0.40.0',
+			last_modified: '2022-09-26T19:37:47.000Z',
+			full_name: 'pixman.org',
+			dl_count: 0,
+			thumb_image_name: 'pixman_org_option 1.jpg ',
+			desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
+			thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
+			installs: 0
+		},
+		{
+			slug: 'freedesktop_org_pkg_config',
+			homepage: 'https://freedesktop.org',
+			maintainer: 'freedesktop.org',
+			name: 'pkg-config',
+			version: '0.29.2',
+			last_modified: '2022-10-20T01:32:15.000Z',
+			full_name: 'freedesktop.org/pkg-config',
+			dl_count: 2661501,
+			thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
+			desc: 'Manage compile and link flags for libraries',
+			thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
+			installs: 0
+		}
+	];
+
+	let pkgFocus = 0;
+	let width = 0;
+	let styleFeaturedPackages: string;
+
+	function getFeaturedStyle() {
+		const position = pkgFocus * width;
+		return `
+			width: ${featuredPackages.length * width}px;
+			left: -${position}px;
+			transition: left 0.6s ease-in;
+		`;
+	}
+
+	function handleContainerResize(node: HTMLElement) {
+		width = node.clientWidth;
+		styleFeaturedPackages = getFeaturedStyle();
+	}
+
+	const loop = setInterval(() => {
+		pkgFocus++;
+		if (pkgFocus === featuredPackages.length) {
+			pkgFocus = 0;
+		}
+		styleFeaturedPackages = getFeaturedStyle();
+	}, 3000);
+
+	onDestroy(() => clearInterval(loop));
 </script>
 
-<Placeholder label="FeaturedPackages" />
+<section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
+	<!-- <Placeholder label="FeaturedPackages" /> -->
+	<header class="bg-accent h-12 flex justify-between px-2 items-center">
+		<p>FEATURED PACKAGES</p>
+		<ul class="flex gap-2">
+			{#each featuredPackages as pkg, i}
+				<li
+					class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
+						i === pkgFocus ? 'bg-purple-900' : ''
+					}`}
+				/>
+			{/each}
+		</ul>
+	</header>
+	<figure class="overflow-hidden absolute bottom-0 top-12 left-0 right-0">
+		<section class="flex absolute top-0 h-full" style={styleFeaturedPackages}>
+			{#each featuredPackages as pkg}
+				<div class="h-full" style={`width:${width}px`}>
+					<a href={`/packages/${pkg.slug}`}>
+						<FeaturedPackage {pkg} />
+					</a>
+				</div>
+			{/each}
+		</section>
+	</figure>
+</section>

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,
+			primary: green,
-			green: primary,
+			accent: purple,
+			green,
+			purple: {
+				700: purple,
+				900: '#B076EC'
+			},
 			black,
 			white,
 			gray

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'}