Constructor-agraphe NPM

!! Nombreuses coquilles orthographique et syntaxique !! !! Documentation inachevée !!

Fonctionnalités non abordées dans ce README.md

Suppression d'un élément dans le pages-map.mjs ou dans le components-map.mjs ;
Déplacement d'un élément dans le pages-map.mjs ou dans le components-map.mjs ;
Attributs des liens automatiques ;
Mise à jour du src des images automatique ;
Mise à jour automatique des props des fichiers de rendu pour les composants ;
Personalisation des composants Nav et NavGatsby ;
Création automatique des formulaires ;
Auto-form-schemes.mjs ;
Automatisation du style ;
Fonctions utilitaires de constructor ;
API automatisée ;
Filtrage des fichiers style inutiles ;
Mise à jour de la structure de constructor.

Présentation du module

Constructor permet de créer des pages et des composants react avec pour seule information à renseigner une architecture de composants basiques {h1, p, nav} et un contenu. Les régles d'import, l'ajout des attributs selon les recommandations de la WW3, la connexion des fichiers de données et de rendus ainsi que l'assemblage des composants sont gérés de manière totalement automatisée. Il en va de même pour l'architecture de l'application, qui est gérée par les fichiers pages-map.mjs et components-map.mjs, et des éléments de navigation. L'élaboration des metas des pages, la compression des fichiers, des images, la gestion des dimensions d'image selon la responsive, les attributs des liens, la création des fichiers style, l'import des images, la gestion et la création des formulaires ainsi que la vérification des reCaptcha sont également automatisés. Constructor propose également un lot de fonctions utilitaires et un système de Flash.

Constructor se base sur une pages-map (./constructor/constructor_pages-map.mjs) pour créer automatiquement les fichiers pages ainsi que leurs dossiers et la navigation du site.
Constructor se base sur un components-map (./constructor/constructor_components-map.js) pour créer automatiquement les fichiers de composants ainsi que leurs dossiers et gère automatiquement les _index.js pour automatiser les imports.
Constructor créé automatiquement les fichiers (data.mjs) de contenus textuels (texte, src, attributs, etc) depuis un object javaScript (pattern.mjs) pour chaque page et pour chaque composant. Ces fichiers se trouvent dans le dossier ./constructor/constructor_pages pour les pages et ./constructor/constructor_components pour les composants avec une structure similaire à celle indiquée dans les pages-map.mjs et components-map.mjs. Pour chaque composant et page créés un fichier style sera également ajouté et les classes et id automatiquement attribuées.
Constructor assemble grâce à un super composant : <Dispatcher /> les fichiers data.mjs, pattern.mjs et le fichier du composant ou de la page afin de créer le rendu de manière totalement automatisée. Tout composant invoqué dans le pattern d'une page ou d'un composant sera invoqué lors du rendu de la même manière, permettant ainsi l'assemblage de composants sans limitation.

Installer le module

Pour installer le module : npm i constructor-agraphe ;

Lancer le module

Pour le lancer : npx constructor ;
Constructor vous demande le type de framework utilisé :
```
  ? Quel framework utilisez vous ? 
  >( ) Gatsby
  ( ) Next
  ( ) Create-React-App
```
Sélectionnez avec la touche "espace" puis validez avec la touche "enter".

Plusieurs dossiers et fichiers vont être créés :

