estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add nuxtui

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-08 12:19:19 +01:00
parent 054706922f
commit aa3fcc3960
12 changed files with 1496 additions and 1525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/app.config.ts
View File

@@ -1,8 +1,20 @@
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"
app: {
name: "Nuxtor",
author: "Nicola Spadari",
repo: "https://github.com/NicolaSpadari/nuxtor",
tauriSite: "https://tauri.app",
nuxtSite: "https://nuxt.com",
nuxtUiSite: "https://ui3.nuxt.dev"
},
ui: {
colors: {
neutral: "zinc"
},
button: {
slots: {
base: "cursor-pointer"
}
}
}
});

38
app/app.vue
View File

@@ -1,35 +1,11 @@
<template>
<Html class="min-h-screen scroll-smooth">
<Body class="overflow-x-hidden bg-dark-800 text-white font-text antialiased">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<Html class="overflow-x-hidden">
<Body class="font-sans antialiased">
<UApp>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UApp>
</Body>
</Html>
</template>
<style lang="scss">
html {
-webkit-tap-highlight-color: transparent;
}
img {
-webkit-user-drag: none;
@apply select-none;
}
// Transitions
.page-enter-active,
.page-leave-active {
@apply transition-opacity ease-in-out duration-300;
}
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity ease-in-out duration-500;
}
.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to {
@apply opacity-0;
}
</style>

45
app/assets/css/main.css Normal file
View File

@@ -0,0 +1,45 @@
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-Heading: "Montserrat", sans-serif;
--font-sans: "Inter", sans-serif;
--color-primary: var(--ui-color-primary-500);
--color-secondary: var(--ui-color-secondary-500);
--color-success: var(--ui-color-success-500);
--color-info: var(--ui-color-info-500);
--color-warning: var(--ui-color-warning-500);
--color-error: var(--ui-color-error-500)
}
@layer base {
-webkit-tap-highlight-color: transparent;
}
@layer utilities {
.flex-center {
@apply flex justify-center items-center;
}
.absolute-center-h: {
@apply left-1/2 transform -translate-x-1/2;
}
.absolute-center-v{
@apply top-1/2 transform -translate-y-1/2;
}
}
.page-enter-active,
.page-leave-active {
@apply transition-opacity ease-in-out duration-300;
}
.layout-enter-active,
.layout-leave-active {
@apply transition-opacity ease-in-out duration-500;
}
.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to {
@apply opacity-0;
}

54
app/components/Site/Navbar.vue
View File

@@ -11,23 +11,9 @@
<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>
<UNavigationMenu :items="items" class="w-full justify-center" />
<div class="hidden" lg="flex flex-1 justify-end">
<p class="text-sm text-white font-semibold leading-6">
v{{ tauriVersion }}
@@ -40,10 +26,32 @@
<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>
const items = ref([
{
label: "Commands",
to: "/commands",
icon: "lucide:square-terminal"
},
{
label: "Notifications",
to: "/notifications",
icon: "lucide:message-square-more"
},
{
label: "OS Informations",
to: "/os",
icon: "lucide:info"
},
{
label: "Files",
to: "/notifications",
icon: "lucide:file"
},
{
label: "Store",
to: "/store",
icon: "lucide:database"
},
]);
</script>

6
app/components/Site/Sidebar.vue
View File

@@ -47,9 +47,3 @@
const tauriVersion = await useTauriAppGetTauriVersion();
const { showSidebar } = useSidebar();
</script>
<style scoped>
.router-link-exact-active:not(.home){
@apply text-emerald-500;
}
</style>

2
app/composables/sidebar.ts
View File

@@ -1,5 +1,5 @@
export const useSidebar = () => {
const showSidebar = useState("sidebar", () => false);
const showSidebar = useState("showSidebar", () => false);
return {
showSidebar

4
app/layouts/default.vue
View File

@@ -3,8 +3,8 @@
<SiteNavbar class="sticky" />
<SiteSidebar />
<div crate>
<UContainer>
<slot />
</div>
</UContainer>
</div>
</template>

2
app/layouts/home.vue
View File

@@ -3,7 +3,7 @@
<SiteNavbar class="fixed w-full" />
<SiteSidebar />
<div class="relative overflow-hidden px-6" lg="px-8">
<div class="relative overflow-hidden px-6 lg:px-8">
<DesignTopBlob />
<DesignBottomBlob />

16
app/pages/index.vue
View File

@@ -5,24 +5,24 @@
<div class="text-center">
<h1 class="animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading" sm="text-6xl">
{{ name.toUpperCase() }}
{{ app.name.toUpperCase() }}
</h1>
<p class="mt-5 flex gap-1 text-neutral-300 leading-8">
Powered by
<NuxtLink :to="nuxtSite" target="_blank" class="text-accent underline">
<NuxtLink :to="app.nuxtSite" target="_blank" class="text-accent underline">
Nuxt 3
</NuxtLink>
-
<NuxtLink :to="tauriSite" target="_blank" class="text-accent underline">
<NuxtLink :to="app.tauriSite" target="_blank" class="text-accent underline">
Tauri 2
</NuxtLink>
-
<NuxtLink :to="unoSite" target="_blank" class="text-accent underline">
UnoCSS
<NuxtLink :to="app.NuxtUiSite" target="_blank" class="text-accent underline">
NuxtUI 3
</NuxtLink>
</p>
<div class="mt-15">
<Hyperlink :to="repo">
<Hyperlink :to="app.repo">
Star on GitHub
</Hyperlink>
</div>
@@ -31,14 +31,14 @@
<div class="fixed bottom-6 text-sm absolute-center-h">
<p class="text-sm text-neutral-500">
Made by {{ author }}
Made by {{ app.author }}
</p>
</div>
</div>
</template>
<script lang="ts" setup>
const { name, author, repo, tauriSite, nuxtSite, unoSite } = useAppConfig();
const { app } = useAppConfig();
definePageMeta({
layout: "home"