README.md 5.87 KB
Newer Older
1
# Site de l'observatoire du Plan Vélo de Paris
jeekajoo's avatar
jeekajoo committed
2

3
Ce projet contient le code du site web de l'observatoire du Plan Vélo de Paris 2015-2020.
jeekajoo's avatar
jeekajoo committed
4
5

### Sommaire
jeekajoo's avatar
jeekajoo committed
6
7
8
9
10
11
<!-- TOC depthFrom:2 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

- [Contribuer](#contribuer)
	- [Contribuer au contenu](#contribuer-au-contenu)
		- [Ajouter une image](#ajouter-une-image)
		- [Ajouter un article](#ajouter-un-article)
Eoshyn's avatar
Ortho    
Eoshyn committed
12
			- [Écrire un article](#ecrire-un-article)
jeekajoo's avatar
jeekajoo committed
13
14
15
16
			- [Ajouter un article de presse](#ajouter-un-article-de-presse)
		- [Modifier une page](#modifier-une-page)
	- [Contribuer au code](#contribuer-au-code)
		- [Tester en local](#tester-en-local)
jeekajoo's avatar
jeekajoo committed
17
- [Déploiement](#déploiement)
jeekajoo's avatar
jeekajoo committed
18
19

<!-- /TOC -->
jeekajoo's avatar
jeekajoo committed
20

21
[![build status](https://framagit.org/ParisEnSelle/planvelo/badges/master/build.svg)](https://framagit.org/ParisEnSelle/planvelo/commits/master)
Jeekajoo's avatar
Jeekajoo committed
22

jeekajoo's avatar
jeekajoo committed
23
24
## Contribuer

jeekajoo's avatar
jeekajoo committed
25
26
27
28
29
* Pour contribuer, il vous faut d'abord un compte `Framagit`. Rendez-vous ici pour le créer: https://framagit.org/users/sign_in
* Une fois connecté, vous pouvez demander un accès à ce projet via l'interface.

### Contribuer au contenu

Eoshyn's avatar
Ortho    
Eoshyn committed
30
Le langage de balisage choisi pour rédiger du contenu est le `Kramdown`. C'est une variante **très** proche du `Markdown`, plus populaire.
jeekajoo's avatar
jeekajoo committed
31
32
33
34
35
36
37

* Syntaxe: https://kramdown.gettalong.org/syntax.html

* Éditeur en ligne: https://kramdown.herokuapp.com/

#### Ajouter une image

38
* Préparer son image, au format `jpg` de préférence. La nommer en reprenant le titre de l'article, sans caractères spéciaux, ni accents. Par exemple pour un titre `Paris : le « Plan Vélo » prend l’eau`, on peut choisir `plan-velo-eau.jpg` auquel correspond l'article `2016-12-07-paris-velo-eau.markdown`.
jeekajoo's avatar
jeekajoo committed
39
40
41
42
43
44
45

* Se placer dans le répertoire cible: `planvelo/assets/images/articles` pour les articles, `planvelo/assets/images/pages` pour les pages.

* Ajouter votre fichier avec "Upload file".

![add-image-0](doc/add-image-0.png)

Eoshyn's avatar
Ortho    
Eoshyn committed
46
* Mettre un texte pour décrire la modification. Par exemple: "ajout de paris-velo-eau.jpg".
jeekajoo's avatar
jeekajoo committed
47
48
49

![add-image-1](doc/add-image-1.png)

Eoshyn's avatar
Ortho    
Eoshyn committed
50
* Cliquer sur "Upload file".
jeekajoo's avatar
jeekajoo committed
51
52
53
54
55
56
57

#### Ajouter un article

Il existe 2 catégories d'articles:
* "article": articles écrits par les membres de Paris En Selle
* "presse": articles de la presse, qui peuvent éventuellement contenir une revue de presse en plus du lien vers l'article.

jeekajoo's avatar
jeekajoo committed
58
Dans les 2 cas, il s'agit de créer un fichier dans le dossier `_post` de ce projet.
jeekajoo's avatar
jeekajoo committed
59
60
61
62
63

* Pour cela, se placer dans le répertoire `_post`, sélectionnez "New file".

![add-article-0](doc/add-article-0.png)

Eoshyn's avatar
Ortho    
Eoshyn committed
64
65
* Renseignez le nom du fichier cible au format "AAAA-MM-JJ-titre-de-mon-article.markdown" (Date + titre + extension .markdown, le tout séparé de traits d'union `-`)
* Quand vous avez terminé, ajoutez une description à la modification que vous avez apportée grâce au champ "Commit message".
jeekajoo's avatar
jeekajoo committed
66
67
68

![add-article-1](doc/add-article-1.png)

Eoshyn's avatar
Ortho    
Eoshyn committed
69
##### Écrire un article
jeekajoo's avatar
jeekajoo committed
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

Exemple:
```
---
layout: post
title:  "Mon premier article"
date:   2016-12-06 00:42:00 +0100
author: Pierre Dupont
categories: article
image: assets/images/articles/mon-premier-article.jpg
---

Bonjour, voici le contenu de mon premier article. Et voilà une image:
![mon_image]({{ page.image | relative_url }})
```

Vous pouvez reprendre cet exemple en changeant `title`, `date`, `author`, `image`, et bien sûr le contenu.

L'image est facultative mais toujours bienvenue. Dans cet exemple, elle est reprise dans le contenu: `{{ page.image | relative_url }}`.

Eoshyn's avatar
Ortho    
Eoshyn committed
90
Même si vous n'utilisez pas l'image dans le contenu de votre post, elle apparaît dans les réseaux sociaux quand vous partagez l'article. À noter que si aucune image n'est indiquée dans l'entête, c'est le logo de Paris En Selle qui est utilisé.
jeekajoo's avatar
jeekajoo committed
91
92
93
94
95
96
97

##### Ajouter un article de presse

Exemple:
```
---
layout: post
98
title:  "Paris : le « Plan Vélo » prend l’eau"
jeekajoo's avatar
jeekajoo committed
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
date:   2016-12-07 00:42:00 +0100
categories: presse
author: Olivier Razemon, Le Monde
link: http://transports.blog.lemonde.fr/2016/12/07/paris-velo-eau/
image: assets/images/articles/paris-velo-eau.jpg
---

[![capture]({{ page.image | relative_url }})]({{ page.link }}){:rel='nofollow'}

Lire cet [article]({{ page.link }}){:rel='nofollow'}.
```

Le contenu de cet article est composé d'une image (capture d'écran dont le lien pointe sur l'article) et d'un texte avec un lien vers l'article.

Vous pouvez reprendre cet exemple en changeant uniquement les éléments suivants dans l'entête: `title`, `date`, `author` et `image`.

#### Modifier une page

* Les pages sont présentes à la racine du projet:
```
a-propos.md
engagements.md
...
```

* Cliquez sur "edit" après avoir cliqué sur une des pages que vous souhaitez modifier.

![edit-page-0](doc/edit-page-0.png)

Eoshyn's avatar
Ortho    
Eoshyn committed
128
* Quand vous avez terminé, ajoutez une description à la modification que vous avez apportée dans le champ "Commit message".
jeekajoo's avatar
jeekajoo committed
129

jeekajoo's avatar
jeekajoo committed
130
131
### Contribuer au code

jeekajoo's avatar
jeekajoo committed
132
133
134
* La doc de `Jekyll`: https://jekyllrb.com/docs/home/ #RTFM

* Le moteur de template utilisé par `Jekyll` est `Liquid`: https://shopify.github.io/liquid/
jeekajoo's avatar
jeekajoo committed
135
136

#### Tester en local
jeekajoo's avatar
jeekajoo committed
137
138
139
140

```bash
gem install bundler
bundle install
jeekajoo's avatar
jeekajoo committed
141
142
143
144
145
146
147
bundle exec jekyll serve --incremental # ou, jekyll serve --incremental
firefox localhost:4000
```

Autre méthode, avec `docker` en prérequis:
```bash
docker build -t planvelo .
148
docker run -p 127.0.0.1:4000:4000 -v $PWD:/srv -ti planvelo
jeekajoo's avatar
jeekajoo committed
149
firefox localhost:4000
jeekajoo's avatar
jeekajoo committed
150
```
jeekajoo's avatar
jeekajoo committed
151

jeekajoo's avatar
jeekajoo committed
152
## Déploiement
jeekajoo's avatar
jeekajoo committed
153

Eoshyn's avatar
Ortho    
Eoshyn committed
154
Ce site web utilise `jekyll`. Ce logiciel fonctionne sans base de données et transforme le code présent en pages HTML.
jeekajoo's avatar
jeekajoo committed
155

jeekajoo's avatar
jeekajoo committed
156
Chaque modification donne lieu à la regénération complète des pages. Les modifications peuvent être visibles moins d'une minute après, sur le site de test: https://test.planvelo.paris.
jeekajoo's avatar
jeekajoo committed
157

jeekajoo's avatar
jeekajoo committed
158
Le déploiement sur le site de production nécessite, quant à lui, une intervention manuelle dans l'écran "Pipeline > Builds". Bouton "Play".
jeekajoo's avatar
jeekajoo committed
159

jeekajoo's avatar
jeekajoo committed
160
![deploy-0](doc/deploy-0.png)
jeekajoo's avatar
jeekajoo committed
161

jeekajoo's avatar
jeekajoo committed
162
Dans l'écran "Pipeline > Environments", vous pouvez voir le niveau de modification de chaque environnement dans la colonne "Commit".
jeekajoo's avatar
jeekajoo committed
163

jeekajoo's avatar
jeekajoo committed
164
![deploy-1](doc/deploy-1.png)