[init] poc frontend for searxng

.env.example_searxng

@@ -0,0 +1,14 @@
+PUBLIC_UI_VERSION=dev
+
+# hearchco webui
+PUBLIC_URI=https://hearchco.pi.local
+
+# searxNG
+PUBLIC_SEARXNG=true
+API_URI=https://search.pi.local
+# allow self-signed https certificates (to searxng api)
+NODE_TLS_REJECT_UNAUTHORIZED=0
+
+# PUBLIC_API_URI is the webui which your devices should reach
+# PUBLIC_API_URI must be allowed in cors (http headers) searxNG settings.yml
+PUBLIC_API_URI=https://hearchco.pi.local 

.tool-versions

@@ -0,0 +1,3 @@
+#nodejs 21.5.0
+nodejs 18.19.0
+

Makefile

@@ -1,30 +1,31 @@
 install:
-	pnpm install --frozen-lockfile
+	yarn install --frozen-lockfile
+
 	sed -i -E 's|npm:@sveltejs/kit@[^/"]+|@sveltejs/kit|g' ./node_modules/@hearchco/sveltekit-adapter-aws/handler/index.js
 
 update:
-	pnpm update
+	yarn update
 
 dev:
-	pnpm run dev
+	yarn run dev -- --host 0.0.0.0 --port 5173
 
 compile:
-	pnpm run build
+	yarn run build
 
 preview:
-	pnpm run preview
+	yarn run preview -- --host 0.0.0.0
 
 check:
-	pnpm run check
+	yarn run check
 
 test:
-	pnpm run test:unit
+	yarn run test:unit
 
 lint:
-	pnpm run lint
+	yarn run lint
 
 format:
-	pnpm run format
+	yarn run format
 
 adapter-aws:
 	cp svelte.config.aws.js svelte.config.js
@@ -33,4 +34,4 @@ adapter-node:
 	cp svelte.config.node.js svelte.config.js
 
 adapter-auto:
-	cp svelte.config.auto.js svelte.config.js
+	cp svelte.config.auto.js svelte.config.js

README.md

