Projekt-Tagebuch Blog, Tag 44

coden

Daniel Kaser|11. Juli 2024

Lesedauer: ca. 3 min.

Wochen-Ziele:

• Blog-Projekt-Tagebuch (Mai) in den Blog uploaden

Tages-Ziele:

• Sprache in automatische Blog-Post-Kurz-Beschreibung
• Automatisches Datum in Blog-Posts
• 2 Blog-Posts hochladen

Ich hatte ja bereits eine Funktion gebaut, die für Code-Challenges die Kurz-Beschreibung für die Blog-Übersichtsliste generiert. Die Daten wie das Level und den Titel zieht sie sich aus der codeChallenge-Property im Frontmatter.

Hier wollte ich jetzt noch gerne die Programmiersprache rein haben. So dass der User sofort sehen kann um welche Sprache es sich bei diesem Code-Challenge-Artikel handelt. Das war auch recht schnell gemacht. Hier die Funktion:

// src/lib/utils/createBlogPostDescription.ts
export function createBlogPostDescription(
  frontmatter: Frontmatter,
  apiData?: StrippedApiData | null,
): string {
  const { codeChallengeData } = frontmatter;
  let { description } = frontmatter;

  if (!description) {
    if (codeChallengeData && apiData) {
      const { platform, language } = codeChallengeData;
      const { name, level } = apiData;
      description = `Schritt für Schritt Lösung für die ${capitalize(platform)} Coding-Challenge "${name}" (${level}) in ${language}`;
    }
  }

  return description || "";
}

Bisher hab ich bei Blog-Tagebucheinträgen das Datum (und den Wochentag) mit der Hand reingeschrieben 🤣 Im Frontmatter steht aber schon immer ein Datum drin. Und da ich faul bin und es nicht jedes Mal zwei Mal schreiben möchte, habe ich heute die DateFormatter-Komponente gebastelt.

Wie ihr seht, ist die eigentliche Komponente recht kurz. Der Rest sind Monatsnamen, Wochentagsnamen und eine Funktion:

// src/components/DateFormatter.tsx
type Props = {
  date: string;
  weekday?: boolean;
};

export function DateFormatter({ date, weekday = false }: Props) {
  return <>{formatDate(date, weekday)}</>;
}

const months: string[] = [
  "Januar",
  "Februar",
  "März",
  "April",
  "Mai",
  "Juni",
  "Juli",
  "August",
  "September",
  "Oktober",
  "November",
  "Dezember",
];

const weekdays: string[] = [
  "Sonntag",
  "Montag",
  "Dienstag",
  "Mittwoch",
  "Donnerstag",
  "Freitag",
  "Samstag",
];

function formatDate(dateString: string, includeWeekday: boolean): string {
  const dateObj = new Date(dateString);
  const day = dateObj.getDate();
  const month = months[dateObj.getMonth()];
  const year = dateObj.getFullYear();
  const weekdayString = weekdays[dateObj.getDay()];

  return includeWeekday
    ? `${weekdayString}, ${day}. ${month} ${year}`
    : `${day}. ${month} ${year}`;
}

Da weekday hier standardmäßig false ist, brauch ich das Argument nur zu übergeben, wenn ich den Wochentag angezeigt haben möchte.

So sieht das Ganze in Action im MDX aus:

<DateFormatter date={pubDate} weekday />

Und raus kommt z.B. Donnerstag, 11. Juni 2024

Traum.

Und dann hab ich noch ein bisschen Content geschliffen und hochgeladen. Die Lösung für die Codewars-Challenge The Vowel Code und den Blog Tagebuch Tag 14. Aber den kennst du wahrscheinlich schon, denn heute schreiben wir ja schon Tag 44 🫢