Merge pull request #571 from dnum-mi/docs/add-link-to-discord

laruiss · web-flow · commit f165d6696bab · 2023-07-17T13:25:53.000+02:00
docs: 📝 ajoute un lien d’invitation sur le serveur Discord
diff --git a/.storybook/theme.css b/.storybook/theme.css
@@ -5,6 +5,7 @@
   --link-blank-content: "";
   text-decoration: none;
   background-image: none;
+  font-weight: bold;
 }
 
 .sbdocs-a:hover {
@@ -16,6 +17,16 @@
   box-shadow: none;
 }
 
+a[href] {
+  background-image: none;
+}
+
+.fr-btn p {
+  color: #fff;
+  font-family: Marianne,arial,sans-serif;
+  font-size: 1em;
+}
+
 [data-fr-theme="dark"] .docs-story {
   background-color: var(--background-default-grey);
 }
diff --git a/src/stories/docs/01-intro.stories.mdx b/src/stories/docs/01-intro.stories.mdx
@@ -5,20 +5,30 @@ import MailIcon from './mail-fill.svg'
 
 <Meta title="Docs/1. Introduction" />
 
-# Qu'est-ce que VueDsfr
+## Qu'est-ce que VueDsfr
 
 VueDsfr est un **portage** du [**Système de design français**](https://www.systeme-de-design.gouv.fr/)
 en [**Vue 3**](https://v3.vuejs.org/) sous forme de **bibliothèque de composants**.
 
 Le code est [ouvert et disponible sur <img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} /> GitHub](https://github.com/dnum-mi/vue-dsfr)
 
-# Comment débuter
+## Comment débuter
 
 Pour commencer à l’utiliser, [c’est par ici !](/story/docs-2-guide-d-utilisation--page)
 
 Pour **migrer vers la version 3.x, [c’est par ici !](/docs/docs-4-migrations--docs)**
 
-# Les acteurs du projet
+## Rejoindre le serveur Discord
+
+Si vous souhaitez participer au projet, poser une question, émettre une critique (ou nous faire des éloges, elles seront bienvenues aussi), nous vous invitons à rejoindre le serveur Discord grâce à ce lien d’invitation :
+
+<div style={{'text-align': 'center'}}>
+  <a href="https://discord.gg/jbBJ9769ZZ" className="fr-btn">
+    Rejoindre le serveur Discord
+  </a>
+</div>
+
+## Les acteurs du projet
 
 - **Clément Debroize** [<img src={MailIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](mailto:clement.debroize@interieur.gouv.fr) [<img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](https://github.com/DaBadBunny)
 - **Pierre-Louis Egaud** [<img src={MailIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](mailto:pierre-louis.egaud@interieur.gouv.fr) [<img src={GithubIcon} style={{height: '1.25rem', 'position': 'relative', top: '0.25rem' }} />](https://github.com/plegaud)
@@ -32,14 +42,14 @@ Le projet a pu bénéficier des retours et de contributions de
 
 Merci à vous !
 
-# Pourquoi VueDsfr
+## Pourquoi VueDsfr
 
 Le Bureau des ressources et réalisations (BRR) a choisi sa stack technique pour le front, et elle inclut
 Vue 3. Le Système de design français (DSFR) est développé en JavaScript natif et en SCSS (SASS).
 
 Le BRR a donc besoin d'un portage en Vue 3 de ce DSFR pour ses futurs projets qui devront le respecter.
 
-# VueDsfr en quelques mots
+## VueDsfr en quelques mots
 
 Ce projet de bibliothèque de composants
 
diff --git a/src/stories/docs/02-guide.stories.mdx b/src/stories/docs/02-guide.stories.mdx
@@ -2,12 +2,14 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs/2. Guide d’utilisation" />
 
-# Comment débuter
+# Utiliser VueDsfr
+
+## Comment débuter
 
 Ceci est le guide d̛’utilisation de la bibliothèque. Si vous cherchez à contribuer, se référer au
 [Guide du développeur](?path=/story/docs-guide-du-développeur--page).
 
-## Utiliser create-vue-dsfr (recommandé)
+### Utiliser create-vue-dsfr (recommandé)
 
 La façon la plus simple de commencer un projet est d’utiliser le package `create-vue-dsfr`, qui permet de créer un projet
 NPM avec tout le nécessaire pour développer un projet utilisant VueDsfr, que ce soit pour Vite (Vue3) ou pour Nuxt 3 (Nuxt3),
@@ -33,26 +35,26 @@ yarn create vue-dsfr
 
 Et suivez le guide !
 
-## Ajouter la bibliothèque
+### Ajouter la bibliothèque
 
-### Utiliser la bibliothèque en tant que plugin
+#### Utiliser la bibliothèque en tant que plugin
 
 | Notes :              |
 |:---------------------------|
 | Pour utiliser cette bibliothèque, il vous faudra **[Vue 3](https://v3.vuejs.org/)** (et **[Vue-Router 4](https://next.router.vuejs.org/)**). Par conséquent, si vous utilisez Nuxt, il vous faut **[Nuxt 3](https://v3.nuxtjs.org/)** (plus de détails plus loin). |
 | Il est fortement conseillé d’utiliser **[Vite](https://vitejs.dev)** plutôt que Vue-CLI. |
 
-### Installer la bibliothèque en tant que dépendance du projet
+#### Installer la bibliothèque en tant que dépendance du projet
 
 Afin d'installer la bibliothèque, taper cette commande dans votre console au sein du répertoire du projet :
 
 ```shell
 npm install @gouvminint/vue-dsfr
 ```
 
-### Ajouter le plugin
+#### Ajouter le plugin
 
-#### Dans une application Vite (recommandé) ou Vue-CLI
+##### Dans une application Vite (recommandé) ou Vue-CLI
 
 À partir d'un fichier `main.js` simple comme celui-ci :
 
@@ -80,7 +82,7 @@ const app = createApp(App)
   .mount('#app')
 ```
 
-#### Dans nuxt 3
+##### Dans nuxt 3
 
 La bibliothèque VueDsfr fournit bien plusieurs build (esm et umd entre autres) et Nuxt3 sait lequel choisir.
 
@@ -140,21 +142,21 @@ const app = createApp(App)
   .mount('#app')
 ```
 
-## Utiliser les icônes officielles
+### Utiliser les icônes officielles
 
 Pour utiliser les icônes officielles, désormais, il n’y a plus d’actions en plus à faire,
 puisque c’est le CSS officiel du DSFR qui est utilisé.
 
-## Ajouter des icônes
+### Ajouter des icônes
 
 Pour ajouter des icônes qui ne sont pas importées dans la bibliothèque, veuillez consulter
 [la page dédiée](/story/fondamentaux-4-1-icônes-personnalisées--page).
 
-## Avoir un bundle minimal
+### Avoir un bundle minimal
 
 Il est possible d’intégrer moins de CSS pour les petits projets.
 
-### Vue3
+#### Vue3
 
 Dans le point d’entrée de votre application Vue (souvent `main.js` ou `main.ts`) :
 
@@ -168,7 +170,7 @@ import '@gouvfr/dsfr/dist/scheme/scheme.min.css'             // Facultatif : S
 import '@gouvfr/dsfr/dist/utility/icons/icons.min.css'       // Facultatif : Si des icônes sont utilisées avec les classes "fr-icon-..."
 ```
 
-### Nuxt3
+#### Nuxt3
 
 Dans `nuxt.config.js` :
 
diff --git a/src/stories/docs/03-dev.stories.mdx b/src/stories/docs/03-dev.stories.mdx
@@ -2,25 +2,25 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Docs/3. Guide du développeur" />
 
-# Comment contribuer
+## 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
+### 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
+### Cloner le projet
 
 ```shell
 git clone https://github.com/dnum-mi/vue-dsfr
 ```
 
-## Installer le projet
+### Installer le projet
 
 Se positionner à la racine du projet, puis lancer la commande
 ```shell
@@ -32,13 +32,12 @@ Si le paquet cypress n'arrive pas à se télécharger lors de la précédente co
 CYPRESS_INSTALL_BINARY=/chemin/vers/cypress/cypress.zip npm install
 ```
 
-
-## Pré-requis
+### Pré-requis
 
 - npm : version 8 minimum
 - Node.js : version 18 minimum
 
-### Installation des pré-requis (testé sous Ubuntu 22.04)
+#### Installation des pré-requis (testé sous Ubuntu 22.04)
 
 Suivez la procédure suivante en lançant les commandes détaillées ci-dessous :
 
@@ -84,13 +83,14 @@ node --version
 
 Vous devriez voir 18.x.x
 
-## Comment contribuer au projet
+### 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
+### À 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.
