tutorial v1

assets/ananke/css/override.css

@@ -0,0 +1,3 @@
+.measure-wide{
+    max-width: 60em;
+}

hugo_config/_default/theme_settings.toml

@@ -2,6 +2,7 @@
 background_color_class = "bg-red"
 site_logo = "assets/uploads/1846959.jpg"
 favicon = "assets/uploads/Palette.png"
+custom_css = ["override.css"]
 
   [[params.ananke_socials]]
   name = "facebook"

static/admin/config.yml

@@ -72,6 +72,8 @@ collections:
   - name: settings
     label: 'Configuration'
     icon: settingsPage
+    editor:
+      preview: false
     files:
       - label: 'Configuration du thème'
         name: theme settings

static/admin/index.js

@@ -146,8 +146,100 @@ CMS.registerIcon('postPage', () => post2SVG);
 CMS.registerIcon('helpPage', () => helpSVG);
 CMS.registerIcon('palette', () => paletteSVG);
 
+function htmlToH(text) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(text, 'text/html');
+  const element = doc.body.firstChild;
+
+  function parseNode(node) {
+      if (node.nodeType === Node.TEXT_NODE) {
+          return node.textContent;
+      } else if (node.nodeName == 'IMG') {
+          const props = {};
+          // Récupérer les attributs HTML en tant que propriétés
+          for (const attr of node.attributes) {
+            props[attr.name] = attr.value;
+          }
+          return h('img', props);
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+          const props = {};
+          // Récupérer les attributs HTML en tant que propriétés
+          for (const attr of node.attributes) {
+              const parties = attr.value.trim().split(";").filter(Boolean);
+              for (const part of parties) {
+                if (props[attr.name] == undefined) {
+                  props[attr.name] = {};
+                }
+                const kv = part.split(":");
+                const k = kv[0].trim();
+                const v = kv[1].trim();
+                props[attr.name][k] = v;
+              } 
+          }
+          // Ajouter les styles CSS aux propriétés
+          if (props.style == undefined) {
+            props.style = {};
+          }
+          const children = Array.from(node.childNodes).map(parseNode);
+          return h(node.tagName.toLowerCase(), props, ...children);
+      }
+  }
+
+  return parseNode(element);
+}
+
 const TutorialPage = () => {
-  return h('div', {}, 'TODO tutoriel!');
+  const htmlTutorial = `
+<pre>
+<pre style="font-size: 40px;">
+Bienvenue au tutoriel d’utilisation de Palette !
+</pre>
+Palette vous permet de modifier et personnaliser facilement vos sites. Voici les différentes catégories disponibles dans l’interface :
+
+<img src="tutorial/liste.png" alt="Différentes catégories disponibles">
+        <strong>  Page principale :</strong> Vous pouvez choisir le contenu de la page d’accueil de votre site
+        <strong>  Pages de sites :</strong> Vous pouvez créer et éditer des pages supplémentaires à ajouter à votre site
+        <strong>  Configuration :</strong> Vous pouvez personnaliser l’aspect global (thème) du site ainsi que les menus
+        <strong>  Tutoriel :</strong> Vous y êtes (;
+        <strong>  Media :</strong> Vous pouvez ajouter, supprimer et naviguer dans les images que vous pouvez ensuite intégrer dans l’édition de contenu de vos pages ainsi que dans les configurations.
+
+<hr>
+
+<pre style="font-size: 30px; text-decoration: underline">Edition de page :</pre>
+
+Lorsque vous éditez une page vous pouvez éditer :
+
+<img src="tutorial/editeur.png" alt="Edition">
+        <strong>  Titre :</strong> Nom de la page
+        <strong>  Description :</strong> Courte description de la page
+        <strong>  Image de couverture :</strong> Image de bannière de la page
+        <strong>  Corps :</strong> Vous pouvez renseigner du texte, images, liens, citations… pour le contenu de votre page
+    
+<strong style="color: yellow; font-size: 25px;">N’oubliez pas de cliquer sur le bouton ‘Publier’ en haut à droite lorsque vous avez terminé</strong>
+
+<hr>
+
+<pre style="font-size: 30px; text-decoration: underline">Configuration :</pre>
+
+Vous pouvez personnaliser le thème:
+
+<img src="tutorial/theme.png" alt="Gestion du theme">
+        <strong>Logo du site :</strong>Le logo du site dans le coin supérieur gauche du site
+        <strong>Favicon :</strong>Le logo du site (favicon) qui apparaitra dans les onglets du navigateur
+        <strong>Couleur du fond :</strong>La couleur de fond du site
+        <strong>Réseaux sociaux :</strong>Des liens vers des réseaux sociaux
+
+Vous pouvez personnaliser les menus:
+
+<img src="tutorial/menus.png" alt="Gestion des menus">
+Les menus permettent de naviguer entre les différentes pages que vous avez créé. Pour créer un lien vers une page que vous avez créé, ajouter une Section :
+        <strong>Nom dans le menu :</strong> Le nom que vous voulez qui soit affiché
+        <strong>Page référencée :</strong> Indiquez /pages/&lt;le nom de la page créée&gt; (par exemple : /pages/contactez-nous) [Pour la page d'accueil, renseignez uniquement / (comme sur l'image précédente)]
+        <strong>Poids :</strong> Est la place que prend le nom du menu dans la page (par défaut vous pouvez le laisser à 1)
+
+<strong style="color: yellow; font-size: 25px;">N’oubliez pas de cliquer sur le bouton ‘Publier’ en haut à droite lorsque vous avez terminé</strong>
+</pre>`
+  return htmlToH(htmlTutorial);
 };
 
 CMS.registerAdditionalLink({