popsu_html2print_Rouen_EN

TL;DR.

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

1. Cloner le projet

   Ouvrez un terminal et deplacez vous à l'endroit désiré. (ex: le bureau)

   cd Desktop/
   git clone https://figureslibres.io/gogs/thibaud_goiffon/popsu_html2print.git
   

2. 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.

   cd popsu_html2print/
   

3. Installer les dépendances

   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".

4. Installer gridsome

   L'installation de Gridsome de maniere globale sur votre systeme est nécessaire pour utiliser de nouvelles commandes dans le terminal.

   sudo npm install --g @gridsome/cli
   

5. lancer le serveur

   gridsome develop
   

   Après un court temps de construction, ce message devrait se présenter.

   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

  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.