ship it 🚀

src/lib/HeaderBar.svelte

@@ -7,8 +7,9 @@
 	import { IconCheck, IconColorSwatch, IconSearch } from '@tabler/icons-svelte';
 	import consts from './consts';
 	import { contextMenu, type ContextMenuItem } from './overlays/contextMenu';
-	import { currentSearchStore, userPreferencesStore } from './stores';
+	import { currentScrollPosition, currentSearchStore, userPreferencesStore } from './stores';
 	import { parseInputString } from './utils';
+	import { fly } from 'svelte/transition';
 
 	function getQuery(): string {
 		return $page.route.id == '/s' ? $page.url.searchParams.get('q') ?? '' : '';
@@ -107,36 +108,39 @@
 	gridColumns="lg:grid-cols-3 grid-cols-[auto_1fr_auto]"
 	slotDefault="place-self-center"
 	slotTrail="place-self-end"
-	shadow="shadow-lg"
-	class="vt-none"
+	class="vt-none transition-colors"
+	background={$currentScrollPosition.y > 16 ? 'bg-surface-800/75' : 'bg-transparent'}
 >
 	<svelte:fragment slot="lead">
 		<a class="flex items-center gap-2" href={base}>
-			<img src={consts.LOGO} alt="logo" class="aspect-square h-8 rounded-token" />
+			<img src={consts.LOGO} alt="logo" class="aspect-square w-8 min-w-8 rounded-token" />
 			<span class="hidden lg:inline">KJSPKG Lookup</span>
 		</a>
 	</svelte:fragment>
 
-	<div
-		class="input-group input-group-divider w-full grid-cols-[1fr] lg:w-fit lg:grid-cols-[auto_1fr]"
-	>
-		<div class="hidden text-surface-400 lg:inline">
-			<IconSearch class="hidden lg:block" />
+	{#if !$page.route.id || !consts.NO_SEARCH.includes($page.route.id)}
+		<div
+			class="input-group input-group-divider w-full grid-cols-[1fr] lg:w-fit lg:grid-cols-[auto_1fr]"
+			transition:fly={{ y: -40 }}
+		>
+			<div class="hidden text-surface-400 lg:inline">
+				<IconSearch class="hidden lg:block" />
+			</div>
+
+			<input
+				type="search"
+				placeholder="Search for packages"
+				bind:this={inputElement}
+				bind:value={searched}
+				on:input={() => ($currentSearchStore = searched)}
+				on:change={() => {
+					const query = encodeURIComponent(searched || '');
+					// if (query) $userPreferencesStore.lastSearched = query;
+					goto(base + `/s?q=${query}`);
+				}}
+			/>
 		</div>
-
-		<input
-			type="search"
-			placeholder="Search for packages"
-			bind:this={inputElement}
-			bind:value={searched}
-			on:input={() => ($currentSearchStore = searched)}
-			on:change={() => {
-				const query = encodeURIComponent(searched || '');
-				// if (query) $userPreferencesStore.lastSearched = query;
-				goto(base + `/s?q=${query}`);
-			}}
-		/>
-	</div>
+	{/if}
 
 	<svelte:fragment slot="trail">
 		<button

src/lib/consts.ts

@@ -3,6 +3,7 @@ export default {
 	PACKAGES: 'https://raw.githubusercontent.com/Modern-Modpacks/kjspkg/main/pkgs.json',
 	AVATARS: 'https://avatars.githubusercontent.com/',
 	NO_SIDEBAR: ['/'],
+	NO_SEARCH: ['/stats'],
 	LOCATOR_REGEX: '([^/@$]*)/([^/@$]*)(@[^/@$]*)?(\\$[^@$]*)?',
 	DOCS_URL_REGEX: 'github.com/([^/]+/[^/]+)/blob/(.*)',
 	KJSPKG_README: 'https://github.com/Modern-Modpacks/kjspkg#kjspkg',

src/lib/index.ts

@@ -7,7 +7,6 @@ import Sidebar from './project/Sidebar.svelte';
 
 import HeaderBar from './HeaderBar.svelte';
 import IconBlank from './IconBlank.svelte';
-import CenterLoader from './CenterLoader.svelte';
 
 export {
 	Author,
@@ -17,6 +16,5 @@ export {
 	PackagePreview,
 	Sidebar,
 	HeaderBar,
-	IconBlank,
-	CenterLoader
+	IconBlank
 };

src/lib/project/PackageList.svelte

@@ -13,6 +13,7 @@
 	export let p: [string, string][] = [];
 	/** name and author are sorted alphabetically. */
 	export let sortBy: '' | 'name' | 'author' | 'downloads' | 'views' = '';
+	export let maxCount = Infinity;
 	export let showAvatar = true;
 	export let showDetails = true;
 	export let showName = true;
@@ -32,26 +33,26 @@
 				return alphabetic;
 			case 'author':
 				return [...alphabetic].sort((_a, _b) => {
-					const a = (_a[1].match(consts.LOCATOR_REGEX)!)[1];
-					const b = (_b[1].match(consts.LOCATOR_REGEX)!)[1];
-					
+					const a = _a[1].match(consts.LOCATOR_REGEX)![1];
+					const b = _b[1].match(consts.LOCATOR_REGEX)![1];
+
 					return a == b ? 0 : a < b ? -1 : 1;
-				})
+				});
 			case 'downloads':
 			case 'views':
 				return [...alphabetic].sort((_a, _b) => {
 					const a = $packageStatStore[sortBy as 'downloads' | 'views'][_a[0]] ?? 0;
 					const b = $packageStatStore[sortBy as 'downloads' | 'views'][_b[0]] ?? 0;
 
 					return a == b ? 0 : a < b ? 1 : -1;
-				})
+				});
 			default:
 				return [];
 		}
 	})();
 </script>
 
