From d101a1a13e67771214688164edd4c3f8c647bfd6 Mon Sep 17 00:00:00 2001
From: Hunter LaFaille <hlafaille@proton.me>
Date: Thu, 3 Oct 2024 17:24:44 +0000
Subject: [PATCH] Building out the registry

---
 src/lib/components/buttons/Button.svelte      |  6 ++-
 .../components/cards/ProjectSection.svelte    | 13 +++--
 src/lib/components/cards/RegistryCard.svelte  | 16 +++++++
 src/lib/components/inputs/LineEdit.svelte     |  5 ++
 src/lib/components/nav/Navigation.svelte      | 47 ++++++++++++++-----
 src/routes/+layout.svelte                     |  4 +-
 src/routes/projects/+page.svelte              | 39 ++++++++++-----
 .../projects/espresso/registry/+page.svelte   | 39 +++++++++++++++
 8 files changed, 136 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/components/cards/RegistryCard.svelte
 create mode 100644 src/lib/components/inputs/LineEdit.svelte
 create mode 100644 src/routes/projects/espresso/registry/+page.svelte

diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
index 32ecdd9..f8edc8b 100644
--- a/src/lib/components/buttons/Button.svelte
+++ b/src/lib/components/buttons/Button.svelte
@@ -20,10 +20,12 @@
 		@apply h-min w-full;
 		@apply text-clip text-nowrap;
 		@apply select-none;
+		@apply hover:scale-[102%] hover:drop-shadow-lg;
+		@apply active:scale-[100%] active:drop-shadow-md;
 	}
 	.btn-primary {
-		@apply rounded-2xl bg-orange-500 p-4;
-		@apply text-xl font-medium text-gray-100;
+		@apply rounded-3xl bg-orange-500 p-4;
+		@apply text-xl font-bold text-gray-100;
 		@apply hover:bg-amber-500;
 		@apply active:bg-amber-600;
 	}
diff --git a/src/lib/components/cards/ProjectSection.svelte b/src/lib/components/cards/ProjectSection.svelte
index dbc9654..3d97ef4 100644
--- a/src/lib/components/cards/ProjectSection.svelte
+++ b/src/lib/components/cards/ProjectSection.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	export let title: string;
-    export let body: string;
+	export let body: string;
 </script>
 
