Finishing up for now

Kerosene-Labs · Oct 3, 2024 · 9d11ef8 · 9d11ef8
1 parent d101a1a
commit 9d11ef8
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 30 deletions.
diff --git a/src/lib/components/cards/RegistryCard.svelte b/src/lib/components/cards/RegistryCard.svelte
@@ -4,13 +4,13 @@
 	export let group: string = '';
 </script>
 
-<div class="flex h-min justify-center">
-	<div class="flex flex-col gap-4 rounded-lg bg-neutral-100 p-12">
+<div class="flex h-full justify-center w-min">
+	<div class="flex flex-col gap-4 rounded-lg bg-neutral-100 p-6 lg:p-12 justify-center">
 		<div class="flex flex-row gap-4 items-center">
-			<h1 class="font-sans text-3xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
-			<p class="text-lg text-neutral-400 font-mono">{group}</p>
+			<h1 class="font-sans text-2xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
+			<p class="text-md text-neutral-400 font-mono">{group}</p>
 		</div>
-		<p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
+		<p class="font-sans text-ll font-semibold text-neutral-500 lg:text-2xl">{body}</p>
 		<slot />
 	</div>
 </div>
diff --git a/src/lib/components/nav/Footer.svelte b/src/lib/components/nav/Footer.svelte
@@ -1,3 +1,3 @@
-<div class="mt-auto p-4 flex flex-col items-center bg-neutral-100">
+<div class="p-4 flex flex-col items-center bg-neutral-100 mt-6">
     <a href="https://github.com/Kerosene-Labs/website" class="text-neutral-400 hover:text-neutral-500 hover:underline">© Kerosene Labs 2024</a>
 </div>
diff --git a/src/routes/projects/espresso/registry/+page.svelte b/src/routes/projects/espresso/registry/+page.svelte
@@ -3,37 +3,77 @@
 	import LineEdit from '$lib/components/inputs/LineEdit.svelte';
 
 	let lineEditValue: string = '';
+	let pageTitle: string = '';
+
+	$: if (lineEditValue) {
+		pageTitle = lineEditValue + ' - Espresso Registry - Kerosene Labs';
+	} else {
+		pageTitle = 'Espresso Registry - Kerosene Labs';
+	}
+
+	// API Querying
+	let apiQueryError: string = '';
+	async function queryRegistryApi(term: string): Promise<Array<any> | undefined> {
+		try {
+			const response = await fetch('http://localhost:8080/registry?q=' + encodeURI(term), {
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
+
+			if (!response.ok) {
+				apiQueryError = 'An error occurred: HTTP ' + response.status;
+			}
+
+			const data = await response.json(); // Parse the response as JSON
+			return data; // Return the data
+		} catch (error) {
+			console.error('There was a problem with the fetch operation:', error);
+		}
+	}
+	let apiResponse: Array<any> = [];
+	$: queryRegistryApi(lineEditValue).then((data) => {
+		apiResponse = data!;
+	});
 </script>
 
-<div class="flex h-full max-w-[50rem] flex-col items-center justify-center gap-4">
+<title>{pageTitle}</title>
+<div class="flex h-full flex-col items-center justify-center gap-4 text-center">
 	<h1 class="font-sans text-4xl font-bold text-neutral-800 lg:text-7xl">The Espresso Registry</h1>
-	<p class=" font-sans text-xl font-semibold text-neutral-500 lg:max-w-[50rem] lg:text-2xl">
+	<p
+		class=" text-center font-sans text-xl font-semibold text-neutral-500 lg:max-w-[50rem] lg:text-2xl"
+	>
 		Search for packages to use in your next hit project.
 	</p>
-	<div class="flex h-min w-1/2 flex-row">
-		<LineEdit placeholder="Kindling" bind:value={lineEditValue} />
+	<div class="flex h-min w-3/4 flex-row lg:w-1/2">
+		<LineEdit placeholder="Type something cool... we'll find it." bind:value={lineEditValue} />
 	</div>
 
 	{#if lineEditValue}
 		<p class="text-sm text-neutral-400">
 			Searching registry at commit: 882be6a7e61d11d33dec508a789f009352a3e328
 		</p>
-		<div class="flex max-h-96 flex-grow-0 flex-col gap-6 overflow-y-scroll">
-			<RegistryCard
-				title="kindling"
-				group="com.kerosenelabs"
-				body="A programmable TLS HTTP/1.1 server written in modern Java with zero dependencies. No hidden magic, visible control flow, and virtual threads. The fuel that'll ignite your application."
-			/>
-			<RegistryCard
-				title="spring-web"
-				group="org.springframework"
-				body="Spring Web provides integration features such as multipart file upload functionality and the initialization of the IoC container using Servlet listeners and a web-oriented application context. It also contains an HTTP client and the web-related parts of Spring remote support."
-			/>
-			<RegistryCard
-				title="lombok"
-				group="org.projectlombok"
-				body="Lombok is a Java library that provides annotations to simplify Java development by automating the generation of boilerplate code. Key features include automatic generation of getters, setters, equals, hashCode, and toString methods, as well as a facility for automatic resource management. It aims to reduce the amount of manual coding, thereby streamlining the codebase and reducing potential for errors. "
-			/>
+		<div class="flex items-center">
+			<div class="grid w-full grid-cols-1 gap-8 p-4 lg:grid-cols-2">
+				{#each apiResponse as group}
+					{#each group.espressoPackages as pkg}
+						<div class:single-registry-card={apiResponse.length === 1}>
+							<RegistryCard
+								title={pkg.name}
+								group={group.name}
+								body={pkg.packageDeclaration.description}
+							/>
+						</div>
+					{/each}
+				{/each}
+			</div>
 		</div>
 	{/if}
 </div>
+
+<style lang="postcss">
+	.single-registry-card {
+		@apply col-span-2 w-full;
+	}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,11 +2,12 @@
 export default {
   content: ['./src/**/*.{html,js,svelte,ts,svg}'],
   theme: {
-    fontFamily: {
-      'sans': 'Open Sans',
-      'sans-serif': 'Noto Serif'
+    extend: {
+      fontFamily: {
+        'sans': 'Open Sans',
+        'sans-serif': 'Noto Serif'
+      },
     },
-    extend: {},
   },
   plugins: [],
 }