MDX ve Dinamik Sayfalar

Başlangıç

Herkese Merhaba;

Uzun zamandır teknik yazılarımı Medium platformunda https://medium.com/@odayibasi adresinde yazıyorum. 2015'den beri 330 yakın hikaye yazmışım. Bu hikayerlerde 310K görüntülenmiş. Bu süreçte bu platformun bir çok avantajını gördüm. Ama son dönemde bazı ihtiyaçlarımı karşılamadığı için örnek içeren yazılarımı MDX destekli dinamik sayfalarda yazmayı düşünüyorum. Bu yazıda bu konuyu irdelemek istiyorum.

Öncelikle bana göre Medium Platformunun Avantaj/Dezavantajlarından bahsetmek istiyorum.

Avantajlarını sıralarsam;

Hızlı: Yazı yazmaya çok hızlı başlayabiliyorsunuz.
Kaliteli Sonuç: Standartları oldukça basit.Sonuçta oldukça kaliteli gözüken yazılar görebiliyorsunuz.
Resim Optimizasyonu: İstediğiniz boyuttaki resmi ekleyebiliyorsunuz. Kendisi platforma göre optimize ediyor.
Analitik: Yazılarınızın okunma ve beğenilme sayılarını, kaynaklarını görebiliyorsunuz.
Yayın Mantığı: Ortak bir yazar grubu ile yazılarınızın aynı yayında yer almasını ve daha çok okunmasını sağlayabiliyorsunuz.
Gelir: Okunma ve beğeni üzerinden gelir elde edebilirsiniz. (Paywall-Stripe Geçerli Ülkelerde)
Kontrol Mekanizması: Yazar, Editor rolleri bulunuyor.
SEO Desteği: Etiketler ve içeriğe göre Arama Motoru Optimizasyonlarini başarılı bir şekilde yapıyor.
Hosting: Hosting maliyeti ve bunu ayakta tutma, networking ile uğraşma gereği duymuyorsunuz.

Dezavantajlarını sıralarsam;

Tam Açık Değil: Hikayelerimin okunması için Medium üyeliği getiriyor ve hikayelerin daha önlerde çıkabilmesi için Paywall sisteminin arkasına hikayeleri koymanızı öneriyor. (Bu konuya şöyle bakıyorum sayfalara reklam koyMAması, üyelerden aldığı paraları yazarlara dağıtması yönünden çok da sorun etmiyorum)
Navigasyon ve Gruplama Araçları Yetersiz: Yazıların Gruplanması, Navigasyonu, Sıralaması konusunda istediğim sonuçları alamıyorum. (Yazarlar birbirleri ilişkili Seri halinde yazılar yazıyor ve bunları farklı zamanlarda yazıyorlar, aralarında başka yazılar giriyor. Her yazı sayfasında bunları birbirine linklerek göstermek kullanışlı bir navigasyon sağlamıyor. Veya bir hikayeyi bu navigasyon sayfası yapmam istediğim kalitede sonuçları vermiyor)
Yazı Gruplarını Zenginleştirememe: Yazı grupları ile istatistikleri veya yazıların özeti, içerisinde geçen kişiler, yerler veya kavramlardan bahseden bir özet tablosu oluşturamıyorum.
Kod Entegrasyonu Eksikliği: Yazıların içerisinde kodların formatlı ve renklendirilmiş gösterilebilecek bir altyapıya ihtiyaç duyuyorum.
Kod Paylaşmanın Zorlugu: Bu kod parçacıklarının basit şekilde kopyalanıp/yapıştırılabilir olması
Kod Çalıştırma Eksik: Bu kod parçalarının çalıştırabilir olması
JSX ve Styling Desteği Yok Dokümanın içerisinde JSX bileşenler ve CSS Styling veremiyoruz/
Bileşen Desteği Yok React Bileşenlerini istediğim gibi import edip kullanamıyoruz.

Navigasyon, Gruplama ve Zenginleştirme Konusundaki Çalışmalarım

