Construire jargons.dev [# Le dictionnaire de base

Bienvenue dans le deuxième volet de notre série sur jargons.dev !

Allons-y !

Suite au commit initial, j'ai commencé à travailler sur "le script fork" (vous vous demandez ce que c'est ?? Vous le découvrirez plus tard dans la série ?) mais je dois l'avouer et comme vous le découvrirez dans l'historique du commit, que j'ai pris une longue pause (3 mois+) après avoir travaillé sur jargons.dev. Durant cette période, j'ai eu l'occasion de faire une réflexion subconsciente qui a été formidable pour le projet.

Opportunité de réflexion

J'ai arrêté de travailler sur jargons.dev pendant un moment, pas intentionnellement mais parce que j'étais tellement impliqué dans le travail que je faisais sur Hearts, que je n'ai même pas pensé à jargons.dev. Eh bien, au cours de ces mois, la nouvelle année est arrivée (avec de nouveaux objectifs bien sûr), j'ai également expérimenté et été exposé à de nouvelles technologies. Une technologie m'a marqué et c'était Astro.

Astro en résonance avec jargons.dev

En janvier, j'avais pour objectif "d'apprendre de nouvelles technologies avec des documents", c'était un défi qui m'a permis de démarrer avec Astro après avoir entendu de très bonnes choses à ce sujet.

Avance rapide en mars, je me suis retrouvé à travailler sur un autre projet parallèle totalement différent (thème wp), je regardais un flux YT d'Eddie Jaoude où je l'ai fait savoir à Eddie mais sa réponse finirait par me pousser à travailler sur jargons.dev

Vous avez pas mal de projets parallèles... Je ne sais pas lequel.

Cette déclaration m'a fait réfléchir très sérieusement, c'est pourquoi j'ai décidé d'arrêter tous les nombreux projets parallèles et de me concentrer immédiatement sur certains qui comptaient, jargons.dev m'est facilement revenu à l'esprit.

À ce stade, je connaissais déjà Astro, — étant un framework pour les applications Web basées sur le contenu, avec un système de fichiers super simple, prêt pour i18n, SSG avec un excellent référencement (important pour le projet), performant, prise en charge d'autres bibliothèques frontales comme ReactJS avec des îles (j'aime particulièrement celle-ci) ; c'était un outil conçu au paradis pour créer jargons.dev.

Eh bien, je me suis rapidement mis au travail le prochain week-end disponible, j'ai dû travailler sur la partie dictionnaire de base du projet.

Le dictionnaire de base

npm create astro@latest

J'ai initialisé un nouveau projet Astro pour celui-ci, aussi simple que d'exécuter la commande ci-dessous et de suivre les invites...

npx astro add tailwind
npx astro add mdx

J'ai également ajouté l'intégration tailwindcss pour le style ; Intégration mdx pour le contenu ; c'était également très facile à configurer en exécutant simplement la commande respectivement

• J'ai continué et accompli les tâches suivantes
Création d'une page d'accueil passe-partout avec un formulaire de recherche statique
Temporairement résolu d'avoir le répertoire src/pages/word comme répertoire qui doit contenir chaque mot du dictionnaire sous forme de fichier mdx.
Implémentation de la mise en page word.astro, qui sert de cadre dans lequel le contenu de tous les fichiers .mdx pour les mots à l'intérieur du répertoire src/pages/word/ peut être rendu à l'aide de frontmatter.

Ajout également d'un mini formulaire de recherche statique à la barre de navigation de la mise en page des mots.

Avec cette fonctionnalité, nous sommes déjà en mesure de visualiser les mots du dictionnaire sur la route jargons.dev/word/[word]. Cela signifie que lorsque le fichier tuple.mdx est présent dans le répertoire src/pages/word/, nous pourrons accéder à la page pour voir le mot du dictionnaire en visitant jargons.dev/word/tuple

Les relations publiques

exploit : implémenter le dictionnaire de base #4

babillage

publié le

24 mars 2024

Cette Pull request implémente l'application de dictionnaire de base avec AstroJS

<script> // Detect dark theme var iframe = document.getElementById('tweet-1744263459867410930-456'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1744263459867410930&theme=dark" } </script>Modifications apportées<script> // Detect dark theme var iframe = document.getElementById('tweet-1768395047462981963-82'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1768395047462981963&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1771908483828363760-196'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1771908483828363760&theme=dark" } </script>

• Démarrage d'un nouveau projet astro
• Page d'accueil créée
• Implémentation de 2 mises en page
  • Base - wrapper principal principal pour toutes les pages et mises en page
  • Word - mise en page à utiliser sur les pages de mots
• Implémentation de déclencheurs de formulaire de recherche statique sur la page d'accueil et dans la mise en page Word

Captures d'écran

Page d'accueil

Page Word

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!