enable trailing slash on layout (excluding api paths)

super mega layout improvements
client page: add tutorial, layout ui improvements
2024-12-31 19:50:27 -08:00 · 2024-12-31 19:40:15 -08:00 · 2024-12-26 01:45:58 -08:00
15 changed files with 258 additions and 125 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
--- a/src/app.css
+++ b/src/app.css
@@ -97,4 +97,12 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+
+	ol > li {
+		@apply flex flex-wrap gap-x-2;
+		counter-increment: counterName;
+	}
+	ol > li:before {
+		content: counter(counterName) '.';
+	}
 }
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
+	<body
+		data-sveltekit-preload-data="hover"
+		class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
+	>
+		%sveltekit.body%
 	</body>
 </html>
--- a/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png
+++ b/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png
--- a/src/lib/assets/guide-client.mp4
+++ b/src/lib/assets/guide-client.mp4
--- a/src/lib/components/app/code-snippet/code-snippet.svelte
+++ b/src/lib/components/app/code-snippet/code-snippet.svelte
@@ -22,10 +22,9 @@
 	}
 </script>

-<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent">
+<div class="relative flex-grow overflow-x-hidden rounded-lg bg-accent">
 	<div class="flex items-start overflow-x-auto p-2">
 		<pre><code>{data}</code></pre>
-
 		{#if copy || download}
 			<!--Copy button-->
 			<!--Flex reverse for peer hover to work properly-->
--- a/src/lib/components/app/wireguard-guide/index.ts
+++ b/src/lib/components/app/wireguard-guide/index.ts
@@ -0,0 +1,5 @@
+import WireguardGuide from "./wireguard-guide.svelte";
+
+export {
+	WireguardGuide
+};
--- a/src/lib/components/app/wireguard-guide/wireguard-guide.svelte
+++ b/src/lib/components/app/wireguard-guide/wireguard-guide.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs';
+	import * as Card from '$lib/components/ui/card';
+	import getItOnGooglePlay from '$lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png';
+	import guideVideo from '$lib/assets/guide-client.mp4';
+</script>
+
+<Tabs.Root value="android">
+	<Tabs.List class="grid w-full grid-cols-3">
+		<Tabs.Trigger value="android">Android</Tabs.Trigger>
+		<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
+		<Tabs.Trigger value="other">Other</Tabs.Trigger>
+	</Tabs.List>
+	<Tabs.Content value="android">
+		<Card.Root>
+			<Card.Header class="max-sm:px-4 max-sm:pt-4">
+				<Card.Title>WireGuard on Android</Card.Title>
+			</Card.Header>
+			<Card.Content class="max-sm:p-4">
+				<ol class="flex flex-col gap-2">
+					<li>
+						<div class="flex flex-col gap-2">
+							Install the WireGuard app
+							<a
+								class="contents"
+								href="https://play.google.com/store/apps/details?id=com.wireguard.android"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<img class="size-min" alt="Get it on google play" src={getItOnGooglePlay} />
+							</a>
+						</div>
+					</li>
+					<li>
+						<div class="flex flex-col gap-2">
+							<p>Download the configuration file and import it</p>
+							<aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
+							<video autoplay loop controls muted preload="metadata" class="max-h-screen">
+								<source src={guideVideo} type="video/mp4" />
+							</video>
+						</div>
+					</li>
+				</ol>
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+	<Tabs.Content value="windows">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>WireGuard on Windows</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<p>
+					<a
+						class="underline"
+						href="https://download.wireguard.com/windows-client/wireguard-installer.exe"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Download WireGuard
+					</a>
+				</p>
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+	<Tabs.Content value="other">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>WireGuard on Other Platforms</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<p>
+					You can download the WireGuard client from the <a
+						class="underline"
+						href="https://www.wireguard.com/install/"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						official website
+					</a>.
+				</p>
+			</Card.Content>
+		</Card.Root>
+	</Tabs.Content>
+</Tabs.Root>
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,9 +1,11 @@
-import type { LayoutServerLoad } from "./$types";
+import type { LayoutServerLoad } from './$types';
+
+export const trailingSlash = 'always';

 export const load: LayoutServerLoad = async (event) => {
 	const { user } = event.locals;

 	return {
-		user
+		user,
 	};
 };
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,26 +14,29 @@
 	}
 </script>

-<header class="p-4 sm:flex">
-	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
-	<nav>
-		<ul class="flex items-center gap-6 text-sm">
+<header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
+	<span class="font-bold sm:inline-block">VPGen</span>
+	<nav class="max-w-full">
+		<ul class="flex items-center gap-6 overflow-x-auto text-sm">
 			<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
 			{#if user}
-				<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
-				<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
-				<li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li>
+				<li><a href="/user/" class={getNavClass(/^\/user\/$/)}>Profile</a></li>
+				<li><a href="/connections/" class={getNavClass(/^\/connections\/$/)}>Connections</a></li>
+				<li><a href="/clients/" class={getNavClass(/^\/clients(\/\d+)?\/$/)}>Clients</a></li>
 			{/if}
 		</ul>
 	</nav>
 </header>
-<main class="flex flex-grow flex-col p-4">
+<main class="flex min-w-full max-w-full flex-grow flex-col gap-4 xl:min-w-[1280px]">
 	{@render children()}
 </main>

 <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
 <!--Some shenanings needed to be done to get the footer position to stick correctly,
 didn't work with display: contents-->
-<footer class="relative inset-x-0 bottom-0 p-4 text-center">
+<footer class="inset-x-0 bottom-0 w-full text-center">
 	<p>&copy; 2024</p>
 </footer>
+
+<style>
+</style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AuthForm } from '$lib/components/app/auth-form';
 	import { Button } from '$lib/components/ui/button';
