Skip to content

Commit 8098dfa

Browse files
Adrylenlaruiss
Adrylen
authored and
laruiss
committed
docs(vitepress): Add first guide page with new sidebar and nav links
1 parent f3c2383 commit 8098dfa

File tree

6 files changed

+230
-107
lines changed

6 files changed

+230
-107
lines changed

‎.vitepress/config.ts‎

Lines changed: 108 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,65 @@ import { whyframe } from '@whyframe/core'
55
import { whyframeVue } from '@whyframe/vue'
66
import { hmrFix } from './plugins/hmrFix.js'
77

8+
const composants = [
9+
{
10+
text: 'DsfrAccordion',
11+
link: '/composants/DsfrAccordion.md',
12+
},
13+
{
14+
text: 'DsfrAlert',
15+
link: '/composants/DsfrAlert.md',
16+
},
17+
{
18+
text: 'DsfrBackToTop',
19+
link: '/composants/DsfrBackToTop.md',
20+
},
21+
{
22+
text: 'DsfrBadge',
23+
link: '/composants/DsfrBadge.md',
24+
},
25+
{
26+
text: 'DsfrBreadcrumb',
27+
link: '/composants/DsfrBreadcrumb.md',
28+
},
29+
{
30+
text: 'DsfrButton',
31+
link: '/composants/DsfrButton.md',
32+
},
33+
{
34+
text: 'DsfrButtonGroup',
35+
link: '/composants/DsfrButtonGroup.md',
36+
},
37+
{
38+
text: 'DsfrCard',
39+
link: '/composants/DsfrCard.md',
40+
},
41+
{
42+
text: 'DsfrRange',
43+
link: '/composants/DsfrRange.md',
44+
},
45+
{
46+
text: 'DsfrNotice',
47+
link: '/composants/DsfrNotice.md',
48+
},
49+
{
50+
text: 'DsfrSegmented',
51+
link: '/composants/DsfrSegmented.md',
52+
},
53+
{
54+
text: 'DsfrSegmentedSet',
55+
link: '/composants/DsfrSegmentedSet.md',
56+
},
57+
{
58+
text: 'DsfrTag',
59+
link: '/composants/DsfrTag.md',
60+
},
61+
{
62+
text: 'DsfrTooltip',
63+
link: '/composants/DsfrTooltip.md',
64+
},
65+
]
66+
867
// https://vitepress.dev/reference/site-config
968
export default defineConfig({
1069
title: "VueDsfr",
@@ -27,12 +86,12 @@ export default defineConfig({
2786
},
2887
logo: '/nouveau-logo-marianne-gouvernement.png',
2988
nav: [
30-
{ text: 'Home', link: '/' },
89+
{ text: 'Guide', link: '/pour-commencer' },
3190
{
3291
text: 'Références',
3392
items: [
34-
{ text: 'Composants', link: '/composants' },
35-
{ text: 'Nuxt 3', link: '/nuxt/' }
93+
{ text: 'Tous les composants', link: '/composants' },
94+
{ text: 'Tous les types', link: '/types' }
3695
]
3796
},
3897
{
@@ -42,7 +101,12 @@ export default defineConfig({
42101
text: 'Système de Design Français',
43102
link: 'https://www.systeme-de-design.gouv.fr/',
44103
target: '_blank'
45-
}
104+
},
105+
{
106+
text: 'Storybook de VueDsfr',
107+
link: 'https://vue-ds.fr/',
108+
target: '_blank'
109+
},
46110
]
47111
}
48112
],
@@ -72,102 +136,46 @@ export default defineConfig({
72136
},
73137
}
74138
},
75-
sidebar: [
76-
{
77-
text: 'Pour commencer',
78-
collapsed: false,
79-
items: [
80-
{
81-
text: 'Commencer',
82-
link: '/pour-commencer',
83-
},
84-
{
85-
text: 'L’écosystème',
86-
link: '/ecosysteme',
87-
},
88-
{
89-
text: 'Les icônes',
90-
link: '/icones',
91-
},
92-
{
93-
text: 'Guide du développeur',
94-
link: '/guide-developpeur',
95-
},
96-
]
97-
},
98-
{
99-
text: 'Tous les types',
100-
link: '/types',
101-
items: []
102-
},
103-
{
104-
text: 'Tous les composants',
105-
link: '/composants',
106-
collapsed: false,
107-
items: [
108-
{
109-
text: 'DsfrAccordion',
110-
link: '/composants/DsfrAccordion.md',
111-
},
112-
{
113-
text: 'DsfrAlert',
114-
link: '/composants/DsfrAlert.md',
115-
},
116-
{
117-
text: 'DsfrBackToTop',
118-
link: '/composants/DsfrBackToTop.md',
119-
},
120-
{
121-
text: 'DsfrBadge',
122-
link: '/composants/DsfrBadge.md',
123-
},
124-
{
125-
text: 'DsfrBreadcrumb',
126-
link: '/composants/DsfrBreadcrumb.md',
127-
},
128-
{
129-
text: 'DsfrButton',
130-
link: '/composants/DsfrButton.md',
131-
},
132-
{
133-
text: 'DsfrButtonGroup',
134-
link: '/composants/DsfrButtonGroup.md',
135-
},
136-
{
137-
text: 'DsfrCard',
138-
link: '/composants/DsfrCard.md',
139-
},
140-
{
141-
text: 'DsfrRange',
142-
link: '/composants/DsfrRange.md',
143-
},
144-
{
145-
text: 'DsfrNotice',
146-
link: '/composants/DsfrNotice.md',
147-
},
148-
{
149-
text: 'DsfrSegmented',
150-
link: '/composants/DsfrSegmented.md',
151-
},
152-
{
153-
text: 'DsfrSegmentedSet',
154-
link: '/composants/DsfrSegmentedSet.md',
155-
},
156-
{
157-
text: 'DsfrTag',
158-
link: '/composants/DsfrTag.md',
159-
},
160-
{
161-
text: 'DsfrTooltip',
162-
link: '/composants/DsfrTooltip.md',
163-
},
164-
]
165-
},
166-
{
167-
text: 'Recettes nuxt',
168-
link: '/nuxt/',
169-
},
170-
],
139+
sidebar: {
140+
'/composants': composants,
141+
'/': [
142+
{
143+
text: 'Introduction',
144+
items: [
145+
{
146+
text: 'Commencer',
147+
link: '/pour-commencer',
148+
},
149+
{
150+
text: 'L’écosystème',
151+
link: '/ecosysteme',
152+
},
153+
{
154+
text: 'Les icônes',
155+
link: '/icones',
156+
},
157+
{
158+
text: 'Guide du développeur',
159+
link: '/guide-developpeur',
160+
},
161+
]
162+
},
163+
{
164+
text: 'Tous les types',
165+
link: '/types',
166+
items: []
167+
},
168+
{
169+
text: 'Tous les composants',
170+
link: '/composants',
171+
items: []
172+
},
173+
{
174+
text: 'Recettes nuxt',
175+
link: '/nuxt/',
176+
},
177+
],
178+
},
171179

172180
socialLinks: [
173181
{ icon: 'github', link: 'https://github.com/dnum-mi/vue-dsfr' },

‎.vitepress/theme/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,3 +202,7 @@
202202
.flex-end {
203203
justify-content: flex-end;
204204
}
205+
206+
.flex-wrap {
207+
flex-wrap: wrap;
208+
}

‎docs/docs-demo/DemoIconesDansComposants.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<template>
2-
<div class="fr-p-2w flex gap-4">
2+
<div class="fr-p-2w flex gap-4 flex-wrap">
3+
<DsfrButton icon="fr-icon-close-line">
4+
Texte avec icône Dsfr
5+
</DsfrButton>
6+
37
<DsfrButton icon="ri-close-line">
4-
Texte avec icône
8+
Texte avec icône OhVueIcon
59
</DsfrButton>
610

711
<DsfrButton
812
:icon="{name: 'ri-close-line', fill: 'purple'}"
913
secondary
1014
>
11-
Texte avec icône violette
15+
Texte avec icône
16+
OhVueIcon violette
1217
</DsfrButton>
1318
</div>
1419
</template>

‎docs/ecosysteme.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ Cette documentation faite avec [Vitepress](https://vitepress.dev/) et disponible
2626

2727
## L’assistant create-vue-dsfr
2828

29-
Cet assistant disponible aussi sur <VIconLink href="https://www.npmjs.com/package/create-vue-dsfr" icon="si-npm">NPM</VIconLink>
30-
et son le code source disponible sur <VIconLink href="https://github.com/laruiss/create-vue-dsfr" icon="si-github">GitHub</VIconLink>.
29+
Cet assistant est aussi disponible sur <VIconLink href="https://www.npmjs.com/package/create-vue-dsfr" icon="si-npm">NPM</VIconLink>
30+
et son code source disponible sur <VIconLink href="https://github.com/laruiss/create-vue-dsfr" icon="si-github">GitHub</VIconLink>.
3131

32-
Il permet d’échaffauder très rapidement une application avec Vue3 et Vite ou Nuxt 3, VueDsfr, Cypress (pour Vite seulement), Vitest (pour Vite seulement), TypeScript et ESLint déjà paramétrés.
32+
Il permet d’échaffauder très rapidement une application avec Vue3 et Vite ou Nuxt 3, VueDsfr, TypeScript et ESLint déjà paramétrés, et optionnellement Cypress et Vitest.
3333

3434
Voir la page ["Commencer"](./pour-commencer.md#utiliser-create-vue-dsfr-fortement-recommande) pour son utilisation.
3535

‎docs/guide/index.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# Introduction
2+
3+
VueDsfr est un **portage** du **[Système de design français][dsfr]**
4+
en **[Vue 3][vue3]** sous forme de **bibliothèque de composants**.
5+
6+
Le code est [ouvert et disponible sur GitHub][github-vue-dsfr].
7+
8+
## Pourquoi VueDsfr ?
9+
10+
Le Bureau des ressources et réalisations (BRR) a choisi sa stack technique pour le front, et elle inclut
11+
Vue 3. Le Système de design français (DSFR) est développé en JavaScript natif et en SCSS (SASS).
12+
13+
Le BRR a donc besoin d'un portage en Vue 3 de ce DSFR pour ses futurs projets qui devront le respecter.
14+
15+
## VueDsfr en quelques mots
16+
17+
Ce projet de bibliothèque de composants :
18+
19+
- reproduit le plus fidèlement possible les composants du [DSFR][dsfr] ;
20+
- est fait avec [Vue 3][vue3] ;
21+
- est utilisable facilement en tant que plugin Vue 3 ou Nuxt 3 ;
22+
- exporte les types (TypeScript) du plugin, des composants et des composables ;
23+
- est utilisable facilement dans un projet [npm][vue-dsfr-npm] ;
24+
- met à disposition deux parties dans la documentation :
25+
- une pour [aider au développement](/?path=/story/docs-3-guide-du-développeur--page) ;
26+
- une autre pour l'[utilisation](/?path=/story/docs-2-guide-d-utilisation--page) ;
27+
- publie un [site complet][vue-dsfr] disponible pour tous avec les composants et leurs variants testables dans celui-ci dans un storybook ;
28+
- a une couverture de test optimale ;
29+
- met à disposition les composants individuellement sans avoir à importer toute la bibliothèque (pour les petits projets).
30+
31+
## Les choix techniques retenus
32+
33+
### Cadriciels de travail
34+
35+
La bibliothèque est faite avec [Vue 3][vue3] et [Vue-router 4][vue-router].
36+
37+
La bibliothèque est mise en paquet grâce à [Vite][vite] en [mode bibliothèque][vite-library-mode].
38+
39+
Le CSS est écrit avec [PostCSS]{postcss} et notamment le plugin [postcss-preset-env][postcss-preset-env] (mais très peu de CSS est propre à la bibliothèque).
40+
41+
Le JavaScript est "linté" avec [ESLint][eslint] et configuré selon [StandardJS][standard-js].
42+
43+
::: info Configuration spécifique
44+
Ci-dessous les modifications de la configuration de StandardJS :
45+
46+
- les virgules doivent être ajoutées pour tout ce qui est en multiligne (cf. [`comma-dangle`][eslint-comma-dangle]).\
47+
`"comma-dangle": ["error", "always-multiline"]`
48+
:::
49+
50+
### Environnements
51+
52+
Le serveur de développement est celui de [Storybook][storybook] et le site pour tester les composants est le storybook lui-même.
53+
54+
Storybook est configuré pour utiliser PostCSS.
55+
56+
### Tests
57+
58+
Les tests sont faits avec [Vitest][vitest] et [Vue Testing Library][vue-testing-library], et des tests d’accessibilité sont faits avec [Cypress][cypress] grâce aux [tests de composants][cypress-component-testing].
59+
60+
### Ressources
61+
62+
Les icônes sont toujours celles de [RemixIcon][remixicon], grâce au DSFR et parfois grâce à [Oh, Vue Icons!][oh-vue-icons] (qui permet d’ajouter d’[autres icônes](/?path=/story/fondamentaux-4-1-icônes-personnalisées--page)).
63+
64+
## Les acteurs du projet
65+
66+
- **Clément Debroize** ;
67+
- **Pierre-Louis Egaud** ;
68+
- **Stanislas Ormières** *(Lead dev, architecte, devops, mainteneur principal)*.
69+
70+
Le projet a pu bénéficier des retours et de contributions de :
71+
72+
- [Gildéric Deruette][github-user-gideruette] ;
73+
- [Sophie Aitis][github-user-sophieaitis] ;
74+
- et [Ambroise Maupate][github-user-ambroisemaupate].
75+
76+
Merci à vous !
77+
78+
79+
<!-- Variables -->
80+
81+
[github-user-ambroisemaupate]: https://github.com/ambroisemaupate
82+
[github-user-gideruette]: https://github.com/gideruette
83+
[github-user-sophieaitis]: https://github.com/sophieaitis
84+
[github-vue-dsfr]: https://github.com/dnum-mi/vue-dsfr/
85+
86+
[dsfr]: https://www.systeme-de-design.gouv.fr/
87+
[vue-dsfr]: https://vue-dsfr.netlify.app/
88+
[vue-dsfr-npm]: https://www.npmjs.com/package/@gouvminint/vue-dsfr/
89+
90+
[cypress]: https://www.cypress.io/
91+
[cypress-component-testing]: https://docs.cypress.io/guides/component-testing/introduction
92+
[eslint]: https://eslint.org/
93+
[eslint-comma-dangle]: https://eslint.org/docs/rules/comma-dangle#options
94+
[oh-vue-icons]: https://github.com/Renovamen/oh-vue-icons/
95+
[postcss]: https://postcss.org/
96+
[postcss-preset-env]: https://preset-env.cssdb.org/
97+
[remixicon]: https://remixicon.com/
98+
[standard-js]: https://standardjs.org/
99+
[storybook]: https://storybook.js.org/
100+
[vite]: https://vitejs.dev/
101+
[vite-library-mode]: https://vitejs.dev/guide/build.html#library-mode
102+
[vitest]: https://vitest.dev/
103+
[vue3]: https://v3.vuejs.org/
104+
[vue-router]: https://router.vuejs.org/
105+
[vue-testing-library]: https://testing-library.com/docs/vue-testing-library/intro/

0 commit comments

Comments
 (0)