Fix/sponsors

[vvivanloc]

Salut Edith,

Petite question technique. Afin de pouvoir formater la description des sponsors en markdown depuis le CSV, je me suis inspiré de ton plugin gatsby-plugin-md-from-csv.

Les subtilités de la requête GraphQL m'ayant échappées, je n'ai pas trouvé le moyen de faire sans un copié-collé de ton plugin :disappointed:. J'ai alors créer le plugin gatsby-plugin-md-from-sponsors-csv Y a-t-il un moyen de factoriser le code de ce plugin ? Tu peux m'indiquer des liens ?

[emaulandi]

Je pense qu'on peut faire sans créer une copie.

1/ Créer des noeuds markdown à partir des noeuds csv, dans le fichier plugins/gatsby-plugin-md-from-csv/gatsby-node.js

• comme pour const participants = getNodesByType('HackavizParticipantsCsv'); il faut récupérer les noeuds csv correspondant aux sponsors par leur type (devrait etre du style SponsorCsv, voir les types en utilisant la vue graphQl en mode développement sur http://localhost:8000/___graphql)
• faire une boucle identique (ou mutualiser la boucle) participants.forEach pour créer des noeuds markdwon (avec un type spécifique : markdwonDescriptionFromHackavizParticipantsCsv pour la description hackaviz, un autre à spécifier) et créer les lien avec le noeud parent csv, dans l'exemple actuel createParentChildLink({ parent: parentNode, child: markdownNode });

On a intéret à garder ça dans le même plugin parce que c'est exactement la même logique.

2 / Récupérer les noeuds créés et mettre en forme leur contenu Dans le cas existant de la description des résulats hackaviz, ce la se passe dans le fichier src/hooks/useHackavizParticipants.js. On utilise le lien parent -enfant créé dans le plugin pour récupérer le noeud markdown et son contenu :

children {
            ... on markdwonDescriptionFromHackavizParticipantsCsv {
              childMarkdownRemark {
                htmlAst
              }
            }

(https://github.com/ToulouseDataViz/website/blob/main/src/hooks/useHackavizParticipants.js#L14)

Ce champ htmlAst peut ensuite être mis en forme grâce au composant MarkdwonText comme ici : https://github.com/ToulouseDataViz/website/blob/main/src/components/HackavizResult.js#L71

On pourra mettre à jour le hook useSponsors pour avoir le même fonctionnement (récupérer le noeud enfant markdown), et utiliser le composant MarkdwonText dans src/components/Sponsors.

---

Après avoir regardé rapidement les modifications : j'ai l'impression que le 2, c'est déjà en place :+1:

[vvivanloc]

Je pense qu'on peut faire sans créer une copie.

1/ Créer des noeuds markdown à partir des noeuds csv, dans le fichier plugins/gatsby-plugin-md-from-csv/gatsby-node.js

* comme pour `const participants = getNodesByType('HackavizParticipantsCsv');` il faut récupérer les noeuds csv correspondant aux sponsors par leur type (devrait etre du style SponsorCsv, voir les types en utilisant la vue graphQl en mode développement sur `http://localhost:8000/___graphql`)

* faire une boucle identique (ou mutualiser la boucle) `participants.forEach` pour créer des noeuds markdwon _(avec un type spécifique : `markdwonDescriptionFromHackavizParticipantsCsv` pour la description hackaviz, un autre à spécifier)_ et créer les lien avec le noeud parent csv, dans l'exemple actuel `createParentChildLink({ parent: parentNode, child: markdownNode });`

On a intéret à garder ça dans le même plugin parce que c'est exactement la même logique.

2 / Récupérer les noeuds créés et mettre en forme leur contenu Dans le cas existant de la description des résulats hackaviz, ce la se passe dans le fichier src/hooks/useHackavizParticipants.js. On utilise le lien parent -enfant créé dans le plugin pour récupérer le noeud markdown et son contenu :

children {
            ... on markdwonDescriptionFromHackavizParticipantsCsv {
              childMarkdownRemark {
                htmlAst
              }
            }

(https://github.com/ToulouseDataViz/website/blob/main/src/hooks/useHackavizParticipants.js#L14)

Ce champ htmlAst peut ensuite être mis en forme grâce au composant MarkdwonText comme ici : https://github.com/ToulouseDataViz/website/blob/main/src/components/HackavizResult.js#L71

On pourra mettre à jour le hook useSponsors pour avoir le même fonctionnement (récupérer le noeud enfant markdown), et utiliser le composant MarkdwonText dans src/components/Sponsors.

Après avoir regardé rapidement les modifications : j'ai l'impression que le 2, c'est déjà en place +1

Merci pour ces explications, je vais essayer mutualiser le code des deux plugins. moi -> https://letmegooglethat.com/?q=Configuring+Plugin+Options+Gatsby

[vvivanloc]

• http://localhost:8000/___graphql

[emaulandi]

du coup le code du plugin pourrait ressembler à

const sponsors = getNodesByType('SponsorsCsv');
const participants = getNodesByType('HackavizParticipantsCsv');

[...sponsors, ...participants]..forEach((parentNode, index) => {
    const childrenNodeId = ...
    const markdownNode = ..   type: `markdownDescription` ...
    createNode(markdownNode);
    createParentChildLink({ parent: parentNode, child: markdownNode });
})

et récupérer le contenu

children {
   ... on markdownDescription {
     childMarkdownRemark {
                htmlAst
    }
}

[vvivanloc]

du coup le code du plugin pourrait ressembler à

const sponsors = getNodesByType('SponsorsCsv');
const participants = getNodesByType('HackavizParticipantsCsv');

[...sponsors, ...participants]..forEach((parentNode, index) => {
    const childrenNodeId = ...
    const markdownNode = ..   type: `markdownDescription` ...
    createNode(markdownNode);
    createParentChildLink({ parent: parentNode, child: markdownNode });
})

et récupérer le contenu

children {
   ... on markdownDescription {
     childMarkdownRemark {
                htmlAst
    }
}

Mouarf! Je suis arrivé à la même conclusion... mais je n'ai pas vu ton commentaire à temps :smile:

[vvivanloc]

C'est bon pour la review. Encore merci pour les infos.

[vvivanloc]

éventuellement renommer l'option en nodeTypes pour bien spécifier qu'on donne ici le type de noeuds pour lesquels on va créer un noeud enfant markdwon (bonus)

okidoki

[emaulandi]

Super avec l'implémentation des options du plugin !