-{#each sortedP as [name, locator], i (name)}
+{#each [...sortedP].slice(0, maxCount) as [name, locator], i (name)}
 	{@const locatorInfo = locator.match(consts.LOCATOR_REGEX) ?? [null, null, null, null, null]}
 	{@const author = locatorInfo[1]}
 	{@const repo = locatorInfo[2]}
@@ -74,12 +75,12 @@
 			<img
 				src={consts.AVATARS + author}
 				alt="author's profile avatar"
-				class="my-auto mr-4 aspect-square rounded-token h-8"
+				class="my-auto mr-4 aspect-square h-8 rounded-token"
 				in:slide={{ axis: 'x' }}
 			/>
 		{/if}
 		<dl class="my-auto">
-			<dt class="select-text font-bold mb-1">{packageNameToReadableFormat(name)}</dt>
+			<dt class="mb-1 select-text font-bold">{packageNameToReadableFormat(name)}</dt>
 			<dd class="text-sm opacity-50">
 				{#if branch && showDetails}
 					on branch <span class="select-text">{branch.substring(1)}</span>

src/lib/project/PackagePreview.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { CenterLoader } from '$lib';
 	import consts from '$lib/consts';
 	import { packageStatStore } from '$lib/stores';
 	import { markdownInline } from '$lib/utils';
@@ -54,7 +53,16 @@
 	<dl>
 		<dt class="text-sm opacity-50">Package preview</dt>
 		{#if state == 'loading'}
-			<CenterLoader />
+			<dd
+				class="style-markdown blockquote flex flex-col gap-1 border-l-primary-500 p-4 *:pointer-events-none"
+			>
+				<div class="placeholder animate-pulse" />
+				<span class="text-sm">
+					<div class="placeholder animate-pulse" />
+					<div class="placeholder animate-pulse" />
+					<div class="placeholder animate-pulse" />
+				</span>
+			</dd>
 		{:else if state == 'ready'}
 			<dd
 				class="style-markdown blockquote flex flex-col gap-1 border-l-primary-500 p-4 *:pointer-events-none"

src/lib/project/Sidebar.svelte

@@ -3,22 +3,24 @@
 	import { slide } from 'svelte/transition';
 	import PackageList from './PackageList.svelte';
 	import consts from '../consts';
-	import { packageStatusStore } from '../stores';
+	import { currentScrollPosition, packageStatusStore } from '../stores';
 
 	$: hideConditionStatus =
 		Object.values($packageStatusStore).filter(
 			(v) => v.v && v.d.length > 0 && !v.hidePaths.includes($page.route.id!)
 		).length == 0;
 	// $: hideConditionBackStatus = $packageStatusStore.back.d.length < 2;
 
-	$: sidebarHidden =
-		consts.NO_SIDEBAR.includes($page.route.id!) || hideConditionStatus; // || hideConditionBackStatus;
+	$: sidebarHidden = consts.NO_SIDEBAR.includes($page.route.id!) || hideConditionStatus; // || hideConditionBackStatus;
 </script>
 
 {#if !sidebarHidden}
 	{@const o = $packageStatusStore}
 	<div
-		class="flex h-full w-96 flex-col gap-2 overflow-y-scroll bg-surface-700 p-2"
+		class="flex h-full w-96 flex-col gap-2 overflow-y-scroll border-surface-800 p-2 {$currentScrollPosition.y >
+		16
+			? 'border-r'
+			: 'border-none'}"
 		transition:slide={{ axis: 'x' }}
 	>
 		<!-- {#if o.back.v && o.back.d.length > 1 && !o.back.hidePaths.includes($page.route.id ?? '') }

src/lib/stores.ts

@@ -17,6 +17,8 @@ export const packageStatusStore = writable<{
 export const currentAuthorStore = writable<string>('');
 export const currentSearchStore = writable<string>('');
 
+export const currentScrollPosition = writable<{ x: number; y: number }>({ x: 0, y: 0 });
+
 export const userPreferencesStore = localStorageStore<{
 	sortBy: '' | 'name' | 'author' | 'downloads' | 'views';
 	theme: string;

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import { page } from '$app/stores';
 	import { HeaderBar, Sidebar } from '$lib/index';
 	import ContextMenu from '$lib/overlays/ContextMenu.svelte';
-	import { userPreferencesStore } from '$lib/stores';
+	import { currentScrollPosition, userPreferencesStore } from '$lib/stores';
 	import { AppShell, Modal, ProgressRadial, Toast, initializeStores } from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
@@ -55,7 +55,15 @@
 	</div>
 {/if}
 
-<AppShell slotSidebarLeft="hidden xl:block" slotPageFooter="p-2 flex justify-between">
+<AppShell
+	slotSidebarLeft="hidden xl:block"
+	slotPageFooter="p-2 flex justify-between"
+	on:scroll={(e) =>
+		($currentScrollPosition = {
+			x: e.currentTarget.scrollLeft,
+			y: e.currentTarget.scrollTop
+		})}
+>
 	<svelte:fragment slot="header">
 		<HeaderBar />
 	</svelte:fragment>
@@ -64,7 +72,7 @@
 		<Sidebar />
 	</svelte:fragment>
 
-	<div class="container mx-auto max-w-screen-lg space-y-4 p-4 md:p-10 relative">
+	<div class="container relative mx-auto max-w-screen-lg space-y-4 p-4 md:p-10 min-h-full">
 		{#key data.href}
 			<slot />
 		{/key}
@@ -89,7 +97,7 @@
 			>
 		</span>
 
-		<span class="hidden text-sm opacity-50 md:inline mt-auto">
+		<span class="mt-auto hidden text-sm opacity-50 md:inline">
 			Website designed with love by <a
 				href="https://github.com/tizu69"
 				class="anchor no-underline"

src/routes/+layout.ts

@@ -6,4 +6,4 @@ export const load = async (req) => {
 	return {
 		href: req.url.href
 	};
-}
+};

src/routes/p/+page.svelte

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
-	import { CenterLoader, Dependency, ManagePackage } from '$lib';
+	import { Dependency, ManagePackage } from '$lib';
 	import consts from '$lib/consts';
 	import { currentAuthorStore, packageListStore, packageStatStore } from '$lib/stores';
 	import {
@@ -14,6 +14,7 @@
 	} from '$lib/utils';
 	import { getToastStore } from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
 
 	const toastStore = getToastStore();
 
@@ -108,7 +109,7 @@
 </svelte:head>
 
 {#if state == 'loading'}
-	<CenterLoader />
+	<div class="placeholder m-2 mx-auto w-32 animate-pulse" />
 {:else if state == 'ready' && id}
 	{@const statDownloads = $packageStatStore.downloads[id] ?? 0}
 	{@const statViews = $packageStatStore.views[id] ?? 0}
@@ -123,7 +124,10 @@
 		</a>
 	</h1>
 
-	<div class="style-markdown blockquote flex w-full select-text flex-col gap-1 overflow-x-auto p-4">
+	<div
+		class="style-markdown blockquote flex w-full select-text flex-col gap-1 overflow-x-auto p-4"
+		in:fly={{ y: 20 }}
+	>
 		<span class="select-text *:select-text">
 			{@html markdownInline(thisPackage.description)}
 		</span>
@@ -137,6 +141,7 @@
 		<a
 			class="card flex p-4 hover:variant-soft-primary"
 			href={base + `/s?q=@author:${locatorInfo[1]}`}
+			in:fly={{ y: 20 }}
 		>
 			<img
 				src={consts.AVATARS + locatorInfo[1]}
@@ -152,7 +157,7 @@
 			</dl>
 		</a>
 
-		<div class="card p-4">
+		<div class="card p-4" in:fly={{ y: 20 }}>
 			<dt class="text-sm opacity-50">Available for</dt>
 			<dd class="flex flex-wrap gap-1">
 				{#each thisPackage.modloaders as t}
@@ -172,15 +177,15 @@
 			buttonCopied="ok have fun"
 		/> -->
 
-		<div class="card hidden space-y-2 p-4 md:block">
+		<div class="card hidden space-y-2 p-4 md:block" in:fly={{ y: 20 }}>
 			<dt class="text-sm opacity-50">Manage package (click to copy)</dt>
 			<dd class="flex flex-col gap-1">
 				<ManagePackage name={id ?? 'no-name'} link={issueLink} />
 			</dd>
 		</div>
 
 		{#if thisPackage.dependencies.length > 0 || thisPackage.incompatibilities.length > 0}
-			<div class="card h-fit space-y-2 p-4">
+			<div class="card h-fit space-y-2 p-4" in:fly|global={{ y: 20 }}>
 				{#if thisPackage.dependencies.length > 0}
 					<dt class="text-sm opacity-50">Depends on</dt>
 					<dd class="flex w-full gap-1">
@@ -205,7 +210,7 @@
 		{/if}
 
 		{#if docs != ''}
-			<section class="card h-fit space-y-4 p-4 lg:col-span-2">
+			<section class="card h-fit space-y-4 p-4 lg:col-span-2" in:fly={{ y: 20 }}>
 				<dt class="text-sm opacity-50">
 					<a href={docLoc} class="underline" target="_blank">README file</a>
 				</dt>