Öncelikle medium ortamında hikayeleri istediğim gibi gruplayıp tek bir platform altında aşağıdaki görseldeki gibi gruplayamıyordum. Çünkü yayın(publication) içerisindeki sayfa düzeni ve navigasyonlar ile aşağıdaki gibi bir sayfa bölümlemesi elde edemiyordum.

İkinci olarak İstatistikler, Kişiler ve Kavramlar ile belirlediğim yazı grubunu zenginleştirerek, okuyucunun yazıları daha okumadan daha fazla bilgi sahibi olmasını sağlayabiliyorum.

onurdayibasi.com Navigation

MDX sağladıkları

1. Markdown

Markdown dokümanları GitHub ve birçok ortamda stardart döküman yazma yöntemi olmuştur. Bu blog yazarının sayfayı çok hızlı bir şekilde aynı medium platformundaki gibi çok hızlı bir şekilde yazmasını sağlar.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

strong

emphasis

strikethrough

inlineCode aa qqq

Thematic break ***

Blockquote > bbb aaa

List

Ordered list

Item
Item

2. JSX Desteği

Aşağıdaki örnekde markdown içerisinde nasıl JSX ile kendi style DOM yapınızı ekleyebileceğinini görebilirsiniz.

This is JSX

3. Kodlama Desteği

Medium platformunda kod desteği oldukça zayıf, renklendirilmiş kod eklemek için gist vb dış sistemlere kodunuzu eklemeniz gerekiyor. Veya formatsız bir şekilde kodunuzu eklemek için Ctrl + Alt + 6 veya Cmd + Option + 6 bu komutlar ile kodu formatlayabilirsiniz.

Aşağıdaki yenetekler konusunda oldukça zayıf olduğunu görebilirsiniz.

Kod Renklendirme (Code Highlighting)
Kodu Kopyala (Copy Code to clipboard)
JS Kodunun Canlı olarak çalıştırılması
React Kodunun Canlı olarak çalıştırılması

3.1 React JSX Rendering

1import React from 'react';
2
3const Dump = props => (
4  <div
5    style={{
6      fontSize: 20,
7      border: '1px solid #efefef',
8      padding: 10,
9      background: 'white',
10    }}>
11    {Object.entries(props).map(([key, val]) => (
12      <pre key={key}>
13        <strong style={{ color: 'white', background: 'red' }}>
14          {key} 💩
15        </strong>
16        {JSON.stringify(val, '', ' ')}
17      </pre>
18    ))}
19  </div>
20);
21
22export default Dump;

3.2 React-Live JSX Rendering

const vDOM=[3,4,5].map(el=><span>{`${el},`}</span>);
render(<div style={{fontSize: 20,border: '1px solid #efefef', backgroundColor:'#8bc34a', marginBottom:"10px"}}>{vDOM}</div>)

const vDOM=[3,4,5].map(el=><span>{`${el},`}</span>);
render(<div style={{fontSize: 20,border: '1px solid #efefef', backgroundColor:'#8bc34a', marginBottom:"10px"}}>{vDOM}</div>)

3.3 React-Live Fetch Github

async function fetchGithub(){
 //let response = await fetch('https://api.github.com/users/odayibasi');
 //let user = await response.json(); // read response body and parse as JSON
 //return user.login;
  return 'xxx'
}

function renderObj(obj){
  render(<div style={{fontSize: 20,border: '1px solid #efefef', backgroundColor:'#8bc34a', marginBottom:"20px"}}>{obj}</div>)
}

fetchGithub().then(renderObj);

async function fetchGithub(){
 //let response = await fetch('https://api.github.com/users/odayibasi');
 //let user = await response.json(); // read response body and parse as JSON
 //return user.login;
  return 'xxx'
}

function renderObj(obj){
  render(<div style={{fontSize: 20,border: '1px solid #efefef', backgroundColor:'#8bc34a', marginBottom:"20px"}}>{obj}</div>)
}

fetchGithub().then(renderObj);

3.4 Custom Component

Aşağıda React components/Tag import ederek kullandığım bir bileşeni görebilirsiniz.

Üzerinde Çalışmaya Devam Ettiklerim

SEO ve GraphQL
Metematiksel Formüller görüntülenmesi

Çalışma Notlarım