@@ -1 +1,35 @@
-# Hearchco frontend repository built using SvelteKit & TailwindCSS
+## SearxNG frontend built using SvelteKit & TailwindCSS
+Adopted from [Hearchco/frontend](https://github.com/hearchco/frontend)
+
+## FAQ
+POC POC POC
+
+
+## Install
+```
+cd /opt
+git clone https://github.com/allendema/searxng-svelte.git
+cd searxng-svelte
+make install
+```
+
+## Setup
+
+## Edit `.env` file with your domain.
+## Add HTTP Headers for your frontend domain to searxNG settings.yml and restart it.
+In 'server' -> 'default\_http\_headers' section:
+```yaml
+        Access-Control-Allow-Origin: "https://*.pi.local"
+        Access-Control-Allow-Methods: "GET, POST"
+        Access-Control-Allow-Headers: "Content-Type, Authorization"
+```
+
+`make dev`
+
+then visit your domain/webui to search!
+
+## TODO
+  - fix image previews
+  - copy search url
+  - systemd service
+  - use [bunJS](https://bun.sh/) instead of yarn/pnpm.

src/lib/components/results/general/single.svelte

@@ -1,6 +1,9 @@
 <script>
 	import Logo from '$lib/assets/logo.svg';
 	import { proxyFaviconLink } from '$lib/functions/api/proxyimage';
+	import { env as envPubSearxngGeneral } from '$env/dynamic/public';
+
+	const isSearxng = envPubSearxngGeneral.PUBLIC_SEARXNG === 'true';
 
 	/**
 	 * @typedef {object} Props
@@ -10,6 +13,20 @@
 	/** @type {Props} */
 	let { result } = $props();
 
+	// searxng backend conversions
+	if (isSearxng) {
+		// does not exist
+		result.rank = 1;
+
+		// 'renaming'
+		result.description = result.content;
+
+		// ensurance
+		if (result.description.length === 0) {
+			result.description = 'no description';
+		}
+	}
+
 	const favicon =
 		result.favicon_hash && result.favicon_hash != ''
 			? proxyFaviconLink(result.url, result.favicon_hash, result.favicon_hash_timestamp)
@@ -57,6 +74,7 @@
 			{result.title}
 		</h1>
 	</a>
+
 	{#if shortDesc.length < result.description.length}
 		<div class="flex place-content-end">
 			<button onclick={toggleDesc}>
@@ -82,12 +100,21 @@
 	>
 		{currentDesc}
 	</p>
-	<div
-		id="engines-{result.rank}"
-		class="pb-2 text-right text-xs text-neutral-800 dark:text-neutral-400"
-	>
-		{#each result.engine_ranks as er (er.search_engine)}
-			<span class="mx-0.5">{er.search_engine}</span>
-		{/each}
-	</div>
+
+	{#if !isSearxng}
+		<div
+			id="engines-{result.rank}"
+			class="pb-2 text-right text-xs text-neutral-800 dark:text-neutral-400"
+		>
+			{#each result.engine_ranks as er (er.search_engine)}
+				<span class="mx-0.5">{er.search_engine}</span>
+			{/each}
+		</div>
+	{/if}
+
+	{#if isSearxng}
+		<div class="pb-2 text-right text-xs text-neutral-800 dark:text-neutral-400">
+			<span class="mx-0.5">{result.engine}</span>
+		</div>
+	{/if}
 </article>

src/lib/components/results/images/main.svelte

@@ -34,11 +34,7 @@
 			class="grid grid-flow-dense grid-cols-sm-fit sm:grid-cols-fit auto-rows-[28dvw] sm:auto-rows-[168px] gap-2"
 		>
 			{#each results as result (result.url)}
-				<div
-					class:row-span-2={(result.thumbnail.height * 0.8) / result.thumbnail.width > 1}
-					class:col-span-2={result.thumbnail.height / (result.thumbnail.width * 0.64) < 1}
-					class="flex-none"
-				>
+				<div class="flex-none">
 					<Single {result} bind:imagePreview />
 				</div>
 			{/each}

src/lib/components/results/images/single.svelte

@@ -1,5 +1,8 @@
 <script>
 	import { proxyImageLink } from '$lib/functions/api/proxyimage';
+	import { env as envPubSearxngImages } from '$env/dynamic/public';
+
+	const isSearxng = envPubSearxngImages.PUBLIC_SEARXNG === 'true';
 
 	/**
 	 * @typedef {object} Props
@@ -10,6 +13,8 @@
 	/** @type {Props} */
 	let { result, imagePreview = $bindable() } = $props();
 
+	result.rank = 1;
+
 	const loading = result.rank > 30 ? 'lazy' : 'eager';
 
 	const selected = $derived(result.url === imagePreview?.url);
@@ -22,28 +27,54 @@
 	}
 </script>
 
-<article class="size-full" id="image-{result.rank}">
-	<button
-		class:ring-4={selected}
-		class:ring-hearchco-primary={selected}
-		class:dark:ring-hearchco-secondary={selected}
-		class:hover:ring-hearchco-primary={selected}
-		class:hover:dark:ring-hearchco-secondary={selected}
-		class:hover:ring-neutral-300={!selected}
-		class:hover:dark:ring-neutral-100={!selected}
-		class="size-full rounded-lg shadow-sm dark:shadow-none overflow-hidden hover:ring-4 hover:scale-110 relative z-0 hover:z-10 transform delay-75 duration-300 ease-in-out"
-		onclick={openImage}
-	>
-		<img
-			id="img-{result.rank}"
-			class="size-full object-cover object-center"
-			src={proxyImageLink(
-				result.thumbnail_url,
-				result.thumbnail_url_hash,
-				result.thumbnail_url_hash_timestamp
-			)}
-			alt={result.title}
-			{loading}
-		/>
-	</button>
-</article>
+{#if !isSearxng}
+	<article class="size-full" id="image-{result.rank}">
+		<button
+			class:ring-4={selected}
+			class:ring-hearchco-primary={selected}
+			class:dark:ring-hearchco-secondary={selected}
+			class:hover:ring-hearchco-primary={selected}
+			class:hover:dark:ring-hearchco-secondary={selected}
+			class:hover:ring-neutral-300={!selected}
+			class:hover:dark:ring-neutral-100={!selected}
+			class="size-full rounded-lg shadow-sm dark:shadow-none overflow-hidden hover:ring-4 hover:scale-110 relative z-0 hover:z-10 transform delay-75 duration-300 ease-in-out"
+			onclick={openImage}
+		>
+			<img
+				id="img-{result.rank}"
+				class="size-full object-cover object-center"
+				src={proxyImageLink(
+					result.thumbnail_url,
+					result.thumbnail_url_hash,
+					result.thumbnail_url_hash_timestamp
+				)}
+				alt={result.title}
+				{loading}
+			/>
+		</button>
+	</article>
+{/if}
+
+{#if isSearxng}
+	<article class="size-full" id="image-{result.rank}">
+		<button
+			class:ring-4={selected}
+			class:ring-hearchco-primary={selected}
+			class:dark:ring-hearchco-secondary={selected}
+			class:hover:ring-hearchco-primary={selected}
+			class:hover:dark:ring-hearchco-secondary={selected}
+			class:hover:ring-neutral-300={!selected}
+			class:hover:dark:ring-neutral-100={!selected}
+			class="size-full rounded-lg shadow-sm dark:shadow-none overflow-hidden hover:ring-4 hover:scale-110 relative z-0 hover:z-10 transform delay-75 duration-300 ease-in-out"
+			onclick={openImage}
+		>
+			<img
+				id="img-{result.rank}"
+				class="size-full object-cover object-center"
+				src={result.img_src}
+				alt={result.title}
+				{loading}
+			/>
+		</button>
+	</article>
+{/if}

src/lib/components/themetoggle/main.svelte

@@ -1,13 +1,17 @@
 <script>
 	import { onMount } from 'svelte';
+	import { env as envPubSearxngTheme } from '$env/dynamic/public';
+
+	const isSearxng = envPubSearxngTheme.PUBLIC_SEARXNG === 'true';
 
 	/**
 	 * @typedef {object} Props
 	 * @property {boolean} [browser]
 	 */
 
 	/** @type {Props} */
-	let { browser = false } = $props();
+	//let { browser = false } = $props();
+	let { browser = false, hydrate = false } = $props();
 
 	/** @type {'light' | 'dark' | 'system'} */
 	let selected = $state('system');
@@ -77,7 +81,10 @@
 		const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 		const theme = selected === 'system' ? system : selected;
 		if (theme === 'dark') document.documentElement.classList.add('dark');
-		else document.documentElement.classList.add('light');
+		/*
+	 TODO: Theme can be changed only at the start page.
+	The ! version was orignaly used.
+	*/
 	</script>
 </svelte:head>
 

src/lib/functions/api/fetchversion.js

@@ -5,7 +5,7 @@ import { createApiUrl } from '$lib/functions/api/createurl.js';
  * @param {typeof fetch} [fetcher]
  * @returns {Promise<string>}
  */
-export async function fetchVersion(fetcher = fetch) {
+export async function fetchVersionUpstream(fetcher = fetch) {
 	/** @type {URL} */
 	let apiUrl;
 	try {
@@ -35,3 +35,9 @@ export async function fetchVersion(fetcher = fetch) {
 
 	return version;
 }
+
+export async function fetchVersion(fetcher = fetch) {
+	const version = 'searxng';
+
+	return version;
+}