Skip to content

Commit dade57f

Browse files
CorentinThCorentinTh
committed
feat(pages): home page base
1 parent 87cfc9c commit dade57f

37 files changed

+2820
-92
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
# IT-Tools
2+
3+
It-Tools v3 nuxt exploration branch

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"name": "@it-tools/root",
33
"version": "0.0.0",
44
"description": "IT Tools monorepo root",
5+
"packageManager": "[email protected]",
6+
57
"scripts": {
68
"dev": "pnpm -F @it-tools/app dev"
79
},
@@ -10,6 +12,5 @@
1012
"repository": {
1113
"type": "git",
1214
"url": "https://github.com/CorentinTh/it-tools"
13-
},
14-
"packageManager": "[email protected]"
15+
}
1516
}

‎packages/app/app.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
2-
<div>
3-
<NuxtRouteAnnouncer />
4-
<NuxtWelcome />
5-
</div>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
65
</template>

‎packages/app/assets/css/tailwind.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
6+
@layer base {
7+
:root {
8+
--background: 0 0% 100%;
9+
--foreground: 240 10% 3.9%;
10+
11+
--card: 0 0% 100%;
12+
--card-foreground: 240 10% 3.9%;
13+
14+
--popover: 0 0% 100%;
15+
--popover-foreground: 240 10% 3.9%;
16+
17+
--primary: 240 5.9% 10%;
18+
--primary-foreground: 0 0% 98%;
19+
20+
--secondary: 240 4.8% 95.9%;
21+
--secondary-foreground: 240 5.9% 10%;
22+
23+
--muted: 240 4.8% 95.9%;
24+
--muted-foreground: 240 3.8% 46.1%;
25+
26+
--accent: 240 4.8% 95.9%;
27+
--accent-foreground: 240 5.9% 10%;
28+
29+
--destructive: 0 84.2% 60.2%;
30+
--destructive-foreground: 0 0% 98%;
31+
32+
--border:240 5.9% 90%;
33+
--input:240 5.9% 90%;
34+
--ring:240 5.9% 10%;
35+
--radius: 0.5rem;
36+
}
37+
38+
.dark {
39+
--background:0 0% 9%;
40+
--foreground:0 0% 98%;
41+
42+
--card: 0 0% 7%;
43+
--card-foreground:0 0% 98%;
44+
45+
--popover:240 10% 3.9%;
46+
--popover-foreground:0 0% 98%;
47+
48+
--primary: 83 79% 55%;
49+
--primary-foreground:240 5.9% 10%;
50+
51+
--secondary:240 3.7% 15.9%;
52+
--secondary-foreground:0 0% 98%;
53+
54+
--muted:240 3.7% 15.9%;
55+
--muted-foreground:240 5% 64.9%;
56+
57+
--accent:240 3.7% 15.9%;
58+
--accent-foreground:0 0% 98%;
59+
60+
--destructive:0 62.8% 30.6%;
61+
--destructive-foreground:0 0% 98%;
62+
63+
--border:240 3.7% 15.9%;
64+
--input:240 3.7% 15.9%;
65+
--ring:240 4.9% 83.9%;
66+
}
67+
}
68+
69+
70+
@layer base {
71+
* {
72+
@apply border-border;
73+
}
74+
body {
75+
@apply bg-background text-foreground;
76+
}
77+
}

‎packages/app/components.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"$schema": "https://shadcn-vue.com/schema.json",
3+
"style": "new-york",
4+
"typescript": true,
5+
"tsConfigPath": ".nuxt/tsconfig.json",
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "assets/css/tailwind.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"framework": "nuxt",
14+
"aliases": {
15+
"components": "@/src/modules/ui/components",
16+
"ui": "@/src/modules/ui/components",
17+
"utils": "@/src/modules/shared/style/cn"
18+
}
19+
}

‎packages/app/i18n.config.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default defineI18nConfig(() => ({
2+
legacy: false,
3+
locale: 'en',
4+
messages: {
5+
en: {
6+
welcome: 'Welcome',
7+
},
8+
fr: {
9+
welcome: 'Bienvenue',
10+
},
11+
},
12+
}));

