Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Sveltekit conventions, moving stuff to components, etc. #68

Merged
merged 4 commits into from
Dec 10, 2023
Merged

fix: Sveltekit conventions, moving stuff to components, etc. #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bb9ab19
fix: sveltekit conventions, moving stuff to components, etc.
aleksasiriski Dec 10, 2023
11f6b9d
fix: removed ugrade pkg added by accident
aleksasiriski Dec 10, 2023
1d6c750
fix: added correct ids inside results
aleksasiriski Dec 10, 2023
b3df4b5
Merge branch 'main' into as/fix/sveltekit-conventions
aleksasiriski Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
4 changes: 1 addition & 3 deletions fly.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "frontend",
"version": "0.3.3",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./build/index.js",
Expand All @@ -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",
Expand Down
16 changes: 0 additions & 16 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 26 additions & 29 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
13 changes: 5 additions & 8 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
8 changes: 6 additions & 2 deletions src/lib/components/Error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
9 changes: 9 additions & 0 deletions src/lib/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 25 additions & 0 deletions src/lib/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions src/lib/components/Result.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 0 additions & 1 deletion src/routes/search/types.ts → src/lib/components/ResultType.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,4 @@ export type Result = {
Description: string;
EngineRanks: EngineRank[];
TimesReturned: number;
Response: any;
};
2 changes: 1 addition & 1 deletion src/lib/components/Searchbox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
export let query = '';
export let query: string;
</script>

<form
Expand Down
2 changes: 2 additions & 0 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script>
import '../app.css';
import Footer from '$lib/components/Footer.svelte';
</script>

<slot />
<Footer />
4 changes: 2 additions & 2 deletions src/routes/healthz/api/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
6 changes: 3 additions & 3 deletions src/routes/search/+page.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>,
Expand Down Expand Up @@ -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);
Expand Down
44 changes: 6 additions & 38 deletions src/routes/search/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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: lazy loading animation -->
Expand All @@ -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}
Loading
Loading