Wochen-Ziele:
- Blog-Projekt-Tagebuch (Mai) in den Blog uploaden
Tages-Ziele:
Docs-Links-Refactor
Als Erstes hab ich heute das Refactoren für die Docs-Links abgeschlossen. Gestern hatte ich bereits angefangen, aber nach etwas Ärger mit den Typen hab ich die Lösung auf heute verschoben.
Was ich da gemacht hab ist ein bisschen schwer zu erklären. Am besten du kuckst dir die Datei mal an.1
Da ich keine Lust habe, jeden Link jedes Mal wieder komplett mit http und www etc. zu tippen, bzw. zu kopieren, hatte ich bereits vor einiger Zeit die Docs-Links in einer Variablen gespeichert, auf die ich dann im MDX zugreifen kann.
Das war mir aber nicht genug! Ich hatte nämlich nicht mal Lust die Links dort alle einzufügen. Also hab ich es so gedeichselt, dass ich nur noch das entscheidende Link-Ende dort hinterlege. Ein Beispiel:
Die URL zu Array-map() von Mozilla wäre ungefähr, ziemlich genau, in etwa so:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Wirklich entscheidend ist hier aber nur map. Vielleicht noch Array.
In meine preDocs-Variable schreibe ich jetzt also:
// src/config/links/docs.ts
const preDocs: DocLinks = {
array: {
map: "map",
},
};
Dann starte ich meine generateDocLinks()-Funktion, die aus allen Properties in der preDocs-Variablen eine neue docs-Variable mit den kompletten Links generiert.
Wie gesagt, am besten du kuckst dir die ganze Datei mal an. Entweder im Commit oder direkt in der Datei docs.ts1
Im MDX kann ich dann auf diese URLs ganz einfach zugreifen:
{docs.array.map}
Sweet!
Tag-Cloud
Als nächstes hab ich mich direkt an die Tag-Cloud gemacht. Die hatte ich bisher vor mir her geschoben, aber heute war es soweit!
Im Prinzip war das der Category-Cloud sehr ähnlich, darum will ich dich hier nicht mit dem fast ähnlichen Code langweilen.
Aber was ich mir nicht verkneifen konnte war, Auto-Tags zu generieren. Ihr wisst, ich bin faul und ich habe keine Lust, Dinge zweimal zu tippen. Darum werden jetzt aus der codeChallenge-Property im Frontmatter automatisch die language und die platform gezogen und für die Tags verwurstet.
Das Ganze wird dann in der BlogTagsCloud-Komponente gerendert, die auch wieder sehr ähnlich zur BlogCategoryCloud-Komponente ist.
Dann hab ich die Komponente nur noch in die Sidebar von SingleBlogPage und Blog-Liste geballert und aus allen Code-Challenge-Frontmatters die jetzt überflüssigen Tags entfernt.
Außerdem bekommt man einen freundlichen Fehler, sollte man doch versehentlich die Sprache oder die Plattform noch mal in die Tags schreiben. Mit dem Hinweis, dass dies doch bitteschön überflüssig ist.
Content
Dann hab ich noch Tag 15 fürs Blog-Tagebuch hochgeladen und die Feedback-Section in alle Blog-Posts eingefügt.
Nachtrag:
Da ich mir ja eigentlich vorgenommen hatte, 2 Blog-Posts hochzuladen, hab ich vor Wut Samstag noch 2 extra fertig gemacht. Das waren Blog-Tagebuch Tag 16 und 17. 💪