Projekt-Tagebuch Blog, Tag 19

coden

Daniel Kaser|15. Mai 2024

Lesedauer: ca. 2 min.

Wochen-Ziele:

• Spenden-Möglichkeiten und Affiliate-Links auf SupportPage implementiert

Tages-Ziele:

• atemberaubende Readme erstellen
• zweiten echten Blog-Beitrag erstellen
• SupportPage zerstückeln

Ich habe ja meine Links alle global in einem Objekt gespeichert. Auf diese greife ich dann auch über das Objekt zu. Das hat den Vorteil, dass man Links bei Bedarf nur an einer Stelle ändern muss.

Teilweise hab ich auch Beschreibungs-Texte mit in diesem Objekt, z.B. für die Affiliate-Links. Dort kann man jetzt auch ein bisschen Styling oder HTML-Entities (z.B.  ) einbauen.

const obj = {
  description: "Das ist eine super Beschreibung für ein Objekt!",
};

const objMitHTML = {
  description:
    "Das ist eine super Beschreibung für ein Objekt <strong>mit HTML</strong>!",
};

Dafür hab ich Reacts dangerouslySetInnerHTML-Attribut im JSX verwendet, z.B. in der AffiliateLink-Description:

// src/components/SupportPage/AffiliateLinkList/AffiliateLinkListItemDesc.tsx
export function AffiliateLinkListItemDesc({ description, blog }: Props) {
  return (
    description && (
      <div>
        <div dangerouslySetInnerHTML={{ __html: description }} />{" "}
        {blog && (
          <div className="flex justify-end">
            <Link
              href={`blog/${blog}`}
              className="whitespace-nowrap text-accent"
            >
              &rarr; Blog-Artikel lesen
            </Link>
          </div>
        )}
      </div>
    )
  );
}

Als Nächstes hab ich die SupportPage zerstückelt und in viele kleine, übersichtliche Komponenten unterteilt. Da gibt es jetzt eine Donate-, eine AffiliateLink- und eine Merchandise-Section. Außerdem hab ich die AffiliateLinkListe ordentlich aufgeteilt. Hier gibt es jetzt für jeden Affiliate-Link eigene Komponenten für Header, Category, Description, Rewards, Terms und Date.

Alles natürlich mit Barrel-Im- bzw. Exports.

Außerdem fehlten auf der Support-Seite noch die Links zu den Spendenmöglichkeiten. Die hab ich jetzt eingefügt. Erst mal nur PayPal und Buy Me a Coffee. Dafür mit Icons. Vielleicht füg ich irgendwann noch mal Patreon hinzu.

Und dann hab ich endlich eine ordentliche Readme für das GitHub-Repo erstellt! Da der Lighthouse-Score sich sehen lassen kann, hab ich einen Screenshot davon an die Readme angehängt.