Merge branch 'main' of https://git.deuxfleurs.fr/maximeg/palettetest

assets/ananke/css/override.css

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

content/_index.md

@@ -1,11 +1,11 @@
 ---
-title: Palette test (;
-description: Intéressant...
+title: Site Palette
+description: Exemple d'affichage de site
 theme_version: 2.8.2
-cascade:
-  featured_image: /images/gohugo-default-sample-hero-image.jpg
-featured_image: static/images/vlcsnap-2022-08-13-18h09m04s198.png
+featured_image: /images/uploads/1846959.jpg
 ---
 ## Contenu
 
-news
+
+
+

content/pages/Contactez-nous/_index.md

@@ -2,7 +2,7 @@
 title: Contactez-nous
 Description: C'est la description de la page
 description: c'est la deuxième description de la page
-featured_image: static/images/vlcsnap-2022-08-13-18h09m04s198.png
+featured_image: assets/uploads/Palette.png
 ---
 Vous pouvez nous contactez par mail à contact@envieappartagee.fr
 

content/pages/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Page d'accueil
 description: Présentation et fonctionnement
-featured_image: static/images/logo-association-envie-appartagee.png
+featured_image: /images/uploads/Palette.png
 ---
 
 

content/pages/page-2.md

@@ -0,0 +1,6 @@
+---
+title: Page 2
+description: C'est la page 2
+featured_image: /images/uploads/infrastructure-du-projet.png
+---
+C'est la page 2.

content/pages/page-test.md

@@ -1,6 +1,6 @@
 ---
 title: Page test
 description: Bonjour c'est une page test
-featured_image: static/images/vlcsnap-2022-08-13-18h09m04s198.png
+featured_image: assets/uploads/Palette.png
 ---
 C'est une page test

hugo_config/_default/theme_settings.toml

@@ -1,7 +1,8 @@
 [params]
 background_color_class = "bg-red"
-site_logo = "/images/logo-association-envie-appartagee.png"
-favicon = "/images/uploads/logo-association-envie-appartagee.png"
+site_logo = "/images/uploads/Palette.png"
+favicon = "assets/uploads/Palette.png"
+custom_css = [ "override.css" ]
 
   [[params.ananke_socials]]
   name = "facebook"
@@ -28,4 +29,5 @@ weight = "1"
 
 [[menus.main]]
 name = "Contactez-nous"
-url = "/pages/contactez-nous/"
+url = "/pages/contactez-nous/"
+weight = "1"

static/admin/config.yml

@@ -1,15 +1,16 @@
 backend:
+  # name: test-repo
   name: gitea
   repo: maximeg/palettetest # Path to your Gitea repository
   app_id: e8c9892d-30f2-428f-b639-172402acbf94 # The Client ID provided by Gitea
   api_root: https://git.deuxfleurs.fr/api/v1 # API URL of your Gitea instance
   base_url: https://git.deuxfleurs.fr/ # Root URL of your Gitea instance
-  # optional, defaults to main
-  # branch: main
+site_url: 'https://palettetest.web.deuxfleurs.fr/'
 locale: 'fr'
-media_folder: "/static/images"
-public_folder: "/images"
+media_folder: "static/images/uploads"
+public_folder: "/images/uploads"
 media_library:
+  folder_support: true
   name: Bibliothèque
   config:
     max_file_size: 1024000
@@ -21,52 +22,26 @@ collections:
     create: false
     destroy: false
     description: >
-      Créez vos propre pages
-    folder: content/blog
-    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
-    summary_fields:
-      - title
-      - date
-    sortable_fields:
-      fields:
-        - title
-        - date
-      default:
-        field: title
-    view_filters:
-      filters:
-        - name: posts-with-index
-          label: Posts With Index
-          field: title
-          pattern: 'This is post #'
-        - name: posts-without-index
-          label: Posts Without Index
-          field: title
-          pattern: front matter post
-    view_groups:
-      groups:
-        - name: by-year
-          label: Year
-          field: date
-          pattern: '\d{4}'
-    fields:
-      - label: Title
-        name: title
-        widget: string
-      - label: Publish Date
-        name: date
-        widget: datetime
-        date_format: yyyy-MM-dd
-        time_format: 'HH:mm'
-        format: "yyyy-MM-dd'T'HH:mm:ss.SSSXXX"
-      - label: Cover Image
-        name: image
-        widget: image
-        required: false
-      - label: Body
-        name: body
-        widget: markdown
-        hint: "*Main* __content__ __*goes*__ [here](https://example.com/)."
+      Customisez votre page d'accueil
+    files:
+      - name: pageaccueil
+        label: Page d'accueil
+        file: content/_index.md
+        fields:
+          - label: Titre
+            name: title
+            widget: string
+          - label: Description
+            name: description
+            widget: text
+          - label: Image de couverture
+            name: featured_image
+            widget: image
+            media_library:
+              folder_support: false
+          - label: Corps
+            name: body
+            widget: markdown
   - name: pages
     #to build a hugo section (look for it)
     label: Pages du site
@@ -87,103 +62,18 @@ collections:
       - label: Image de couverture
         name: featured_image
         widget: image
-        media_folder: "/static/images"
-        public_folder: "/images"
         media_library:
+          folder_support: false
           config:
           max_file_size: 1024000
       - label: Corps
         name: body
         widget: markdown
-  # - label: 'Settings'
-  #   name: settings
-  #   files:
-  #     - label: 'Theme Settings'
-  #       name: theme settings
-  #       file: 'site/settings.toml'
-  #       fields:
-  #         - label: toml file
-  #           name: toml file
-  #           widget: 'file'
-  #           media_library:
-  #             config: 
-  #               multiple: true
-  # - name: posts
-  #   icon: postPage
-  #   label: Posts
-  #   label_singular: Post
-  #   description: >
-  #     The description is a great place for tone setting, high level information,
-  #     and editing guidelines that are specific to a collection.
-  #   folder: content/_posts
-  #   slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
-  #   summary_fields:
-  #     - title
-  #     - date
-  #   sortable_fields:
-  #     fields:
-  #       - title
-  #       - date
-  #     default:
-  #       field: title
-  #   create: true
-  #   view_filters:
-  #     filters:
-  #       - name: posts-with-index
-  #         label: Posts With Index
-  #         field: title
-  #         pattern: 'This is post #'
-  #       - name: posts-without-index
-  #         label: Posts Without Index
-  #         field: title
-  #         pattern: front matter post
-  #       - name: draft
-  #         label: Drafts
-  #         field: draft
-  #         pattern: true
-  #   view_groups:
-  #     groups:
-  #       - name: by-year
-  #         label: Year
-  #         field: date
-  #         pattern: '\d{4}'
-  #       - name: draft
-  #         label: Drafts
-  #         field: draft
-  #   fields:
-  #     - label: Title
-  #       name: title
-  #       widget: string
-  #     - label: 'Draft'
-  #       name: 'draft'
-  #       widget: 'boolean'
-  #       default: false
-  #     - label: Publish Date
-  #       name: date
-  #       widget: datetime
-  #       date_format: yyyy-MM-dd
-  #       time_format: 'HH:mm'
-  #       format: "yyyy-MM-dd'T'HH:mm:ss.SSSXXX"
-  #     - label: Cover Image
-  #       name: image
-  #       widget: image
-  #       required: false
-  #     - label: Description
-  #       name: description
-  #       widget: text
-  #     - label: Category
-  #       name: category
-  #       widget: string
-  #     - label: Body
-  #       name: body
-  #       widget: markdown
-  #       hint: '*Main* __content__ __*goes*__ [here](https://example.com/).'
-  #     - label: Tags
-  #       name: tags
-  #       widget: list
   - name: settings
     label: 'Configuration'
     icon: gear
+    editor:
+      preview: false
     files:
       - label: 'Configuration du thème'
         name: theme settings
@@ -217,6 +107,8 @@ collections:
                     value: 'bg-green'
                   - label: 'Violet'
                     value: 'bg-purple'
+                  - label: 'Orange'
+                    value: 'bg-orange'
               - label: 'Réseaux sociaux'
                 name: ananke_socials
                 widget: list

static/admin/index.js

@@ -123,14 +123,124 @@ const post2SVG = h('svg', {
   ])
 ]);
 
