Font & UI Kullanımı

Bu belge yalnızca Inter fontu, Motion, Hugeicons ve Sonner toast içindir. Başlık ve paragraf rolleri (fix-type, fix-prose) için Yazı Stilleri sayfasına bakın. Buton, kart ve renk: Fix UI Kullanımı.

shadcn kullanılmıyor — ikon ve toast React island olarak eklenir; stil yine fix-* ve token’lardan gelir.

Genel Mantık

Paket	Ne için?	Nerede?
Inter	Site fontu	`BaseLayout` + `core.css`
Motion	Scroll / hero animasyonu (DOM)	`data-motion-*` + `motion-init.ts`
Hugeicons	İkonlar	React island’larda (`ThemeToggle` vb.)
Sonner	Toast bildirimi	`Toaster` + form / aksiyon

Statik Astro sayfaları mümkün olduğunca HTML kalır; yalnızca tema, toast gibi parçalar client:load ile React yükler.

1. Inter Font

Nedir?

Tüm sitede kullanılan ana yazı tipi. Google Fonts yerine npm paketi ile gelir; build’e gömülür (harici font isteği yok).

Kurulum

Paket: @fontsource-variable/inter
BaseLayout.astro: import '@fontsource-variable/inter'
core.css → @theme { --font-sans: "Inter Variable", system-ui, sans-serif; }
body { font-family: var(--font-sans); }

Dikkat

Font değiştirmek için yalnızca --font-sans ve import satırını güncelleyin.
Fix UI bileşenleri de aynı font yığınını kullanır.

2. Motion

Nedir?

Sayfa açılışında ve scroll’da hafif giriş animasyonları. Framer Motion değil — motion paketinin DOM API’si (animate, inView). .astro dosyaları React’e çevrilmez; data-motion-* attribute’ları yeterli.

Dosyalar

Dosya	Rol
`src/config/animations.ts`	Açık/kapalı, süreler, reduced motion
`src/lib/motion-presets.ts`	`fade-up`, `fade-in`, `expand-x`
`src/scripts/motion-init.ts`	`initMotion()`
`core.css`	FOUC — animasyon bitene kadar gizleme

BaseLayout sayfa sonunda initMotion() çalıştırır. html[data-animations="on"] iken animasyonlu öğeler .motion-done olunca görünür.

Attribute’lar

Attribute	Ne zaman	Değerler
`data-motion-hero`	Sayfa yüklenince	`fade-up` \| `fade-in` \| `expand-x`
`data-motion`	Görünür olunca (scroll)	Aynı preset’ler
`data-motion-delay`	Gecikme (saniye)	örn. `0.3`
`data-motion-duration`	Süre override	örn. `1`

Örnek:

<h1 data-motion-hero="fade-up" data-motion-delay="0.2">Başlık</h1>
<section data-motion="fade-up">...</section>

Animasyonları Kapatma

src/config/animations.ts:

enabled: false,

Tüm motion durur; içerik hemen görünür.

Dikkat

motion.div gibi React bileşeni yok — sadece HTML attribute.
respectReducedMotion: true — kullanıcı “az hareket” istiyorsa animasyon atlanır.
Her blok için client:load gerekmez; performans için avantajlı.
Ağır animasyonu her yere yaymayın; hero ve birkaç section yeterli.

3. Hugeicons

Nedir?

Tutarlı SVG ikon seti. React wrapper: @hugeicons/react + @hugeicons/core-free-icons.

Kullanım

import { HugeiconsIcon } from '@hugeicons/react';
import { Moon01Icon } from '@hugeicons/core-free-icons';

<HugeiconsIcon icon={Moon01Icon} size={18} strokeWidth={2} aria-hidden />

Falcon’da örnek: src/components/islands/ThemeToggle.tsx — ay/güneş ikonu, fix-btn fix-btn--outline fix-btn--s ile.

Sayfada Mount

---
import ThemeToggle from '@/components/islands/ThemeToggle.tsx';
---
<ThemeToggle client:load />

Dikkat

İkonlar React island içinde; statik .astro’da doğrudan import edilmez.
aria-hidden / aria-label erişilebilirlik için unutulmasın.
Buton stili Fix UI (fix-btn); ikon boyutu size prop ile.

4. Sonner (Toast)

Nedir?

Kısa bildirim mesajları (“Kaydedildi”, “Hata” vb.). Form gönderimi veya kullanıcı aksiyonu sonrası.

Kurulum

Paket: sonner
src/components/islands/Toaster.tsx — <Toaster /> wrapper
BaseLayout.astro — <AppToaster client:load /> (<body> sonunda)

Kullanım

Toast tetikleyen kod React içinde olmalı:

import { toast } from 'sonner';
toast.success('Form submitted');

Falcon demo: FormSubmitToast.tsx — #demo-form submit’inde mesaj gösterir (index.astro, client:load).

Dikkat

Toaster bir kez layout’ta; her sayfada tekrar eklemeyin.
Toast için gereksiz büyük React ağacı kurmayın; küçük island yeterli.

Tema (Karanlık Mod) — Hugeicons Ile Birlikte

ThemeToggle + BaseLayout <head> içinde inline script:

Sayfa çizilmeden önce localStorage / prefers-color-scheme okunur
.dark class uygulanır → tema flaşı azalır

Token renkleri core.css içindeki .dark ile değişir.

Fix UI Ile Birlikte

Katman	Sorumluluk
Fix UI	Renk, buton, kart, form, yazı rolleri (`fix-type`), prose
Tailwind	Layout, grid, gap
Motion	Hareket (attribute)
Hugeicons	İkon çizimi
Sonner	Bildirim metni kutusu

Karıştırmayın: buton rengini Motion veya Sonner’dan değil, _fix-button.css / token’dan değiştirin.

Dosya Özeti

src/config/animations.ts
src/lib/motion-presets.ts
src/scripts/motion-init.ts
src/components/islands/ThemeToggle.tsx
src/components/islands/Toaster.tsx
src/components/islands/FormSubmitToast.tsx   (demo)
src/layouts/BaseLayout.astro                 (font, tema script, Toaster, motion)
src/styles/core.css                          (Inter, motion FOUC)

Özet

Inter tüm sitede font. Motion DOM attribute ile animasyon; animations.enabled ile kapatılır. Hugeicons React island’da ikon. Sonner layout’ta bir kez Toaster, aksiyonda toast(). Hepsi Fix UI görünümünü bozmaz; etkileşim gereken yerde client:load kullanılır.