Merge pull request #12 from laruiss/feat/add-more-installation-options

feat: ✨ ajoute plus d’options d’installations

index.js

@@ -18,7 +18,8 @@ const {
   lightGreen,
   red,
   gray,
-  lightGray,
+  lightBlue,
+  magenta,
 } = require('kolorist')
 
 const cwd = process.cwd()
@@ -29,27 +30,32 @@ const FRAMEWORKS = [
     color: lightGreen,
     variants: [
       {
-        name: 'vue3',
-        display: 'JavaScript',
+        name: 'vue3-ts-simple',
+        display: ' Vue3, TS, ESlint, VueDsfr, Autoimport',
         color: yellow
       },
       {
-        name: 'vue3-ts',
-        display: 'TypeScript',
-        color: blue
-      }
-    ]
+        name: 'vue3-ts-complet',
+        display:  'Vue3, TS, ESLint, VueDsfr, Autoimport, Pinia, PWA, Prettier, Vitest, Cypress',
+        color: magenta
+      },
+    ],
   },
   {
     name: 'Nuxt 3',
     color: green,
     variants: [
       {
-        name: 'nuxt3-ts',
-        display: 'TypeScript',
+        name: 'nuxt3-ts-simple',
+        display: ' Nuxt3, TS, ESLint',
+        color: lightBlue
+      },
+      {
+        name: 'nuxt3-ts-complet',
+        display: 'Nuxt3, TS, ESLint, Vitest, Cypress',
         color: blue
-      }
-    ]
+      },
+    ],
   },
 ]
 
@@ -127,13 +133,13 @@ async function init() {
           type: (framework) =>
             framework && framework.variants ? 'select' : null,
           name: 'variant',
-          message: 'Select a variant:',
+          message: 'Faites votre choix :',
           // @ts-ignore
           choices: (framework) =>
             framework.variants.map((variant) => {
               const variantColor = variant.color
               return {
-                title: variantColor(variant.name),
+                title: variantColor(variant.name) + gray(` ${variant.display}`),
                 value: variant.name
               }
             })

template-nuxt3-ts/README.md → template-nuxt3-ts-complet/README.md

@@ -6,29 +6,69 @@ et la [documentation de VueDsfr](https://vue-dsfr.netlify.app).
 ## Installation des dépendances
 
 ```bash
+# npm
 npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
 ```
 
 ## Lancer nuxt en mode développement
 
 Démarre le serveur sur `http://localhost:3000`·:
 
 ```bash
+# npm
 npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
 ```
 
 ## Générer le code de production
 
-Génère le code de production de l’application :
+Génère le code de production de l’application :
 
 ```bash
+# npm
 npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
 ```
 
-Prévisualisation du code de prod (nécessite un build préalable) :
+Prévisualisation du code de prod (nécessite un build préalable) :
 
 ```bash
+# npm
 npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
 ```
 
 ## Lancer les tests avec vitest

template-nuxt3-ts-complet/client/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

template-nuxt3-ts-complet/client/error.vue

@@ -0,0 +1,115 @@
+<template>
+  <NuxtLayout>
+    <main
+      id="content"
+      role="main"
+    >
+      <div class="fr-container">
+        <div
+          class="fr-my-7w fr-mt-md-12w fr-mb-md-10w fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-grid-row--center"
+        >
+          <div
+            class="fr-py-0 fr-col-12 fr-col-md-6"
+          >
+            <template v-if="error?.statusCode === 404">
+              <h1>Page non trouvée</h1>
+              <p class="fr-text--sm fr-mb-3w">
+                Erreur 404
+              </p>
+              <p class="fr-text--lead fr-mb-3w">
+                La page que vous cherchez est introuvable. Excusez-nous pour la gène occasionnée.
+              </p>
+              <p class="fr-text--sm fr-mb-5w">
+                Si vous avez tapé l'adresse web dans le navigateur, vérifiez qu'elle est correcte. La page n’est peut-être plus disponible.
+                <br>Dans ce cas, pour continuer votre visite vous pouvez consulter notre page d’accueil, ou effectuer une recherche avec notre moteur de recherche en haut de page.
+                <br>Sinon contactez-nous pour que l’on puisse vous rediriger vers la bonne information.
+              </p>
+            </template>
+            <template v-else-if="error?.statusCode === 500">
+              <h1>Erreur inattendue</h1>
+              <p class="fr-text--sm fr-mb-3w">
+                Erreur 500
+              </p>
+              <p class="fr-text--lead fr-mb-3w">
+                Essayez de rafraîchir la page ou bien réessayez plus tard.
+              </p>
+              <p class="fr-text--sm fr-mb-5w">
+                Désolé, le service rencontre un problème, nous travaillons pour le résoudre le plus rapidement possible.
+              </p>
+            </template>
+            <template v-else>
+              <h1 class="fr-h1">
+                Service indisponible
+              </h1>
+              <p class="fr-text--xl">
+                Le service [Nom du site] rencontre un problème, nous travaillons pour le résoudre le plus rapidement possible.
+              </p>
+              <p class="fr-text--sm">
+                Merci de réessayer plus tard ou de vous rendre sur nos réseaux sociaux, vous serez bientôt en mesure de réutiliser le service.
+              </p>
+            </template>
+            <ul class="fr-btns-group fr-btns-group--inline-md">
+              <li>
+                <NuxtLink
+                  to="/"
+                  class="fr-btn"
+                >
+                  Page d'accueil
+                </NuxtLink>
+              </li>
+              <li>
+                <a
+                  class="fr-btn fr-btn--secondary"
+                  href="#"
+                >
+                  Contactez-nous
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div
+            class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="fr-responsive-img fr-artwork"
+              aria-hidden="true"
+              width="160"
+              height="200"
+              viewBox="0 0 160 200"
+            >
+              <use
+                class="fr-artwork-motif"
+                href="/artworks/ovoid.svg#artwork-motif"
+              />
+              <use
+                class="fr-artwork-background"
+                href="/artworks/ovoid.svg#artwork-background"
+              />
+              <g transform="translate(40, 60)">
+                <use
+                  class="fr-artwork-decorative"
+                  href="/artworks/technical-error.svg#artwork-decorative"
+                />
+                <use
+                  class="fr-artwork-minor"
+                  href="/artworks/technical-error.svg#artwork-minor"
+                />
+                <use
+                  class="fr-artwork-major"
+                  href="/artworks/technical-error.svg#artwork-major"
+                />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </main>
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  error: Object,
+})
+</script>