./constructor (Dossier de base du module)
- ./constructor_components (Dossier contenant les composants)
  - ./mon_composant (Dossier d'un composant type)
    - ./pattern.mjs (Pattern/Structure du composant mon_composant)
    - ./data.mjs (Fichier de contenu/données du composant mon_composant)
  - ./_constructor-components-index.mjs (Fichier d'exportation de l'ensemble des patterns et des contents pour le dossier ./constructor_components)
- ./pages (Dossier contenant les pages)
  - ./ma_page (Dossier d'une page type)
    - ./pattern.mjs (Pattern/Structure de la page ma_page)
    - ./data.mjs (Fichier de contenu/données de la page ma_page)
  - ./_index.mjs (Fichier d'exportation de l'ensemble des patterns et des data pour le dossier ./pages)
- ./_constructor-index.mjs (index d'exportation des éléments du dossier constructor)
- ./_auto-form-schemes.mjs (Fichier contenant le plan et la configuration des formulaires)
- ./components-map.mjs (Fichier contenant le plan des composants)
- ./custom-content.mjs (Fichier de personalisation du contenu et d'assemblage de composants)
- ./pages-map.mjs (Fichier contenant le plan des pages)

Si ils n'existent pas, les dossiers et les fichiers suivants vont être créés :

./src
- ./components
  - ./_components-index.mjs (Fichier d'exportation des composants)
  - ./monComposant.js (Fichier du composant mon_composant)
- ./media
  - ./files_to_download (Dossier des fichiers statiques)
  - ./fonts (Dossier des polices)
    - ./font_convert (Dossier des polices converties)
    - ./font_original (Dossier des polices originales)
  - ./img (Dossier des images)
    - ./img_compress (Dossier des images compressées)
    - ./img_original (Dossier des images originales)
- ./pages
  - ./ma-page.js (Fichier de la page ma_page)
- ./style
  - ./style_components (Dossier des fichiers style des composants)
    - ./_style-components-used-without-src-index.scss (Fichier d'exportation des fichiers .scss utilisés et non invoqués directement dans leurs composants, voir composant onlyDispatcher)
  - ./style_config (Dossier contenant les fichiers de configuration du style)
    - ./variables_and_mixins
      - ./_style-variables-and-mixins-index.scss
      - ./colors.scss (Fichier pour configurer les couleurs)
      - ./common-mixins.scss (Mixins utilitaires)
      - ./typography-mixins (Mixins typographiques)
      - ./variables.scss (Variables pour configurer le style)
    - ./_style-config-index.scss
    - ./common.scss (Style de base)
    - ./flash.scss (Style des flashs)
    - ./fonts.scss (Configuration des polices)
    - ./form.scss (Style des formulaires)
    - ./typography.scss (Style typographique)
  - ./style_pages (Dossier des fichiers style des pages)
- ./static (Dossier contenant les éléments statiques nécessaire lors du build)
- ./static_for_optimization (Dossier dans lequel les éléments statiques doivent être placés, constructor optimisera le contenu de ce dossier puis injectera dans le dossier ./static les éléments optimisés)
- ./env (Fichier stockant les variables d'environnements nécessaires à constructor)
- ./gatsby-browser.js (Fichier dans lequel constructor importera les fichiers ./src/style/style_config/_style-config-index.scss et ./src/style/style_components/_style-components-used-without-src-index.scss)

Constructor va automatiquement créer les dossiers et fichiers nécessaires dans les dossiers ./constructor et ./src en fonction des éléments renseignés dans les fichiers pages-map.mjs et components-map.mjs. Dans le cas présent, le pages-map.mjs contient une clé "home" et le components-map.mjs contient une clé "footer".

Les fichiers _index.mjs créés par constructor ne doivent jamais être modifiés au risque de provoquer des défaillances, la mise à jour de ces fichiers se fait de manière totalement automatisée

Fonctionnement du fichier pages-map.mjs

Pour chaque page dans le pages-maps.mjs constructor va :

_ ajouter un lien dans le composant Nav ou NavGatsby (selon le framework);
_ créer un fichier de rendu dans le dossier ./src/pages;
_ créer un dossier portant le nom de la page avec un fichier pattern.mjs et data.mjs dans le dossier ./constructor/constructor_pages;
_ créer un fichier .scss dans le dossier ./src/style/style_pages;
_ importer et connecter l'ensemble de ces fichiers entre eux.

Syntaxe du fichier

Le fichier pages-map.mjs est un object. La clé est le nom de la page. La valeur est soit un string correspondant au last path de l'url soit un tableau contenant les informations suivantes:

[
  "<path>", //valeur obligatoire il s'agit ici du path;
  "nofollow", //valeur facultative, si renseignée, tous les liens pointant vers cette page seront indiqués en 'nofollow';
  "external", //valeur facultative, si renseignée, tous les liens pointant vers cette page seront indiqués en 'external';
  "_blank", //valeur facultative, si renseignée, tous les liens pointant vers cette page ouvriront la page dans un nouvel onglet;
  "noindex", //valeur facultative, si renseignée, la page aura une meta robots noindex;
  "nonav", //valeur facultative, si renseignée, la page n'apparait pas dans la navigation du composant Nav ou NavGatsby;
  "nopage" //valeur facultative, si renseignée, aucun fichier de rendu, de pattern, de data et de style ne sera créé;
]

Il est possible de créer des structures complexes de site en englobant des objets. Ainsi renseigner une clé en racine du pages-map crééra une page "racine". Créer un objet englobant des clés dans le pages-map ajoutera un niveau de profondeur à l'architecture et ainsi de suite.

Par exemple:

```
export const Footer = {
    Home: "",
    features:{
        "Origin of a Name": "origin-of-a-name",
        "Gender of a Name": "gender-of-a-name",
        Price: ["pricing", "nofollow", "_blank"] //Les liens vers cette page auront des attributs rel="nofollow" et target="_blank";
    },
    "API Documentation": "api",
    Download: "download-app"
}
```

Interprétation du fichier

La page Home sera accessible à monsite.fr La page Origin of a Name à monsite.fr/features/origin-of-a-name La page Gender of a Name à monsite.fr/features/gender-of-a-name La page Price à monsite.fr/features/pricing La page API Documentation à monsite.fr/api La page Download à monsite.fr/download-app

Structure du dossier ./constructor

La structure dans le dossier ./constructor sera la suivante :

./constructor
- ./constructor_pages
  - ./Home
    - ./data.mjs
    - ./pattern.mjs
  - ./features
    - ./OriginOfAName
      - ./data.mjs
      - ./pattern.mjs
    - ./GenderOfAName
      - ./data.mjs
      - ./pattern.mjs
    - ./Price
      - ./data.mjs
      - ./pattern.mjs
  - ./APIDocumentation
    - ./data.mjs
    - ./pattern.mjs
  - ./Download
    - ./data.mjs
    - ./pattern.mjs
  - ./_constructor-pages-index.mjs

Structure du dossier ./src

Si le framework utilisé est Gatsby, le nom des fichiers des pages dans le dossier ./src reprendra le path (valeur) renseigné dans le pages-map et non son nom (key) pour respecter les conventions du framework. La page disposant d'un root path "/" sera renommée index.js

La structure dans le dossier ./src sera la suivante :

./src
- ./pages
  - ./features
    - ./origin-of-a-name.js
    - ./gender-of-a-name.js
    - ./pricing.js
  - ./api.js
  - ./download-app.js

Automatisation du composant navigation

Un composant de navigation pouvant être invoqué dans un pattern sera automatiquement créé. Ce composant aura la structure suivante :

    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li>Features
                <ul>
                    <li><a href="features/origin-of-a-name">Origin of a Name</a></li>
                    <li><a href="features/gender-of-a-name">Gender of a Name</a></li>
                    <li><a href="features/pricing" rel="nofollow" target="_blank" >Price</a></li>
                </ul>
            </li>
            <li><a href="/api">API Documentation</a></li>
            <li><a href="/download-app">Download</a></li>
        </ul>
    </nav>

Si le framework utilisé est Gatbsy, les liens internes seront remplacés par des <Link></Link>.

Fonctionnement du fichier components-map.mjs

Syntaxe du fichier

La structure d'écriture est la même que celle du pages-map.mjs. Au lien de renseigner la path, il faut indiquer le type de composant. La clé de l'objet est le nom du composant, la valeur un string pouvant être : "dispatcher", "react", "onlyDispatcher"; Peu importe le type de composant un fichier scss sera toujours créé.

Si il s'agit d'un composant "dispatcher":

_ l'objet du pattern créé contiendra une clé "content" avec comme valeur un tableu dans lequel il sera possible d'y imbriquer d'autres composants;
_ le fichier du composant créé dans ./src/components contiendra le composant <Dispatcher /> qui se chargera du rendu des composants enfants indiqués dans le content: [] du pattern.mjs.
_ le fichier du composant créé dans ./src/components peut être personalisé afin d'inclure des fonctions ou des composants supplémentaires au <Dispatcher />;

Si il s'agit d'un composant "onlyDispatcher":

_ l'objet du pattern créé contiendra une clé "content" avec comme valeur un tableu dans laquelle il sera possible d'y imbriquer d'autres composants;
_ aucun fichier ne sera créé dans ./src/components. Les composants "onlyDispatcher" ne sont que des agrégations de composants pouvant être invoqués dans les patterns des autres composants ou pages.

Si il s'agit d'un composant "react":

_ l'objet du pattern créé ne contiendra pas de clé "content";
_ le fichier du composant créé dans ./src/components ne contiendra pas le composant <Dispatcher />. Il s'agit ici d'un composant react pouvant être importé directement dans le fichier src d'un autre composant "react" ou "dispatcher". Ce composant peut également être invoqué dans les patterns d'autres composants et pages.

Par exemple:

    export const Footer = {
        Footer: "dispatcher",
        navigation:{
            "Sidebar": "onlyDispatcher",
            "Navbar": "react",

        }
    }

Interprétation du fichier

Structure du dossier ./constructor

La structure dans le dossier constructor sera la suivante :

./constructor
- ./constructor_components
  - ./Footer
    - ./data.mjs
    - ./pattern.mjs
  - ./navigation
    - ./Sidebar
      - ./data.mjs
      - ./pattern.mjs
    - ./Navbar
      - ./data.mjs
      - ./pattern.mjs
  - ./_constructor-components-index.mjs

Structure du dossier ./src

La structure dans le dossier constructor sera la suivante :

./src
- ./components
  - ./navigation
    - ./Navbar.js
  - ./Footer.js

pattern.mjs et data.mjs

Le fichier pattern.mjs Le fichier pattern.mjs défini l'architecture et les props du composant ou de la page. Chacune de ses clés correspondent à un props ou un attribut. La clé "content" correspond aux composants enfants. Il s'agit d'un tableau dans lequel des composants de base, des composants natifs au module constructor-agraphe, comme Nav et NavGatsby, ou des composants créés dans le dossier constructor, comme Footer, peuvent être insérés.
Le fichier data.mjs Le fichier data.mjs regroupe les données textuelles du composant à renseigner. Ces données comprennent le contenu des balises textuelles (<p>, <a>, <h1>, <dt>, etc.), ainsi que des attributs nécessitants une valeur personalisable (src, alt, cite, etc).

Ajouter des composants enfants

Etat initial d'un pattern

Fichier ./constructor/constructor_components/Footer/pattern.mjs

import {defaultPatterns, constructorComponentsPatterns} from "constructor-agraphe";
import {customPatterns} from "../../../custom-content.mjs";
import {} from "../.._constructor-components-index.mjs";
import {customPatterns} from "../../custom-contents.mjs";
const {h1,h2,h3,h4,h5,h6,p,a,small,cite,legend,code,li,dt,dd,time,link,span,img,label,input,textarea,button,figcaption,ins,svg} = defaultPatterns;
const {CloseButton,NavGatsby,ReCaptchaLoop} = constructorComponentsPatterns();
const {} = customPatterns();


export const Footer = {
    Footer: {
        /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
          dataId: "footer",
          componentType: "dispatcher",
          className: "footer",
          content: []
    }
}

La clé content: [] contient les éléments enfants qui seront traités par le dispatcher. La valeur className du pattern d'un composant et l'id d'une page ne pouront jamais être modifiées. Constructor remplacera toujours vos modifications par la valeur initiale. Cela afin de ne pas briser le lien entre le composant et son fichier de style. Cependant lors de l'invocation de ce composant dans un autre pattern, vous aurez la posibilité d'ajouter une classe au className du composant invoqué. Un composant "onlyDispatcher" aditionnera toujours son className à ses composants enfants de premier niveau. Car un composant "onlyDispatcher" n'a pas de rendu propre, contrairement à ses composants enfants renseignés dans son content: [].

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {
}

Completez le content: [] du pattern

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
export const Footer = {
    Footer: {
        /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
        dataId: "footer",
        componentType: "dispatcher",
        className: "footer",
        content: [h4, p, a, img] // Nous ajoutons des composants de base au composant footer
    }
}

Nous ajoutons dans le composant Footer les composants de base suivant : <h4></h4>, <p></p> suivi d'un <a></a> puis d'une <img/>.

Lancez npx constructor

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [
      {
        h4: {
          dataId: "i02svcqj26"
        }
      },
      {
        p: {
          dataId: "iy4c0im8op"
        }
      },
      {
        a: {
          dataId: "i62ro5eb90"
        }
      },
      {
        img: {
          dataId: "it315alj0n"
        }
      }
    ]
  }
}

Les patterns des composants de base indiqués dans content: [] ont été ajoutés.

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {

  footer: {

    i02svcqj26: {
      /* ------------------ <h4> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    iy4c0im8op: {
      /* ------------------ <p> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    i62ro5eb90: {
      /* ------------------ <a> ------------------ */
      dangerouslySetInnerHTML: "",
      href: ""
    },

    it315alj0n: {
      /* ------------------ <img> ------------------ */
      alt: "",
      src: ""
    }
  }

L'ajout de composants de base dans le content: [] du pattern a provoqué l'ajout de champs textuels à renseigner dans le fichier data.mjs. Constructor connait les régles de la WW3 il ajoutera donc automatiquement les champs devant être renseignés dans le fichier data.mjs (par exemple "src", "alt", etc.).

Les balises de types text prennent comme valeur de contenu dangerouslySetInnerHTML. Ainsi des strings contenants des balises <strong></strong>, <span></span>, etc, sont acceptées.

Ajouter des composants enfants de section

Il est possible dans le "content" d'ajouter des composants de section ex: <main></main>, <section></section>, <div></div>, <form></form>, <span></span>, etc.

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [
      {
        h4: {
          dataId: "i02svcqj26"
        }
      },
      {div: [ //Ouverture d'un composant section <div>
        {
            p: {
              dataId: "iy4c0im8op"
            }
        },
        {
            a: {
              dataId: "i62ro5eb90"
            }
        }
       ]}, //Fermeture du composant section <div>
      {
        img: {
          dataId: "it315alj0n"
        }
      }
    ]
  }
}

Notez que {div: []} est un sucre syntaxique pour {div: {content: []}}. Les deux sont valides.

Constructor convertira l'ensemble en :

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [
      {
        h4: {
          dataId: "i02svcqj26"
        }
      },

      {
        div: {
          /* --------------------------------- <div> --------------------------------- */
          dataId: "div_ia18l3h2jh",
          content: [
            {
              p: {
                dataId: "iy4c0im8op"
              }
            },
            {
              a: {
                dataId: "i62ro5eb90"
              }
            }
          ]
        }
      },
      {
        img: {
          dataId: "it315alj0n"
        }
      }
    ]
  }
}

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {

  footer: {

    i02svcqj26: {
      /* ------------------ <h4> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    div_ia18l3h2jh: {
      /* --------------------------------- <div> --------------------------------- */

      iy4c0im8op: {
        /* ------------------ <p> ------------------ */
        dangerouslySetInnerHTML: ""
      },

      i62ro5eb90: {
        /* ------------------ <a> ------------------ */
        dangerouslySetInnerHTML: "",
        href: ""
      }
    },

    it315alj0n: {
      /* ------------------ <img> ------------------ */
      alt: "",
      src: ""
    }
  }
}

Les attributs et props des composants

Certaines clés du pattern sont traitées comme des props ou des attributs.

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [
      {
        h4: {
          dataId: "i02svcqj26",
          className: "titre-du-footer" //Ajout d'un attribut className
        }
      },
      {
        p: {
          dataId: "iy4c0im8op"
        }
      },
      {
        a: {
          dataId: "i62ro5eb90"
        }
      },
      {
        img: {
          dataId: "it315alj0n",
          width: 800, //Ajout d'un attribut width
          height: 800 //Ajout d'un attribut height
        }
      }
    ]
  }
}

