MDX Blog Sistemimi: Tüm Özel Bileşenleri Kullanım Rehberi

Bloga hoş geldiniz!

Bu yazı, standart Markdown kurallarının ötesine geçerek içeriğimizi daha profesyonel ve etkileşimli hale getiren özel React bileşenlerimizi nasıl kullanacağınızı adım adım göstermektedir. MDX'in (Markdown + JSX) gücünü kullanarak, karmaşık HTML kodları yazmak zorunda kalmadan zengin içerikler oluşturabilirsiniz.

1. Vurgu ve Uyarı Yönetimi (Callout)

Callout bileşeni, blog yazınızın akışını kesintiye uğratmadan okuyucunun dikkatini önemli bir noktaya çekmek, kritik bilgiler vermek veya bir aksiyon çağrısında bulunmak için tasarlanmıştır. Bu bileşenin en büyük avantajı, sadece renklerle değil, aynı zamanda semantik anlamlarla da mesajınızı güçlendirmesidir. Her bir Callout, isteğe bağlı olarak bir title (başlık) niteliği alabilir.

1.1 Dört Farklı Tip Kullanımı ve Semantik Anlamları

Callout bileşeni, iletmek istediğiniz mesajın duygusal veya önem derecesine göre dört farklı type (tip) niteliği alabilir. İçeriğe en uygun olan tipi seçerek mesajınızın amacını netleştirirsiniz:

Bilgi (Info): Mavi renk ile gösterilir. Genellikle ek ipuçları, arka plan bilgileri, öneriler veya daha fazla detay için bir referans sunmak için kullanılır.

Başarı (Success): Yeşil renk ile gösterilir. Kurulumun tamamlanması, bir hedefe ulaşılması veya pozitif bir geri bildirim vermek için idealdir.