template-nuxt3-ts-complet/client/icons.ts

@@ -0,0 +1,6 @@
+export {
+  RiCloseLine,
+  RiFlagLine,
+  RiHome2Line,
+  RiRefreshLine,
+} from 'oh-vue-icons/icons'

template-nuxt3-ts-complet/client/layouts/default.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { DsfrFooter, DsfrHeader, DsfrSkipLinks } from '@gouvminint/vue-dsfr'
+
+const serviceTitle = 'Service'
+const serviceDescription = 'Description du service'
+const logoText = ['Ministère', 'de l’Intérieur', 'et des Outre-Mer']
+
+const quickLinks = [
+  {
+    label: 'Accueil',
+    to: '/',
+    icon: 'ri-home-2-line',
+  },
+  {
+    label: 'À propos',
+    to: '/apropos',
+    icon: 'ri-flag-line',
+  },
+]
+
+const skipLinks = [
+  {
+    id: 'content',
+    text: 'Accéder au contenu',
+  },
+  {
+    id: 'footer',
+    text: 'Accéder au pied de page',
+  },
+]
+</script>
+
+<template>
+  <DsfrSkipLinks :links="skipLinks" />
+  <DsfrHeader
+    :service-title="serviceTitle"
+    :service-description="serviceDescription"
+    :logo-text="logoText"
+    :quick-links="quickLinks"
+  />
+  <main
+    id="content"
+    role="main"
+    class="fr-container"
+    tabindex="0"
+  >
+    <slot />
+  </main>
+  <DsfrFooter
+    id="footer"
+    tabindex="0"
+  />
+</template>

template-vue3-ts/src/views/AppHome.vue → template-nuxt3-ts-complet/client/pages/a11y.vue

@@ -1,3 +1,3 @@
 <template>
-  <h1>Accueil</h1>
+  <h1>Page A11y</h1>
 </template>

template-nuxt3-ts/client/pages/apropos.vue → template-nuxt3-ts-complet/client/pages/apropos.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: 'basic',
+  layout: 'default',
 })
 </script>
 

template-nuxt3-ts-complet/client/pages/cookies.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Page Cookies</h1>
+</template>

template-nuxt3-ts-complet/client/pages/donnees-personnelles.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Page données personnelles</h1>
+</template>

template-nuxt3-ts-complet/client/pages/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default',
+})
+
+useHead({ title: 'Page d’accueil - Gabarit de démarrage VueDsfr' })
+</script>
+
+<template>
+  <div class="fr-container fr-mb-5w">
+    <h1 class="fr-mt-3w fr-mt-md-5w fr-mb-5w">
+      Accueil
+    </h1>
+
+    <NuxtLink to="/apropos">
+      À propos <span class="fr-icon-ancient-gate-fill" />
+    </NuxtLink>
+  </div>
+</template>

template-nuxt3-ts-complet/client/pages/mentions-legales.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Page mentions légales</h1>
+</template>

template-nuxt3-ts-complet/client/plugins/vue-dsfr.ts

@@ -0,0 +1,11 @@
+import { addIcons, OhVueIcon } from 'oh-vue-icons'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+import * as icons from '../icons'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('VIcon', OhVueIcon)
+  nuxtApp.vueApp.component('OhVueIcon', OhVueIcon)
+  addIcons(...Object.values(icons))
+  import('@gouvfr/dsfr/dist/utility/icons/icons.min.css') // Pose problème en SSR si importé dans nuxt.config.ts
+})