Les clés ajoutées ci-dessus modifieront ou ajouterons des attributs. Ainsi le composant <h4></h4> aura une classe et <img /> un width et un height. Contrairement aux valeurs textuelles devant être renseignées dans le fichier data.mjs, la majorité des props et des attributs sont considérés comme des valeurs courtes et donc à renseigner dans le pattern.mjs.

Il est important de ne pas changer le dataId d'un pattern ou alors de changer également la clé correspondant dans le fichier data.mjs faute de quoi la correspondance des valeurs ne pourra plus se faire. Si vous déplacez le pattern d'un composant enfant afin de modifier l'architecture, Constructor parviendra toujours à retrouver sa correspondance textuelle dans le fichier data.mjs grâce à son dataId. Même si ce dernier n'est plus dans le même composant de section.

Le cas particulier de l'attribut options

Il est possible d'ajouter une clé "options" qui prend comme valeur un tableau. options: [] Les strings indiqués dedans seront traités comme des attributs ou des props de type textuel ou booléan.

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [
      {
        h4: {
          dataId: "i02svcqj26",
          className: "titre-du-footer" //Ajout d'un attribut className
        }
      },
      {
        p: {
          dataId: "iy4c0im8op"
        }
      },
      {
        a: {
          dataId: "i62ro5eb90",
          options: ["referrerpolicy", "target", "download"] //Ajoutons des options pour le composant enfant
        }
      },
      {
        img: {
          dataId: "it315alj0n",
          width: 800, //Ajout d'un attribut width
          height: 800 //Ajout d'un attribut height
        }
      }
    ]
  }
}

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {

  footer: {

    i02svcqj26: {
      /* ------------------ <h4> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    iy4c0im8op: {
      /* ------------------ <p> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    i62ro5eb90: {
      /* ------------------ <a> ------------------ */
      referrerpolicy: "", //On retrouve ici nos options
      target: "", //On retrouve ici nos options
      download: "", //On retrouve ici nos options
      dangerouslySetInnerHTML: "",
      href: ""
    },

    it315alj0n: {
      /* ------------------ <img> ------------------ */
      alt: "",
      src: ""
    }
  }
}

