feat: add lynx

kurozenzen · Feb 16, 2024 · 503e231 · 503e231
1 parent 636a1e5
commit 503e231
Show file tree

Hide file tree

Showing 14 changed files with 694 additions and 57 deletions.
diff --git a/src/lib/components/kurosearch/button-play/PlayButton.svelte b/src/lib/components/kurosearch/button-play/PlayButton.svelte
@@ -1,35 +1,37 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 
+	const LOAD_SRC = `${base}/assets/load.svg`;
+	const PLAY_SRC = `${base}/assets/play.svg`;
+	const PAUSE_SRC = `${base}/assets/pause.svg`;
+
 	export let playing: boolean;
 	export let loading: boolean;
 </script>
 
 <button type="button" on:click class={$$props.class}>
 	{#if loading}
-		<img src="{base}/assets/load.svg" alt="Loading GIF" width="16" height="32" />
+		<img src={LOAD_SRC} alt="Loading GIF" width="16" height="32" />
 	{:else if playing}
-		<img src="{base}/assets/pause.svg" alt="Stop GIF" width="16" height="32" />
+		<img src={PAUSE_SRC} alt="Stop GIF" width="16" height="32" />
 	{:else}
-		<img
-			src="{base}/assets/play.svg"
-			alt="Start GIF"
-			width="16"
-			height="32"
-			style="margin-left: 4px;"
-		/>
+		<img src={PLAY_SRC} alt="Start GIF" width="16" height="32" style="margin-left: 4px;" />
 	{/if}
 </button>
 
 <style>
 	button {
-		color: #000;
-		background-color: #fff;
-		border-radius: 24px;
-		width: 48px;
-		height: 48px;
+		--size: 48px;
+
+		border-radius: var(--size);
+		width: var(--size);
+		height: var(--size);
 		padding: 6px;
 		padding-top: 8px;
+
+		color: #000;
+		background-color: #fff;
+
 		user-select: none;
 	}
 </style>
diff --git a/src/lib/components/kurosearch/button-share/ShareButton.svelte b/src/lib/components/kurosearch/button-share/ShareButton.svelte
@@ -5,8 +5,8 @@
 	import filter from '$lib/store/filter-store';
 	import TagButton from '../button-tag/TagButton.svelte';
 
-	let share = async () => {
-		let shareData = {
+	const share = async () => {
+		const shareData = {
 			title: 'kurosearch',
 			text: 'Saved Search Configuration',
 			url: getShareUrl($activeTags, $sort, $filter).toString()

diff --git a/src/lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte b/src/lib/components/kurosearch/dialog-sort-filter/SortFilterDialog.svelte
@@ -73,16 +73,6 @@
 		gap: var(--small-gap);
 	}
 
-	input[type='number'] {
-		height: var(--line-height);
-		box-sizing: border-box;
-		background-color: transparent;
-		border-radius: var(--border-radius);
-		padding-inline: var(--small-gap);
-		border: 2px solid var(--background-1);
-		width: 90px;
-	}
-
 	b {
 		display: block;
 		padding-bottom: var(--small-gap);

diff --git a/src/lib/components/kurosearch/kurosearch-title/KurosearchTitle.svelte b/src/lib/components/kurosearch/kurosearch-title/KurosearchTitle.svelte
@@ -42,16 +42,16 @@
 
 	.pride {
 		background: linear-gradient(
-			#60d0fa 0%,
-			#60d0fa 20%,
-			#f5aab9 20%,
-			#f5aab9 40%,
-			#fff 40%,
-			#fff 60%,
-			#f5aab9 60%,
-			#f5aab9 80%,
-			#60d0fa 80%,
-			#60d0fa 100%
+			#60d0fa 30%,
+			#60d0fa 42%,
+			#f5aab9 42%,
+			#f5aab9 54%,
+			#fff 54%,
+			#fff 66%,
+			#f5aab9 66%,
+			#f5aab9 78%,
+			#60d0fa 78%,
+			#60d0fa 90%
 		);
 		background-size: 100% 80%;
 		background-position: bottom;

diff --git a/src/lib/components/kurosearch/results/ZeroResults.svelte b/src/lib/components/kurosearch/results/ZeroResults.svelte
@@ -4,25 +4,45 @@
 	import sort from '$lib/store/sort-store';
 	import filter from '$lib/store/filter-store';
 	import { createEventDispatcher } from 'svelte';
+	import activeTagsStore from '$lib/store/active-tags-store';
+	import activeSupertagsStore from '$lib/store/active-supertags-store';
 
 	const dispatch = createEventDispatcher();
 </script>
 
 <img src="{base}/assets/shironeko-confused.png" alt="Nothing here..." />
 <p>We couldn't find any posts matching your tags. Sorry...</p>
-<TextButton
-	title="In case your filter caused all posts to vanish. Reset it."
-	on:click={() => {
-		sort.reset();
-		filter.reset();
-		dispatch('sortfilterupdate');
-	}}>Reset Filter</TextButton
->
+<div>
+	<TextButton
+		title="In case your filter caused all posts to vanish. Reset it."
+		on:click={() => {
+			sort.reset();
+			filter.reset();
+			dispatch('sortfilterupdate');
+		}}
+	>
+		Reset Filter
+	</TextButton>
+	<TextButton
+		title="Tag combinations that are too specific will not yield results."
+		on:click={() => {
+			activeTagsStore.reset();
+			activeSupertagsStore.reset();
+		}}
+	>
+		Reset Tags
+	</TextButton>
+</div>
 
 <style>
 	img {
 		display: block;
 		aspect-ratio: 272 / 238;
 		width: 272px;
 	}
+
+	div {
+		display: flex;
+		gap: var(--grid-gap);
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -58,17 +58,23 @@
 </main>
 
 <footer>
-	<CodiconTextLink
-		title="Source Code"
-		href="https://github.com/kurozenzen/kurosearch"
-		icon="codicon codicon-github"
-		label="Github"
-		target="_blank"
-	/>
+	<section>
+		<CodiconTextLink
+			title="Source Code"
+			href="https://github.com/kurozenzen/kurosearch"
+			icon="codicon codicon-github"
+			label="Github"
+			target="_blank"
+		/>
 
-	<span class="copyright">© 2023 kurozenzen</span>
+		<span class="copyright">© 2023 kurozenzen</span>
 
-	<CodiconTextLink title="About" href="{base}/about" icon="codicon codicon-info" label="About" />
+		<CodiconTextLink title="About" href="{base}/about" icon="codicon codicon-info" label="About" />
+	</section>
+	<p>
+		I do not own the rights to Helheim Lynx and this site is in no way endorsed by, affiliated with,
+		or in any other way connected to them.
+	</p>
 </footer>
 
 <style>
@@ -82,7 +88,7 @@
 	}
 
 	nav,
-	footer {
+	footer section {
 		display: flex;
 		gap: 8px;
 	}
@@ -102,7 +108,7 @@
 		padding: var(--grid-gap);
 	}
 
-	footer {
+	footer section {
 		color: var(--text-muted);
 		justify-content: space-between;
 	}
@@ -120,4 +126,16 @@
 		width: 100%;
 		max-width: calc(var(--body-width) + 2 * var(--grid-gap));
 	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		gap: var(--small-gap);
+	}
+
+	p {
+		font-size: var(--text-size-small);
+		text-align: center;
+		color: var(--text-muted);
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import LynxMain from './LynxMain.svelte';
+
 	import { browser } from '$app/environment';
 	import CreateSupertagDialog from '$lib/components/kurosearch/dialog-create-supertag/CreateSupertagDialog.svelte';
 	import SearchError from '$lib/components/kurosearch/error-search/SearchError.svelte';
@@ -29,6 +31,7 @@
 	import cookiesAccepted from '$lib/store/cookies-accepted-store';
 	import CookieMessage from '$lib/components/kurosearch/cookie-message/CookieMessage.svelte';
 	import { addHistory } from '$lib/logic/use/onpopstate';
+	import { base } from '$app/paths';
 
 	console.log(
 		'%ckurosearch\n%cHi, if you are reading this because you are debugging or reverse-engineering, feel free to send me a DM on Discord :)',
@@ -162,6 +165,8 @@
 	/>
 </svelte:head>
 
+<LynxMain />
+
 <section id="search">
 	<KurosearchTitle />
 	<Searchbar
@@ -260,15 +265,14 @@
 	}
 
 	#search {
-		margin-block-start: 20vh;
 		padding-inline: var(--small-gap);
 	}
 
 	section {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--small-gap);
+		gap: var(--grid-gap);
 	}
 
 	:global(#btn-search) {

diff --git a/src/routes/LynxMain.svelte b/src/routes/LynxMain.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+</script>
+
+<div>
+	<a href="https://www.twitch.tv/helheim_lynx">
+		<img id="happy" src="{base}/assets/lynxy-chibi.webp" alt="Helheim Lynx" />
+	</a>
+</div>
+
+<style>
+	div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		contain: strict;
+		height: 200px;
+	}
+
+	a {
+		display: contents;
+	}
+
+	img {
+		object-fit: contain;
+		max-height: 100%;
+	}
+</style>
diff --git a/src/routes/troubleshoot/+page.svelte b/src/routes/troubleshoot/+page.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { getComments, getPage, getTagSuggestions } from '$lib/logic/api-client/ApiClient';
+
+	const networkChecks = [
+		{
+			title: 'Tags',
+			promise: getTagSuggestions('big')
+		},
+		{
+			title: 'Posts',
+			promise: getPage(0, '')
+		},
+		{
+			title: 'Comments',
+			promise: getComments(0)
+		}
+	];
+</script>
+
+<h1>Troubleshooting</h1>
+
+<h3>Network Checks</h3>
+<ol>
+	{#each networkChecks as check}
+		<li>
+			{#await check.promise}
+				<span>⏳</span>
+			{:then _}
+				<span>✅</span>
+			{:catch}
+				<span>❌</span>
+			{/await}
+			<span>{check.title}</span>
+		</li>
+	{/each}
+</ol>