Merge pull request #13 from laruiss/develop

Develop

.github/workflows/release-please.yml

@@ -0,0 +1,36 @@
+name: Release Please
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Release Please
+        id: release
+        uses: google-github-actions/release-please-action@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          release-type: node
+          target-branch: main
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm ci
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.release_created }}

index.js

@@ -18,7 +18,8 @@ const {
   lightGreen,
   red,
   gray,
-  lightGray,
+  lightBlue,
+  magenta,
 } = require('kolorist')
 
 const cwd = process.cwd()
@@ -29,32 +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',
-        display: 'JavaScript',
-        color: yellow
+        name: 'nuxt3-ts-simple',
+        display: ' Nuxt3, TS, ESLint',
+        color: lightBlue
       },
       {
-        name: 'nuxt3-ts',
-        display: 'TypeScript',
+        name: 'nuxt3-ts-complet',
+        display: 'Nuxt3, TS, ESLint, Vitest, Cypress',
         color: blue
-      }
-    ]
+      },
+    ],
   },
 ]
 
@@ -132,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-complet/README.md

@@ -0,0 +1,100 @@
+# Gabarit de démarrage de VueDsfr pour Nuxt 3
+
+Nous vous recommandons de regarder la [documentation de Nuxt 3](https://nuxt.com/docs/getting-started/introduction)
+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 :
+
+```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) :
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+## Lancer les tests avec vitest
+
+Vitest est déjà configuré pour vos tests.
+
+Pour les lancer :
+
+```bash
+npm run test:unit
+```
+
+## Lancer les tests de bout-en-bout avec Cypress
+
+Cypress est déjà configuré pour vos tests de bout-en-bout (end-to-end).
+
+Pour les lancer avec l’interface :
+
+```bash
+npm run test:e2e
+```
+
+Pour les lancer sans l’interface (dans la CI) :
+
+```bash
+npm run test:e2e:ci
+```
+
+Regarder ensuite la [documentation de Nuxt concernant le déploiement](https://nuxt.com/docs/getting-started/deployment).

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>