‎packages/app/nuxt.config.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,40 @@
22
export default defineNuxtConfig({
33
compatibilityDate: '2024-04-03',
44
devtools: { enabled: true },
5+
6+
extends: [
7+
'src/modules/app',
8+
],
9+
10+
modules: [
11+
'@nuxtjs/tailwindcss',
12+
'shadcn-nuxt',
13+
'@nuxt/fonts',
14+
'@nuxt/icon',
15+
'@vueuse/nuxt',
16+
'@nuxtjs/color-mode',
17+
'@nuxtjs/i18n',
18+
],
19+
20+
fonts: {
21+
provider: 'bunny',
22+
defaults: {
23+
weights: [400, 500, 600, 700, 800],
24+
},
25+
},
26+
27+
colorMode: {
28+
preference: 'system',
29+
fallback: 'dark',
30+
classSuffix: '',
31+
storage: 'cookie',
32+
storageKey: 'itts-color-mode',
33+
},
34+
35+
i18n: {
36+
strategy: 'prefix',
37+
vueI18n: './i18n.config.ts',
38+
locales: ['en', 'fr'],
39+
defaultLocale: 'en',
40+
},
541
});

‎packages/app/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"name": "@it-tools/app",
33
"type": "module",
44
"private": true,
5+
"packageManager": "[email protected]",
6+
57
"scripts": {
68
"dev": "nuxt dev",
79
"build": "nuxt build",
@@ -17,13 +19,28 @@
1719
"typecheck": "tsc --noEmit"
1820
},
1921
"dependencies": {
22+
"@nuxt/fonts": "^0.10.2",
23+
"@nuxt/icon": "^1.5.6",
24+
"@nuxtjs/color-mode": "^3.5.2",
25+
"@nuxtjs/i18n": "^8.5.5",
26+
"class-variance-authority": "^0.7.0",
27+
"clsx": "^2.1.1",
28+
"lucide-vue-next": "^0.453.0",
2029
"nuxt": "^3.13.2",
30+
"radix-vue": "^1.9.7",
31+
"shadcn-nuxt": "^0.10.4",
32+
"tailwind-merge": "^2.5.4",
33+
"tailwindcss-animate": "^1.0.7",
2134
"vue": "latest",
2235
"vue-router": "latest"
2336
},
2437
"devDependencies": {
2538
"@antfu/eslint-config": "^3.8.0",
39+
"@nuxtjs/tailwindcss": "^6.12.2",
40+
"@vueuse/core": "^11.1.0",
41+
"@vueuse/nuxt": "^11.1.0",
2642
"eslint": "^9.13.0",
43+
"typescript": "^5.6.3",
2744
"vitest": "^2.1.3"
2845
}
2946
}

