Yeni MDX Özellikleri Testi: GitHub Flavored Markdown ve Anchor Links

GitHub Flavored Markdown Testi

Şimdi yeni eklenen remark-gfm özelliklerini test edelim. Bu özellikler sayesinde artık GitHub’da gördüğümüz zengin markdown özelliklerini kendi blogumuzda da kullanabiliyoruz:

Tablolar

Task Listeleri

• remark-gfm eklendi
• rehype-slug eklendi
• rehype-autolink-headings eklendi
• Build test edildi
• Production deploy

Otomatik Linkler

GitHub style otomatik linkler: https://github.com/ebartan/ebartan-workflow-astrowind

Anchor Links Testi

Başlık 1

Bu başlık otomatik slug alacak: #baslik-1

Başlık 2 with Special Chars

Bu başlıkta özel karakterler var: #baslik-2-with-special-chars

Türkçe Başlık Testi

Türkçe karakter testi: #turkce-baslik-testi

Kod Blokları

// TypeScript kodu
export const testMDX = () => {
  console.log("MDX özellikleri aktif!");
};

Sonuç

Yeni MDX özellikleri başarıyla eklendi:

1. ✅ GitHub Flavored Markdown
2. ✅ Otomatik anchor links
3. ✅ SEO-friendly slug’lar
4. ✅ Daha iyi kullanıcı deneyimi

Test tamamlandı! 🎉

Kurulum ve Yapılandırma

Astro projesine bu özellikleri eklemek oldukça basit. İşte adım adım kurulum:

1. Gerekli Paketleri Yükleyin

npm install remark-gfm rehype-slug rehype-autolink-headings

2. Astro Config Dosyasını Güncelleyin

// astro.config.ts
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [rehypeAutolinkHeadings, { behavior: 'wrap' }]
    ]
  }
});

3. MDX Dosyalarınızda Kullanmaya Başlayın

Artık tüm GitHub Flavored Markdown özelliklerini kullanabilirsiniz!

Performans ve SEO Avantajları

Bu özellikler sadece görsel zenginlik sağlamakla kalmıyor, aynı zamanda:

• SEO İyileştirmesi: Otomatik anchor linkler sayesinde başlıklar daha iyi indeksleniyor
• Kullanıcı Deneyimi: Okuyucular başlıklara tıklayarak kolayca navigasyon yapabiliyor
• Kod Kalitesi: Daha temiz ve düzenli bir yapı sunuyor

Sonraki Adımlar

Bu özellikleri ekledikten sonra:

• Projenizi build edin ve test edin
• Production ortamına deploy edin
• Okuyucu geri bildirimlerini toplayın
• Performans metriklerini izleyin

Happy coding! 🚀