Merge pull request #25 from containerish/adhoc-changes

Add: Pre-render and prefetch

Author: guacamole

src/apis/httpClient.ts

@@ -11,10 +11,7 @@ abstract class HttpClient {
 	 protected constructor(baseURL: string, headers?: any) {
 		this.http = axios.create({
 			baseURL,
-			headers: {
-				'Cache-Control': 'no-cache',
-				...headers
-			},
+			headers,
 			withCredentials: true,
 			httpAgent: this.getUserAgent(),
 			httpsAgent: this.getUserAgent(),

src/components/dropdown.svelte

@@ -6,19 +6,14 @@
 	import { goto } from '$app/navigation';
 	export let user: User;
 	export let show = false;
-	export let handleShowMenu: VoidFunction;
 	export let closeMenu: VoidFunction;
 
+	const auth = new Auth();
+
 	function onClickOutside() {
 		closeMenu();
 	}
 
-	const modalCloseFunc = () => {
-		showModal = false;
-	};
-
-	const auth = new Auth();
-
 	const signOut = async () => {
 		const { error } = await auth.Signout();
 		if (error) {
@@ -48,8 +43,8 @@
 				>
 					<a
 						href="#"
-						class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform
-					 hover:bg-white hover:no-underline"
+						class="flex cursor-default items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform
+					hover:no-underline"
 					>
 						<div class="mx-1">
 							<h1 class="text-lg font-normal text-brown-900">
@@ -63,8 +58,9 @@
 
 					<hr class="border-gray-400" />
 
-					<button
-						on:click={() => navigateAround('/u')}
+					<a
+						href="/u"
+						sveltekit:prefetch
 						class="flex items-center w-full border-0 m-0 p-3 text-sm text-gray-600 capitalize transition-colors duration-200
 					transform hover:bg-white hover:no-underline"
 					>
@@ -85,7 +81,7 @@
 						</svg>
 
 						<span class="mx-1">View Profile</span>
-					</button>
+					</a>
 					<hr class="border-gray-200" />
 
 					<button

src/components/repository.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-
-	import Copy from '$lib/icons/copy.svelte';
 	import Download from '$lib/icons/download.svelte';
 	import LockOpen from '$lib/icons/lock-open.svelte';
 	import Star from '$lib/icons/star.svelte';

src/components/signin.svelte

@@ -82,7 +82,6 @@
 		}
 
 		const { error, status } = await auth.Login(email, password);
-		/* const { error, status } = await auth.Login('[email protected]', 'Qwerty@123'); */
 		if (error) {
 			isLoading = false;
 			formErr = error.message;

src/lib/navbar-auth.svelte

@@ -29,14 +29,6 @@
 	const closeMenu = () => {
 		showMenu = false;
 	};
-
-	const handleShowMenu = () => {
-		showMenu = !showMenu;
-	};
-
-	const navigateAround = async (path: string) => {
-		await goto(path);
-	};
 </script>
 
 {#if sessionOk}
@@ -56,28 +48,31 @@
 
 					<div class="items-center md:flex flex-[3] justify-end sm:flex half:flex">
 						<div class="flex flex-col justify-center items-center md:flex-row half:mt-0 pl-10">
-							<button
-								on:click={() => navigateAround('/search')}
+							<a
+								sveltekit:prefetch
+								href="/search"
 								class="my-1 text-lg leading-5 font-lato font-semibold text-brown-800 transition-colors duration-200 bg-inherit
 			border-none transform hover:text-brown-800 hover:no-underline md:mx-6 md:my-0 half:mx-2"
 							>
 								Explore
-							</button>
-							<button
-								on:click={() => navigateAround('/repositories')}
+							</a>
+							<a
+								href="/repositories"
+								sveltekit:prefetch
 								class="my-1 mx-0 px-0 text-lg font-semibold font-lato leading-5 text-brown-800 transition-colors duration-200
 			transform bg-inherit border-none hover:text-brown-800 hover:no-underline md:mx-6 md:my-0 half:mx-2"
 							>
 								Repositories
-							</button>
-							<button
-								on:click={() => navigateAround('/faq')}
+							</a>
+							<a
+								sveltekit:prefetch
+								href="/faq"
 								class="my-1 text-lg font-semibold px-0 leading-5 text-brown-800 border-2 transition-colors duration-200
 			transform bg-inherit border-none hover:text-brown-800 hover:no-underline md:mx-6 md:my-0 half:mx-2"
 							>
 								FAQ
-							</button>
-							<Dropdown user={u} show={showMenu} {closeMenu} {handleShowMenu}>
+							</a>
+							<Dropdown user={u} show={showMenu} {closeMenu}>
 								<button
 									on:click={toggleMenu}
 									class="flex items-center px-4 w-full half:px-2 ml-8 half:ml-4 mt-1.5 font-lato font-semibold border-brown-800

src/routes/index.svelte

@@ -2,9 +2,12 @@
 	import Landing from './landing.svelte';
 	import { session } from '$app/stores';
 	import { goto } from '$app/navigation';
-	// @ts-ignore
-	session.subscribe(async ({ authenticated }) => {
-		if (authenticated) goto('/repositories');
+	import { onMount } from 'svelte';
+	onMount(async () => {
+		// @ts-ignore
+		if ($session.authenticated) {
+			goto('/repositories');
+		}
 	});
 </script>
 

src/routes/settings/index.svelte

@@ -1,29 +1,27 @@
 <script lang="ts">
-	import { browser } from '$app/env';
 	import { goto } from '$app/navigation';
 	import Card from '$lib/card.svelte';
 	import UserIcon from '$lib/icons/user.svelte';
 	import { Auth, type User } from '../../apis/auth';
 	import { session } from '$app/stores';
 	export let u: User;
 
+	let nameOrUsername: string;
 	const auth = new Auth();
-	if (browser) {
+	onMount(async () => {
 		// @ts-ignore
-		session.subscribe(async ({ authenticated, user }) => {
-			if (authenticated) {
-				u = user;
-				return;
-			}
-
-			goto('/auth/unauthorized');
-		});
-	}
+		if (!$session.authenticated) {
+			await goto('/auth/unauthorized');
+		}
 
-	let nameOrUsername = u.name ? u.name : u.username;
+		// @ts-ignore
+		u = $session.user;
+		nameOrUsername = u.name ? u.name : u.username;
+	});
 
 	import { form, field } from 'svelte-forms';
 	import { required, max, min, matchField } from 'svelte-forms/validators';
+	import { onMount } from 'svelte';
 
 	let currentPassword = field('current_password', '', [required(), min(8), max(48)]);
 	let newPassword = field('new_password', '', [required(), min(8), max(48)]);

src/routes/u/[username]/[repo].svelte

@@ -1,3 +1,15 @@
+<script lang="ts" context="module">
+	export const prerender: boolean = true;
+	export async function load({ params }) {
+		return {
+			props: {
+				repo: params.repo,
+				username: params.username
+			}
+		};
+	}
+</script>
+
 <script lang="ts">
 	import Star from '$lib/icons/star.svelte';
 	import Globe from '$lib/icons/globe.svelte';

src/routes/u/index.svelte

@@ -1,27 +1,30 @@
-<script context="module" lang="ts">
-	export function load({ session }) {
-		return {
-			props: {
-				user: session.user
-			}
-		};
-	}
-</script>
-
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import UserIcon from '$lib/icons/user.svelte';
 	import Repository from '../../components/repository.svelte';
-	import { RegistryBackend, type Catalog, type DetailedRepository } from '../../apis/registry';
+	import { RegistryBackend, type Catalog } from '../../apis/registry';
 	import type { User } from 'src/apis/auth';
 	import StarIcon from '$lib/icons/star.svelte';
 	import UserGroupIcon from '$lib/icons/userGroup.svelte';
+	import { goto } from '$app/navigation';
+	import { session } from '$app/stores';
 	export let user: User;
 
 	let isRepo = true;
 	let isStarred = false;
 	let isContrib = false;
 
+	onMount(async () => {
+		// @ts-ignore
+		if (!$session.authenticated) {
+			await goto('/auth/unauthorized');
+		}
+
+		// @ts-ignore
+		user = $session.user;
+		await fetchPageData();
+	});
+
 	const toggleRepo = () => {
 		isContrib = false;
 		isStarred = false;
@@ -58,10 +61,6 @@
 
 		catalog = data;
 	};
-	let showTooltip = false;
-	onMount(async () => {
-		fetchPageData();
-	});
 </script>
 
 <svelte:head>
@@ -135,7 +134,7 @@
 
 		{#if isRepo}
 			<div>
-				<div class="w-full px-16 p-8">
+				<div class="w-full px-16 py-8">
 					{#if catalog?.repositories}
 						{#each catalog.repositories as repo}
 							<Repository compact={false} data={repo} />
@@ -150,7 +149,7 @@
 		{/if}
 
 		{#if isStarred}
-			<div class="w-full px-8">
+			<div class="w-full px-16 py-8">
 				<div
 					class="bg-gray-50 w-full rounded-md px-28 py-20 flex flex-col justify-center items-center"
 				>
@@ -164,7 +163,7 @@
 		{/if}
 
 		{#if isContrib}
-			<div class="w-full px-8">
+			<div class="w-full px-16 py-8">
 				<div
 					class="bg-gray-50 w-full rounded-md px-28 py-20 flex flex-col justify-center items-center"
 				>