‎packages/app/src/modules/app/components/app-footer.vue

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<script setup>
2+
const localePath = useLocalePath();
3+
4+
const sections = computed(() => [
5+
{
6+
title: 'Lorem',
7+
items: [
8+
{ label: 'Foo', to: '/foo' },
9+
{ label: 'Bar', to: '/bar' },
10+
{ label: 'Baz', to: '/baz' },
11+
],
12+
},
13+
{
14+
title: 'Ipsum',
15+
items: [
16+
{ label: 'Foo', to: '/foo' },
17+
{ label: 'Bar', to: '/bar' },
18+
{ label: 'Baz', to: '/baz' },
19+
],
20+
},
21+
{
22+
title: 'Dolor',
23+
items: [
24+
{ label: 'Foo', to: '/foo' },
25+
{ label: 'Bar', to: '/bar' },
26+
{ label: 'Baz', to: '/baz' },
27+
],
28+
},
29+
30+
]);
31+
32+
const socialLinks = [
33+
{
34+
icon: 'i-tabler-brand-github',
35+
href: 'https://github.com/CorentinTh/it-tools',
36+
label: 'GitHub',
37+
},
38+
{
39+
icon: 'i-tabler-brand-x',
40+
href: 'https://x.com/ittoolsdottech',
41+
label: 'X',
42+
},
43+
{
44+
icon: 'i-tabler-coffee',
45+
href: 'https://buymeacoffee.com/cthmsst',
46+
label: 'Support the project',
47+
},
48+
];
49+
</script>
50+
51+
<template>
52+
<footer class="bg-card border-t border-border">
53+
<div class="py-12 px-6 max-w-screen-xl mx-auto ">
54+
<div class="flex items-start justify-between flex-col md:flex-row gap-12">
55+
<div>
56+
<div class="flex items-center gap-2">
57+
<NuxtLink :to="localePath('/')" class="text-2xl font-semibold border-b border-transparent hover:no-underline h-auto py-0 px-1 ml--1 rounded-none !transition-border-color-250 group text-muted-foreground flex items-center gap-1">
58+
<span class="font-bold group-hover:text-foreground transition">IT</span>
59+
<span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 pt-0.5 ml-1 group-hover:text-primary transition">TOOLS</span>
60+
</NuxtLink>
61+
</div>
62+
63+
<div class="flex items-center gap-2 mt-4">
64+
<!-- {socialLinks.map(({ icon, href, label }) => (
65+
<a href="{href}" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" aria-label="{label}">
66+
<div class="{icon}" />
67+
</a>
68+
))} -->
69+
<a
70+
v-for="socialLink in socialLinks" :key="socialLink.label" :href="socialLink.href" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" :aria-label="socialLink.label"
71+
>
72+
<Icon :name="socialLink.icon" />
73+
</a>
74+
</div>
75+
76+
<div class="text-muted-foreground mt-2">
77+
Crafted on Earth by
78+
<a href="https://corentin.tech" target="_blank" rel="noopener" class="hover:text-primary transition">
79+
Corentin Thomasset
80+
</a>
81+
</div>
82+
</div>
83+
84+
<div class="grid grid-cols-1 sm:grid-cols-3 gap-12">
85+
<div v-for="section in sections" :key="section.title">
86+
<h4 class="font-semibold text-foreground">
87+
{{ section.title }}
88+
</h4>
89+
<ul class="mt-4">
90+
<li v-for="item in section.items" :key="item.label" class="mt-1">
91+
<NuxtLink v-if="item.to" :to="localePath(item.to)" class="text-muted-foreground hover:text-primary transition">
92+
{{ item.label }}
93+
</NuxtLink>
94+
<a v-else :href="item.href" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition">
95+
{{ item.label }}
96+
</a>
97+
</li>
98+
</ul>
99+
</div>
100+
</div>
101+
</div>
102+
103+
<div class="text-xs text-muted-foreground border-t border-border pt-4 mt-12">
104+
<span>
105+
&copy;
106+
{{ new Date().getFullYear() }}
107+
Corentin Thomasset
108+
</span>
109+
</div>
110+
<div class="text-xs text-foreground opacity-80%" />
111+
</div>
112+
</footer>
113+
</template>

‎packages/app/src/modules/app/components/app-header.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup>
2+
import { Button } from '@/src/modules/ui/components/button';
3+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
4+
5+
const colorMode = useColorMode();
6+
</script>
7+
8+
<template>
9+
<div class="w-full border-b">
10+
<div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6">
11+
<NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
12+
<span class="font-bold text-foreground">IT</span>
13+
<span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
14+
</NuxtLink>
15+
16+
<DropdownMenu>
17+
<DropdownMenuTrigger as-child>
18+
<Button variant="ghost" size="icon">
19+
<Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
20+
<Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
21+
<span class="sr-only">Toggle theme</span>
22+
</Button>
23+
</DropdownMenuTrigger>
24+
<DropdownMenuContent align="end">
25+
<DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
26+
<Icon name="i-tabler-sun" class="mr-2 size-4" />
27+
Light
28+
</DropdownMenuItem>
29+
<DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
30+
<Icon name="i-tabler-moon" class="mr-2 size-4" />
31+
Dark
32+
</DropdownMenuItem>
33+
<DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
34+
<Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
</div>
40+
</div>
41+
</template>

0 commit comments

Comments
 (0)