Construire jargons.dev [# Le script de l'éditeur Word

Vous vous souvenez de "The Word Editor" !? Voici le script responsable qui implémente ses fonctionnalités de bout en bout qui permettent d'écrire des modifications via l'interface utilisateur dans le référentiel forké d'un utilisateur.

La répartition fonctionnelle

L'éditeur Word habilité par le script doit remplir deux (2) fonctions, en suivant certaines étapes

1. Écrire un nouveau mot - essentiellement pour ajouter un nouveau mot au dictionnaire ; le fait dans les étapes suivantes...
   • Obtenez un fichier de modèle Word (.md) déjà établi
   • Remplissez l'espace réservé du modèle avec le titre et le contenu des mots collectés pour créer un fichier word.mdx dans le répertoire de mots approprié src/pages/browse
   • et validez la modification dans une branche/référence de modification établie sur le référentiel forké de l'utilisateur
2. Modifier/Mettre à jour les mots existants - modifiez le mot existant dans le dictionnaire, il le fait dans les étapes suivantes...
   • Récupérez un mot existant à partir du fork de l'utilisateur de jargons.dev (en recherchant dans le répertoire de mots src/pages/browse)
   • Analyser son contenu et apporter les modifications nécessaires
   • et et validez la modification dans une branche/référence de modification établie sur le référentiel forké de l'utilisateur

La répartition a inspiré la création des fonctions d'assistance et utilitaires suivantes.

• writeNewWord - une fonction qui accepte entre autres le titre et le contenu du mot, en exploitant l'instance authentifiée GitHub de l'utilisateur, elle effectue une opération d'écriture, c'est-à-dire l'écriture d'un nouveau fichier (word.mdx) dans un fork de jargons.dev sur le compte de l'utilisateur en son nom via le point de terminaison "PUT /repos/{owner}/{repo}/contents/{path}".

• getExistingWord - une fonction qui récupère simplement le contenu d'un fichier Word existant sur le référentiel forké de l'utilisateur, dans le but de l'utiliser pour le modifier. Pour ce faire, il prend le mot comme argument et le concatène dans le paramètre de chemin (exemple src/pages/browse/${normalizeAsUrl(word)}.mdx) de la requête qu'il adresse au point de terminaison "GET /repos/{owner} /{dépôt}/contents/{chemin}" ; Il est important de préciser que j'ai dû faire quelques ajustements aux données renvoyées par cette aide pour des raisons de consommation, les ajustements sont les suivants

  • Propriété title ajoutée : l'objet réponse.data qui provient de la requête vers le point de terminaison "GET /repos/{owner}/{repo}/contents/{path}" n'a pas de propriété title (c'est la mot lui-même);

  • Ajout de la propriété content_decoded : la propriété Response.data.content contient le contenu principal du mot récupéré, MAIS il est au format "base64" ; j'ai donc pensé que ce serait bien si la fonctionnalité l'utilise dans un format prêt à la consommation qui peut être utilisé immédiatement sans avoir besoin de convertir au moment de la consommation. C'est ce que j'ai fait avec le code ci-dessous...
    

    const { content, ...responseData } = response.data;
    
    return {
      title: word,
      content,
      content_decoded: Buffer.from(content, "base64").toString("utf-8"),
      ...responseData
    };
    

• updateExistingWord - avec un nom initial de editExistingWord et changé en nom actuel dans jargonsdev/jargons.dev#34, cette fonction effectue une opération similaire avec writeNewWord mais elle écrase le contenu du mot existant dans un fichier spécifique en remplaçant le fichier avec un autre fichier avec un contenu mis à jour. Cela se fait également via le compte de l'utilisateur en son nom via le point de terminaison "PUT /repos/{owner}/{repo}/contents/{path}".

• writeFileContent - cet assistant, comme son nom l'indique, fait une chose : il écrit le contenu du fichier pour les mots qui est soumis dans les requêtes faites à la fois par writeNewWord et updateExistingWord à l'API GitHub, il le fait en prenant un titre de mot et contenu (c'est-à-dire la définition du mot) en tant que variable et génère un contenu à partir d'un modèle qui en remplace le contenu de l'espace réservé.

Les relations publiques

exploit : implémenter le script `word-editor` #18

babillage publié le 02 avril 2024

Cette Pull request implémente le script de l'éditeur de mots ; la fonctionnalité principale de ce script est de permettre l'ajout d'un nouveau mot, la récupération et la mise à jour de mots existants qui sont des fichiers .mdx individuels résidant dans le répertoire src/pages/browse du projet. Ce script nous profite de toutes les fonctions d'assistance nécessaires pour effectuer ces opérations.

Modifications apportées

• Implémentation de la fonction writeNewWord - cette fonction prend 3 paramètres à savoir le userOctokit, forkedRepoDetails et le mot ; il exploite l'instance userOctokit pour effectuer une opération d'écriture, c'est-à-dire écrire un nouveau fichier (newWord.mdx) dans un fork de notre projet sur le compte de l'utilisateur au nom de l'utilisateur via le "PUT /repos/{owner}/{repo}/ contents/{path}" point de terminaison
• Implémentation de la fonction getExistingWord - cette fonction permet de récupérer les données des mots existants dans le fork de notre projet sur le compte de l'utilisateur en appelant le point de terminaison "GET /repos/{owner}/{repo}/contents/{path}" ; il renvoie un objet qui porte les propriétés suivantes qui nous intéressent principalement...
  • titre - titre du mot existant - il s'agit en fait de données personnalisées ajoutées à la réponse.données de l'appel effectué vers le point de terminaison
  • chemin - chemin d'accès au fichier Word existant
  • sha - SHA unique du mot existant
• Implémentation de la fonction editExistingWord - cette fonction prend 3 paramètres à savoir le userOctokit, forkedRepoDetails et le mot (contient les propriétés : chemin, sha, titre et contenu) ; il exploite l'instance userOctokit pour effectuer une opération d'édition, c'est-à-dire mettre à jour le fichier existant sur un fork de notre projet sur le compte de l'utilisateur au nom de l'utilisateur via le même "PUT /repos/{owner}/{repo}/contents/{path} "point de terminaison
• Fonction d'assistance writeFileContent implémentée - cette fonction aide à écrire un contenu pour notre fichier de mots de dictionnaire en le générant à partir d'une autre constante ajoutée dans le src/lib/template/word.md.js

Diffusion d'écran/Capture d'écran

trop paresseux pour enregistrer un screencast pour celui-ci ?, mais croyez-moi ? ça marche ?‍?

Voir sur GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!