From 085b3f3bef412eeb5d1799aab2bd82a3300be1a0 Mon Sep 17 00:00:00 2001
From: Nicola Spadari <NicolaSpadari@users.noreply.github.com>
Date: Sun, 16 Jun 2024 19:29:11 +0200
Subject: [PATCH] Better page layout

---
 src/components/Layout/Tile.vue |  4 +-
 src/components/Site/Navbar.vue | 26 +++++++++---
 src/components/Test.vue        | 38 -----------------
 src/pages/command.vue          | 55 -------------------------
 src/pages/commands.vue         | 46 +++++++++++++++++++++
 src/pages/notification.vue     | 75 ----------------------------------
 src/pages/notifications.vue    | 66 ++++++++++++++++++++++++++++++
 7 files changed, 134 insertions(+), 176 deletions(-)
 delete mode 100644 src/components/Test.vue
 delete mode 100644 src/pages/command.vue
 create mode 100644 src/pages/commands.vue
 delete mode 100644 src/pages/notification.vue
 create mode 100644 src/pages/notifications.vue

diff --git a/src/components/Layout/Tile.vue b/src/components/Layout/Tile.vue
index fb14ef9..ce74c7d 100644
--- a/src/components/Layout/Tile.vue
+++ b/src/components/Layout/Tile.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="grid grid-cols-1 lg:grid-cols-2">
-		<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
+		<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
 			<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
 				<h2 class="text-3xl text-white font-bold tracking-tight">
 					{{ props.title }}
@@ -10,7 +10,7 @@
 				</p>
 			</div>
 		</div>
-		<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
+		<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
 			<slot />
 		</div>
 	</div>
diff --git a/src/components/Site/Navbar.vue b/src/components/Site/Navbar.vue
index 19fbb0d..ffd0f0f 100644
--- a/src/components/Site/Navbar.vue
+++ b/src/components/Site/Navbar.vue
@@ -1,8 +1,8 @@
 <template>
 	<header class="top-0 z-10">
-		<nav crate flex items-center justify-between py-6>
+		<nav flex items-center justify-between py-6 crate>
 			<div class="flex lg:flex-1">
-				<NuxtLink to="/" class="p-1.5 -m-1.5">
+				<NuxtLink to="/" class="home p-1.5 -m-1.5">
 					<span class="sr-only">{{ name }}</span>
 					<SvgoLogo :font-controlled="false" size-8 />
 				</NuxtLink>
@@ -16,10 +16,18 @@
 				</button>
 			</div>
 			<div hidden lg="flex gap-x-12">
-				<NuxtLink to="/command" class="text-sm text-white font-semibold leading-6">Command</NuxtLink>
-				<NuxtLink to="/notification" class="text-sm text-white font-semibold leading-6">Notification</NuxtLink>
-				<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6">OS Information</NuxtLink>
-				<NuxtLink to="/this-page-does-not-exist" class="text-sm text-white font-semibold leading-6">404</NuxtLink>
+				<NuxtLink to="/commands" class="text-sm text-white font-semibold leading-6">
+					Commands
+				</NuxtLink>
+				<NuxtLink to="/notifications" class="text-sm text-white font-semibold leading-6">
+					Notifications
+				</NuxtLink>
+				<NuxtLink to="/os" class="text-sm text-white font-semibold leading-6">
+					OS Informations
+				</NuxtLink>
+				<NuxtLink to="/foo" class="text-sm text-white font-semibold leading-6">
+					404
+				</NuxtLink>
 			</div>
 			<div hidden lg="flex flex-1 justify-end">
 				<p class="text-sm text-white font-semibold leading-6">
@@ -65,3 +73,9 @@
 	const { name } = useConstants();
 	const tauriVersion = await getTauriVersion();
 </script>
