🎨 Working app and shared with start of pages

.nvmrc

@@ -1 +1 @@
-v20
+v21

.vscode/project.code-workspace

@@ -0,0 +1,20 @@
+{
+  "folders": [
+    {
+      "name": "ROOT",
+      "path": "../"
+    },
+    {
+      "name": "App",
+      "path": "../modules/app"
+    },
+    {
+      "name": "Supabase",
+      "path": "../modules/supabase"
+    },
+    {
+      "name": "Shared",
+      "path": "../modules/shared"
+    },
+  ],
+}

.vscode/settings.json

@@ -72,5 +72,5 @@
     "scss",
     "pcss",
     "postcss"
-  ]
+  ],
 }

modules/app/.env.example

@@ -0,0 +1,7 @@
+## Your environment variables
+SUPABASE_URL=
+SUPABASE_KEY=
+
+NUXT_PUBLIC_BASE_URL=
+NUXT_PUBLIC_DISCORD_GUILD_ID=
+NUXT_PUBLIC_SENTRY_DSN=

modules/app/app.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
+  <NuxtLayout>
-    <NuxtRouteAnnouncer />
+    <NuxtPage />
-    <NuxtWelcome />
+  </NuxtLayout>
-  </div>
 </template>

modules/app/error.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError
+})
+
+const handleError = () => clearError({ redirect: '/' })
+</script>
+
+<template>
+  <UMain>
+    <div v-if="error?.statusCode === 404">
+      <div i-mdi-robot-confused text-8xl text-white block />
+      <div text-white>
+        <h1>
+          404<br />
+          Page non trouvée
+        </h1>
+      </div>
+      <div>
+        <UButton m="3 t8" @click="handleError" bg-white font-bold>
+          Retourner vite sur Force Orange
+        </UButton>
+      </div>
+    </div>
+    <div v-else>
+      <h1>{{ error?.statusCode }}</h1>
+
+      {{ error?.message }}
+
+      <UButton m="3 t8" @click="handleError" bg-white font-bold>
+        Retourner vite sur FO
+      </UButton>
+    </div>
+  </UMain>
+</template>

modules/app/eslint.config.js

@@ -0,0 +1,8 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    unocss: true,
+    formatters: true,
+  },
+)

modules/app/layouts/default.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'bg-[#F9DD75F2]'
+  }
+})
+const links = [{
+  label: 'Les actus',
+  to: '/'
+}, {
+  label: 'Rejoindre FO',
+  to: '/join'
+}]
+</script>
+
+<template>
+  <UHeader :links="links" class="rounded-xl shadow-lg bg-white mx-4 mt-4">
+    <template #left>
+      <!-- <p class="font-logo text-orange-500 stroke-5 stroke-black-500 text-hlogo">Force Orange</p> -->
+      <NuxtImg src="/assets/img/logo-fo.svg" alt="Force Orange" />
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+      <UButton to="/signin" variant="soft">Se connecter</UButton>
+    </template>
+  </UHeader>
+
+  <UMain class="m-4">
+    <slot />
+  </UMain>
+
+  <UNotifications />
+</template>

modules/app/netlify.toml

@@ -0,0 +1,16 @@
+[build.environment]
+  NODE_VERSION = "21"
+
+[build]
+  publish = "dist"
+  command = "pnpm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[[headers]]
+  for = "/*"
+    [headers.values]
+    Access-Control-Allow-Origin = "*"

modules/app/nuxt.config.ts

@@ -1,5 +1,53 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-04-03',
+  compatibilityDate: '2024-09-11',
-  devtools: { enabled: true }
+  devtools: { enabled: true },
+
+  runtimeConfig: {
+    public: {
+      env: '',
+    },
+  },
+
+  router: {
+    options: {
+      scrollBehaviorType: 'smooth'
+    }
+  },
+
+  extends: ['@pel/shared'],
+
+  modules: ['@nuxtjs/supabase', '@nuxt/content', "@nuxt/image"],
+
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
+
+  supabase: {
+    url: process.env.SUPABASE_URL || '',
+    key: process.env.SUPABASE_KEY || '',
+    redirect: true,
+    redirectOptions: {
+      login: '/signin',
+      callback: '/signin/confirm',
+      exclude: ['/*'],
+    },
+    cookieName: 'fo-cookies',
+    cookieOptions: {
+      maxAge: 60 * 60 * 8,
+      sameSite: 'lax',
+      secure: true,
+    },
+    clientOptions: {
+      auth: {
+        flowType: 'pkce',
+        detectSessionInUrl: true,
+        persistSession: true,
+        autoRefreshToken: true,
+      },
+    },
+  },
 })

