Merge pull request #4 from NicolaSpadari/develop

Update 1.1.0
NicolaSpadari · Jan 2, 2025 · 81da394 · 81da394
2 parents e7ba83f + 4a87ea5
commit 81da394
Show file tree

Hide file tree

Showing 54 changed files with 4,565 additions and 5,622 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -28,7 +28,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: 23.5.0
 
       - name: install Rust stable
         uses: dtolnay/rust-toolchain@stable
@@ -46,7 +46,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9.12.1
+          version: 9.15.2
 
       - name: install frontend dependencies
         run: pnpm install

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 .DS_Store
 *.log*
+.data
 .nuxt
 .nitro
 .cache

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.10.0
+23.5.0
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
 	// Enable the ESlint flat config support
-	"eslint.experimental.useFlatConfig": true,
+	"eslint.useFlatConfig": true,
 
 	// Use eslint as default formatter
 	"editor.formatOnSave": false,

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-    <img width="150" src="./src/public/logo.png" alt="logo">
+    <img width="150" src="./public/logo.png" alt="logo">
 </p>
 <h1 align="center">NUXTOR</h1>
 <p align="center">
@@ -18,7 +18,7 @@ Build super fast desktop applications!
 <br />
 
 <div align="center">
-<img src="./src/public/screenshot.png">
+<img src="./public/screenshot.png">
 </div>
 
 <p align="center">Powered by Nuxt 3</p>
@@ -27,7 +27,7 @@ Build super fast desktop applications!
 
 ## Technologies run-down
 
-- Nuxt 3
+- Nuxt 3 (v4 ready!)
 - Tauri 2
 - UnoCSS
 - Typescript
@@ -37,8 +37,9 @@ Build super fast desktop applications!
 ## Functionalities
 
 - Run shell commands from the app
-- Send custom notifications to the client (remember to turn on/grant notifications in your computer settings!)
+- Send custom notifications to the client (remember to turn on/grant notifications in your computer settings)
 - Display OS related informations
+- Store and retrieve data locally
 - Show tray icon
 - Support all Nuxt functionalities (routing/layout/middleware/modules/etc...)
 
@@ -84,7 +85,7 @@ The same Tauri bundle will generate under `src-tauri/target`, but with the abili
 ## Notes
 
 - Tauri v2 brings some big refactors, such as packages names and permission management. New permissions have to be granted under `src-tauri/capabilities/main.json`
-- Tauri js functions are auto imported as-is with the help of a custom module. If another Tauri plugin is added, then the module has to be updated to support auto imports under `src/modules/tauri.ts`
+- Tauri js functions are auto imported with the help of a custom module, named like `useTauri<LibraryName>`. If another Tauri plugin is added, then the module has to be updated to support its functions under `src/modules/tauri.ts`
 - As per documentation, Nuxt SSR must be disabled in order for Tauri to act as the backend. Still, all Nuxt goodies will be functional.
 
 ## License

diff --git a/app/app.config.ts b/app/app.config.ts
@@ -0,0 +1,8 @@
+export default defineAppConfig({
+	name: "Nuxtor",
+	author: "Nicola Spadari",
+	repo: "https://github.com/NicolaSpadari/nuxtor",
+	tauriSite: "https://v2.tauri.app",
+	nuxtSite: "https://nuxt.com",
+	unoSite: "https://unocss.dev"
+});
diff --git a/src/app.vue → app/app.vue b/src/app.vue → app/app.vue
@@ -1,6 +1,6 @@
 <template>
-	<Html min-h-screen>
-		<Body overflow-x-hidden bg-dark-800 text-white>
+	<Html class="scroll-smooth min-h-screen">
+		<Body class="font-text antialiased overflow-x-hidden bg-dark-800 text-white">
 			<NuxtLayout>
 				<NuxtPage />
 			</NuxtLayout>
