Muhammet Şafak — Sunumlar
TREN

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

Bloklar, Tan, export ve embed tek sayfada: 37 blok, dört çıktı biçimi, sitenin yapım durumu ve en sık sorulanlar. Aşağı kaydırarak okuyun.

37

Bu site

hazır blok

Her biri aynı props ile hem slaytta hem infografikte çalışır. Bu sayfa da onlarla yazıldı.

Bir bakışta

Rakamlarla site

  • 37BlokMDX'e importsuz enjekte edilir
  • 28Tan pozupose prop'u ile seçilir
  • 4Çıktı biçimiDeck, infografik, export, embed
  • 2DilTürkçe kökte, İngilizce /en/ altında

Çıktılar

Nerede kesişirler

Deck ve infografik aynı blokları paylaşır; ikisi de embed rotasıyla başka sitede gösterilebilir.

Mimari

Katmanlar

Yukarıdan aşağıya: yazdığınız şey en üstte, üretilen dosyalar en altta.

  1. MDX içeriğisrc/content/ altında, importsuz
  2. Bloklar, Slide ve PanelDeck sahnesi 1920×1080, infografik en çok 1200 px
  3. Astro 7 + Tailwind v4output: 'static'
  4. dist/Statik çıktı
  5. public/exports/PNG ve PDF, depoya girer

Çıktı haritası

Hangi biçim nerede

Satırlar içerik türünü, sütunlar çıktının nerede okunduğunu gösterir.

Deck ↔ İnfografik

  • Deck, ekranda

    /d/<slug>/

    • Klavye ile ilerleme
    • Tam ekran: F
    • Genel bakış: O

  • Deck, dosya olarak

    PNG ve PDF

    • Slayt başına 1920×1080 PNG
    • Slayt başına bir sayfa PDF

  • İnfografik, ekranda

    /i/<slug>/

    • Dikey kaydırma
    • En çok 1200 px genişlik
    • Ziyaretçinin teması korunur

  • İnfografik, dosya olarak

    PNG ve PDF

    • 1200 px genişlikte tam sayfa PNG
    • Tek sayfa PDF

Ekranda ↔ Dosya olarak

Parçalar

Kim ne yapar

  • Slide

    1920×1080 sabit sahne; ekrana göre ölçeklenir.

  • Panel

    En çok 1200 px genişlikte infografik şeridi.

  • deck.ts

    Klavye, tam ekran, genel bakış ve #/n derin bağlantı.

  • export.mjs

    dist/'i Playwright ile açıp PNG ve PDF üretir.

  • EmbedCode

    Slayt ya da infografik için iframe kodunu verir.

  • Tan

    Maskot; 28 pozla bloklara eşlik eder.

Döngü

İçerik değişince

Sıra bozulmaz: export, build'in çıktısını okur. Export'u build'den önce koşturmak eski sayfayı yakalar.

Her değişiklikte

  1. 01DüzenleMDX dosyası
  2. 02Buildnpm run build
  3. 03Exportnpm run export
  4. 04Commitpublic/exports/ dahil

Başlık düzeni

Blokların başlık alanları

  1. Tüm bloklar37
  2. eyebrow alan35
  3. eyebrow ve title ikisi de olan31
Sayım: src/components/blocks arayüzleri, 2 Ekim 2026 %95 %89

Ölçekleme

Ekran büyüdükçe sahne

sahne ölçeği, %

Genişlik ÷ 1920; ölçüm değil, hesap

Fark

Blok olmadan ve blokla

Blok olmadanHer sunum baştan kurulur
  • Slayt düzeni her seferinde yeniden çizilir
  • Renkler elle seçilir
  • PNG ve PDF ekran görüntüsüyle alınır
Bu sitedeBlok bir kez tasarlandı
  • Bloklar props ile doldurulur
  • Renkler token'dan gelir (ADR-002)
  • npm run export PNG ve PDF üretir

Yapım

Site nasıl yapıldı

  1. 00 — .ssot/ kurulumutamam
  2. 01 ve 01b — Proje iskeleti, site kimliğitamam
  3. 02 — Görsel dil (Claude Design)tamam
  4. 03 — Blok kütüphanesitamam
  5. 04 — Deck ve infografiktamam
  6. 05 — Embed ve exporttamam
  7. 06 — Vitrin içeriğitamam

Durum

Yapım durumu, yayın günü

  • 8Tamam
  • 0Sürüyor
  • 0Bekliyor

Pano

Yayın günündeki pano

  • Tamam

    4
    • Faz 03

      Blok kütüphanesi

    • Faz 04

      Deck runtime ve infografik

    • Faz 05

      Embed ve export

    • Faz 06

      Vitrin: bu deck ve bu infografik

  • Sürüyor

    1
    • Deploy

      Cloudflare Pages yayını, onayınızla

  • Sonra

    1
    • Deploy

      Çerçeveleme doğrulaması: curl -sI ile iki rota

Dikkat

Dört not

  • NotExport yalnız yerelde koşar; Cloudflare build'inde çalışmaz.
  • İpucuSlayt sayısı değiştiyse export'tan sonra bir kez daha build alın; indirme bağlantıları build anında basılır.
  • UyarıExport'u build'den önce koşturursanız eski build'i yakalar.
  • ÇerçevelemeYalnız /embed/ rotaları gömülebilir. /d/ ve /i/ adreslerini iframe'e koyarsanız tarayıcı engeller.

Sözlük

Bu sayfadaki terimler

Blok
Props ile doldurulan hazır görsel parça; src/components/blocks/ altında 37 tane.
Props
Bir bloğa verilen metin ve ayarlar; adları sabittir.
Slide
Deck'in 1920×1080 sabit sahnesi.
Panel
İnfografiğin en çok 1200 px genişlikteki bölümü.
Poz
Tan'ın 28 görünümünden biri; pose prop'u ile seçilir.
Export
Sayfadan üretilen PNG ve PDF dosyaları.
Embed
Bir slaytın ya da infografiğin iframe ile başka sitede gösterilmesi.

Sık sorulanlar

Sorular ve cevaplar

  • Slaytları düzenleyici ile değiştirebilir miyim?

    Hayır. Düzenleyici kapsam dışıdır (PRD). İçerik bir MDX dosyasıdır; değişiklik dosyada yapılır.

  • Bir slaytı başka sitede gösterebilir miyim?

    Evet. Her slaytın /embed/d/<slug>/<n>/ adresi ve sayfada hazır bir iframe kodu vardır.

  • PDF ve PNG nereden inecek?

    Sayfadaki indirme bağlantılarından. Dosyalar public/exports/ altındadır ve depoya girer.

  • İngilizce var mı?

    İngilizce içerik /en/ altında yayınlanır. Karşılığı olmayan içerik yalnız kendi dilinde yayınlanır (ADR-006).

  • Tema seçebilir miyim?

    Site koyu temayla açılır. Deck kendi temasında kilitli açılır; infografik sizin seçiminizi korur.

Paylaş ve indir

Bu kodu sayfanızın HTML’ine yapıştırın.

İndir