modules/app/package.json

@@ -4,13 +4,26 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --port 3000",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "up": "taze major -I"
   },
   "dependencies": {
+    "@pel/shared": "workspace:*",
     "nuxt": "^3.12.4",
     "vue": "latest"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^3.0.0",
+    "@iconify-json/mdi": "^1.2.0",
+    "@nuxt/content": "^2.13.2",
+    "@nuxt/image": "^1.8.0",
+    "@nuxtjs/supabase": "^1.4.0",
+    "eslint": "^9.9.1",
+    "eslint-plugin-format": "^0.1.2",
+    "yup": "^1.4.0"
   }
 }

modules/app/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'Home',
+})
+</script>
+
+<template>
+  <div>
+    <h1>Home</h1>
+  </div>
+</template>

modules/app/pages/join/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { object, string, boolean, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+definePageMeta({
+  name: 'Join',
+})
+
+const schema = object({
+  mail: string().email('Invalid email').required('Required'),
+  password: string().required('Required'),
+  firstname: string().required('Required'),
+  lastname: string().required('Required'),
+  isAdult: boolean().required('Required'),
+})
+
+type Schema = InferType<typeof schema>
+
+const strenght = ref(0)
+
+const state = reactive({
+  mail: undefined,
+  password: undefined,
+  firstname: undefined,
+  lastname: undefined,
+  isAdult: false,
+})
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  // Do something with event.data
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UCard class="container mx-auto">
+    <h1 class="text-2xl uppercase">Rejoindre Paris est Ludique!</h1>
+    <p class="font-light">Pour rejoindre la Force orange de Paris est Ludique!, il est nécessaire de compléter le
+      formulaire ci-dessous:
+    </p>
+
+    <UForm :schema="schema" :state="state" @submit="onSubmit">
+      <UFormGroup label="Adresse courriel">
+        <UInput placeholder="Adresse courriel" name="mail" type="mail" v-model="state.mail" />
+      </UFormGroup>
+
+      <UFormGroup label="Password">
+        <UInput placeholder="Password" type="password" v-model="state.password" />
+      </UFormGroup>
+      <UMeter :value="strenght" :max="100">
+        <template #label="{ percent }">
+          <p class="text-sm font-thin">
+            le mot de passe est fort
+          </p>
+        </template>
+      </UMeter>
+
+      <div class="flex md:flex-row flex-col gap-4">
+        <UFormGroup label="Prénom" class="flex-1">
+          <UInput placeholder="Prénom" name="firstname" v-model="state.firstname" />
+        </UFormGroup>
+
+        <UFormGroup label="Nom de famille" class="flex-1">
+          <UInput placeholder="Nom de famille" name="lastname" v-model="state.lastname" />
+        </UFormGroup>
+      </div>
+
+      <UCheckbox name="isAdult" label="Je serais majeur avant la prochaine édition." v-model="state.isAdult" />
+
+      <UButton type="submit">S'inscrire</UButton>
+    </UForm>
+  </UCard>
+</template>

modules/app/pages/signin/index.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'Signin',
+})
+
+const state = reactive({
+  mail: undefined,
+  password: undefined,
+})
+</script>
+
+<template>
+
+  <UCard>
+    <h1 class="text-2xl uppercase">Qui êtes-vous ?</h1>
+
+    <UForm :state="state">
+      <UFormGroup label="Adresse courriel">
+        <UInput name="mail" v-model="state.mail" />
+      </UFormGroup>
+
+      <UFormGroup label="Mot de passe">
+        <UInput type="password" name="password" v-model="state.password" />
+      </UFormGroup>
+
+      <UButton type="submit">Se Connecter</UButton>
+      <UButton to="/join">Mot de passe oublié ?</UButton>
+    </UForm>
+
+    <!-- <p class="text-error">Nous n’avons pas reconnu vos identifiants.</p> -->
+
+    <p>ou bien</p>
+
+    <div>
+      <UButton>Se connecter avec Google</UButton>
+      <UButton>Se connecter avec Discord</UButton>
+    </div>
+  </UCard>
+</template>

modules/app/tailwind.config.ts

@@ -0,0 +1 @@
+export { default } from '@pel/shared/tailwind.config'

modules/shared/.env.example

@@ -0,0 +1 @@
+NUXT_UI_PRO_LICENSE=

modules/shared/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

modules/shared/.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true

modules/shared/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

modules/shared/app.config.ts

