From bd8dc712d87585fe7136883c30eabf906328ed9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= Date: Mon, 17 Jul 2023 13:17:14 +0200 Subject: [PATCH] =?UTF-8?q?docs:=20:memo:=20ajoute=20un=20lien=20d?= =?UTF-8?q?=E2=80=99invitation=20sur=20le=20serveur=20Discord?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/theme.css | 11 +++++++++++ src/stories/docs/01-intro.stories.mdx | 20 ++++++++++++++----- src/stories/docs/02-guide.stories.mdx | 28 ++++++++++++++------------- src/stories/docs/03-dev.stories.mdx | 18 ++++++++--------- 4 files changed, 50 insertions(+), 27 deletions(-) diff --git a/.storybook/theme.css b/.storybook/theme.css index 4b8496ac..0a16f930 100644 --- 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 index 03a9cdd4..e28e472b 100644 --- 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' -# 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 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 : + +
+ + Rejoindre le serveur Discord + +
+ +## Les acteurs du projet - **Clément Debroize** [](mailto:clement.debroize@interieur.gouv.fr) [](https://github.com/DaBadBunny) - **Pierre-Louis Egaud** [](mailto:pierre-louis.egaud@interieur.gouv.fr) [](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 index 1519e369..a0735f7d 100644 --- 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'; -# 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,16 +35,16 @@ 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 : @@ -50,9 +52,9 @@ Afin d'installer la bibliothèque, taper cette commande dans votre console au se 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 index b03f5dca..9e2b6ad1 100644 --- 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'; -# 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.