docs: 📝 réorganise la doc et vers la nouvelle doc

Author: laruiss

.vitepress/config.ts

@@ -86,13 +86,20 @@ export default defineConfig({
     },
     logo: '/nouveau-logo-marianne-gouvernement.png',
     nav: [
-      { text: 'Guide', link: '/pour-commencer' },
+      {
+        text: 'Guide',
+        link: '/guide/pour-commencer',
+        items: [
+          { text: 'Tous les composants', link: '/composants' },
+          { text: 'Tous les types', link: '/types' }
+        ],
+      },
       {
         text: 'Références',
         items: [
           { text: 'Tous les composants', link: '/composants' },
           { text: 'Tous les types', link: '/types' }
-        ]
+        ],
       },
       {
         text: 'Liens',
@@ -107,8 +114,8 @@ export default defineConfig({
             link: 'https://vue-ds.fr/',
             target: '_blank'
           },
-        ]
-      }
+        ],
+      },
     ],
     outline:{
       level: [2, 3],
@@ -131,44 +138,48 @@ export default defineConfig({
               selectText: 'aller à ce texte',
               navigateText: 'naviguer dans les résultats',
               closeText: 'fermer'
-            }
-      }
+            },
+          },
         },
       }
     },
     sidebar: {
       '/composants': composants,
       '/': [
         {
-          text: 'Introduction',
+          text: 'Guide',
           items: [
+            {
+              text: 'Introduction',
+              link: '/guide/',
+            },
             {
               text: 'Commencer',
-              link: '/pour-commencer',
+              link: '/guide/pour-commencer',
             },
             {
               text: 'L’écosystème',
-              link: '/ecosysteme',
+              link: '/guide/ecosysteme',
             },
             {
               text: 'Les icônes',
-              link: '/icones',
+              link: '/guide/icones',
             },
             {
               text: 'Guide du développeur',
-              link: '/guide-developpeur',
+              link: '/guide/guide-developpeur',
             },
           ]
         },
         {
           text: 'Tous les types',
           link: '/types',
-          items: []
+          items: [],
         },
         {
           text: 'Tous les composants',
           link: '/composants',
-          items: []
+          items: [],
         },
         {
           text: 'Recettes nuxt',
@@ -179,28 +190,28 @@ export default defineConfig({
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/dnum-mi/vue-dsfr' },
-      { icon: 'discord', link: 'https://discord.gg/jbBJ9769ZZ' }
+      { icon: 'discord', link: 'https://discord.gg/jbBJ9769ZZ' },
     ]
   },
 
   vite: {
     plugins: [
       whyframe({ defaultSrc: '/_frame', components: [{ name: 'Story' }] }),
       whyframeVue({ include: /\.(vue|md)$/ }),
-      hmrFix()
+      hmrFix(),
     ],
 
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('../src', import.meta.url)),
-      }
+      },
     },
 
     // not needed, just there to prevent reload on cold start
     optimizeDeps: {
       include: [
         '@vueuse/core',
-      ]
-    }
+      ],
+    },
   },
 })

.vitepress/theme/VIconLink.vue

@@ -5,16 +5,17 @@ withDefaults(defineProps<{
   href: string
   rel?: string
   target?: string
+  internal?: boolean
   icon?: string | InstanceType<typeof VIcon>['$props']
   iconLeft: string | InstanceType<typeof VIcon>['$props']
 }>(), {
-  rel: 'noreferrer',
+  rel: 'noopener noreferrer',
   target: '_blank',
 })
 </script>
 
 <template>
-  <a :href="href" :target="target" :rel="rel">
+  <a :href="href" :target="internal ? undefined : target" :rel="internal ? undefined : rel">
     <VIcon v-if="iconLeft" style="margin-right: 0.125rem;" v-bind="typeof iconLeft == 'object' ? iconLeft : { name: iconLeft }" />
     <slot />
     <VIcon v-if="icon" style="margin-left: 0.125rem;" v-bind="typeof icon == 'object' ? icon : { name: icon }" />

.vitepress/theme/icons.ts