+
+<style scoped>
+	.router-link-exact-active:not(.home){
+		@apply text-emerald-500;
+	}
+</style>
diff --git a/src/components/Test.vue b/src/components/Test.vue
deleted file mode 100644
index 885186c..0000000
--- a/src/components/Test.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-	<div text-center space-y-5>
-		<p>Hello from Nuxtor - Tauri v{{ version }}</p>
-		<p>Running on {{ currentOS }}</p>
-
-		<p>Shell command result: {{ result }}</p>
-
-		<button @click="runNotification()">
-			send notification
-		</button>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	const currentOS = await platform();
-	const version = await getTauriVersion();
-
-	const result = await Command.create("exec-sh", [
-		"-c",
-		"echo 'Hello World!'"
-	]).execute();
-
-	const runNotification = async () => {
-		let permissionGranted = await isPermissionGranted();
-
-		if (!permissionGranted) {
-			const permission = await requestPermission();
-			permissionGranted = permission === "granted";
-		}
-
-		if (permissionGranted) {
-			sendNotification({
-				title: "Hello Tauri",
-				body: "Notification from tauri"
-			});
-		}
-	};
-</script>
diff --git a/src/pages/command.vue b/src/pages/command.vue
deleted file mode 100644
index 865d03a..0000000
--- a/src/pages/command.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-	<div class="isolate">
-		<div class="grid grid-cols-1 lg:grid-cols-2">
-			<div class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16">
-				<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
-					<h2 class="text-3xl text-white font-bold tracking-tight">
-						Command
-					</h2>
-					<p class="mt-6 text-lg text-gray-300 leading-8">
-						Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application.
-					</p>
-				</div>
-			</div>
-			<form class="px-6 pb-10 pt-12 lg:px-8 lg:pt-22 sm:pt-16" @submit.prevent="sendCommand()">
-				<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
-					<div class="grid grid-cols-1 gap-x-8 gap-y-6">
-						<div>
-							<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
-							<div class="mt-2.5">
-								<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
-							</div>
-						</div>
-						<div class="flex justify-end">
-							<Btn type="submit">
-								Send command
-							</Btn>
-						</div>
-						<div mt-8>
-							<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
-							<div class="mt-2.5">
-								<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
-							</div>
-						</div>
-					</div>
-				</div>
-			</form>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	const input = ref("");
-	const result = ref("");
-
-	const sendCommand = async () => {
-		const response = await Command.create("exec-sh", [
-			"-c",
-			input.value
-		]).execute();
-
-		result.value = JSON.stringify(response, null, 4);
-
-		input.value = "";
-	};
-</script>
diff --git a/src/pages/commands.vue b/src/pages/commands.vue
new file mode 100644
index 0000000..893b008
--- /dev/null
+++ b/src/pages/commands.vue
@@ -0,0 +1,46 @@
+<template>
+	<LayoutTile
+		title="Commands"
+		description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
+	>
+		<form @submit.prevent="sendCommand()">
+			<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
+				<div class="grid grid-cols-1 gap-x-8 gap-y-6">
+					<div>
+						<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
+						<div class="mt-2.5">
+							<input id="command-input" v-model="input" type="text" name="command-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
+						</div>
+					</div>
+					<div class="flex justify-end">
+						<Btn type="submit">
+							Send command
+						</Btn>
+					</div>
+					<div mt-8>
+						<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
+						<div class="mt-2.5">
+							<textarea id="command-output" v-model="result" name="command-output" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-indigo-500 focus:ring-inset" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</form>
+	</LayoutTile>
+</template>
+
+<script lang="ts" setup>
+	const input = ref("");
+	const result = ref("");
+
+	const sendCommand = async () => {
+		const response = await Command.create("exec-sh", [
+			"-c",
+			input.value
+		]).execute();
+
+		result.value = JSON.stringify(response, null, 4);
+
+		input.value = "";
+	};
+</script>
diff --git a/src/pages/notification.vue b/src/pages/notification.vue
deleted file mode 100644
index 8d7550a..0000000
--- a/src/pages/notification.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-	<div>
-		<div class="grid grid-cols-1 lg:grid-cols-2">
-			<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
-				<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
-					<h2 class="text-3xl text-white font-bold tracking-tight">
-						Notification
-					</h2>
-					<p class="mt-6 text-lg text-gray-300 leading-8">
-						Send native notifications to the client using the notification plugin.
-					</p>
-				</div>
-			</div>
-			<form class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16" @submit.prevent="createNotification()">
-				<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
-					<div class="grid grid-cols-1 gap-x-8 gap-y-6">
-						<div>
-							<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
-							<div class="mt-2.5">
-								<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
-							</div>
-						</div>
-						<div>
-							<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
-							<div class="mt-2.5">
-								<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
-							</div>
-						</div>
-
-						<div class="flex justify-end">
-							<Btn type="submit">
-								Send notification
-							</Btn>
-						</div>
-
-						<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
-							Missing permissions
-						</p>
-					</div>
-				</div>
-			</form>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	const notificationTitle = ref("");
-	const notificationBody = ref("");
-	const permissionError = ref(false);
-
-	const createNotification = async () => {
-		let permissionGranted = await isPermissionGranted();
-
-		if (!permissionGranted) {
-			const permission = await requestPermission();
-			permissionGranted = permission === "granted";
-		}
-
-		if (permissionGranted) {
-			sendNotification({
-				title: notificationTitle.value,
-				body: notificationBody.value
-			});
-
-			notificationTitle.value = "";
-			notificationBody.value = "";
-		} else {
-			permissionError.value = true;
-
-			useTimeoutFn(() => {
-				permissionError.value = false;
-			}, 3000);
-		}
-	};
-</script>
diff --git a/src/pages/notifications.vue b/src/pages/notifications.vue
new file mode 100644
index 0000000..ada27e6
--- /dev/null
+++ b/src/pages/notifications.vue
@@ -0,0 +1,66 @@
+<template>
+	<LayoutTile
+		title="Notifications"
+		description="Send native notifications to the client using the notification plugin."
+	>
+		<form @submit.prevent="createNotification()">
+			<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
+				<div class="grid grid-cols-1 gap-x-8 gap-y-6">
+					<div>
+						<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
+						<div class="mt-2.5">
+							<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
+						</div>
+					</div>
+					<div>
+						<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
+						<div class="mt-2.5">
+							<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
+						</div>
+					</div>
+
+					<div class="flex justify-end">
+						<Btn type="submit">
+							Send notification
+						</Btn>
+					</div>
+
+					<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
+						Missing permissions
+					</p>
+				</div>
+			</div>
+		</form>
+	</LayoutTile>
+</template>
+
+<script lang="ts" setup>
+	const notificationTitle = ref("");
+	const notificationBody = ref("");
+	const permissionError = ref(false);
+
+	const createNotification = async () => {
+		let permissionGranted = await isPermissionGranted();
+
+		if (!permissionGranted) {
+			const permission = await requestPermission();
+			permissionGranted = permission === "granted";
+		}
+
+		if (permissionGranted) {
+			sendNotification({
+				title: notificationTitle.value,
+				body: notificationBody.value
+			});
+
+			notificationTitle.value = "";
+			notificationBody.value = "";
+		} else {
+			permissionError.value = true;
+
+			useTimeoutFn(() => {
+				permissionError.value = false;
+			}, 3000);
+		}
+	};
+</script>