# 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 (https://popsu.strapi.figli.io/admin)
  - **Nom d'utilisateur** : dev
  - **Mot de Passe** : 7SqHtx4XCSNLKS5b
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

- Traits de coupes
- Pages citations