+const paletteSVG = h('svg', {
+  width: '800px',
+  height: '800px',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, [
+  h('path', {
+    d: 'M5.57489 2.07403C5.83474 2.19892 6 2.4617 6 2.75001C6 3.57985 6.31211 4.05763 6.70313 4.63948L6.73156 4.68175C7.0641 5.17579 7.5 5.8234 7.5 6.75001C7.5 7.69552 7.02282 8.52959 6.29615 9.02452C6.48733 9.1848 6.65672 9.38248 6.80225 9.61803C7.27801 10.388 7.5 11.5645 7.5 13.2549C7.5 14.967 7.27003 17.023 6.89541 18.6644C6.70914 19.4806 6.47843 20.2335 6.20272 20.7994C6.06598 21.08 5.89948 21.3541 5.69217 21.5685C5.48714 21.7804 5.17035 22.0049 4.75 22.0049C4.32965 22.0049 4.01286 21.7804 3.80783 21.5685C3.60052 21.3541 3.43402 21.08 3.29728 20.7994C3.02157 20.2335 2.79086 19.4806 2.60459 18.6644C2.22997 17.023 2 14.967 2 13.2549C2 11.5645 2.22199 10.388 2.69775 9.61803C2.84328 9.38248 3.01267 9.1848 3.20385 9.02452C2.47718 8.52959 2 7.69552 2 6.75001C2 6.38181 2.00034 5.74889 2.38341 4.93168C2.75829 4.13192 3.47066 3.21301 4.78148 2.16436C5.00661 1.98425 5.31504 1.94914 5.57489 2.07403ZM3.5 6.74875V6.75001C3.5 7.44036 4.05964 8.00001 4.75 8.00001C5.44036 8.00001 6 7.44036 6 6.75001C6 6.31097 5.81518 6.00743 5.45814 5.47615L5.44592 5.45796C5.21705 5.11747 4.94673 4.71532 4.75381 4.19756C4.21053 4.74999 3.9105 5.208 3.74159 5.56833C3.5 6.08374 3.5 6.4505 3.5 6.74875ZM3.97383 10.4065C3.72572 10.808 3.5 11.6315 3.5 13.2549C3.5 14.8565 3.71774 16.8005 4.06698 18.3306C4.24264 19.1003 4.44289 19.726 4.64574 20.1424C4.68308 20.219 4.71806 20.2834 4.75 20.3369C4.78194 20.2834 4.81692 20.219 4.85426 20.1424C5.05711 19.726 5.25736 19.1003 5.43302 18.3306C5.78226 16.8005 6 14.8565 6 13.2549C6 11.6315 5.77428 10.808 5.52617 10.4065C5.41327 10.2237 5.30119 10.1372 5.20105 10.0886C5.09322 10.0363 4.95068 10.0049 4.75 10.0049C4.54932 10.0049 4.40678 10.0363 4.29895 10.0886C4.19881 10.1372 4.08673 10.2237 3.97383 10.4065Z',
+    fill: '#FFFFFF', // Changement de la couleur en blanc
+  }),
+  h('path', {
+    d: 'M9.99994 14.917C9.46162 14.8267 8.94761 14.6647 8.46806 14.4412C8.48904 14.0349 8.49994 13.637 8.49994 13.2549C8.49994 13.0791 8.49768 12.9066 8.49298 12.7376C8.94409 13.0407 9.4531 13.2644 9.99994 13.3885V10.5C9.99994 9.67157 10.6715 9 11.4999 9H15.4999C15.4999 6.51472 13.4852 4.5 10.9999 4.5C9.97153 4.5 9.0237 4.84498 8.26586 5.42552C8.06633 4.8731 7.78116 4.44995 7.58275 4.15554L7.54248 4.09572C8.51976 3.40549 9.7125 3 10.9999 3C14.3136 3 16.9999 5.68629 16.9999 9H20.4999C21.3284 9 21.9999 9.67157 21.9999 10.5V19.5C21.9999 20.3284 21.3284 21 20.4999 21H11.4999C10.6715 21 9.99994 20.3284 9.99994 19.5V14.917ZM11.4999 14.9795V19.5H20.4999V10.5H16.8109C16.185 12.932 14.0726 14.7672 11.4999 14.9795ZM15.2439 10.5H11.4999V13.4725C13.239 13.2803 14.6794 12.097 15.2439 10.5Z',
+    fill: '#FFFFFF', // Changement de la couleur en blanc
+  })
+]);
+
 CMS.registerIcon('homePage', () => homeSVG);
 CMS.registerIcon('menuPage', () => menuSVG);
 CMS.registerIcon('gear', () => gear);
 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({