diff --git a/assets/ananke/css/override.css b/assets/ananke/css/override.css new file mode 100644 index 0000000..3597ea5 --- /dev/null +++ b/assets/ananke/css/override.css @@ -0,0 +1,3 @@ +.measure-wide{ + max-width: 60em; +} \ No newline at end of file diff --git a/hugo_config/_default/theme_settings.toml b/hugo_config/_default/theme_settings.toml index d36b2bb..3a1715f 100644 --- a/hugo_config/_default/theme_settings.toml +++ b/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" diff --git a/static/admin/config.yml b/static/admin/config.yml index 9b7547b..3f252ac 100644 --- a/static/admin/config.yml +++ b/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 diff --git a/static/admin/index.js b/static/admin/index.js index 3ea7ef0..369b3bc 100644 --- a/static/admin/index.js +++ b/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 = ` +
+
+Bienvenue au tutoriel d’utilisation de Palette !
+

+Palette vous permet de modifier et personnaliser facilement vos sites. Voici les différentes catégories disponibles dans l’interface :
+
+Différentes catégories disponibles
+          Page principale : Vous pouvez choisir le contenu de la page d’accueil de votre site
+          Pages de sites : Vous pouvez créer et éditer des pages supplémentaires à ajouter à votre site
+          Configuration : Vous pouvez personnaliser l’aspect global (thème) du site ainsi que les menus
+          Tutoriel : Vous y êtes (;
+          Media : 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.
+
+

+
+
Edition de page :

+
+Lorsque vous éditez une page vous pouvez éditer :
+
+Edition
+          Titre : Nom de la page
+          Description : Courte description de la page
+          Image de couverture : Image de bannière de la page
+          Corps : Vous pouvez renseigner du texte, images, liens, citations… pour le contenu de votre page
+    
+N’oubliez pas de cliquer sur le bouton ‘Publier’ en haut à droite lorsque vous avez terminé
+
+

+
+
Configuration :

+
+Vous pouvez personnaliser le thème:
+
+Gestion du theme
+        Logo du site :Le logo du site dans le coin supérieur gauche du site
+        Favicon :Le logo du site (favicon) qui apparaitra dans les onglets du navigateur
+        Couleur du fond :La couleur de fond du site
+        Réseaux sociaux :Des liens vers des réseaux sociaux
+
+Vous pouvez personnaliser les menus:
+
+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 :
+        Nom dans le menu : Le nom que vous voulez qui soit affiché
+        Page référencée : Indiquez /pages/<le nom de la page créée> (par exemple : /pages/contactez-nous) [Pour la page d'accueil, renseignez uniquement / (comme sur l'image précédente)]
+        Poids : Est la place que prend le nom du menu dans la page (par défaut vous pouvez le laisser à 1)
+
+N’oubliez pas de cliquer sur le bouton ‘Publier’ en haut à droite lorsque vous avez terminé
+
` + return htmlToH(htmlTutorial); }; CMS.registerAdditionalLink({ diff --git a/static/admin/tutorial/editeur.png b/static/admin/tutorial/editeur.png new file mode 100644 index 0000000..747c3da Binary files /dev/null and b/static/admin/tutorial/editeur.png differ diff --git a/static/admin/tutorial/liste.png b/static/admin/tutorial/liste.png new file mode 100644 index 0000000..14d61a2 Binary files /dev/null and b/static/admin/tutorial/liste.png differ diff --git a/static/admin/tutorial/menus.png b/static/admin/tutorial/menus.png new file mode 100644 index 0000000..2e642a8 Binary files /dev/null and b/static/admin/tutorial/menus.png differ diff --git a/static/admin/tutorial/theme.png b/static/admin/tutorial/theme.png new file mode 100644 index 0000000..7466181 Binary files /dev/null and b/static/admin/tutorial/theme.png differ