@@ -1,5 +1,6 @@
 export {
   GiChocolateBar,
+  RiArrowDownLine,
   RiArrowDropDownLine,
   RiArrowDropUpLine,
   RiCloseLine,
@@ -8,6 +9,7 @@ export {
   SiDiscord,
   SiGithub,
   SiNpm,
+  SiNuxtdotjs,
   SiVisualstudiocode,
   ViFileTypeStorybook,
 } from 'oh-vue-icons/icons'

.vitepress/theme/style.css

@@ -3,6 +3,10 @@
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
+ html {
+  scroll-behavior: smooth;
+}
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */

docs/composants.md

@@ -1,5 +1,9 @@
 # Liste des composants
 
+La nouvelle documentation des composants est en cours d’écriture.
+
+Le storybook est toujours disponible [ici](https://vue-ds.fr)
+
 ## Accordéon
 
 - [DsfrAccordion](./composants/DsfrAccordion)

docs/guide-developpeur.md

@@ -2,10 +2,11 @@
 
 L’écosystème de VueDsfr, c’est :
 
-- La bibliothèque <VIconLink href="https://www.npmjs.com/package/@gouvminint/vue-dsfr" icon="si-npm">`@dnum-mi/vue-dsfr`</VIconLink> ;
-- L’assistant <VIconLink href="https://www.npmjs.com/package/create-vue-dsfr" icon="si-npm">`create-vue-dsfr` </VIconLink> ;
-- L’extension <VIconLink href="https://github.com/dnum-mi/vue-dsfr-snippets" icon="si-visualstudiocode">`vue-dsfr-snippets` pour VSCode </VIconLink> ;
-- Le <VIconLink href="https://discord.gg/jbBJ9769ZZ" icon="si-discord">serveur Discord</VIconLink>.
+- La bibliothèque <VIconLink internal href="#vuedsfr" icon="ri-arrow-down-line">`@dnum-mi/vue-dsfr`</VIconLink> ;
+- L’assistant <VIconLink internal href="#l-assistant-create-vue-dsfr" icon="ri-arrow-down-line">`create-vue-dsfr` </VIconLink> ;
+- Le module nuxt <VIcon name="si-nuxtdotjs" /> <VIconLink internal href="#le-module-nuxt-vue-dsfr-nuxt-module" icon="ri-arrow-down-line">`vue-dsfr-nuxt-module` </VIconLink> ;
+- L’extension <VIconLink internal href="#l-extension-vue-dsfr-snippets" icon="ri-arrow-down-line">`vue-dsfr-snippets` pour VSCode </VIconLink> ;
+- Le <VIconLink internal href="#le-serveur-discord" icon="ri-arrow-down-line">serveur Discord</VIconLink>.
 
 Vous trouverez plus de détails ci-dessous.
 
@@ -16,15 +17,11 @@ et son code source disponible sur <VIconLink href="https://github.com/dnum-mi/vu
 
 Elle permet de créer facilement des applications Vue qui respectent le DSFR.
 
-## Le storybook
-
 Le storybook avec tous les composants est disponible sur <https://vue-ds.fr>
 
-## Cette documentation
-
-Cette documentation faite avec [Vitepress](https://vitepress.dev/) et disponible sur <https://docs.vue-ds.fr> nous a paru plus lisible et accessible qu’un storybook pour un utilisateur de la bibliothèque. Elle est toute récence et encore très incomplète, et son organisation est fortement susceptible de changer en fonction, notamment, des premiers retours utilisateurs.
+Cette documentation faite avec [Vitepress](https://vitepress.dev/) et disponible sur <https://docs.vue-ds.fr> nous a paru plus lisible et accessible qu’un storybook pour un utilisateur de la bibliothèque. Elle est toute récente et encore très incomplète, et son organisation est fortement susceptible de changer (en fonction, notamment, des premiers retours utilisateurs).
 
-## L’assistant create-vue-dsfr
+## L’assistant `create-vue-dsfr`
 
 Cet assistant est aussi disponible sur <VIconLink href="https://www.npmjs.com/package/create-vue-dsfr" icon="si-npm">NPM</VIconLink>
 et son code source disponible sur <VIconLink href="https://github.com/laruiss/create-vue-dsfr" icon="si-github">GitHub</VIconLink>.
@@ -33,6 +30,15 @@ Il permet d’échaffauder très rapidement une application avec Vue3 et Vite ou
 
 Voir la page ["Commencer"](./pour-commencer.md#utiliser-create-vue-dsfr-fortement-recommande) pour son utilisation.
 
+## Le module nuxt `vue-dsfr-nuxt-module`
+
+Ce module est aussi disponible sur <VIconLink href="https://www.npmjs.com/package/vue-dsfr-nuxt-module" icon="si-npm">NPM</VIconLink>
+et son code source disponible sur <VIconLink href="https://github.com/laruiss/vue-dsfr-nuxt-module" icon="si-nuxtdotjs">GitHub</VIconLink>.
+
+Il permet d’utiliser facilement la bibliothèque VueDsfr dans <VIconLink href="https://nuxt.com" icon="si-nuxtdotjs">Nuxt 3</VIconLink>.
+
+Voir la page ["Commencer"](./pour-commencer.md#nuxt3) pour son utilisation.
+
 ## L’extension vue-dsfr-snippets
 
 Cette extension pour <VIconLink href="https://marketplace.visualstudio.com/items?itemName=stormier.vue-dsfr-snippets" icon="si-visualstudiocode">VSCode</VIconLink> permet de gagner du temps pour ajouter des composants dans la partie template d’un composant Vue3.

docs/ecosysteme.md docs/guide/ecosysteme.mddocs/ecosysteme.md renamed to docs/guide/ecosysteme.md

@@ -0,0 +1,100 @@
+# Guide du développeur
+
+## Comment contribuer
+
+Ceci est le guide du développeur pour contribuer au projet de cette bibliothèque.
+Si vous cherchez à utiliser cette bibliothèque, veuillez vous référer au
+[Guide d’utilisation](?path=/story/docs-guide-d-utilisation--page).
+
+### TL;DR
+
+Les commits doivent suivre la spécification des **[Commits Conventionnels](https://www.conventionalcommits.org/fr/v1.0.0/)**
+
+Une PR doit être faite avec une branche **à jour avec la branche `develop` en `rebase` (et sans `merge`) avant demande de fusion**,
+et **la fusion doit être demandée dans `develop`.**
+
+### Cloner le projet
+
+```shell
+git clone https://github.com/dnum-mi/vue-dsfr
+```
+
+### Installer le projet
+
+Se positionner à la racine du projet, puis lancer la commande
+
+```shell
+npm install
+```
+
+Si le paquet cypress n'arrive pas à se télécharger lors de la précédente commande, alors il faut télécharger le fichier cypress.zip manuellement sur le site cypress.io, et spécifier le fichier dans la variable CYPRESS_INSTALL_BINARY
+
+```shell
+CYPRESS_INSTALL_BINARY=/chemin/vers/cypress/cypress.zip npm install
+```
+
+### Pré-requis
+
+- npm : version 10 minimum
+- Node.js : version 20 minimum
+
+#### Installation des pré-requis (testé sous Ubuntu 22.04)
+
+Suivez la procédure suivante en lançant les commandes détaillées ci-dessous :
+
+1. Mise à jour des dépôts :
+
+```shell
+wget -qO- https://deb.nodesource.com/setup_18.x | sudo -E bash -
+```
+
+2. Installer `Node.js` :
+
+```shell
+sudo apt install -y nodejs
+```
+
+3. (Optionnel) Installer `volta` (Node Version Manager) :
+
+Avec la commande curl :
+
+```shell
+curl https://get.volta.sh | bash
+```
+
+5. Fermer et rouvrir un terminal, ou bien taper la commande suivante dans tous les terminaux déjà ouverts :
+
+```shell
+source ~/.bashrc
+```
+
+6. Vérifier la version de NVM installée :
+
+```shell
+volta --version
+```
+
+7. La version de node sera utilisée automatiquement
+
+Dans le dossier `vue-dsfr`, si vous lancer la commande suivante :
+
+```shell
+node --version
+```
+
+Vous devriez voir 20.x.x
+
+### Comment contribuer au projet
+
+- Cloner le projet et créer des [pull-request](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests)
+- Indiquer les bugs dans des [issues](https://github.com/dnum-mi/vue-dsfr/issues)
+- Faire des demandes dans [discussions](https://github.com/dnum-mi/vue-dsfr/discussions)
+- Rejoindre le [server Discord](https://discord.gg/jbBJ9769ZZ)
+
+### À propos des pull-requests
+
+Les commits doivent suivre la spécification des **[Commits Conventionnels](https://www.conventionalcommits.org/fr/v1.0.0/)** afin que
+l’outil de release automatique détecte les nouvelles fonctionnalités et les corrections d’anomalies.
+
+Les branches doivent être le plus possible **à jour avec la branche `develop` en `rebase` (et sans `merge`) avant demande de fusion**,
+et **la fusion doit être demandée dans `develop`.**

docs/guide/guide-developpeur.md

@@ -17,7 +17,7 @@ Ci-dessous un exemple :
   <IconesOfficielles />
 </Story>
 
-<<< docs-demo/IconesOfficielles.vue [Code de la démo]
+<<< ../docs-demo/IconesOfficielles.vue [Code de la démo]
 :::
 
 ##  Utiliser les icônes dans les composants de VueDsfr
@@ -40,15 +40,15 @@ Dans le cas où c’est une icône OhVueIcon qui est utilisée, il faut que cett
   <DemoIconesDansComposants />
 </Story>
 
-<<< docs-demo/DemoIconesDansComposants.vue [Code de la démo]
+<<< ../docs-demo/DemoIconesDansComposants.vue [Code de la démo]
 :::
 
 ## Les icônes déjà enregistrées dans VIcon (OhVueIcon) dans VueDsfr
 
 Voici la liste des icônes déjà enregistrées dans la bibliothèque VueDsfr :
 
 ::: code-group
-<<< ../src/icons.ts
+<<< ../../src/icons.ts
 :::
 
 ::: info
@@ -210,6 +210,6 @@ Le composant `VIcon` et tous les composants de VueDsfr sont désormais utilisabl
 avec toutes les icônes contenues dans le tableau `icons`.
 
 <script lang="ts" setup>
-import IconesOfficielles from './docs-demo/IconesOfficielles.vue'
-import DemoIconesDansComposants from './docs-demo/DemoIconesDansComposants.vue'
+import IconesOfficielles from '../docs-demo/IconesOfficielles.vue'
+import DemoIconesDansComposants from '../docs-demo/DemoIconesDansComposants.vue'
 </script>