Les options 'referrerpolicy', 'target' et 'download' ont été ajoutées dans le fichier data.mjs car elles nécessitent qu'une valeur textuelle soit renseignée.

Les autres options impliquant un ajout de champs dans le fichier data.mjs sont les suivantes : "label", "placeholder", "helper", "error", "type". Celles-ci sont particulèrement utiles pour les composants <input />.

Il est possible d'ajouter d'autres valeurs dans les champs options par exemple "disabled", "required", etc. Ces valeurs ne généreront pas de champs dans le fichier data.mjs car il s'agit d'attributs boolean. Ainsi indiquer options:"required" activera directement cet attribut.

Lors de la fusion du pattern.mjs du data.mjs et du fichier Footer.js, toutes les clés et les attributs laissées vides ne seront pas passées comme attribut au composant footer.js. Ainsi si une valeur n'est pas renseignée le composant n'en aura tout simplement pas l'attribut, cela afin d'éviter d'augmenter la densité HTML inutilement. C'est pourquoi l'utilisation des options pour y passer des valeurs booléan est recommandée.

Créer de nouvelles régles pour la génération de contenu textuel

Dans le dossier ./constructor/constructor_components un fichier custom-contents.mjs permet de personaliser les options devant générer un champ textuel dans le fichier data.mjs ou de créer des assemblages de composants enfants.

