Site Layout

Bu belge, sitenin dış kabuğunu anlatır: üst menü, alt bilgi, ortadaki içerik alanı.

Fix UI Kullanımı buton ve kart görünümü içindir. Layout (header/footer) Tailwind ile yapılır; karıştırmayın. Site adı ve menü metni için fix-type-large / fix-type-small kullanılır; grid ve hizalama yine Tailwind’dedir. Ayrıntı: Yazı Stilleri.

Genel Yapı

Her public sayfa aynı şablonu kullanır:

BaseLayout
  ├── Header      (logo, menü, tema, dil)
  ├── <main>      (sayfanın kendi içeriği)
  └── Footer      (linkler, iletişim, sosyal)

Sayfa dosyası yalnızca <main> içini doldurur; header/footer tekrar yazılmaz.

---
import BaseLayout from '@/layouts/BaseLayout.astro';
---

<BaseLayout title="Sayfa başlığı" description="Kısa açıklama">
  <!-- Buraya section'lar, metin, Button, Card -->
</BaseLayout>

Tailwind Vs Fix UI (Layout’ta)

Ne değiştirirsen	Nerede	Ne olur
Menü genişliği, sticky, border	`Header.astro` Tailwind sınıfları	Tüm sayfalarda üst çubuk görünümü
İçerik kolon genişliği	Sayfa içi Tailwind (`max-w-6xl mx-auto px-4` vb.)	Yalnızca o sayfa
Buton / CTA görünümü	Fix UI (`Button`, `_fix-button.css`)	Tüm `fix-btn` kullanan yerler
Logo metni	`site.ts` → `name`	Header + footer marka
Menü linkleri	`nav.ts` + `routes.ts`	Header ve footer linkleri

Kural: Header/footer’da uzun class="flex gap-4 ..." zinciri normal. Buton stilini layout’ta icat etme — <Button variant="primary"> kullan.

Dosyalar Ve Sorumluluklar

Dosya	Görevi
`src/layouts/BaseLayout.astro`	HTML kabuğu, SEO `<head>`, Header, main, Footer, Toaster, motion
`src/components/layout/Header.astro`	Üst navigasyon
`src/components/layout/Footer.astro`	Alt bilgi
`src/config/nav.ts`	Menüde hangi linkler var (Home, Blog)
`src/config/routes.ts`	Her linkin dil başına URL’si
`src/config/site.ts`	Site adı, logo yolu, domain
`src/config/contact.ts`	Footer telefon, e-posta, adres
`src/config/social.ts`	Footer sosyal profiller
`src/i18n/common.ts`	Menü ve footer metinleri (4 dil)

BaseLayout

Ne yapar:

<head> — title, description, canonical, hreflang, Open Graph (SEO / Meta)
Tema script — sayfa çizilmeden önce .dark (yanlış tema flaşını azaltır)
<body class="flex min-h-screen flex-col"> — footer sayfa altında kalsın
<main class="flex-1"> — içerik orta alanı büyüsün
Global: Toaster, scroll/hero animasyon (initMotion)

Sayfadan gelen props:

title, description, image — SEO
alternatePaths — blog çevirisi gibi özel hreflang (isteğe bağlı)

Değiştirince ne olur:

Layout’a dokunmadan yeni sayfa ekleyebilirsin; otomatik header/footer alır.
BaseLayout’u bozarsan tüm site etkilenir — dikkatli değiştir.

Bileşenler:

Logo — site.logo + site.name, tıklanınca ana sayfa (getHomePath)
Menü — nav.header (şu an Home, Blog)
Tema — ThemeToggle (React, client:load) → fix-btn (Font & UI Kullanımı)
Dil — LanguageSwitcher — pageId ile doğru dil URL’lerine gider

Tailwind örnekleri (Header’da):

sticky top-0 z-50 — kaydırınca üstte kalır
max-w-6xl mx-auto px-4 — içerik genişliği
border-b border-border — alt çizgi

Menü Linki Eklemek

src/config/routes.ts → yeni pageId ve tüm dillerin path’i (ör. contact)
Sayfa dosyalarını oluştur (src/pages/..., src/pages/tr/...)
src/config/nav.ts → header ve footer dizisine yeni satır
src/i18n/common.ts → menü etiketi (ls())

Menü metni nav.ts içinde değil; common.nav.* üzerinden gelir.

Dil Değiştirici (`pageId`)

getPageIdFromPathname() (src/i18n/routing.ts):

resolvePath bir sitePages URL’si döndürürse → pageId = home | blog | contact (vb.)
Blog yazı URL’si (/blog/slug, /tr/blog/slug …) sitePages’te yok → pageId = 'home'; header dil linkleri ana sayfaya gider
Yazı çevirisi: blog slug sayfası alternatePaths ile BaseLayout’a geçer (Falcon’da [...slug].astro + getBlogAlternatePaths) — SEO / Meta, Çoklu Dil Kullanımı

Üç sütun (masaüstü):

Marka adı (site.name)
Hızlı linkler (nav.footer — nav ile aynı kaynak)
İletişim + sosyal

Veri kaynakları:

Telefon / e-posta / şehir → contact.ts
E-posta linki → mailto: (ayrı İletişim sayfası şart değil)
Sosyal → social.ts; boş URL’ler gösterilmez

Metinler: common.footer.* — quickLinks, contactHeading, emailCta, rights

Değiştirince ne olur:

contact.ts güncelle → footer iletişim satırı değişir
nav.footer güncelle → alt linkler değişir (header ile senkron tut)

Sayfa İçeriği (Main)

Layout içeriğe karışmaz. Her sayfa kendi düzenini kurar:

<BaseLayout title="...">
  <motion class="mx-auto max-w-6xl px-4 py-12">
  <!-- veya fix-section ile bölüm boşlukları -->
    <h1>...</h1>
    <Button variant="primary">CTA</Button>
  </motion>
</BaseLayout>

Dikey boşluk: py-12, space-y-8
Genişlik: max-w-6xl mx-auto px-4 (header ile aynı max-w-6xl mantığı)
Bileşen: <Card>, <Button>, fix-prose (blog)

Sayfada ikinci bir <main> veya tekrar ThemeToggle koyma — layout’tan gelir.

Sık Senaryolar

İstediğin	Ne yap
Yeni menü maddesi	`routes.ts` + sayfa + `nav.ts` + `common.ts`
Logo değişsin	`site.ts` → `logo`, dosyayı `public/` veya `public/og/`
Footer’da telefon	`contact.ts`
Üst bar rengi / blur	`Header.astro` Tailwind
Tüm sitede buton rengi	`_fix-button.css` veya token — Fix UI Kullanımı
Blog dil linki yazıya gitsin	Blog slug sayfasında `alternatePaths` prop

İlgili Rehberler

Fix UI Kullanımı — buton, kart, form
Çoklu Dil Kullanımı — URL ve çeviri
SEO / Meta — title, hreflang
Font & UI Kullanımı — tema toggle, toast

Özet

Layout = BaseLayout + Header + Footer. İskelet Tailwind; butonlar Fix UI. Menü nav.ts + routes.ts; metinler i18n/common.ts; iletişim contact.ts. Sayfa dosyası yalnızca <main> içini doldurur.