fix: better typescript, api error page and cache control

devbox.json

@@ -0,0 +1,16 @@
+{
+  "packages": [
+    "nodejs@latest",
+    "nodePackages.pnpm@latest"
+  ],
+  "shell": {
+    "init_hook": [
+      "echo 'Welcome to devbox!' > /dev/null"
+    ],
+    "scripts": {
+      "test": [
+        "echo \"Error: no test specified\" && exit 1"
+      ]
+    }
+  }
+}

devbox.lock

@@ -0,0 +1,39 @@
+{
+  "lockfile_version": "1",
+  "packages": {
+    "nodePackages.pnpm@latest": {
+      "last_modified": "2023-11-02T13:29:18Z",
+      "resolved": "github:NixOS/nixpkgs/b644d97bda6dae837d577e28383c10aa51e5e2d2#nodePackages.pnpm",
+      "source": "devbox-search",
+      "version": "8.10.2",
+      "systems": {
+        "aarch64-linux": {
+          "store_path": "/nix/store/n7ml2bssqq1rdlzbz8bgp4bgc2a8z2wd-pnpm-8.10.2"
+        },
+        "x86_64-linux": {
+          "store_path": "/nix/store/fxgnndi9lyb8py91mg0hdq9wy0giqbfk-pnpm-8.10.2"
+        }
+      }
+    },
+    "nodejs@latest": {
+      "last_modified": "2023-10-25T20:49:13Z",
+      "resolved": "github:NixOS/nixpkgs/75a52265bda7fd25e06e3a67dee3f0354e73243c#nodejs_21",
+      "source": "devbox-search",
+      "version": "21.1.0",
+      "systems": {
+        "aarch64-darwin": {
+          "store_path": "/nix/store/b8yb6gs0dhi0zlxcg5dkp0d2xrn80nhh-nodejs-21.1.0"
+        },
+        "aarch64-linux": {
+          "store_path": "/nix/store/c20ngwkh3xzpzvmxkffccaxygyiqw3n2-nodejs-21.1.0"
+        },
+        "x86_64-darwin": {
+          "store_path": "/nix/store/6wyanl2ba86pc2jb6nvg212xpq7j7kij-nodejs-21.1.0"
+        },
+        "x86_64-linux": {
+          "store_path": "/nix/store/wl7yqxb1mhghpp6b8icykcm5wysfqarz-nodejs-21.1.0"
+        }
+      }
+    }
+  }
+}

src/routes/search/+error.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import logo from '$lib/assets/brzaguza.svg';
+</script>
+
+<svelte:head><title>Not Found | BrzaGuza</title></svelte:head>
+
+<!-- this is hard fixed top space -->
+<div class="mx-auto mb-4 mt-20 max-w-screen-sm">
+	<div class="text-center w-full">
+		<h1
+			class="mb-4 text-7xl lg:text-8xl xl:text-9xl font-black capitalize tracking-tight dark:text-white"
+		>
+			500
+		</h1>
+
+		<p
+			class="mb-4 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white"
+		>
+			Fastasst API failed.
+		</p>
+
+		<a href="/" class="mx-auto w-fit flex items-center">
+			<img class="h-auto w-20 rotate-180" src={logo} alt="" />
+			<p class="hover:brzaguza-text-pink italic dark:text-white">Go back to Assland</p>
+			<img class="h-auto w-20" src={logo} alt="" />
+		</a>
+	</div>
+</div>

src/routes/search/+page.svelte

@@ -24,7 +24,7 @@
 
 <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 data.results as result}
+		{#each data.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="brzaguza-text-blue hover:brzaguza-text-pink text-xl hover:underline">

src/routes/search/+page.ts

@@ -1,13 +1,16 @@
 import { env } from '$env/dynamic/public';
 import { browser } from '$app/environment';
+
 import type { PageLoad } from './$types';
+import type { Result } from './types';
 
-export const load: PageLoad = async ({ fetch, url }) => {
+export const load: PageLoad = async ({ fetch, url, setHeaders }) => {
 	const q = url.searchParams.get('q');
 	if (q === null || q === '') {
+		const results: Result[] = [];
 		return {
 			query: '',
-			results: []
+			results: results
 		};
 	}
 
@@ -17,21 +20,22 @@ export const load: PageLoad = async ({ fetch, url }) => {
 	} else {
 		apiUri = env.PUBLIC_API_URL_CSR;
 	}
+
 	const apiUrl = `${apiUri}/search?${url.searchParams}`;
+	const response = await fetch(apiUrl);
+	const results: Result[] = await response.json();
 
-	// it's important to use the included fetch so that the fetch is not run again in the browser
-	const resultsP = new Promise((resolve, reject) => {
-		fetch(apiUrl)
-			.then((res) => {
-				resolve(res.json());
-			})
-			.catch((err) => {
-				reject(err);
-			});
-	});
+	const age = response.headers.get('age');
+	const cacheControl = response.headers.get('cache-control');
+	if (age != null && cacheControl != null) {
+		setHeaders({
+			age: age,
+			'cache-control': cacheControl
+		});
+	}
 
 	return {
 		query: q,
-		results: browser ? resultsP : await resultsP
+		results: results
 	};
 };

src/routes/search/types.ts

@@ -0,0 +1,17 @@
+type EngineRank = {
+	SearchEngine: string;
+	Rank: number;
+	Page: number;
+	OnPageRank: number;
+};
+
+export type Result = {
+	URL: string;
+	Rank: number;
+	Score: number;
+	Title: string;
+	Description: string;
+	EngineRanks: EngineRank[];
+	TimesReturned: number;
+	Response: any;
+};