Création d'une option textuelle

Fichier ./constructor/constructor_components/custom-content.mjs

  ....
  // Options custom des composants
      const customOptions = [
          "customOption", //On ajoute une option "customOption" comme nécéssitant une valeur textuelle dans le data.mjs
      ];
  ....

Fichier ./constructor/constructor_components/Footer/pattern.mjs

  ....
  export const Footer = {
    Footer: {
      /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
      dataId: "footer",
      componentType: "dispatcher",
      className: "footer",
      content: [
        {
          a: {
            dataId: "i62ro5eb90",
            options: ["optionCustom"] //Ajout de l'option pour le composant enfant <a></a>
          }
        }
      ]
    }
  }

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {

  footer: {

    i62ro5eb90: {
      /* ------------------ <a> ------------------ */
      optionCustom: "", //Le champ textuel a été ajouté
      dangerouslySetInnerHTML: "",
      href: ""
    }
  }
}

Constructor ajoutera un chaque fois une valeur textuelle à renseigner dans le fichier data.mjs lorsque l'option "optionCustom" sera renseignée.

Création d'un composant regroupant d'autres composants

Il est possible de créer, dans le fichier ./custom-content.mjs, des assemblages de composant. Notez cependant qu'il s'agit ici d'assemblage basique ne permettant pas l'architecture avec des composants de section (ex: <div>/div>, <form></form>, etc) ou de personnaliser les patterns directement dans le fichier ./custom-content.mjs. Pour cela, vous devez créer un composant prévu à cet effet avec ./components-map.mjs et le personnaliser directement via son fichier pattern.mjs.

