Rearrange developer guide pages and write contributing and file format pages

custom/epoc-theme/nav.html

@@ -23,11 +23,7 @@
                         <div class="dropdown-menu" aria-labelledby="dropdown02">
                             {% for nav_item_child in nav_item.children %}
                                 {% if nav_item_child.children %}
-                                <a class="dropdown-item" href="{{ nav_item_child.children[0].url | url }}">
-                                    {{ nav_item_child.title }}
-                                </a>
-                                {% else %}
-                                    {% if "SEPARATOR" == nav_item_child.url %}
+                                    {% if nav_item_child.children[0].url == 'guide/outils/' %}
                                     <div class="dropdown-item">
                                         <div class=" relative flex items-center">
                                             <div class="flex-grow border-t border-gray-200"></div>
@@ -36,10 +32,14 @@
                                         </div>
                                     </div>
                                     {% else %}
+                                        <a class="dropdown-item" href="{{ nav_item_child.children[0].url | url }}">
+                                            {{ nav_item_child.title }}
+                                        </a>
+                                    {% endif %}
+                                {% else %}
                                     <a class="dropdown-item" href="{{ nav_item_child.url | url }}">
                                         {{ nav_item_child.title }}
                                     </a>
-                                    {% endif %}
                                 {% endif %}
                             {% endfor %}
                         </div>

docs/guide/.pages

 nav:
     - Guide Editeur : user
-    # - Développeur : developer
-    # - Outils: SEPARATOR
-    - Générateur QR Code : ../../qr-code-generator
+    - Guide Développeur : developer
+    - Outils: outils
+    - Générateur QR Code : ../../qr-code-generator
\ No newline at end of file
+    - Diagramme Mermaid : ../../mermaid-editor
\ No newline at end of file

docs/guide/developer/.pages

 nav:
-    - Démarrage : getting-started.md
-    - Spécifications ePoc: specs
-    - Application mobile : mobile-app
-    - Editeur : editor
+    - contributing.md
+    - file-format.md
+    - data-types.md
+    - plugins.md
     - ...
\ No newline at end of file

docs/guide/developer/contributing.md

