Erstellen von jargons.dev [# Das Basiswörterbuch

Willkommen zum zweiten Teil unserer Serie auf jargons.dev!

Machen wir uns an die Arbeit!

Nach dem ersten Commit begann ich mit der Arbeit am „Fork-Skript“ (ich frage mich, was das ist? Das erfahren Sie später in der Serie?), aber ich muss gestehen, und wie Sie im Commit-Verlauf sehen werden, dass ich eine lange Pause (über 3 Monate) von der Arbeit an jargons.dev eingelegt habe. In dieser Zeit hatte ich die Gelegenheit, unbewusste Überlegungen anzustellen, die für das Projekt großartig waren.

Gelegenheit zum Nachdenken

Ich habe die Arbeit an jargons.dev eine Zeit lang eingestellt, nicht absichtlich, sondern weil ich so in die Arbeit an Hearts vertieft war, dass ich nicht einmal an jargons.dev gedacht habe. Nun, im Laufe dieser Monate kam das neue Jahr (natürlich mit neuen Zielen), und ich habe auch einige neue Technologien erlebt und mit ihnen in Kontakt gebracht. Eine Technologie ist mir besonders aufgefallen und das war Astro.

Astro Resonating with jargons.dev

Im Januar hatte ich das Ziel, „neue Technologien mit Dokumenten zu erlernen“. Dies war eine Herausforderung, die mich dazu brachte, mit Astro anzufangen, nachdem ich großartige Dinge darüber gehört hatte.

Im März arbeitete ich an einem völlig anderen Nebenprojekt (wp-Theme). Ich schaute mir einen YT-Stream von Eddie Jaoude an, in dem ich Eddie darauf aufmerksam machte, aber seine Reaktion zwang mich letztendlich dazu, wieder daran zu arbeiten jargons.dev

Sie haben einige Nebenprojekte ... ich weiß nicht, welches.

Diese Aussage brachte mich zum Nachdenken, und so beschloss ich, all die vielen Nebenprojekte zu stoppen und mich sofort auf einige zu konzentrieren, die wichtig waren. Jargons.dev kam mir sofort wieder in den Sinn.

Astro war mir zu diesem Zeitpunkt bereits einigermaßen vertraut – ein Framework für inhaltsgesteuerte Web-Apps, mit einem supereinfachen Dateisystem, i18n-ready, SSG mit großartiger SEO (wichtig für das Projekt), performant, Unterstützung für andere Frontend-Bibliotheken wie ReactJS mit Inseln (ich liebe diese besonders); Es war ein himmlisches Werkzeug, mit dem man jargons.dev erstellen konnte.

Nun, am nächsten freien Wochenende machte ich mich schnell an die Arbeit und musste am Basiswörterbuchteil des Projekts arbeiten.

Das Basiswörterbuch

npm create astro@latest

Ich habe dafür ein neues Astro-Projekt initialisiert, indem ich einfach den folgenden Befehl ausführe und den Anweisungen folge...

npx astro add tailwind
npx astro add mdx

Ich habe auch die Tailwindcss-Integration für das Styling hinzugefügt; MDX-Integration für Inhalte; Dies war auch super einfach zu konfigurieren, indem man einfach den entsprechenden Befehl ausführte

• Ich fuhr fort und erledigte die folgenden Aufgaben
Eine Standard-Homepage mit statischem Suchformular erstellt
Vorübergehend beschlossen, das Verzeichnis src/pages/word als das Verzeichnis zu verwenden, das jedes Wort im Wörterbuch als mdx-Datei enthalten soll.
Das Word.astro-Layout wurde implementiert, das als Rahmen dient, in dem der Inhalt aller MDX-Dateien für Wörter im Verzeichnis src/pages/word/ mit frontmatter gerendert werden kann.

Außerdem wurde der Wortlayout-Navigationsleiste ein statisches Mini-Suchformular hinzugefügt.

Mit dieser Funktion können wir bereits Wörterbuchwörter auf der Route jargons.dev/word/[word] anzeigen. Das heißt, wenn die Datei tuple.mdx im Verzeichnis src/pages/word/ vorhanden ist, können wir die Seite erreichen, um das Wörterbuchwort zu sehen, indem wir jargons.dev/word/tuple besuchen

Die PR

Kunststück: Basiswörterbuch implementieren #4

plapperbey

veröffentlicht am

24. März 2024

Diese Pull-Anfrage implementiert die Basis-Wörterbuch-App mit 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>Änderungen vorgenommen<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>

• Neues Astroprojekt gestartet
• Homepage erstellt
• 2 Layouts implementiert
  • Basis – Haupt-Primär-Wrapper für alle Seiten und Layouts
  • Word – Layout zur Verwendung auf den Word-Seiten
• Statische Suchformular-Trigger auf der Startseite und im Word-Layout implementiert

Screenshots

Homepage

Wortseite

Auf GitHub ansehen

Das obige ist der detaillierte Inhalt vonErstellen von jargons.dev [# Das Basiswörterbuch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!