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 finden werden, dass ich eine lange Pause (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“. Das 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, daher 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.

Zu diesem Zeitpunkt war ich mit Astro 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örterbuch des Projekts arbeiten.

Das Basiswörterbuch

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

npm create astro@latest

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

npx astro add tailwind
npx astro add mdx

Ich fuhr fort und erledigte die folgenden Aufgaben

• Eine Standard-Homepage mit statischem Suchformular erstellt
• Vorübergehend behoben, um das Verzeichnis src/pages/word als 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 Minisuchformular 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

Die PR

Kunststück: Basiswörterbuch implementieren #4

plapperbey gepostet am 24. März 2024

Diese Pull-Anfrage implementiert die Basis-Wörterbuch-App mit AstroJS

Änderungen vorgenommen

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

Screenshots

Startseite

Word-Seite

Auf GitHub ansehen