+# Contribuer
+
+Bienvenue dans la communauté ePoc, une initiative open source dédiée à la création d'une solution d'apprentissage mobile libre et ouverte, ainsi qu'à l'élaboration d'un format d'édition adapté pour une éducation accessible et interactive sur les appareils mobiles. Nous sommes convaincus que l'éducation doit être accessible à tous, et notre projet vise à faciliter l'apprentissage via les téléphones portables, en particulier dans les régions où l'accès à l'éducation traditionnelle est limité.
+
+## Pourquoi contribuer ?
+
+1. **Faire la différence** : En contribuant à ePoc, vous participez à un projet qui vise à démocratiser l'accès à l'éducation et à promouvoir l'apprentissage mobile. Votre contribution aura un impact direct sur la vie des personnes qui bénéficieront de ces outils d'apprentissage innovants.
+
+2. **Développer vos compétences** : Travailler sur un projet open source comme ePoc vous permettra d'améliorer vos compétences techniques et de collaborer avec d'autres développeurs, concepteurs et éducateurs passionnés. C'est une excellente occasion d'apprendre et de grandir en tant que professionnel.
+
+3. **Faire partie d'une communauté** : En rejoignant ePoc, vous intégrez une communauté dynamique et engagée, qui partage les mêmes valeurs et objectifs. Vous aurez l'opportunité de rencontrer et d'échanger avec des personnes du monde entier, et de créer des liens durables.
+
+## Comment contribuer ?
+
+Il existe de nombreuses façons de contribuer à ePoc, en fonction de vos compétences et de vos centres d'intérêt. Voici quelques idées :
+
+1. **Développement de la solution d'apprentissage mobile** : Si vous êtes développeur, vous pouvez participer à l'amélioration de la solution ePoc en proposant de nouvelles fonctionnalités, en corrigeant des bugs ou en optimisant le code source.
+
+2. **Création de contenu** : Si vous êtes éducateur ou expert dans un domaine particulier, vous pouvez créer du contenu éducatif adapté au format ePoc et le partager avec la communauté.
+
+3. **Conception et design** : Si vous êtes designer, vous pouvez contribuer à l'amélioration de l'interface utilisateur de la solution ePoc et à la création de ressources visuelles pour les cours et les activités d'apprentissage.
+
+4. **Développement de plugins** : Si vous avez des compétences en développement, vous pouvez créer des plugins pour étendre les fonctionnalités de la solution ePoc et les partager avec la communauté.
+
+5. **Traduction** : Si vous maîtrisez plusieurs langues, vous pouvez aider à traduire la solution et le contenu éducatif dans différentes langues, afin de toucher un public plus large.
+
+6. **Promotion et communication** : Si vous êtes à l'aise avec les réseaux sociaux et la communication, vous pouvez aider à promouvoir le projet ePoc et à sensibiliser le public à l'importance de l'éducation mobile.
+
+## Rejoignez-nous dès aujourd'hui !
+
+N'hésitez plus et rejoignez la communauté ePoc pour contribuer à un projet open source qui a un réel impact sur l'éducation et l'apprentissage mobile dans le monde. Ensemble, nous pouvons faire la différence et offrir à chacun la possibilité d'apprendre et de progresser, quel que soit son lieu de vie ou ses moyens.
+
+Pour en savoir plus sur les différentes façons de contribuer à ePoc et pour rejoindre notre communauté, rendez-vous sur notre site web et consultez notre guide du contributeur. Nous avons hâte de vous accueillir parmi nous !
+
+## Liens utiles
+
+- [Sources](https://gitlab.inria.fr/learninglab/epoc/)
+- [Tchap](https://www.tchap.gouv.fr/#/room/#epoc:agent.education.tchap.gouv.fr)
+- [Discord](https://discord.gg/xzSVeuPEtH)
+- [Documentation des plugins](plugins.md)
\ No newline at end of file

docs/guide/developer/data-types.md

+# Format de données
\ No newline at end of file

docs/guide/developer/file-format.md

+# Format de fichier
+
+## Fichier `.epoc`
+
+Le format de fichier ePoc est une archive ZIP contenenant les assets, les données et 
+metadonnées mais aussi les données de conception de l'ePoc au format JSON. 
+
+Ce format de fichier a été introduit par l'éditeur.
+
+Pour extraire le contenu d'un fichier `.epoc`, il suffit d'utiliser la commande `unzip`.
+
+```bash
+unzip mon_ePoc.epoc
+```
+
+Pour archiver le contenu dans un `.epoc`, il suffit de se placer dans le dossier contenant
+`content.json` et `project.json` puis d'utiliser la commande `zip`
+
+```bash
+zip -r -X mon_ePoc.epoc *
+```
+## Contenus de l'archive
+
+### `content.json` (`.epoc`, `.epocx`et `.zip`)
+
+Contient les données (chapitres, pages, contenus, quizz) et métadonnées (titre, auteurs, etc)
+de l'ePoc au format JSON dans un schéma respectant les [specifications du format ePoc](data-types.md) définis
+en TypeScript.
+
+### `project.json` (`.epoc` seulement)
+
+Ce fichier contient les données de scénarisation, des contenus (cahpitres, pages, contenus, quizz) et
+métadonnées (titre, auteurs, etc) de l'ePoc au format JSON. Il s'agit d'une serialization des données
+du diagramme (voir [`vue-flow`](https://vueflow.dev/)).
+
+### `assets` *folder*
+
+Contient tous les assets (images, viéos, etc) de l'ePoc.
+
+### `plugins` *folder*
+
+### Autres
+
+D'autres fichiers ou dossiers présents dans l'archive peuvent être utilisé mais ne sont pas
+les utilisés ou lus par défaut.
+
+## Fichier de publication (export) `.epocx` ou `.zip`
+
+Le format de fichier d'export pour publication sur l'application mobile est aussi une 
+archive ZIP contenant les assets, les données et metadonnées de l'ePoc au format JSON.
+
+Il s'agit d'un sous-ensemble du fichier `.epoc`optimisé pour sa diffusion. Tous els assets
+et pages non reliés à un chapitre sont retirés de l'archive.
+
+Pour extraire le contenu d'un fichier `.epocx` ou `.zip`, il suffit d'utiliser la commande `unzip`.
+
+```bash
+unzip mon_ePoc.epocx # ou unzip mon_ePoc.zip
+```
+
+Pour archiver le contenu dans un `.epocx`, il suffit de se placer dans le dossier contenant
+`content.json` puis d'utiliser la commande `zip`
+
+```bash
+zip -r -X mon_ePoc.epocx *
+```
+

docs/guide/outils/index.md

+# Outils
+
+Ci-dessous une liste d'outils utiles à la conception :
+
+- [Générateur QR Code](../qr-code-generator)
+- [Diagramme Mermaid](../mermaid-editor)
\ No newline at end of file

docs/guide/user/content/.pages

 nav:
     - Texte : text.md
+    - Texte avancé : wysiwyg
     - Video : video.md
     - Audio : audio.md
\ No newline at end of file

docs/guide/user/wysiwyg/latex.md → docs/guide/user/content/wysiwyg/latex.md

 # Intégration LaTex
 Dans l'éditeur WYSIWYG, vous pouvez rédiger du code LaTex. Pour l'instant l'aperçu du LaTex n'est pas disponible dans l'éditeur, mais vous pouvez visualiser le résultat sur l'application mobile. Pour obtenir un aperçu de votre cours tout en rédigeant vos expressions LaTex, vous pouvez lancer l'aperçu en simultané avec l'éditeur.
-<div style="display: flex; height: 40rem">
-    <img src="../../images/katex-demo-editor.png" alt="Demo éditeur">
-    <img src="../../images/katex-demo-mobile.png" alt="Demo mobile">
-</div>
+
+![Démo Katex](../images/katex-demo.jpg)
+
 Vous pouvez également utiliser ce [bac à sable](https://katex.org/#demo)
 
 ## Délimiteur
@@ -14,17 +13,16 @@ Pour rédiger vos expressions, vous devez utiliser des délimiteurs au début et
 
 En résumé, le mode "display" rend les symboles plus grands, adaptés à une ligne distincte, tandis que le mode "inline" les rend plus petits, intégrés dans le texte. En mode "display", les équations sont centrées et n'ont pas de saut de ligne automatique, sauf si spécifié. En mode "inline", les sauts de ligne sont permis après certains symboles ou opérateurs.
 
-## Examples
-### "Display"
-<div style="display: flex; gap: 1rem;">
-    <pre>$$ \sum_{p = 0}^{2n + 1} (-1)^p $$</pre>
-    <img src="../../images/katex-display.png" alt="Katex display">
+## Exemples
+### Mode "Display"
+
+`$$ \sum_{p = 0}^{2n + 1} (-1)^p $$`
+
+![Katex en mode display](../images/katex-display.png)
+
 
-</div>
+### Mode "Inline"
 
+`$ \sum_{p = 0}^{2n + 1} (-1)^p $`
 
-### "Inline"
-<div style="display: flex; gap: 1rem;">
+![Katex en mode inline](../images/katex-inline.png)
\ No newline at end of file
-    <pre>$ \sum_{p = 0}^{2n + 1} (-1)^p $</pre>
-    <img src="../../images/katex-inline.png" alt="Katex inline">
-</div>
\ No newline at end of file

docs/guide/user/content/wysiwyg/mermaid.md

+# Intégration Mermaid
+Dans l'éditeur WYSIWYG, vous pouvez rédiger du code mermaid.
+
+[...]
\ No newline at end of file

docs/guide/user/export-and-publish.md

@@ -17,7 +17,7 @@ Pour cela rien de plus simple :
 Afin de pouvoir consulter votre nouvel ePoc dans l'application mobile, vous devez l'héberger sur un service accessible
 depuis internet (Nuage, Nextcloud, Google Drive, Dropbox, Github, etc).
 
-Une fois celui-ci déposer vous pouvez générer un QR Code avec [notre outil](../../../qr-code-generator) en ligne pour l'importer depuis votre application mobile.
+Une fois celui-ci déposer vous pouvez générer un QR Code avec [notre outil](../../qr-code-generator/index.md) en ligne pour l'importer depuis votre application mobile.
 
 
 ### Déposer sur Nextcloud/Nuage
@@ -29,7 +29,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 2. Récuperer le lien de partage et ajouter `/download` à la fin  
     Exemple : `https://demo1.nextcloud.com/s/5Xs6DX9HWKKrNpW`  
     Devient : `https://demo1.nextcloud.com/s/5Xs6DX9HWKKrNpW/download`
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Nextcloud](images/share-nextcloud.png)
 ![Get QR Code Nextcloud](images/share-qr-nextcloud.png)
@@ -39,7 +39,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 
 1. Déposer votre ePoc dans votre espace
 2. Récuperer le lien de partage
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Google Drive](images/share-googledrive.png)
 ![Get QR Code Google Drive](images/share-qr-googledrive.png)
@@ -48,7 +48,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 
 1. Déposer votre ePoc dans votre dépôt (25MB max, le dépôt doit être *public*)
 2. Copier le lien vers le fichier
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Github](images/share-github.png)
 ![Get QR Code Github](images/share-qr-github.png)
@@ -57,7 +57,7 @@ fournisseur basé sur Nextcloud [ici](https://www.chatons.org/search/by-service?
 
 1. Déposer votre ePoc dans votre espace
 2. Récupérer le lien de partage
-3. Utiliser [notre outil](../../../qr-code-generator) pour convertir ce lien en QR Code
+3. Utiliser [notre outil](../../qr-code-generator/index.md) pour convertir ce lien en QR Code
 
 ![Copy share link Dropbox](images/share-dropbox.png)
 ![Get QR Code Dropbox](images/share-qr-dropbox.png)

docs/guide/user/index.md

-# Guide Utilisateur
-
-Epoc Editor est une application de bureau qui permet de créer des formations interactives, adaptées aux mobiles, sans avoir besoin de connaissances en programmation. Dans ce tutoriel, nous allons vous montrer comment utiliser cet outil pour créer une formation facilement.
-
-Public concerné : équipe pédagogique (ingénieurs pédagogiques, enseignants, responsables de formation)
\ No newline at end of file

docs/mermaid-editor/app/index.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mermaid Editor</title>
+  </head>
+  <body>
+    <h2>Coming soon</h2>
+  </body>
+</html>

docs/mermaid-editor/index.md

+---
+template: epoc-theme/full-center.html
+hide:
+    - toc
+    - navigation
+---
+
+# Editeur de diagramme Mermaid
+
+<iframe style="width:100%;height:600px;border:none;margin-bottom:2em;" src="/mermaid-editor/app/index.html"></iframe>
\ No newline at end of file