@@ -11,7 +11,6 @@
 <style lang="scss">
 	html {
 		-webkit-tap-highlight-color: transparent;
-		scroll-behavior: smooth;
 	}
 	img {
 		-webkit-user-drag: none;

diff --git a/src/assets/logo.svg → app/assets/logo.svg b/src/assets/logo.svg → app/assets/logo.svg
diff --git a/app/components/Btn.vue b/app/components/Btn.vue
@@ -0,0 +1,5 @@
+<template>
+	<button class="disabled:(cursor-not-allowed opacity-60) gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors" hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
+		<slot />
+	</button>
+</template>
diff --git a/src/components/Design/BottomBlob.vue → app/components/Design/BottomBlob.vue b/src/components/Design/BottomBlob.vue → app/components/Design/BottomBlob.vue
@@ -1,6 +1,6 @@
 <template>
-	<div pointer-events-none absolute inset-x-0 top="1/5" transform-gpu blur-3xl z="-10" aria-hidden="true">
-		<div class="blob" relative left="[calc(50%+36rem)]" aspect="[1155/678]" w="[72.1875rem]" from-emerald-500 to-amber-400 bg-gradient-to-tr opacity-30 translate-x="-1/2" />
+	<div class="pointer-events-none absolute inset-x-0 top=1/5 transform-gpu blur-3xl -z-10" aria-hidden="true">
+		<div class="blob relative left-[calc(50%+36rem)] aspect-[1155/678] w-[72.1875rem] from-emerald-500 to-amber-400 bg-gradient-to-tr opacity-30 -translate-x-1/2" />
 	</div>
 </template>
 

diff --git a/src/components/Design/TopBlob.vue → app/components/Design/TopBlob.vue b/src/components/Design/TopBlob.vue → app/components/Design/TopBlob.vue
@@ -1,6 +1,6 @@
 <template>
-	<div pointer-events-none absolute inset-x-0 transform-gpu blur-3xl top="-1/4" z="-10" aria-hidden="true">
-		<div class="blob" relative left="[calc(50%-30rem)]" aspect="[1155/678]" w="[72.1875rem]" rotate-30 from-amber-400 to-emerald-500 bg-gradient-to-tr opacity-30 translate-x="-1/2" />
+	<div class="pointer-events-none absolute inset-x-0 transform-gpu blur-3xl -top-1/4 -z-10" aria-hidden="true">
+		<div class="blob relative left-[calc(50%-30rem)] aspect-[1155/678] w-[72.1875rem] rotate-30 from-amber-400 to-emerald-500 bg-gradient-to-tr opacity-30 -translate-x-1/2" />
 	</div>
 </template>
 

diff --git a/app/components/Hyperlink.vue b/app/components/Hyperlink.vue
@@ -0,0 +1,5 @@
+<template>
+	<NuxtLink class="gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors" hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
+		<slot />
+	</NuxtLink>
+</template>
diff --git a/app/components/Layout/Tile.vue b/app/components/Layout/Tile.vue
@@ -0,0 +1,24 @@
+<template>
+	<div class="grid grid-cols-1" lg="grid-cols-2">
+		<div clas="px-6 pb-10 pt-12" sm="pt-16" lg="px-8 pt-22">
+			<div class="mx-auto max-w-xl" lg="mx-0 max-w-lg">
+				<h2 class="text-3xl text-white font-bold tracking-tight">
+					{{ props.title }}
+				</h2>
+				<p class="mt-6 text-lg text-gray-300 leading-8">
+					{{ props.description }}
+				</p>
+			</div>
+		</div>
+		<div class="px-6 pb-10 pt-12" sm="pt-16" lg="px-8 pt-22">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	const props = defineProps<{
+		title: string
+		description: string
+	}>();
+</script>
diff --git a/app/components/NavLink.vue b/app/components/NavLink.vue
@@ -0,0 +1,5 @@
+<template>
+	<NuxtLink class="block py-2 text-white font-semibold leading-6" lg="inline text-sm py-0">
+		<slot />
+	</NuxtLink>
+</template>
diff --git a/app/components/Site/Navbar.vue b/app/components/Site/Navbar.vue
@@ -0,0 +1,49 @@
+<template>
+	<header class="top-0 z-10">
+		<nav crate class="flex items-center justify-between py-6">
+			<div class="flex" lg="flex-1">
+				<NuxtLink to="/" class="home p-1.5 -m-1.5">
+					<SvgoLogo :font-controlled="false" class="size-8" />
+				</NuxtLink>
+			</div>
+			<div class="flex" lg="hidden">
+				<button type="button" class="inline-flex items-center justify-center rounded-md p-2.5 text-neutral-300 -m-2.5" @click="showSidebar = true">
+					<Icon name="heroicons-solid:bars-3" class="size-6" />
+				</button>
+			</div>
+			<div class="hidden" lg="flex gap-x-12">
+				<NavLink to="/commands">
+					Commands
+				</NavLink>
+				<NavLink to="/notifications">
+					Notifications
+				</NavLink>
+				<NavLink to="/os">
+					OS Informations
+				</NavLink>
+				<NavLink to="/file">
+					File
+				</NavLink>
+				<NavLink to="/store">
+					Store
+				</NavLink>
+			</div>
+			<div class="hidden" lg="flex flex-1 justify-end">
+				<p class="text-sm text-white font-semibold leading-6">
+					v{{ tauriVersion }}
+				</p>
+			</div>
+		</nav>
+	</header>
+</template>
+
+<script lang="ts" setup>
+	const { showSidebar } = useSidebar();
+	const tauriVersion = await useTauriAppGetTauriVersion();
+</script>
+
+<style scoped>
+	.router-link-exact-active:not(.home){
+		@apply text-emerald-500;
+	}
+</style>
diff --git a/src/components/Site/Sidebar.vue → app/components/Site/Sidebar.vue b/src/components/Site/Sidebar.vue → app/components/Site/Sidebar.vue
@@ -3,20 +3,20 @@
 		enter-from-class="opacity-0" enter-active-class="ease-in-out duration-500" enter-to-class="opacity-100"
 		leave-from-class="opacity-100" leave-active-class="ease-in-out duration-500" leave-to-class="opacity-0"
 	>
-		<div v-if="showSidebar" relative z-20 lg="hidden" role="dialog" aria-modal="true">
-			<div fixed inset-0 overflow-hidden>
-				<div crate h-full flex flex-col overflow-y-auto bg="neutral-800/70" py-6 backdrop-blur-md>
-					<div flex items-center justify-between>
-						<NuxtLink to="/" p-1.5 m="-1.5">
-							<SvgoLogo :filled="true" :font-controlled="false" size-8 />
+		<div v-if="showSidebar" class="relative z-20" lg="hidden" role="dialog" aria-modal="true">
+			<div class="fixed inset-0 overflow-hidden">
+				<div crate class="bg-neutral-800/70 h-full flex flex-col overflow-y-auto py-6 backdrop-blur-md">
+					<div class="flex items-center justify-between">
+						<NuxtLink to="/" class="p-1.5 -m-1.5">
+							<SvgoLogo :filled="true" :font-controlled="false" class="size-8" />
 						</NuxtLink>
-						<button type="button" rounded-md p-2.5 text-neutral-300 m="2.5" @click="showSidebar = false">
-							<Icon name="heroicons-solid:x-mark" size-6 />
+						<button type="button" class="rounded-md p-2.5 text-neutral-300 m-2.5" @click="showSidebar = false">
+							<Icon name="heroicons-solid:x-mark" class="size-6" />
 						</button>
 					</div>
-					<div mt-6 flow-root>
-						<div my="-6" divide-y divide="gray-500/25">
-							<div py-6 space-y-2>
+					<div class="mt-6 flow-root">
+						<div class="-my-6 divide-y divide-gray-500/25">
+							<div class="py-6 space-y-2">
 								<NavLink to="/commands">
 									Commands
 								</NavLink>
@@ -30,8 +30,8 @@
 									404
 								</NavLink>
 							</div>
-							<div py-6>
-								<p px-3 text-base text-white font-semibold leading-7 mx="-3">
+							<div class="py-6">
+								<p class="px-3 text-base text-white font-semibold leading-7 -mx-3">
 									v{{ tauriVersion }}
 								</p>
 							</div>

diff --git a/app/components/Tab/Row.vue b/app/components/Tab/Row.vue
@@ -0,0 +1,17 @@
+<template>
+	<div class="px-4 py-6" sm="grid grid-cols-3 gap-4 px-6">
+		<dt class="flex items-center text-sm text-light-200 font-medium">
+			{{ props.heading }}
+		</dt>
+		<dd class="flex items-center text-sm text-neutral-300 leading-6" sm="col-span-2 mt-0">
+			{{ props.body }}
+		</dd>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	const props = defineProps<{
+		heading: string
+		body: string
+	}>();
+</script>
diff --git a/src/composables/sidebar.ts → app/composables/sidebar.ts b/src/composables/sidebar.ts → app/composables/sidebar.ts
diff --git a/src/layouts/blank.vue → app/layouts/blank.vue b/src/layouts/blank.vue → app/layouts/blank.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<SiteNavbar sticky />
+		<SiteNavbar class="sticky" />
 		<SiteSidebar />
 
 		<slot />

diff --git a/src/layouts/default.vue → app/layouts/default.vue b/src/layouts/default.vue → app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<SiteNavbar sticky />
+		<SiteNavbar class="sticky" />
 		<SiteSidebar />
 
 		<div crate>

diff --git a/src/layouts/home.vue → app/layouts/home.vue b/src/layouts/home.vue → app/layouts/home.vue
@@ -3,7 +3,7 @@
 		<SiteNavbar class="fixed w-full" />
 		<SiteSidebar />
 
-		<div relative overflow-hidden px-6 lg="px-8">
+		<div class="relative overflow-hidden px-6" lg="px-8">
 			<DesignTopBlob />
 			<DesignBottomBlob />
 

diff --git a/src/middleware/sidebar.global.ts → app/middleware/sidebar.global.ts b/src/middleware/sidebar.global.ts → app/middleware/sidebar.global.ts
diff --git a/src/modules/tauri.ts → app/modules/tauri.ts b/src/modules/tauri.ts → app/modules/tauri.ts
@@ -1,9 +1,10 @@
-import { addImports, defineNuxtModule } from "nuxt/kit";
 import * as tauriApp from "@tauri-apps/api/app";
-import * as tauriShell from "@tauri-apps/plugin-shell";
-import * as tauriOs from "@tauri-apps/plugin-os";
-import * as tauriNotification from "@tauri-apps/plugin-notification";
 import * as tauriFs from "@tauri-apps/plugin-fs";
+import * as tauriNotification from "@tauri-apps/plugin-notification";
+import * as tauriOs from "@tauri-apps/plugin-os";
+import * as tauriShell from "@tauri-apps/plugin-shell";
+import * as tauriStore from "@tauri-apps/plugin-store";
+import { addImports, defineNuxtModule } from "nuxt/kit";
 
 const capitalize = (name: string) => {
 	return name.charAt(0).toUpperCase() + name.slice(1);
@@ -14,13 +15,14 @@ const tauriModules = [
 	{ module: tauriShell, prefix: "Shell", importPath: "@tauri-apps/plugin-shell" },
 	{ module: tauriOs, prefix: "Os", importPath: "@tauri-apps/plugin-os" },
 	{ module: tauriNotification, prefix: "Notification", importPath: "@tauri-apps/plugin-notification" },
-	{ module: tauriFs, prefix: "Fs", importPath: "@tauri-apps/plugin-fs" }
+	{ module: tauriFs, prefix: "Fs", importPath: "@tauri-apps/plugin-fs" },
+	{ module: tauriStore, prefix: "Store", importPath: "@tauri-apps/plugin-store" }
 ];
 
 export default defineNuxtModule<ModuleOptions>({
 	meta: {
 		name: "nuxt-tauri",
-		configKey: "nuxt-tauri"
+		configKey: "tauri"
 	},
 	defaults: {
 		prefix: "useTauri"

diff --git a/app/pages/[...all].vue b/app/pages/[...all].vue
@@ -0,0 +1,26 @@
+<template>
+	<div clas="grid place-items-center px-6 py-24" sm="py-32" lg="px-8">
+		<div class="text-center">
+			<p class="text-base text-emerald-500 font-semibold">
+				404
+			</p>
+			<h1 class="mt-4 text-3xl text-neutral-300 font-bold tracking-tight" sm="text-5xl">
+				Page not found
+			</h1>
+			<p class="mt-6 text-base text-neutral-400 leading-7">
+				Sorry, we couldn't find the page you're looking for.
+			</p>
+			<div class="mt-10 flex items-center justify-center gap-x-6">
+				<Hyperlink to="/" class="px-7">
+					Back
+				</Hyperlink>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	definePageMeta({
+		layout: "blank"
+	});
+</script>