Projekt-Tagebuch Blog, Tag 27

coden

Daniel Kaser|5. Juni 2024

Lesedauer: ca. 2 min.

Wochen-Ziele:

• Blog-Projekt-Tagebuch in den Blog uploaden

Tages-Ziele:

• zweiten echten Blog-Beitrag erstellen
• Artikel-View-Count zu jedem Artikel anzeigen
• Text (und Links) für AboutMe schreiben/einfügen
• VGWort einbinden

Mein tägliches Kata hat heute wieder etwas länger gedauert, das war wirklich ein Biest... Danach hab ich noch eine Bewerbung 'quick and dirty' rausgehauen und dann war schon wieder Mittach.

Danach hab ich den zweiten Blog-Post rausgehauen. Tag 1 vom Blog-Projekt-Tagebuch. 💪

Dann hab ich mich um die About-Page gekümmert. Als Erstes hab ich meine LinkExternal-Komponente noch in der CustomStyledMDX ergänzt, so dass ich diese jetzt im Markdown verwenden kann.

Ich hab sie auf ein großes A geschlüsselt. D.h., ich muss nicht für jeden Link den Tag <LinkExternal> schreiben, sondern kann einfach <A> schreiben. Deutlich kürzer. Mit href sieht das dann so aus:

<A href=”https://danielkaser.de”>Geile Seite</A>

Hier die Zeile in der CustomStyledMDX:

export const customComponents: MDXComponents = {
  // ...
  A: (props) => <LinkExternal {...props}>{props.children}</LinkExternal>,
  // ...
};

KORREKTUR AUS DER ZUKUNFT!

Die Schlüsselung auf das 'A' funktioniert leider nicht wie oben behauptet.

Leider kann man nur originäre HTML-Elemente (z.B. <a> oder <span>) in der CustomStyledMDX umschlüsseln bzw. erweitern.

ALTERNATIVE

Man könnte hier eine extra 'A'-Komponente anlegen, die die 'LinkExternal'-Komponente rendert, aber das hab ich mir erst mal verkniffen.

Dann hab ich den About-Text eingefügt, den ich heimlich schon vorbereitet hatte. Mit der LinkExternali-Komponente konnte ich dann auch direkt alle Links einfügen.

Ich hab noch rasch eine getSocialUrl()-Funktion gebaut. Dieser übergibt man den gewünschten Anbieter, dessen in der Link-Config hinterlegten URL man haben möchte. Zurück bekommt man die richtige URL oder einen flotten Fehler:

export function getSocialUrl(socialName: string): string {
  const social = links.social.find(({ name }) => socialName === name);
  if (!social) {
    throw new Error(
      `Uh-oh! Social (link) for '${socialName}' does not exist...`,
    );
  }
  return social.url;
}

Cool. Dann kann ich mich doch demnächst mal daran machen, die VG Wort einzubinden!