Merge branch 'main' into mk/feat/load-anim

hearchco · Dec 10, 2023 · 99e76fc · 99e76fc
2 parents ec0cc5e + 248c443
commit 99e76fc
Show file tree

Hide file tree

Showing 17 changed files with 210 additions and 108 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1 @@
-ORIGIN=http://localhost:5173 # this server
-PUBLIC_API_URL_SSR=http://localhost:3030 # server reachable
-PUBLIC_API_URL_CSR=http://localhost:3030 # client reachable
+API_URL=http://localhost:3030 # server reachable
diff --git a/fly.toml b/fly.toml
@@ -10,9 +10,7 @@ primary_region = "cdg"
   image = "ghcr.io/hearchco/frontend:latest"
 
 [env]
-  ORIGIN = "https://hearch.co"
-  PUBLIC_API_URL_CSR = "https://api.hearch.co"
-  PUBLIC_API_URL_SSR = "http://hearchco.flycast"
+  API_URL = "http://hearchco.flycast"
 
 [http_service]
   internal_port = 3000

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "frontend",
-	"version": "0.3.3",
+	"version": "0.0.1",
 	"private": true,
 	"scripts": {
 		"start": "node ./build/index.js",
@@ -13,7 +13,6 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.27.6",
 		"@typescript-eslint/eslint-plugin": "^6.13.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.css b/src/app.css
@@ -2,43 +2,40 @@
 @tailwind components;
 @tailwind utilities;
 
-.body {
-    @apply custom-bg dark:custom-bg flex min-h-screen flex-col
-}
-
-.footer {
-    @apply custom-bg-headfoot dark:custom-bg-headfoot mt-auto flex h-20 w-full place-content-center items-center border border-gray-100 dark:border-0;
-}
-
-
-.custom-bg, .custom-bg-button, .custom-bg-headfoot {
-    background-color: #fff;
+.custom-bg,
+.custom-bg-button,
+.custom-bg-headfoot {
+	background-color: #fff;
 }
 
 @media (prefers-color-scheme: dark) {
-    .dark\:custom-bg {
-        background-color: #222428;
-    }
-    .dark\:custom-bg-button {
-        background-color: #2b2e36;
-    }
-    .dark\:custom-bg-headfoot {
-        background-color: #1e1e22;
-    }
+	.dark\:custom-bg {
+		background-color: #222428;
+	}
+	.dark\:custom-bg-button {
+		background-color: #2b2e36;
+	}
+	.dark\:custom-bg-headfoot {
+		background-color: #1e1e22;
+	}
 }
 
-.hearchco-bg-primary, .hover\:hearchco-bg-primary:hover {
-    background-color: #ffb280;
+.hearchco-bg-primary,
+.hover\:hearchco-bg-primary:hover {
+	background-color: #ffb280;
 }
 
-.hearchco-bg-secondary, .hover\:hearchco-bg-secondary:hover {
-    background-color: #2b1100;
+.hearchco-bg-secondary,
+.hover\:hearchco-bg-secondary:hover {
+	background-color: #2b1100;
 }
 
-.hearchco-text-primary, .hover\:hearchco-text-primary:hover {
-    color: #ffb280;
+.hearchco-text-primary,
+.hover\:hearchco-text-primary:hover {
+	color: #ffb280;
 }
 
-.hearchco-text-secondary, .hover\:hearchco-text-secondary:hover {
-    color: #2b1100;
-}
+.hearchco-text-secondary,
+.hover\:hearchco-text-secondary:hover {
+	color: #2b1100;
+}
diff --git a/src/app.html b/src/app.html
@@ -18,6 +18,7 @@
 			title="Hearchco"
 		/>
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+		<link rel="icon" type="image/svg" sizes="64x64" href="/favicon.svg" />
 		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
 		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 		<link rel="manifest" href="/site.webmanifest" />
@@ -27,14 +28,10 @@
 
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="body">
+	<body
+		data-sveltekit-preload-data="hover"
+		class="custom-bg dark:custom-bg min-h-screen flex flex-col"
+	>
 		<div style="display: contents">%sveltekit.body%</div>
-		<footer class="footer">
-			<div>
-				<a class="hearchco-text-primary hover:underline" href="https://github.com/hearchco"
-					><b>Source code</b></a
-				>
-			</div>
-		</footer>
 	</body>
 </html>
diff --git a/src/lib/components/Error.svelte b/src/lib/components/Error.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import logo from '$lib/assets/logo.svg';
-	export let statusCode = '';
-	export let message = '';
+	export let statusCode: string;
+	export let message: string;
+	export let error: any = undefined;
+	if (error) {
+		console.log(error);
+	}
 </script>
 
 <!-- this is hard fixed top space -->

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -0,0 +1,9 @@
+<footer
+	class="custom-bg-headfoot dark:custom-bg-headfoot mt-auto flex h-20 w-full place-content-center items-center border border-gray-100 dark:border-0"
+>
+	<div>
+		<a class="hearchco-text-primary hover:underline" href="https://github.com/hearchco"
+			><b>Source code</b></a
+		>
+	</div>
+</footer>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import logo from '$lib/assets/logo.svg';
+	import Searchbox from '$lib/components/Searchbox.svelte';
+	export let query: string;
+</script>
+
+<header
+	class="custom-bg-headfoot dark:custom-bg-headfoot flex h-36 items-center border border-gray-100 dark:border-0"
+>
+	<div class="mx-4 w-full min-w-fit">
+		<div class="md:mx-auto flex max-w-screen-md items-center">
+			<div class="grid">
+				<a class="col-start-1 row-start-1" draggable="false" href="/">
+					<img
+						class="col-start-1 row-start-1 h-16 w-16 mr-6 md:mr-8 pointer-events-none"
+						src={logo}
+						alt="logo"
+					/>
+				</a>
+			</div>
+			<Searchbox bind:query />
+			<div class="w-0 md:w-16 md:ml-8" />
+		</div>
+	</div>
+</header>
diff --git a/src/lib/components/Result.svelte b/src/lib/components/Result.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Result } from './ResultType';
+	export let result: Result;
+</script>
+
+<article id="result-{result.Rank}">
+	<a id="link-{result.Rank}" href={result.URL} class="dark:text-white" rel="noreferrer"
+		>{result.URL}</a
+	>
+	<h1 id="title-{result.Rank}" class="hearchco-text-primary text-xl hover:underline">
+		<a href={result.URL} rel="noreferrer">{result.Title}</a>
+	</h1>
+	<p
+		id="description-{result.Rank}"
+		class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200"
+	>
+		{result.Description}
+	</p>
+	<div id="engines-{result.Rank}" class="my-2 text-right text-xs text-gray-800 dark:text-gray-400">
+		{#each result.EngineRanks as engineRank (engineRank.SearchEngine)}
+			<span class="mx-0.5">{engineRank.SearchEngine}</span>
+		{/each}
+	</div>
+</article>
diff --git a/src/routes/search/types.ts → src/lib/components/ResultType.ts b/src/routes/search/types.ts → src/lib/components/ResultType.ts
@@ -13,5 +13,4 @@ export type Result = {
 	Description: string;
 	EngineRanks: EngineRank[];
 	TimesReturned: number;
-	Response: any;
 };
diff --git a/src/lib/components/Searchbox.svelte b/src/lib/components/Searchbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let query = '';
+	export let query: string;
 </script>
 
 <form

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script>
 	import '../app.css';
+	import Footer from '$lib/components/Footer.svelte';
 </script>
 
 <slot />
+<Footer />
diff --git a/src/routes/healthz/api/+server.ts b/src/routes/healthz/api/+server.ts
@@ -1,9 +1,9 @@
-import { env } from '$env/dynamic/public';
+import { env } from '$env/dynamic/private';
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET: RequestHandler = async ({ fetch }) => {
-	const apiUrl = `${env.PUBLIC_API_URL_SSR}/healthz`;
+	const apiUrl = `${env.API_URL}/healthz`;
 	const response = await fetch(apiUrl);
 	if (response.status !== 200) {
 		throw error(response.status, 'API is not healthy');

diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts
@@ -1,7 +1,7 @@
-import { env } from '$env/dynamic/public';
+import { env } from '$env/dynamic/private';
 
 import type { PageServerLoad } from './$types';
-import type { Result } from './types';
+import type { Result } from '$lib/components/ResultType';
 
 async function fetchResultsJSON(
 	fetch: (input: URL | RequestInfo, init?: RequestInit | undefined) => Promise<Response>,
@@ -35,7 +35,7 @@ export const load: PageServerLoad = async ({ fetch, setHeaders, url }) => {
 		};
 	}
 
-	const apiUri = env.PUBLIC_API_URL_SSR;
+	const apiUri = env.API_URL;
 
 	const apiUrl = `${apiUri}/search?${url.searchParams}`;
 	const results = fetchResultsJSON(fetch, setHeaders, apiUrl);

diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import logo from '$lib/assets/logo.svg';
-	import Searchbox from '$lib/components/Searchbox.svelte';
+	import Header from '$lib/components/Header.svelte';
 	import Load from '$lib/components/Load.svelte';
+	import Result from '$lib/components/Result.svelte';
 	import Error from '$lib/components/Error.svelte';
 
 	import type { PageData } from './$types';
@@ -10,23 +10,7 @@
 
 <svelte:head><title>Search | Hearchco</title></svelte:head>
 
-<!-- Header section -->
-<header
-	class="custom-bg-headfoot dark:custom-bg-headfoot flex h-36 items-center border border-gray-100 dark:border-0"
->
-	<div class="mx-4 w-full min-w-fit">
-		<div class="md:mx-auto flex max-w-screen-md items-center">
-			<div class="grid">
-				<img class="col-start-1 row-start-1 h-16 w-16 mr-6 md:mr-8 pointer-events-none" src={logo} alt="logo" />
-				<a class="col-start-1 row-start-1" draggable="false" href="/"> 
-				</a>
-			</div>
-
-			<Searchbox bind:query={data.query} />
-			<div class="w-0 md:w-16 md:ml-8" />
-		</div>
-	</div>
-</header>
+<Header query={data.query} />
 
 {#await data.streamed.results}
 	<!-- todo: will change animation if not up to standard -->
@@ -35,27 +19,11 @@
 	<div class="sm:mx-auto mb-4 max-w-screen-sm">
 		<div id="result-list" class="mx-2 my-4 max-w-fit overflow-clip">
 			{#each results as result (result.URL)}
-				<article id="result-{result.Rank}">
-					<a id="link" href={result.URL} class="dark:text-white" rel="noreferrer">{result.URL}</a>
-					<h1
-						id="title"
-						class="hearchco-text-primary text-xl hover:underline"
-					>
-						<a href={result.URL} rel="noreferrer">{result.Title}</a>
-					</h1>
-					<p id="description" class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200">
-						{result.Description}
-					</p>
-					<div id="engines" class="my-2 text-right text-xs text-gray-800 dark:text-gray-400">
-						{#each result.EngineRanks as engineRank (engineRank.SearchEngine)}
-							<span class="mx-0.5">{engineRank.SearchEngine}</span>
-						{/each}
-					</div>
-				</article>
+				<Result {result} />
 				<hr class="my-2 border border-gray-200 dark:border-gray-600" />
 			{/each}
 		</div>
 	</div>
 {:catch error}
-	<Error statusCode={'500'} message={'Hearchco API failed.'} />
-{/await}
+	<Error statusCode={'500'} message={'Hearchco API failed.'} {error} />
+{/await}