-<div class="p-12 rounded-lg flex flex-col gap-4 h-screen">
-    <h1 class="font-sans text-3xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
-    <p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
-</div>
\ No newline at end of file
+<div class="flex h-min justify-center">
+	<div class="bg-neutral-100 p-12 rounded-lg flex flex-col gap-4">
+		<h1 class="font-sans text-3xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
+		<p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
+        <slot/>
+	</div>
+</div>
diff --git a/src/lib/components/cards/RegistryCard.svelte b/src/lib/components/cards/RegistryCard.svelte
new file mode 100644
index 0000000..e2dd957
--- /dev/null
+++ b/src/lib/components/cards/RegistryCard.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let title: string = '';
+	export let body: string = '';
+	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 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>
+		</div>
+		<p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
+		<slot />
+	</div>
+</div>
diff --git a/src/lib/components/inputs/LineEdit.svelte b/src/lib/components/inputs/LineEdit.svelte
new file mode 100644
index 0000000..0e426af
--- /dev/null
+++ b/src/lib/components/inputs/LineEdit.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let placeholder: string = "";
+    export let value: string = "";
+</script>
+<input type="text" {placeholder} bind:value class="p-2 rounded-lg  w-full border border-neutral-300 focus:outline-none focus:ring focus:ring-offset-1 focus:ring-orange-300 transition-all"/>
\ No newline at end of file
diff --git a/src/lib/components/nav/Navigation.svelte b/src/lib/components/nav/Navigation.svelte
index a430de0..ac0da61 100644
--- a/src/lib/components/nav/Navigation.svelte
+++ b/src/lib/components/nav/Navigation.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { draw } from 'svelte/transition';
 
 	const navItems = [
@@ -10,13 +11,33 @@
 
 	let drawerOpen: boolean = false;
 
+	onMount(() => {
+		function typeText(elementId: string, text: string, delay = 50) {
+			const terminalElement = document.getElementById(elementId);
+			let index = 0;
+
+			function type() {
+				if (index < text.length) {
+					terminalElement!.innerHTML += text.charAt(index);
+					index++;
+					setTimeout(type, delay); // Delay between each character
+				}
+			}
+
+			type();
+		}
+
+		const textToType = `Kerosene Labs`;
+		typeText('terminal', textToType, 100); // Adjust delay for typing speed
+	});
 </script>
 
 <!-- Mobile Nav -->
-<div id="mobileNavBar" class="block lg:hidden z-50">
+<div id="mobileNavBar" class="z-50 block lg:hidden">
 	<div class="w-full bg-neutral-100 p-2">
 		<!-- <p class="mr-auto text-3xl font-light text-neutral-300">☰</p> -->
-		<button class="items-center justify-center flex"
+		<button
+			class="flex items-center justify-center"
 			on:click={() => {
 				drawerOpen = !drawerOpen;
 			}}
@@ -34,25 +55,29 @@
 	</div>
 </div>
 
-<div id="mobileNavDrawer" class="block lg:hidden bg-gray-200 transition-all translate-x-[-100%] w-[80%] sm:w-[40%] md:w-[30%] h-full absolute z-40 backdrop-blur-lg" class:drawer-open={drawerOpen}>
+<div
+	id="mobileNavDrawer"
+	class="absolute z-40 block h-full w-[80%] translate-x-[-100%] bg-gray-200 backdrop-blur-lg transition-all sm:w-[40%] md:w-[30%] lg:hidden"
+	class:drawer-open={drawerOpen}
+>
 	<p>Test</p>
 </div>
 
-
 <button
 	id="mobileNavDrawerBg"
-	class="block lg:hidden absolute h-screen w-screen bg-neutral-800 opacity-0 pointer-events-none transition-opacity"
+	class="pointer-events-none absolute block h-screen w-screen bg-neutral-800 opacity-0 transition-opacity lg:hidden"
 	class:drawer-open={drawerOpen}
-	on:click={() => {drawerOpen = !drawerOpen}}
+	on:click={() => {
+		drawerOpen = !drawerOpen;
+	}}
 ></button>
 
 <!-- Desktop Nav -->
 <div id="desktopNavBar" class="hidden lg:block">
 	<div class="flex flex-row">
-		<a href="/" class="flex flex-row items-center justify-center gap-2 p-4 text-xl font-semibold">
-			<img src="kerosene_logo_transparent.png" alt="Kerosene Logo" class="size-8" />
-			Kerosene Labs</a
-		>
+		<a id="terminal" href="/" class="flex flex-row items-center justify-center gap-2 p-4 text-xl font-semibold">
+			<img src="/kerosene_logo_transparent.png" alt="Kerosene Logo" class="size-8" />
+		</a>
 		<div class="ml-auto flex flex-row gap-6 p-4">
 			{#each navItems as item}
 				<a
@@ -67,7 +92,7 @@
 
 <style lang="postcss">
 	#mobileNavDrawerBg.drawer-open {
-		@apply opacity-50 pointer-events-auto;
+		@apply pointer-events-auto opacity-50;
 	}
 
 	#mobileNavDrawer.drawer-open {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 72087f8..ec18335 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,9 +4,9 @@
 	import '../app.css';
 </script>
 
-<div class="flex flex-col page min-h-screen">
+<div id="root" class="flex flex-col page min-h-screen h-full">
 	<Navigation />
-	<div class="h-full px-2 lg:px-0">
+	<div id="contentWrapper" class="flex flex-grow w-full h-full items-center justify-center px-2 lg:px-0">
 		<slot />
 	</div>
 	<Footer />
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index af6a31e..8e689f8 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,20 +1,33 @@
 <script>
+	import { goto } from '$app/navigation';
+	import Button from '$lib/components/buttons/Button.svelte';
 	import ProjectSection from '$lib/components/cards/ProjectSection.svelte';
 </script>
 
 <title>Projects - Kerosene Labs</title>
 
-<div class="flex flex-col w-full">
-	<ProjectSection
-		title="Espresso"
-		body="An experimental Java build tool designed for modern development. Espresso is simple, portable and reliable. You wouldn't use a sledgehammer to hang a picture frame, would you?"
-	/>
-	<ProjectSection
-		title="Kindling"
-		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."
-	/>
-	<ProjectSection
-		title="ATC"
-		body="Air Traffic Controller (ATC); an API gateway designed from the ground up to be vendor independent. Built with Kindling."
-	/>
+<div class="flex w-full max-w-[70rem] flex-col">
+	<div class="flex h-screen items-center">
+		<ProjectSection
+			title="Espresso"
+			body="An experimental Java build tool designed for modern development. Espresso is simple, portable and reliable. You wouldn't use a sledgehammer to hang a picture frame, would you?"
+		>
+			<div class="flex flex-row gap-4">
+				<Button role="secondary" text="Visit Registry" on:click={() => {goto("/projects/espresso/registry")}}/>
+				<Button text="View Code" />
+			</div>
+		</ProjectSection>
+	</div>
+	<div class="flex h-screen items-center">
+		<ProjectSection
+			title="Kindling"
+			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."
+		/>
+	</div>
+	<div class="flex h-screen items-center">
+		<ProjectSection
+			title="ATC"
+			body="Air Traffic Controller (ATC); an API gateway designed from the ground up to be vendor independent. Built with Kindling."
+		/>
+	</div>
 </div>
diff --git a/src/routes/projects/espresso/registry/+page.svelte b/src/routes/projects/espresso/registry/+page.svelte
new file mode 100644
index 0000000..c8b3d4e
--- /dev/null
+++ b/src/routes/projects/espresso/registry/+page.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import RegistryCard from '$lib/components/cards/RegistryCard.svelte';
+	import LineEdit from '$lib/components/inputs/LineEdit.svelte';
+
+	let lineEditValue: string = '';
+</script>
+
+<div class="flex h-full max-w-[50rem] flex-col items-center justify-center gap-4">
+	<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">
+		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>
+
+	{#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>
+	{/if}
+</div>