popsu_html2print

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
   

   1. ### 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/

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

   1. ### 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

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