# TL;DR.
```sh
sudo npm install --g @gridsome/cli
npm install
gridsome develop
```
pour lancer le serveur de développement à l'adresse `http://localhost:8080`
# En détail
## Installation

#### Cloner le projet
Ouvrez un terminal et deplacez vous à l'endroit désiré. *(ex: le bureau)*
```sh
cd Desktop/
git clone https://figureslibres.io/gogs/thibaud_goiffon/popsu_html2print.git
```

#### Rentrer dans le projet
Le projet vient d'être cloné dans un dossier sur le bureau, mais le terminal se trouve toujours sur le bureau.
Il faut maintenant se déplacer à la racine du projet.
```sh
cd popsu_html2print/
```

#### Installer les dépendances
```sh
npm install
```
Un dossier "node_modules" vient d'être ajouté à votre clone du projet. Il est peuplé par les dependances définits dans le fichier "package.json".

#### Installer gridsome
L'installation de Gridsome de maniere globale sur votre systeme est nécessaire pour utiliser de nouvelles commandes dans le terminal.
```sh
sudo npm install --g @gridsome/cli
```

#### lancer le serveur
```sh
gridsome develop
```
Après un court temps de construction, ce message devrait se présenter.
```sh
DONE  Compiled successfully in 278ms                                   11:05:45
 Site running at:          http://localhost:8080/
 Explore GraphQL data at:  http://localhost:8080/___explore
```
Pour visualisez la mise en page, cliquez sur ce lien http://localhost:8080.

## Fonctionnement
1. Les contenus sont rentrés par le client via Strapi 
2. Gridsome récupère le contenu texte et l'intègre dans le modèle HTML
3. Le modèle HTML est habillé avec le css.

## Utilisation
Ouvrir le dossier popsu_html2print dans Atom pour pouvoir faire des modifications dans le CSS.
Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localhost:8080
##### ⚠️ Important
- Ouvrez toujours la page d'aperçu dans Chromium.
- Il faut laisser Gridsome tourner dans le terminal, sans ça vous ne pourrez pas afficher l'aperçu sur http://localhost:8080
- Rechargez la page pour visionnier les changements après modifications et sauvegarde dans les fichiers css.
- Relancez gridsome si des modifications sont apportées dans Strapi
- Si le dossier est déjà cloné, Pensez à faire ```git pull``` avant ```gridsome develop```

```sh
CTRL+C
gridsome develop
```

## Styles
#### Ajouter une police
Pour ajouter une nouvelle font, ajouter le fichier dans le dossier src/fonts, puis referencez la dans le fichier css (src/css/fonts.scss)
#### Parametres.scss
Fichier utilisé pour réferencer des variables globales utilisables dans tout le projet.
*Ex: les marges, tailles du document, gouttieres, taille de police.*
#### Screen.scss
Sert à afficher les pages en vis-à-vis dans le navigateur.

## Ajouter des modifications
```sh
git add .
```
Ajoutez toutes vos modifications.
```sh
git commit -m "Descriptif de la modification"
git push
```
## Todo

- Pages citations