MaJ doc

package.json

@@ -13,7 +13,8 @@
     "make": "electron-forge make",
     "src:web": "http-server -o ./src/ -c-1",
     "src:electron": "electron-forge start -- -s",
-    "app": "electron-forge start"
+    "app": "npm start",
+    "app:electron": "npm start"
   },
   "keywords": [],
   "author": {

text/app/Application.md

@@ -0,0 +1,74 @@
+Cette application est écrite entièrement avec des langages web (HTML / CSS / JS) et se base sur node.js. Cette version de l'application ne fonctionne pas dans les navigateurs
+
+#### Outils
+
+Plusieurs outils ont été installé avec l'application pour pouvoir l'utiliser simplement et sans installation de dépendances externes :
+
+- [Electron forge](https://www.electronforge.io) : Outils pour créer, publier et installer facilement des applications Electron
+- [Commander](https://github.com/tj/commander.js) : Gestion CLI pour node (permet de gérer les arguments pour savoir quel version de l'application lancer)
+- [node-sass](https://github.com/sass/node-sass) : Compilateur fichier SCSS en CSS
+- [del](https://github.com/sindresorhus/del) : Suppression de fichier
+
+#### Frameworks
+
+L'application utilise plusieurs frameworks pour faciliter le développement et la mise en page de l'application :
+
+- [Materialize](https://materializecss.com) : Framework CSS / JS utilisé pour le design et les fonctionnalités graphiques du sites (pop-up, toast, chargement, ...)
+- [Jquery](https://jquery.com) : Permet de simplifier l'interaction avec le DOM
+- [Google code prettify](https://github.com/googlearchive/code-prettify) : Met en forme (couleur, police, ...) les extraits de code présent dans la page
+- [Marked](https://marked.js.org/) : Compilateur markdown en HTML
+- [DOMPurify](https://github.com/cure53/DOMPurify) : Nettoie l'HTML pour éviter les injections XSS
+- [SimpleMDE](https://simplemde.com) : Éditeur markdown WYSIWYG
+
+Toute la partie métier de l'application a été écrite en javascript sans framework particulier. Pour les fichiers de style le format SCSS a été choisit et un compilateur SCSS en CSS est intégré au projet.
+
+#### Lancement
+
+Cette application ne peut être lancé uniquement avec Electron, il est **impossible** de lancer l'application autrement.
+En effet l'application utilise des fonctionnalité propre à Electron (et node.js) et ne peut donc être lancé que dans cet environnement.
+
+Pour lancer l'application il suffit d'utiliser l'une des commandes suivantes
+
+```bash
+npm start
+
+npm run app
+
+npm run app:electron
+```
+
+Au lancement de l'application les fichiers SCSS sont recompilés en CSS. 
+De même lors de la fermeture de l'application si des fichiers temporaires on été crées, ils sont supprimés.
+
+#### Compilation
+
+Il est théoriquement possible de compiler ce projet pour avoir un éxecutable de l'application. Cependant la compilation n'a jamais été testé.
+De plus la structure du projet prévu pour montrer l'interet et les possibilités d'Electron n'est pas fait pour être compilé et déployé sous forme d'executable.
+La compilation est gérée par `Electron forge` et peut être lancé avec la commande suivante :
+
+```bash
+npm run make
+```
+
+La configuration pour la création des éxecutables pour les différents OS est dans le fichier `package.json` dans `config.maker`. 
+La configuration actuel est celle par défaut d'Electron forge. 
+Plus d'informations sur les différents éxecutables qu'il est possible de générer et les conditions pour pouvoir compiler le projet sur les différents OS sont disponible sur [le site web d'Electron forge](https://www.electronforge.io/config/makers).
+
+#### Source
+
+Les source de cette application sont disponible dans le dossier `app/` à la racine du projet. Ce dossier possède 3 sous-dossier :
+
+- Le dossier `data/` qui contient les données des notes présentent par défaut
+- Le dossier `main/` qui contient le code source du processus principal d'Electron (plus d'informations dans la note Electron). 
+Les fichiers dans le dossier sont les fichiers de code éxecuté par Electron, le dosser `function/` regroupe les fonctions utilitaire pour ces fichiers et
+le dossier `asset/` contient les icones utilisés par l'application.
+- Le dossier `renderer/` qui contient les fichiers pour le rendus de l'application. C'est dans ce dossier que ce trouve la base de code commune entre les deux version de l'application.
+Les fichier HTML à la racine du dossier sont les pages qui sont chargées par Electron au lancement. 
+Le dossier `common/` regroupe tous les fichiers Javascript et CSS commun à toutes les pages de l'application.
+Le dossier `page/` contient toutes les pages de l'application, chaque page possède son propre dossier avec ces fichiers HTML et Javascript.
+Enfin dans le dossier `service/` ce trouve des class utilitaire pour gérer par exemple le stockage ou le routage entre les pages.
+
+De plus le dossier `helper/` regroupe des fichiers de fonctions utilitaire à thème (par exemple la gestion des fichiers).
+Ces fonctions sont utilisé dans toutes l'application (y comprit dans le fichier `main.js` qui est le fichier principal de l'application).
+Pour finir le dossier `data/` sert à stoquer les infos du dernier lancement (quel version de l'application a été utilisée, pour reset les données en cas de changement), 
+ainsi que les fichiers temporaires

text/app/Cliquez sur moi.md

@@ -0,0 +1,28 @@
+Ceci est une note. Elle contient des informations diverses. Cette note explique les fonctionnalités de base de l'application
+
+#### Ajouter une note
+
+Il est possible d'ajouter autant de note que vous voulez.
+Pour ajouter une note il suffit d'appuyer sur le bouton + ou de faire Ctrl+N, une nouvelle fenetre s'ouvre pour créer la note. 
+Chaque note apparaitra sous forme de carte dans la page d'accueil. 
+Cliquez dessus pour voir ce qu'elles contiennent. 
+La création d'une note utilise un éditeur WYSIWYG markdown pour mettre en forme le texte (avec des titres, du code, ...).
+
+#### Modifier une note
+
+Il est aussi possible de modifier une note, pour ce faire cliquez simplement sur le bouton modifier sur la carte ou lorsque la note est affichée. 
+La modification ouvre la page d'édtion dans une nouvelle fenetre
+Le système d'édition est le même que pour l'ajout et utilise le markdown pour mettre en forme le texte.
+
+#### Supprimer une note
+
+Pour supprimer une note il suffit de cliquez sur le bouton supprimer sur la carte ou dans la note. 
+Une demande de confirmation apparait pour valider ou non la suppression.
+Toute note est définitivement supprimé et ne peut être récupérée.
+
+#### Infos sur l'application
+
+Cette version de l'application utilise des fonctionnalité propre à Electron et ne peut pas être utilisé dans un navigateur (via un serveur HTTP).
+Les fonctionnalités utilisant Electron pour être implementées dans cette version de l'application sont détaillées dans le note `Fonctionnalités`.
+De même pour avoir plus d'informations sur les technologies, la structure et les fichiers du projet réferrez vous à la note `Application`.
+Enfin pour avoir des informations sur le fonctionnement d'Electron dans cette application réferrez vous à la note `Electron`.

text/app/Electron.md

@@ -0,0 +1,20 @@
+Electron permet de faire des applications avec les technologies web (HTML 5 / CSS 3 / Javascript). 
+Les applications créée avec Electron peuvent être compiler pour tous les OS existant, ce qui permet avec une seul base de code d'avoir un executable pour tous les environement.
+
+#### Source
+
+Les sources de cette application sont exactement les même que lorsque l'application est lancé sur un serveur HTTP. 
+Les fichiers utilisé sont exactement les même. Pour plus d'informations sur les dossiers sources, ce referrer à la partie `Source` de la note application.
+
+#### Fonctionnement
+
+Lors du lancement de l'application Electron le fichier main.js est appelé. Ce fichier permet de lancer l'application sans ou avec l'intégration d'Electron. 
+Dans le cas de cette application (sans intégration d'Electron) l'application va seulement chargé la page index.html 
+dans le dossier `src/` (la création de la fenetre est gérée par des fonctions communes aux deux versions et possède donc toujours un icone). 
+Lorsque toutes les fenetres sont fermées l'application s'arrete sauf sur Mac ou il faut utiliser Cmd+Q (fonctionnement par defaut d'Electron sur Mac).
+
+#### Menu
+
+Cette version de l'application étant identique à la version web, elle n'a aucun code spécifique a Electron. 
+De ce fait aucune indication n'est donné pour générer les menus. En l'abscence d'indications Electron genere uniquement une menu d'application (en haut de l'application) par défaut et aucun menu contextuel (clic droit). 
+Le menu est anglais et contient des raccourcis souvent utilisé comme copié/collé, agrandir ou minimiser la fenetre, ...

text/src/Application.md

@@ -1,14 +1,23 @@
-Cette application est écrite entièrement avec des langages web et fonctionne avec n'importe quel navigateur moderne.
+Cette application est écrite entièrement avec des langages web (HTML / CSS / JS) et fonctionne avec n'importe quel navigateur moderne.
+
+#### Outils
+
+Plusieurs outils ont été installé avec l'application pour pouvoir l'utiliser simplement et sans installation de dépendances externes :
+
+- [Electron forge](https://www.electronforge.io) : Outils pour créer, publier et installer facilement des applications Electron
+- [Commander](https://github.com/tj/commander.js) : Gestion CLI pour node (permet de gérer les arguments pour savoir quel version de l'application lancer)
+- [node-sass](https://github.com/sass/node-sass) : Compilateur fichier SCSS en CSS
+- [http-server](https://github.com/http-party/http-server) : Server HTTP en node.js
 
 #### Frameworks
 
-L'application utilise plusieurs frameworks pour faciliter le développement et la mise en page de l'application :
+L'application utilise plusieurs frameworks pour faciliter le développement et la mise en page :
 
 - [Materialize](https://materializecss.com) : Framework CSS / JS utilisé pour le design et les fonctionnalités graphiques du sites (pop-up, toast, chargement, ...)
 - [Jquery](https://jquery.com) : Permet de simplifier l'interaction avec le DOM
 - [Google code prettify](https://github.com/googlearchive/code-prettify) : Met en forme (couleur, police, ...) les extraits de code présent dans la page
 - [Marked](https://marked.js.org/) : Compilateur markdown en HTML
-- [DOMPurify](https://github.com/cure53/DOMPurify) : Nettoie le HTML pour éviter les injections XSS
+- [DOMPurify](https://github.com/cure53/DOMPurify) : Nettoie l'HTML pour éviter les injections XSS
 - [SimpleMDE](https://simplemde.com) : Éditeur markdown WYSIWYG
 
 Toute la partie métier de l'application a été écrite en javascript sans framework particulier. Pour les fichiers de style le format SCSS a été choisit et un compilateur SCSS en CSS est intégré au projet.
@@ -31,6 +40,13 @@ Pour lancer l'application dans electron il faut utiliser la commande suivante (p
 npm run src:electron
 ```
 
+La compilation des fichiers SCSS en CSS se fait automatiquement lors de l'installation de l'application avec `npm i`.
+Il est possible de recompiler les fichiers en utilisant la commande suivante :
+
+```bash
+npm run prepare
+```
+
 #### Source
 
 Que l'application soit lancée sur un serveur web pour être affichée dans un navigateur ou directement dans electron, ce sont les même fichiers sources qui sont utilisés. 
@@ -40,4 +56,8 @@ Le code javascript propre à l'application se trouve directement dans les fichie
 Le dossier `css/` contient toute les feuilles de style de l'application (format scss et css) dont le fichier `style.scss` qui a été écrit pour l'application. 
 Le dossier `js/` contient les fichiers avec les fonctions javascript utilisées. 
 Le fichier `binder.js` (écrit pour le projet) contient des fonctions pour automatiser l'affichage de données dans le document HTML et le fichier `script.js` contient des fonctions utilitaire pour l'application. 
-Enfin le dossier `data/` contient les données des notes présentent par défaut.
+Enfin le dossier `data/` contient les données des notes présentent par défaut.
+
+De plus le dossier `helper/` regroupe des fichiers de fonctions utilitaire sur un thème (par exemple la gestion des fichiers).
+Ces fonctions sont utilisé uniquement dans le  fichier `main.js` (qui est le fichier principal de l'application) dans cette version.
+Pour finir le dossier `data/` sert à stoquer les infos du dernier lancement (quel version de l'application a été utilisée, pour reset les données en cas de changement).

text/src/Cliquez sur moi.md

@@ -1,11 +1,12 @@
-Ceci est une note. Elle contient des informations diverses.
+Ceci est une note. Elle contient des informations diverses. Cette note explique les fonctionnalités de l'application
 
 #### Ajouter une note
 
 Il est possible d'ajouter autant de note que vous voulez. 
+Pour ajouter une note il suffit d'appuyer sur le bouton +
 Chaque note apparaitra sous forme de carte dans la page d'accueil. 
 Cliquez dessus pour voir ce qu'elles contiennent. 
-La création d'une note utilise un éditeur WYSIWYG markdown pour mettre en forme le texte.
+La création d'une note utilise un éditeur WYSIWYG markdown pour mettre en forme le texte (avec des titres, du code, ...).
 
 #### Modifier une note
 
@@ -24,3 +25,8 @@ Le menu en haut à droite de la page contient des liens vers le site d'electron
 Le bouton reset permet de remettre à zero l'application. 
 Remettre à zero l'application supprimera toutes les notes ajouté par l'utilisateur et remettra les notes par défaut dans leur état d'origine
 
+#### Infos sur l'application
+
+Cette version de l'application n'utilise pas les fonctionnalité propre à Electron et peut être utilisé dans un navigateur (via un serveur HTTP).
+Pour plus d'informations sur les technologies, la structure et les fichiers du projet réferrez vous à la note `Application`.
+De même plus d'informations sur le fonctionnement d'Electron dans cette application sont disponible dans la note `Electron`.

text/src/Electron.md

@@ -4,13 +4,13 @@ Les applications créée avec Electron peuvent être compiler pour tous les OS e
 #### Source
 
 Les sources de cette application sont exactement les même que lorsque l'application est lancé sur un serveur HTTP. 
-Les fichiers utilisé sont exactement les même. Pour plus d'informations sur les dossiers sources, ce referrer à la partie `Source`  de la note application.
+Les fichiers utilisé sont exactement les même. Pour plus d'informations sur les dossiers sources, ce referrer à la partie `Source` de la note application.
 
 #### Fonctionnement
 
 Lors du lancement de l'application Electron le fichier main.js est appelé. Ce fichier permet de lancer l'application sans ou avec l'intégration d'Electron. 
 Dans le cas de cette application (sans intégration d'Electron) l'application va seulement chargé la page index.html 
-dans le dossier `src/` (la création de la fenetre est gérée par des fonctions commune aux deux versions et possède donc toujours un icone). 
+dans le dossier `src/` (la création de la fenetre est gérée par des fonctions communes aux deux versions et possède donc toujours un icone). 
 Lorsque toutes les fenetres sont fermées l'application s'arrete sauf sur Mac ou il faut utiliser Cmd+Q (fonctionnement par defaut d'Electron sur Mac).
 
 #### Menu