@@ -0,0 +1,36 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'orange',
+    button: {
+      default: {
+        color: 'primary',
+      },
+    },
+    input: {
+      placeholder: 'placeholder-transparent',
+      default: {
+        size: 'md',
+        color: 'primary',
+        variant: 'none'
+      },
+    },
+    formGroup: {
+      wrapper: 'flex flex-col md:flex-row rounded-lg py-1 px-4 border-b-2 border-orange-500',
+      inner: 'flex-2 content-center',
+      container: 'flex-1 mt-auto',
+      label: {
+        base: 'font-thin'
+      },
+      default: {
+        size: 'md',
+      },
+    },
+    card: {
+      rounded: 'rounded-3xl',
+      shadow: 'shadow-lg',
+    },
+    header: {
+      rounded: 'rounded-xl',
+    }
+  },
+})

modules/shared/app.vue

@@ -0,0 +1,3 @@
+<template>
+  Hello PEL
+</template>

modules/shared/eslint.config.js

@@ -0,0 +1,8 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    // unocss: true,
+    formatters: true,
+  },
+)

modules/shared/nuxt.config.ts

@@ -0,0 +1,60 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-09-11',
+
+  devtools: { enabled: true },
+
+  extends: ['@nuxt/ui-pro'],
+
+  modules: [
+    '@vueuse/nuxt',
+    '@pinia/nuxt',
+    // '@nuxt/icon', // installed with nuxt-ui
+    '@nuxt/fonts',
+    '@nuxt/ui',
+  ],
+
+  app: {
+    head: {
+      viewport: 'width=device-width,initial-scale=1',
+      link: [
+        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+      ],
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: 'Avent 2023' },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+      ],
+    },
+  },
+
+  components: [
+    {
+      path: join(currentDir, './components'),
+      pathPrefix: false,
+    },
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
+
+  fonts: {
+    families: [
+      {
+        name: 'Grobold',
+        src: '/fonts/GROBOLD.woff2',
+      },
+      {
+        name: 'Londrina Solid',
+        provider: 'google',
+        weights: [200, 300, 400, 700],
+      }
+    ],
+  },
+})

modules/shared/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@pel/shared",
+  "type": "module",
+  "private": true,
+  "packageManager": "pnpm@9.9.0",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "components/",
+    "composales/",
+    "nuxt.config.ts",
+    "tailwind.config.ts"
+  ],
+  "scripts": {
+    "dev": "nuxt dev .playground --port 3042",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "postinstall": "nuxt prepare .playground",
+    "lint": "eslint .",
+    "up": "taze major -I"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^3.0.0",
+    "@iconify-json/mdi": "^1.2.0",
+    "@nuxt/devtools": "^1.4.1",
+    "@nuxt/fonts": "^0.7.2",
+    "@nuxt/ui-pro": "^1.4.2",
+    "@pinia/nuxt": "^0.5.4",
+    "@vueuse/core": "^11.0.3",
+    "@vueuse/nuxt": "^11.0.3",
+    "eslint": "^9.9.1",
+    "eslint-plugin-format": "^0.1.2",
+    "nuxt": "^3.12.4"
+  }
+}

modules/shared/tailwind.config.ts

@@ -0,0 +1,37 @@
+import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      fontFamily: {
+        logo: ['Grobold'],
+        sans: ['Londrina Solid', 'DM Sans', ...defaultTheme.fontFamily.sans]
+      },
+      colors: {
+        'orange': {
+          '50': '#fffbec',
+          '100': '#fff6d3',
+          '200': '#ffe9a5',
+          '300': '#ffd76d',
+          '400': '#ffba32',
+          '500': '#ffa20a',
+          '600': '#ff8a00',
+          '700': '#cc6502',
+          '800': '#a14e0b',
+          '900': '#82410c',
+          '950': '#461f04',
+        },
+        'black': {
+          '500': '#303030',
+        }
+      },
+      fontSize: {
+        'hlogo': '45px',
+      },
+      boxShadow: {
+        'input-orange': 'inset 0 0 0 1px #ffa20a',
+      },
+    }
+  }
+}

modules/shared/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.playground/.nuxt/tsconfig.json"
+}

package.json

@@ -1,10 +1,9 @@
 {
   "name": "force-orange",
   "version": "1.0.0",
-  "main": "index.js",
   "keywords": [],
   "license": "ISC",
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
   "description": "Site des bénévoles de Paris Est Ludique",
   "author": "ChatonDeAru <https://github.com/chatondearu>",
   "scripts": {