Muhammet Şafak — Sunumlar

Bu site nasıl çalışır?

37 hazır blok, bir maskot, iki çıktı biçimi ve gömülebilir sayfalar. Bu sunum da onlarla yazıldı.

Muhammet Şafak2 Ekim 2026

Sunan

Muhammet Şafak

Bu sitenin yazarı

Web: muhammetsafak.com.tr
GitHub: muhammetsafak
X: @muhammetsafak44

Akış

Dört durak

Bloklar37 hazır parça, yedi aile
TanMaskot ve pozları
ÇıktılarDeck, infografik, export, embed
YazarkenÜç kural

Bölüm 01

Bloklar

Sayfa düzenini siz kurmazsınız; blok kurar, siz içini doldurursunuz.

Başlangıç noktası

Düzenleyici değil. Blokları props ile doldurursunuz.

Google Slides benzeri bir düzenleyici hedeflenmedi (PRD).

Neden blok

Sıfırdan tasarlamak ile hazır blok

	Her sunumda sıfırdan	Hazır blok
Düzen	Her sunumda yeniden kurulur	Bir kez tasarlandı, props doldurulur
Renk	Elle seçilir	Token'dan gelir; koyu ve açık tema birlikte
Çıktı	Ekran görüntüsü alınır	npm run export PNG ve PDF üretir
Gömme	Ayrı bir iş	/embed/ rotası ve hazır iframe kodu

37blok

Bu yazıdaki gruplama

37 blok, yedi aile

RakamBigStat, BarChart, Gauge7
YapıComparison, Matrix, Venn7
AçılışCover, Closing, Agenda6
VurguQuote, Admonition, TanDialog5
RehberFAQ, Glossary, Checklist5
AkışTimeline, Cycle, Kanban4
EkranTerminal, BrowserFrame3

Ortak alanlar

Hangi alanı kaç blok alır

blok sayısı

eyebrow35
title31
lang24
tone11
pose7

src/components/blocks arayüzleri, 2 Ekim 2026 itibarıyla

MDX

Importsuz yazılır

Slide, Panel ve 37 blok MDX’e kendiliğinden enjekte edilir. Dosyanın başında tek bir import satırı yoktur.

src/content/decks/tr/bu-site-nasil-calisir.mdx

1---2title: Bu site nasıl çalışır?3date: 2026-10-024---56<Slide fit="viewport">7<Statement text="Bloklar importsuz gelir." />8</Slide>

Bölüm 02

Tan

Sitenin maskotu. Sunumda bir slaytın yanında durur, o slaytın ne söylediğine uygun bir poz alır.

Maskot

Tan
Bu sunumda nerede olacağım?
Muhammet
Kapakta, kapanışta, bazı bloklarda. pose 28 pozdan birini seçer.
Tan
Anladım, anlamına uyan yerde olurum.

Bölüm 03

Çıktılar

Aynı içerik üç yolla dışarı çıkar: tam ekran, dosya, iframe.

Dört çıktı, iki dil

Bir kaynak, dört biçim

MDXTek kaynak dosya; içerik burada yazılır.
Deck16:9 slayt dizisi, /d/<slug>/ adresinde.
İnfografikUzun, kaydırmalı sayfa, /i/<slug>/ adresinde.
ExportPNG ve PDF dosyaları.
EmbedSlayt ya da infografik iframe ile başka sitede.
İki dilTürkçe kökte, İngilizce /en/ altında.

Yol

Bir sayfanın yolu

Adım 1: MDX yazsrc/content/decks/tr/ ya da infographics/tr/
Adım 2: Önizlenpm run dev
Adım 3: Buildnpm run build, çıktı dist/
Adım 4: Exportnpm run export, çıktı public/exports/
Adım 5: Commitpublic/exports/ dahil

Komutlar

Çıktı satırları özettir, gerçek log değildir. Export yalnız yerelde koşar; Cloudflare build'inde koşmaz (ADR-004).

$npm run build
✓# dist/ üretilir
$npm run export
✓# public/exports/ yenilenir
$git status public/exports
✓# içerik değişmediyse listede değişiklik görünmez
$

Export

Ne üretilir, nereye yazılır

İngilizce içeriğin dosyaları aynı yollarla public/exports/en/ altına yazılır.
Çıktı	Yol	Biçim	Ayrıntı
Deck slaytı	`public/exports/d/<slug>/<n>.png`	PNG	1920×1080, slayt başına bir dosya
Deck PDF	`public/exports/d/<slug>.pdf`	PDF	Slayt başına bir sayfa
İnfografik PNG	`public/exports/i/<slug>.png`	PNG	1200 px genişlik, tam sayfa
İnfografik PDF	`public/exports/i/<slug>.pdf`	PDF	Tek sayfa

Tek bir slayt kendi adresiyle gömülür; tüm deck için /embed/d/<slug>/, infografik için /embed/i/<slug>/.

Bölüm 04

Yazarken

Blok çok, ama her slayt tek bir şey söylemeli.

Üç kural

Blok seçerken

Yapın

Slayta tek mesaj.
Bloğu mesaja göre seçin.
Pozu anlama göre seçin.

Yapmayın

Slayta iki grafik koymayın.
Çeşitlilik için blok seçmeyin.
Süs için Tan koymayın.

Komponentler aynı props ile hem slayt hem infografik bağlamında çalışır.

ADR-004Dört çıktı formatı kararı

Yayın öncesi

Bir içerik çıkarken

MDX yazıldı (tamamlandı)
npm run build temiz geçti (tamamlandı)
npm run export koştu (tamamlandı)
public/exports/ commit'e eklendi (bekliyor)
Deploy sonrası curl -sI ile çerçeveleme doğrulandı (bekliyor)

Soru-cevap

Sorular?

muhammetsafak.com.tr

Teşekkürler

muhammetsafak.com.tr

Bu sunumun kaynağı tek bir MDX dosyasıdır.