+	import { AuthForm } from '$lib/components/app/auth-form';

 	const { data } = $props();
 	const { user } = data;
@@ -10,7 +10,7 @@
 	<title>VPGen</title>
 </svelte:head>

-<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
+<h1 class="mb-2 scroll-m-20 text-center text-3xl font-extrabold tracking-tight lg:text-4xl">
 	Welcome to VPGen
 </h1>

@@ -21,16 +21,35 @@
 	<section id="get-started" class="border-l-2 pl-6">
 		<p>
 			To get started,
-			<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
+			<Button class="ml-2" href="/clients/?add=New+Client">Create a New Client</Button>
 		</p>
 	</section>
+	<!--	<section id="using-wireguard">-->
+	<!--		<details class="mt-10">-->
+	<!--			<summary class="relative flex flex-col gap-2 pl-10">-->
+	<!--				<h2 class="text-xl font-semibold">Using WireGuard</h2>-->
+	<!--				To use VPGen, you need to install the WireGuard app on your device.-->
+	<!--			</summary>-->
+	<!--			<WireguardGuide />-->
+	<!--		</details>-->
+	<!--	</section>-->
 {:else}
-	<AuthForm class="p-4" />
-	<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
+	<AuthForm />
+	<!--	<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>-->
 {/if}

 <style>
 	p {
 		@apply my-2;
 	}
+
+	/*
+	summary::before {
+		content: '▶';
+		@apply absolute -left-0;
+	}
+	details[open] summary::before {
+		content: '▼';
+	}
+	*/
 </style>
--- a/src/routes/clients/+page.server.ts
+++ b/src/routes/clients/+page.server.ts
@@ -15,7 +15,7 @@ export const actions = {

 		switch (res._tag) {
 			case 'ok': {
-				return redirect(303, `/clients/${res.value}`);
+				return redirect(303, `/clients/${res.value}/`);
 			}
 			case 'err': {
 				const [status, message] = res.error;
--- a/src/routes/clients/+page.svelte
+++ b/src/routes/clients/+page.svelte
@@ -41,7 +41,7 @@
 			<Table.Row class="group hover:bg-background hover:bg-opacity-40">
 				<Table.Head scope="row">
 					<a
-						href={`/clients/${client.id}`}
+						href={`./${client.id}/`}
 						class="flex size-full items-center group-hover:underline"
 					>
 						{client.name}
@@ -61,13 +61,13 @@
 </Table.Root>

 <!--Floating action button for adding a new client-->
-<!--Not sure if this is the best place for the input field, will think about it later-->
-<div class="mt-auto flex self-end pt-4">
 <Dialog.Root bind:open={dialogOpen}>
-		<Dialog.Trigger class={buttonVariants({ variant: "default" }) + "flex gap-4"}>
+	<div class="mt-auto flex self-end pt-4">
+		<Dialog.Trigger class={buttonVariants({ variant: 'default' }) + ' flex gap-4'}>
 			<LucidePlus />
-			Add Client
+			New Client
 		</Dialog.Trigger>
+	</div>
 	<Dialog.Content class="max-w-xs">
 		<form class="contents" method="post" action="?/create">
 			<Dialog.Header class="">
@@ -91,4 +91,3 @@
 		</form>
 	</Dialog.Content>
 </Dialog.Root>
-</div>
--- a/src/routes/clients/[id]/+page.svelte
+++ b/src/routes/clients/[id]/+page.svelte
@@ -2,6 +2,7 @@
 	import type { PageData } from './$types';
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
+	import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';

 	const { data }: { data: PageData } = $props();

@@ -19,15 +20,20 @@
 </script>

 <svelte:head>
-	<title></title>
+	<title>{data.client.name}</title>
 </svelte:head>

-<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
+<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>

-<div class="flex flex-wrap gap-4">
+<section id="client-configuration" class="flex flex-wrap justify-center gap-4">
 	<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />

 	<div class="overflow-hidden rounded-lg">
 		{@html qrCode.svg()}
 	</div>
-</div>
+</section>
+<section id="usage" class="flex w-full flex-col gap-2">
+	<h2 class="text-xl font-semibold">Usage</h2>
+	<p>To use VPGen, you need to install the WireGuard app on your device.</p>
+	<WireguardGuide />
+</section>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";

 const config: Config = {
-	darkMode: ["class"],
+	darkMode: ["media"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
 	safelist: ["dark"],
 	theme: {
Author	SHA1	Message	Date
Yuri Tatishchev	41066eefe4	enable trailing slash on layout (excluding api paths)	2024-12-31 19:50:27 -08:00
Yuri Tatishchev	d5b54722b3	super mega layout improvements	2024-12-31 19:40:15 -08:00
Yuri Tatishchev	923c24a93e	client page: add tutorial, layout ui improvements	2024-12-26 01:45:58 -08:00