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.

Uyarı (Warning): Sarı/Turuncu renk ile gösterilir. Potansiyel risklere, geri alınamaz adımlara dikkat çekmek veya bir işlem öncesi önlem alınmasını hatırlatmak için kullanılır.

Hata (Danger): Kırmızı renk ile gösterilir. Acil çözülmesi gereken sorunları, kritik hataları veya ciddi tehlikeleri belirtmek için kullanılır. Bu tip uyarılar genellikle hemen aksiyon gerektirir.

---

2. Zengin İçerik Bileşenleri

Geleneksel bloglarda uzun ve karmaşık HTML/iframe kodları gerektiren işlemler, bizim sistemimizde tek satırlık basit bileşen kodlarıyla yapılır. Bu, hem yazım hızınızı artırır hem de sitenizin performansını optimize eder.

2.1 Video Gömme (YouTubeCard)

Bu bileşen, okuyucuyu sayfadan çıkarmadan bir YouTube videosunu blog yazınıza yerleştirmenizi sağlar. Geleneksel <iframe> kodlarının aksine, bu kart:

1. Performans Dostudur: Sayfa yüklenirken videoyu otomatik olarak lazy-load (tembel yükleme) eder ve böylece sayfa açılış hızınızı (LCP - Largest Contentful Paint) olumsuz etkilemez.
2. Duyarlıdır (Responsive): Farklı ekran boyutlarına otomatik olarak uyum sağlayarak mobil cihazlarda kusursuz görünür.
3. Kullanımı Basittir: Tek yapmanız gereken, YouTube videosunun tam URL'sini url niteliği olarak vermektir.

2.2 Artıları ve Eksileri Karşılaştırması (ProsCons)

İki farklı teknolojiyi, ürünü veya yaklaşımı karşılaştırmak, okuyucunun karar verme sürecini hızlandırır. ProsCons bileşeni, bu verileri şık, simgesel ve okunabilir bir düzende sunar.

Nasıl Kullanılır: pros ve cons nitelikleri, birer dizi (array) olarak karşılaştırmak istediğiniz maddeleri alır. En iyi kullanım için karşılaştırmanın amacını belirten isteğe bağlı bir title (başlık) da ekleyebilirsiniz.

2.3 Görsel ve Açıklamaları Yönetme (CaptionImage)

Normal Markdown görselleri (![]()) sadece temel gösterim yaparken, CaptionImage bileşeni ile görsellerinize bağlam ve profesyonellik katarsınız:

• Açıklama (Caption): Görselin ne anlattığını netleştiren, koyu temaya uyumlu bir alt metin ekler.
• Erişilebilirlik (Accessibility): alt niteliği zorunlu tutularak görme engelli kullanıcılar için içerik desteklenir.
• Tema Uyumu: Görselinizi koyu temaya uygun bir çerçeveye alarak modern bir görünüm sağlar.

2.4 İçerik Gizleme (Accordion)

Accordion (Akordiyon), sayfanın genel akışını bozmak istemediğiniz detayları, sıkça sorulan soruları (S.S.S.) veya uzun kod bloklarını gizlemek için kullanılır. Kullanıcı, sadece ilgilendiği başlığa tıklayarak içeriği açar. Bu, özellikle uzun teknik kılavuzlarda veya detaylı log çıktılarında sayfaların daha temiz görünmesini sağlar.

Kullanım: Bileşenin içine yerleştirdiğiniz tüm içerik, title niteliğinde belirttiğiniz başlık altında gizlenir.

 

# Örnek detaylı log çıktısı
echo "Hata yok"
echo "Log: Bağlantı kuruldu (2025-12-10 17:00:00)"