Fichier ./constructor/constructor_components/custom-content.mjs

  ....
  // Contenu custom des composants
      const customContents = {
          customGrouping: ["h4", "p", "a", "NavGatsby"], //Création d'un assemblage de composant
      };
  ....

Fichier ./constructor/constructor_components/Footer/pattern.mjs

import {defaultPatterns, constructorComponentsPatterns} from "constructor-agraphe";
import {customPatterns} from "../../../custom-content.mjs";
import {} from "../.._constructor-components-index.mjs";
import {customPatterns} from "../../custom-contents.mjs";
const {h1,h2,h3,h4,h5,h6,p,a,small,cite,legend,code,li,dt,dd,time,link,span,img,label,input,textarea,button,figcaption,ins,svg} = defaultPatterns;
const {CloseButton,NavGatsby,ReCaptchaLoop} = constructorComponentsPatterns();
const {customGrouping} = customPatterns(); //Les assemblages de composant sont automatiquement importés

 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    className: "",
    content: [customGrouping] // Ajout de l'assemblage
  }
}

Constructor modifiera les fichiers ainsi:

Fichier ./constructor/constructor_components/Footer/pattern.mjs

....
 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [

      {
        customGrouping: {
          /* \\\\\\ <customGrouping> \\\\\\ */
          dataId: "customGrouping_i4mmmkp2ji",
          content: [
            {
              h4: {
                dataId: "iin8p4qmvb"
              }
            },
            {
              p: {
                dataId: "ivvh1jsk2w"
              }
            },
            {
              a: {
                dataId: "iibdeefzsq"
              }
            },
            {
              NavGatsby: {}
            },
          ]
        }
      }
    ]
  }
}

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {

  footer: {

    customGrouping_i4mmmkp2ji: {
      /* \\\\\\ <customGrouping> \\\\\\ */

      iin8p4qmvb: {
        /* ------------------ <h4> ------------------ */
        dangerouslySetInnerHTML: ""
      },

      ivvh1jsk2w: {
        /* ------------------ <p> ------------------ */
        dangerouslySetInnerHTML: ""
      },

      iibdeefzsq: {
        /* ------------------ <a> ------------------ */
        dangerouslySetInnerHTML: "",
        href: ""
      }
    }
  }
}

Intégrer un composant à un autre composant ou à une page

Les composants créés dans le fichier components-map.mjs comme Footer.js peuvent être utilisés comme composant enfant d'une page ou d'un autre composant.

Nous allons insérer le composant Footer dans la page Home.

