Projekt-Tagebuch Blog, Tag 34

coden

Daniel Kaser|19. Juni 2024

Lesedauer: ca. 2 min.

Wochen-Ziele:

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

Tages-Ziele:

• Artikel-View-Count zu jedem Artikel anzeigen
• gfm-Callout-Box implementieren

Heute hab ich endlich die Callout-Box fertiggestellt. Hat ein bisschen länger gedauert, dafür ist sie richtig geil geworden.

RICHTIG GEIL

Ich hatte in der letzten Session ein bisschen Probleme mit der Map-Logik in der CustomStyledMDX-Komponente.

Die hatte ich auch heute noch, aber heute habe ich allen den Garaus gemacht.

Eine Herausforderung hatte ich mit dynamisch zusammengesetzten Tailwind-Klassen.

const color = “blue”
const dynamischeKlasse = `text-${color}-500`

<div className={dynamischeKlasse}>Mag Tailwind nicht so sehr...</div>

Die sind ein bisschen tricky. Die funktionieren mal und dann wieder nicht. Die hab ich jetzt komplett rausgeschmissen und das Ganze mit einem Objekt gelöst:

// config/site.ts
// ...
export const calloutColorMap = {
  default: {
    titleColor: "text-muted-foreground",
    textColor: "text-muted-foreground",
  },
  caution: {
    titleColor: "text-danger-600",
    textColor: "text-danger-900",
  },
  important: {
    titleColor: "text-fuchsia-600",
    textColor: "text-fuchsia-900",
  },
  // ...
};
// ...

// components/MeineKomponente.tsx
const type = ‘caution’
const { textColor } = calloutColorMap[type]

<div className={textColor}>Liebt Tailwind!</div>

Hier muss man zwar jede Farbe einzeln definieren, aber es hat einen interessanten Vorteil: Es funktioniert.

GitHub: Code der Callout-Komponente

Die Herausforderungen, die ich mit dem Mappen der <blockquote>s in der CustomStyledMDX-Komponente hatte, habe ich in der letzten Session schon ausführlich beschrieben.

Den fertigen Code kannst du dir hier ankucken: Code der CustomStyledMDX-Komponente

Alles in Allem also zwischendurch mal wieder ein runder Tag. Die Callout-Implementation ist fertig. Auf zu neuen Ufern! 🎺