Projekt-Tagebuch Blog, Tag 15

coden

Daniel Kaser|6. Mai 2024

Lesedauer: ca. 2 min.

Wochen-Ziele:

• Emails per Kontaktformular erhalten

Tages-Ziele:

• Kategorie-Route erstellen
• atemberaubende Readme erstellen
• zweiten echten Blog-Beitrag erstellen
• Kontaktformular einrichten

Ich hab am Wochenende mal ein bisschen den Blog als User getestet. Rasend schnell. Man klickt auf einen Link und die Seite ist sofort da. Affengeil alter! AFFENGEIL ALTER!! Hab ich bisher noch auf keiner Webseite erlebt. Jedensfalls nicht dass ich mich erinner könnte (oder wöllte...)

Genug gegackert. 🐔

Heute hab ich die Kategorie-Cloud erstellt. Also das, wo man alle Kategorien als Badges sehen und klicken kann. Wenn man auf eine Kategorie klickt, kommt man zu einer Liste aller Blog-Posts in dieser Kategorie.

Dafür musste ich erst mal eine weitere dynamische Route /category/[category] und page.tsx erstellen. Mit generateStaticParams() und generateMetadata(). Da die Kategorien Bestandteil des Blogs sind, hab ich sie als Sub-Routes des Blogs eingerichtet.

Dann hab ich ein bisschen refactored. Unter anderem hat das Mappen über die Blog-Posts seine eigene wiederverwendbare Komponente, BlogPostsList bekommen.

Danach hab ich die BlogCategoryCloud-Komponente erstellt. Zuerst loope ich durch alle Blogs um die Kategorien zu extrahieren. Am Ende bekomme ich ein Objekt mit allen Kategorien und der Anzahl ihrer Vorkommnisse.

Das wird dann noch alfabetisch sortiert und dann kann mit Object.entries durch die Kategorien gemappt und diese gerendert werden.

Dann hab ich mich nur noch ein bisschen mit dem Styling rumgeärgert, aber jetzt ist alles schick.

Nach der Kategorie-Cloud hab ich mich noch mal an die Navigation gemacht. Die aktiven NavLinks wurden nicht hervorgehoben, wenn man sich auf einer Sub-Route befand.

Also befand man sich z.B. direkt auf /blog war alles schick. Befand man sich aber auf /blog/ein-toller-blog-beitrag, wurde der Blog-NavLink nicht gehighlightet. Dem hab ich Abhilfe geschafft.

Jetzt funztsts¹ wie es soll. Obwohl der Code in der Komponente jetzt ein bisschen wild aussieht. Bitte nicht hinkucken...