Fichier ./constructor/constructor_components/Footer/pattern.mjs

  ....
 export const Footer = {
  Footer: {
    /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
    dataId: "footer",
    componentType: "dispatcher",
    className: "footer",
    content: [
      {
        h4: {
          dataId: "i02svcqj26",
          className: "footer-title"
        }
      },
      {
        p: {
          dataId: "iy4c0im8op"
        }
      },
      {
        a: {
          dataId: "i62ro5eb90",
          options: ["referrerpolicy", "target"]
        }
      },
      {
        img: {
          dataId: "it315alj0n",
          width: 800, //Ajout d'un attribut width
          height: 800 //Ajout d'un attribut height
        }
      }
    ]
  }

Fichier ./constructor/constructor_components/Footer/data.mjs

 export const FooterData = {

  footer: {

    i02svcqj26: {
      /* ------------------ <h4> ------------------ */
      dangerouslySetInnerHTML: "Titre du footer"
    },

    iy4c0im8op: {
      /* ------------------ <p> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    i62ro5eb90: {
      /* ------------------ <a> ------------------ */
      referrerpolicy: "origin",
      target: "_blank",
      dangerouslySetInnerHTML: "Consulter notre api",
      href: "/api"
    },

    it315alj0n: {
      /* ------------------ <img> ------------------ */
      alt: "my website is the best",
      src: "./public/logo.jpg"
    }
  }

Fichier ./constructor/constructor_pages/home/pattern.mjs

  import {defaultPatterns, constructorComponentsPatterns} from "constructor-agraphe";
  import {Footer} from "../../components/_index.mjs"; //Les composants du components-map.mjs sont automatiquement importés
  import {customPatterns} from "../../custom-contents.mjs";
  const {h1,h2,h3,h4,h5,h6,p,a,small,cite,code,li,dt,dd,time,link,span,img} = defaultPatterns;
  const {CloseButton,Dispatcher,Flash,Head,NavGatsby} = constructorComponentsPatterns();
  const {} = customPatterns();

  export const Home = {

    head: {
      dataId: "itk7a8ude5"
    },

    body: {
      /* ======================================================== <BODY> ======================================================== */
      dataId: "home",
      id: "home",
      content: [
        {main: [
          {div: [
            h1,
            p,
            p,
          ]},
          h2,
          p,
          p
        ]},
        Footer
      ]
    }
  }

Constructor compile les fichiers en :

Fichier ./constructor/constructor_pages/home/pattern.mjs

...
 export const HomeData = {

  head: {
    dataId: "itk7a8ude5"
  },

  body: {
    /* ======================================================== <BODY> ======================================================== */
    dataId: "home",
    id: "home",
    content: [

      {
        main: {
          /* +++++++++++++++++++++++++++++++++++++++++++++++++++ <MAIN> +++++++++++++++++++++++++++++++++++++++++++++++++++ */
          dataId: "main_icqr4laktq",
          content: [

            {
              div: {
                /* --------------------------------- <div> --------------------------------- */
                dataId: "div_ivonfihnt7",
                content: [
                  {
                    h1: {
                      dataId: "ir11rjzykt"
                    }
                  },
                  {
                    p: {
                      dataId: "iwow3rg44h"
                    }
                  },
                  {
                    p: {
                      dataId: "itcw42zx74"
                    }
                  }
                ]
              }
            },
            {
              h2: {
                dataId: "i3e29cmdqq"
              }
            },
            {
              p: {
                dataId: "immgfl14rc"
              }
            },
            {
              p: {
                dataId: "ihiszmaque"
              }
            }
          ]
        }
      },

      {
        Footer: {
          /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
          dataId: "footer",
          componentType: "dispatcher",
          className: "footer",
          contentPath: "../../constructor_components/Footer/pattern.mjs" //Pour réduire la densité des patterns, le content est remplacé par son l'emplacement du fichier pattern de Footer.
        }
      }
    ]
  }
}

Le pattern du composant Footer est directement inséré dans le pattern de la page Home. Les patterns enfants de Footer sont insérés avec leurs valeurs. Le content: [] du pattern de Footer fait autorité, par conséquent sa modification dans le pattern de Home n'est pas possible. Cependant dans la page Home, les clés de Footer autre que content: [] peuvent être modifiées librement. Celles-ci ne seront pas ecrasées mais fusionnées avec la pattern initial de Footer (voir chapitre suivant).

Fichier ./constructor/constructor_pages/home/data.mjs

 export const Footer = {

  itk7a8ude5: {
    /* ------------------ <head> ------------------ */
    title: "",
    description: "",
    keywords: "",
    robots: ""
  },

  home: {
    /* =================================================== <BODY> =================================================== */

    main_ix5bhk1n6v: {
      /* +++++++++++++++++++++++++++++++++++++++++++++++++++ <MAIN> +++++++++++++++++++++++++++++++++++++++++++++++++++ */

      div_imitpwe3kg: {
        /* --------------------------------- <div> --------------------------------- */

        iuf0ooiqhr: {
          /* ------------------ <h1> ------------------ */
          dangerouslySetInnerHTML: ""
        },

        ikqpeheh3f: {
          /* ------------------ <p> ------------------ */
          dangerouslySetInnerHTML: ""
        },

        ipaohd08hg: {
          /* ------------------ <p> ------------------ */
          dangerouslySetInnerHTML: ""
        }
      },

      i19qybo69h: {
        /* ------------------ <h2> ------------------ */
        dangerouslySetInnerHTML: ""
      },

      iv5ds1qdjm: {
        /* ------------------ <p> ------------------ */
        dangerouslySetInnerHTML: ""
      },

      ia6zajqimz: {
        /* ------------------ <p> ------------------ */
        dangerouslySetInnerHTML: ""
      }
    }
  },
  footer: {

    i02svcqj26: {
      /* ------------------ <h4> ------------------ */
      dangerouslySetInnerHTML: "Titre du footer"
    },

    iy4c0im8op: {
      /* ------------------ <p> ------------------ */
      dangerouslySetInnerHTML: ""
    },

    i62ro5eb90: {
      /* ------------------ <a> ------------------ */
      referrerpolicy: "origin",
      target: "_blank",
      dangerouslySetInnerHTML: "Consulter notre api",
      href: "/api"
    },

    it315alj0n: {
      /* ------------------ <img> ------------------ */
      alt: "my website is the best",
      src: "./public/logo.jpg"
    }
  }
 }

Les valeurs renseignées dans le fichier data.mjs de footer sont insérées dans le fichier data.mjs de la page home. Comme pour le pattern, c'est le data.mjs du footer qui fait autorité. Ainsi il est uniquement possible de personnaliser les champs textuels du footer dans le data.mjs de la page home si ces derniers ont été laissés vide dans le data.mjs du footer.

Par exemple :

Fichier ./constructor/constructor_pages/home/data.mjs

  ...
  footer: {

    i02svcqj26: {
      /* ------------------ <h4> ------------------ */
      dangerouslySetInnerHTML: "Titre du footer"
    },

    iy4c0im8op: {
      /* ------------------ <p> ------------------ */
      dangerouslySetInnerHTML: "" // Seul la valeur renseignée ici sera prise en compte
    },

    i62ro5eb90: {
      /* ------------------ <a> ------------------ */
      referrerpolicy: "origin",
      target: "_blank",
      dangerouslySetInnerHTML: "Consulter notre api",
      href: "/api"
    },

    it315alj0n: {
      /* ------------------ <img> ------------------ */
      alt: "my website is the best",
      src: "./public/logo.jpg"
    }
  }
}

En conclusion on peut invoquer un composant dans un autre composant ou une page. Le composant invoqué integrera son propre pattern et ses valeurs textuelles. Le pattern du composant invoqué peut être modifié dans le pattern parent à l'exception de son content:[]. Les valeurs textuelles du composant invoqué peuvent être personalisées dans le data.mjs du composant parent uniquement si celles-ci ont été laissées vide dans son data.mjs.

Modification du pattern du composant invoqué dans le composant parent

Il est possible de modifier les valeurs du pattern (autre que content: [] du composant invoqué) dans le composant parent. Ce qui entrainera une fusion des deux patterns.

Si la clé existe déja dans le pattern invoqué alors c'est la valeur du pattern invoqué qui l'emportera. Si la clé n'existe pas dans le pattern invoqué ou est laissée vide alors c'est la valeur du pattern parent qui l'emportera.

Si la valeur de la clé est un tableau, les deux tableaux seront fusionnés. Pour interdir une valeur dans le tableau depuis le pattern invoqué, il suffit dans celui-ci d'indiquer la valeur entre "--<valeur>--" ex: "--2--", "--withNav--", les valeurs "2" et "withNav" seront retirées du tableau du pattern parent si elles y sont présentes.

Fichier ./constructor/constructor_components/Footer/pattern.mjs

  ...
  {
    Footer: {
        /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
        dataId: "footer",
        className: "footer",
        options: ["isAside", "--withNav--", "--2--"],
        font: {
            type: "Roboto",
            defaultSize: "",
        },
        content: [
        {
            h4: {
            dataId: "i02svcqj26",
            className: "footer-title"
            }
        },
        {
            p: {
            dataId: "iy4c0im8op"
            }
        },
        {
            a: {
            dataId: "i62ro5eb90",
            options: [
                "referrerpolicy",
                "target"
            ]
            }
        },
        {
            img: {
            dataId: "it315alj0n",
            width: 800,
            height: 800
            }
        }
        ]
    }
  }

Fichier ./constructor/constructor_pages/home/pattern.mjs

  ...
  body: {
    /* ======================================================== <BODY> ======================================================== */
    dataId: "home",
    id: "home",
    content: [
      {
        Footer: {
          /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
          dataId: "footer",
          className: "footer",
          options: ["fullWidth", "withNav", 2], //Ces valeurs seront ajoutées à celles renseignées dans le pattern de footer mais "2" et "withNav" seront supprimées.
          background: "red", //Cette valeur sera ajoutée
          font: {
              type: "Arial", //Cette valeur sera ecrasée par celle renseignée dans le pattern de footer
              defaultSize: "16px", //Cette valeur sera ecrasée par celle renseignée dans le pattern de footer
          },
          content: [ //Toute modification du content ne sera pas prise en compte
            {
              h4: {
                dataId: "i02svcqj26",
                className: "footer-title"
              }
            },
            {
              p: {
                dataId: "iy4c0im8op"
              }
            },
            {
              a: {
                dataId: "i62ro5eb90",
                options: [
                  "referrerpolicy",
                  "target"
                ]
              }
            },
            {
              img: {
                dataId: "it315alj0n",
                width: 800,
                height: 800
              }
            }
          ]
        }
      }
    ]
  }

Le fichier ./constructor/constructor_components/Footer/pattern.mjs ne change pas.

Constructor compile le fichier pattern de home en :

Fichier ./constructor/constructor_pages/home/pattern.mjs

 ...
 body: {
    /* ====================================================== <BODY> ====================================================== */
    dataId: "home",
    id: "home",
    content: [

      {
        Footer: {
          /* \\\\\\\\\\\\\\\\\\\ <FOOTER> \\\\\\\\\\\\\\\\\\\ */
          dataId: "footer",
          className: "footer",
          options: [
            "isAside",
            "fullWidth"
          ],
          font: {
            type: "Roboto",
            defaultSize: ""
          },
          background: "red",
          content: [
            {
              h4: {
                dataId: "i02svcqj26",
                className: "footer-title"
              }
            },
            {
              p: {
                dataId: "iy4c0im8op"
              }
            },
            {
              a: {
                dataId: "i62ro5eb90",
                options: [
                  "referrerpolicy",
                  "target"
                ]
              }
            },
            {
              img: {
                dataId: "it315alj0n",
                width: 800,
                height: 800
              }
            }
          ]
        }
      }
    ]
  }

Fonctionnalités non abordées dans ce README.md

Suppression d'un élément dans le pages-map.mjs ou dans le components-map.mjs ;
Déplacement d'un élément dans le pages-map.mjs ou dans le components-map.mjs ;
Attributs des liens automatiques ;
Mise à jour du src des images automatique ;
Mise à jour automatique des props des fichiers de rendu pour les composants ;
Personalisation des composants Nav et NavGatsby ;
Création automatique des formulaires ;
Auto-form-schemes.mjs ;
Automatisation du style ;
Fonctions utilitaires de constructor ;
API automatisée ;
Filtrage des fichiers style inutiles ;
Mise à jour de la structure de constructor.

react gatsby next website generator JSON Pattern SEO

1.0.2

11 months ago

1.0.1

11 months ago