Page dans menu (Scribouilli#98)

* gestion de l'affichage des pages dans le menu * changement nom variable menu * design modification menu et changement lien footer * gestion de l'affichage des pages dans le menu * changement nom variable menu * Améliorations readme * hideMenu => inMenu * Ajustements pour l'affichage des pages --------- Co-authored-by: David Bruant <[email protected]>
Scribouilli · Oct 30, 2023 · 1e1af8a · 1e1af8a
1 parent c133a16
commit 1e1af8a
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -71,15 +71,15 @@ Pour rendre accessible une nouvelle route :
 
 ## Développement
 
-- Forker le repo
-- modifier les settings
-  - donner les droits en écriture a _github action_
-  - pour déployer la branche `online`
-- ajouter votre url (ex: yaf.github.io) dans [Scribouilli/toctoctoc/allowlist.csv](https://github.com/Scribouilli/toctoctoc/blob/main/allowlist.csv)
+- Forker le repo sur votre compte
+- Modifier les settings
+  - Donner les droits en écriture a _github action_
+  - Pour déployer la branche `online`
+- Ajouter votre origine github pages (ex: `yaf.github.io``) dans [Scribouilli/toctoctoc/allowlist.csv](https://github.com/Scribouilli/toctoctoc/blob/main/allowlist.csv)
 
 Voilà à quoi ça peut ressembler : [github.com/yaf/scribouilli](https://github.com/yaf/scribouilli)
 
 Une fois les développements réalisé, vous pouvez faire une PR dans Scribouilli, en précisant votre url de développement pour que l'on puisse tester la modification.
 
 Des pre-commit hooks sont installés automatiquement avec `husky`. Si jamais il sont trop contraignants,
-il est possible de les ignorer avec l'option `--no-verify` de `git commit`.
+il est possible de les ignorer avec l'option `--no-verify` de `git commit`.
diff --git a/assets/scripts/components/screens/intern/Editeur.svelte b/assets/scripts/components/screens/intern/Editeur.svelte
@@ -248,12 +248,6 @@
 </Skeleton>
 
 <style lang="scss">
-  div {
-    & + p {
-      margin-top: 0.4rem;
-    }
-  }
-
   .accordion {
     margin-top: 3rem;
   }

diff --git a/assets/scripts/components/screens/intern/ListContenu.svelte b/assets/scripts/components/screens/intern/ListContenu.svelte
@@ -2,7 +2,7 @@
   import databaseAPI from '../../../databaseAPI'
   import store from '../../../store'
   import Skeleton from '../../Skeleton.svelte'
-  import { makeFrontMatterYAMLJsaisPasQuoiLa } from '../../../utils'
+  import { makePageFrontMatter } from '../../../utils'
 
   export let buildStatus
   export let listContenu = []
@@ -21,7 +21,7 @@
 
   let modification = false
 
-  const changeOrder = async e => {
+  const editClick = async e => {
     if (modification) {
       for (let page of listContenu) {
         await databaseAPI.writeFile(
@@ -30,10 +30,10 @@
           page.path,
           `${
             page.title
-              ? makeFrontMatterYAMLJsaisPasQuoiLa(
+              ? makePageFrontMatter(
                   page.title,
-                  true,
                   page.index,
+                  page.inMenu,
                 ) + '\n'
               : ''
           }${page.content}`,
@@ -69,15 +69,28 @@
             <li>
               <span>{contenu.title}</span>
               {#if modification}
-                <label>
-                  <input
-                    aria-label="Ordre de la page"
-                    type="number"
-                    min="1"
-                    max={store.state.pages.length}
-                    bind:value={contenu.index}
-                  />
-                </label>
+                <div class="gestionMenu">
+                  <label>
+                    Ordre de la page dans le menu
+                    <input
+                      class="order"
+                      aria-label="Ordre de la page dans le menu"
+                      type="number"
+                      min="1"
+                      max={store.state.pages.length}
+                      bind:value={contenu.index}
+                    />
+                  </label>
+                  <label>
+                    Afficher dans le menu
+                    <input
+                      class="inMenu"
+                      aria-label="Affichage de la page dans le menu"
+                      type="checkbox"
+                      bind:checked={contenu.inMenu}
+                    />
+                  </label>
+                </div>
               {:else}
                 <a
                   href="{atelierPrefix}?path={contenu.path}&repoName={repoName}&account={account}"
@@ -89,11 +102,11 @@
           {/each}
         </ul>
         {#if allowModification}
-          <button class="btn btn_small btn_secondary" on:click={changeOrder}
+          <button class="btn btn_small btn_secondary" on:click={editClick}
             >{#if modification}
               Enregistrer
             {:else}
-              Changer l'ordre des pages
+              Modifier le menu
             {/if}</button
           >
         {/if}
@@ -107,7 +120,7 @@
     margin: auto;
     margin-bottom: 4rem;
     text-align: left;
-    width: 22em;
+    width: 25em;
 
     li {
       font-size: 1.3rem;
@@ -122,6 +135,26 @@
         border-top: 1px solid black;
       }
 
+      .gestionMenu {
+        label {
+          display: flex;
+          align-items: center;
+          font-weight: normal;
+          font-size: 1rem;
+          margin-top: 0.5em;
+        }
+        .order {
+          max-width: 3em;
+        }
+
+        .inMenu {
+          display: block;
+          width: auto;
+          margin-right: 0.5em;
+          margin-top: 0.5em;
+        }
+      }
+
       a::before {
         content: ' ';
         display: block;
@@ -133,10 +166,9 @@
       }
 
       label {
-        width: 3em;
-
         input {
           width: 100%;
+          margin-left: 0.5em;
         }
       }
     }

diff --git a/assets/scripts/databaseAPI.js b/assets/scripts/databaseAPI.js
@@ -412,6 +412,8 @@ class DatabaseAPI {
           return {
             title: data?.title,
             index: data?.order,
+            // no `in_menu` proprerty is interpreted as the page should be in the menu
+            inMenu: data?.in_menu === true || data?.in_menu === undefined,
             path,
             content: markdownContent,
           }

diff --git a/assets/scripts/routes/atelier-articles.js b/assets/scripts/routes/atelier-articles.js
@@ -8,7 +8,7 @@ import {
   checkRepositoryAvailabilityThen,
   handleErrors,
   makeArticleFileName,
-  makeFrontMatterYAMLJsaisPasQuoiLa,
+  makeArticleFrontMatter,
 } from '../utils'
 
 import databaseAPI from '../databaseAPI'
@@ -145,7 +145,7 @@ export default ({ querystring }) => {
 
       const message = `création de l'article ${title || 'index.md'}`
       const finalContent = `${
-        title ? makeFrontMatterYAMLJsaisPasQuoiLa(title) + '\n' : ''
+        title ? makeArticleFrontMatter(title) + '\n' : ''
       }${content}`
 
       let newArticles =

diff --git a/assets/scripts/routes/atelier-pages.js b/assets/scripts/routes/atelier-pages.js
@@ -11,7 +11,7 @@ import {
   handleErrors,
   logMessage,
   makeFileNameFromTitle,
-  makeFrontMatterYAMLJsaisPasQuoiLa,
+  makePageFrontMatter,
 } from '../utils'
 import { setCurrentRepositoryFromQuerystring } from '../actions'
 import PageContenu from '../components/screens/PageContenu.svelte'
@@ -35,6 +35,7 @@ const makeMapStateToProps = fileName => state => {
           title: data?.title,
           index: data?.order,
           previousTitle: data?.title,
+          inMenu: true,
         }
       } catch (errorMessage) {
         logMessage(errorMessage, 'routes/atelier-pages.js:makeMapStateToProps')
@@ -59,6 +60,7 @@ const makeMapStateToProps = fileName => state => {
         content: '',
         previousTitle: undefined,
         previousContent: undefined,
+        inMenu: true,
       }),
       makeFileNameFromTitle: makeFileNameFromTitle,
       contenus: state.pages,
@@ -164,7 +166,7 @@ export default ({ querystring }) => {
 
       const finalContent = `${
         title
-          ? makeFrontMatterYAMLJsaisPasQuoiLa(title, true, index) + '\n'
+          ? makePageFrontMatter(title, index) + '\n'
           : ''
       }${content} `
 

diff --git a/assets/scripts/utils.js b/assets/scripts/utils.js
@@ -91,31 +91,32 @@ export function makeArticleFileName(title, date) {
 }
 
 /**
- *
- * @param {string} title
+ * 
+ * @param {string} title 
+ * @param {number?} index 
+ * @param {boolean} inMenu 
  * @returns {string}
  */
-export function makeFrontMatterYAMLJsaisPasQuoiLa(
+export function makePageFrontMatter(
   title,
-  pages = false,
-  index = null,
+  index = 1,
+  inMenu = true,
 ) {
-  if (pages) {
-    //s'il n'y a pas d'order, on n'en rajoute pas automatiquement
-    if (index === null || index === undefined) {
-      return [
-        '---',
-        'title: ' + '"' + title.replace(/"/g, '\\"') + '"',
-        '---',
-      ].join('\n')
-    }
     return [
       '---',
       'title: ' + '"' + title.replace(/"/g, '\\"') + '"',
       'order: ' + index,
+      'in_menu: ' + inMenu,
       '---',
     ].join('\n')
-  }
+}
+
+/**
+ * 
+ * @param {string} title 
+ * @returns {string}
+ */
+export function makeArticleFrontMatter(title){
   return [
     '---',
     'title: ' + '"' + title.replace(/"/g, '\\"') + '"',