From 5f7ea8bbcddf4a61671ccdfb4356d258604bd151 Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Wed, 7 Oct 2026 23:25:38 +0300 Subject: [PATCH 01/19] =?UTF-8?q?feat(tema):=20D=20k=C4=B1sayolu,=20logoda?= =?UTF-8?q?n=20yay=C4=B1lan=20tema=20ge=C3=A7i=C5=9Fi,=20/surum-notlari=20?= =?UTF-8?q?beta=20sayfas=C4=B1=20(=E2=86=92=201.1.0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - lib/tema-gecisi.ts: View Transitions + CSS maskesi (kolay-tercih-mark.svg), merkez header'daki işaret; reduced-motion ve desteksiz tarayıcıda düz geçiş - tema-kisayolu.tsx: D tuşu açık ↔ koyu (yazı alanı/değiştirici tuşta pasif) - tema-secici.tsx: seçim de maskeyle oynar, altında Kbd ile D ipucu - /surum-notlari: beta açıklaması, geri bildirim (destek@kolaytercih.com), sürüm günlüğü; Beta rozeti ve footer buraya bağlanır, sitemap'e eklendi - DESIGN.md §2.3 notu Co-Authored-By: Claude Fable 5.1 --- docs/tasarim/DESIGN.md | 7 ++ package.json | 2 +- src/app/globals.css | 69 +++++++++++++ src/app/sitemap.ts | 1 + src/app/surum-notlari/page.tsx | 149 ++++++++++++++++++++++++++++ src/components/animasyonlu-mark.tsx | 4 + src/components/site-footer.tsx | 6 ++ src/components/site-header.tsx | 18 +++- src/components/surum-rozeti.tsx | 16 ++- src/components/tema-kisayolu.tsx | 38 +++++++ src/components/tema-saglayici.tsx | 5 +- src/components/tema-secici.tsx | 66 ++++++------ src/lib/tema-gecisi.ts | 56 +++++++++++ 13 files changed, 395 insertions(+), 42 deletions(-) create mode 100644 src/app/surum-notlari/page.tsx create mode 100644 src/components/tema-kisayolu.tsx create mode 100644 src/lib/tema-gecisi.ts diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index 5386898..4456a23 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -133,6 +133,13 @@ Seçici `src/components/tema-secici.tsx` (footer'da), sağlayıcı `src/componen (`next-themes`, ``). Renklerin tek kaynağı `src/app/globals.css` içindeki `.dark` bloğu. +**Geçiş ve kısayol (7 Eki 2026):** tema değişimi anlık değildir; yeni tema header'daki +KolayTercih işaretinin biçiminde logodan büyüyerek açılır (View Transitions + CSS maskesi: +`src/lib/tema-gecisi.ts`, `globals.css` `.kt-tema-gecis`; hareket azaltılmışsa düz değişir). +`D` tuşu açık ↔ koyu geçişi yapar (`src/components/tema-kisayolu.tsx`); ipucu seçicinin +altında `Kbd` ile durur, başka yere kopyalanmaz. Header'daki Beta rozeti `/surum-notlari`na +bağlantıdır. + **Nasıl çalışır:** bileşenlere `dark:` yazılmaz; palet token'ları çevrilir. | Açık temadaki sınıf | Koyu temada ne olur | diff --git a/package.json b/package.json index dac4e01..612b001 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kolaytercih", - "version": "1.0.0", + "version": "1.1.0", "private": true, "scripts": { "dev": "next dev", diff --git a/src/app/globals.css b/src/app/globals.css index 12f3f2f..26153ae 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -476,3 +476,72 @@ .toaster [data-sonner-toast][data-styled="true"] [data-button]:hover { background: var(--color-slate-700); } + +/* Tema geçişi (DESIGN.md §2.3, lib/tema-gecisi.ts): tema değişirken yeni + görüntü, header'daki KolayTercih işaretinin biçiminde logodan büyüyerek + açılır. Eski görüntü yerinde durur; yeni görüntünün maskesi iki katman: + (1) işaretin SVG'si, merkezi --kt-tema-x/y'de, kenarı 0 → --kt-tema-son; + (2) aynı merkezden biraz geç kalkan bir daire — işaretin kareleri arasındaki + boşlukları kapatır ki geçiş sonunda eski temadan iz kalmasın. Hareket + azaltılmışsa JS geçişi hiç başlatmaz, tema düz değişir. */ +@property --kt-tema-kenar { + syntax: ""; + inherits: true; + initial-value: 0px; +} +@property --kt-tema-yaricap { + syntax: ""; + inherits: true; + initial-value: 0px; +} + +.kt-tema-gecis { + view-transition-name: root; +} +.kt-tema-gecis::view-transition-old(root), +.kt-tema-gecis::view-transition-new(root) { + animation: none; + mix-blend-mode: normal; +} +.kt-tema-gecis::view-transition-old(root) { + z-index: 1; +} +.kt-tema-gecis::view-transition-new(root) { + z-index: 2; + mask-image: + url("/kolay-tercih-mark.svg"), + radial-gradient( + circle at var(--kt-tema-x) var(--kt-tema-y), + #000 calc(var(--kt-tema-yaricap) - 1px), + transparent var(--kt-tema-yaricap) + ); + mask-repeat: no-repeat; + mask-size: + var(--kt-tema-kenar) var(--kt-tema-kenar), + 100% 100%; + mask-position: + calc(var(--kt-tema-x) - var(--kt-tema-kenar) / 2) + calc(var(--kt-tema-y) - var(--kt-tema-kenar) / 2), + 0 0; + animation: + kt-tema-isaret 0.9s cubic-bezier(0.65, 0, 0.35, 1) both, + kt-tema-daire 0.9s cubic-bezier(0.65, 0, 0.35, 1) both; +} +@keyframes kt-tema-isaret { + from { + --kt-tema-kenar: 0px; + } + to { + --kt-tema-kenar: var(--kt-tema-son); + } +} +/* Daire işaretin ardından gelir: ilk %35'te sıfırda bekler. */ +@keyframes kt-tema-daire { + 0%, + 35% { + --kt-tema-yaricap: 0px; + } + 100% { + --kt-tema-yaricap: var(--kt-tema-son); + } +} diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts index edb57ac..c0133dd 100644 --- a/src/app/sitemap.ts +++ b/src/app/sitemap.ts @@ -43,6 +43,7 @@ const staticEntries: MetadataRoute.Sitemap = [ { url: `${SITE_URL}/paket`, priority: 0.7, changeFrequency: "monthly" }, { url: `${SITE_URL}/meraklisina`, priority: 0.6, changeFrequency: "monthly" }, { url: `${SITE_URL}/iletisim`, priority: 0.3, changeFrequency: "yearly" }, + { url: `${SITE_URL}/surum-notlari`, priority: 0.3, changeFrequency: "monthly" }, { url: `${SITE_URL}/gizlilik`, priority: 0.2, changeFrequency: "yearly" }, { url: `${SITE_URL}/cerez-politikasi`, diff --git a/src/app/surum-notlari/page.tsx b/src/app/surum-notlari/page.tsx new file mode 100644 index 0000000..9e80b40 --- /dev/null +++ b/src/app/surum-notlari/page.tsx @@ -0,0 +1,149 @@ +import type { Metadata } from "next"; +import { ArrowRight, Mail } from "lucide-react"; +import { Parallax } from "@/components/parallax"; +import { PagePixelDivider, SectionEyebrow } from "@/components/pixel-decor"; +import { SiteFooter } from "@/components/site-footer"; +import { Kbd } from "@/components/ui/kbd"; +import { SURUM } from "@/lib/surum"; +import { sayfaMetadata } from "@/lib/seo"; + +export const metadata: Metadata = sayfaMetadata({ + title: "Sürüm notları", + description: + "KolayTercih beta sürüm notları: neler değişti, neler geliyor ve geri bildirimini nasıl iletirsin.", + path: "/surum-notlari", +}); + +/** + * Sürüm günlüğü. En yeni en üstte; her sürüm package.json'daki numarayla + * aynı adı taşır (AGENTS.md "Sürümleme"). Yeni bir sürüm çıkarken buraya bir + * kayıt eklenir; "Geliyor" listesi bitenlerden arındırılır. + */ +const SURUMLER: { + surum: string; + tarih: string; + baslik: string; + maddeler: string[]; +}[] = [ + { + surum: "1.1.0", + tarih: "7 Ekim 2026", + baslik: "Tema kısayolu ve sürüm notları", + maddeler: [ + "D tuşu açık / koyu temayı değiştirir; geçiş logodan yayılarak yumuşak oynar.", + "Bu sayfa: beta durumu, sürüm günlüğü ve geri bildirim adresi. Header'daki Beta rozeti buraya getirir.", + ], + }, + { + surum: "1.0.0", + tarih: "7 Ekim 2026", + baslik: "Beta açılışı", + maddeler: [ + "Sıralama, alan, il ve devlet/vakıf tercihine göre 24 tercihlik dengeli liste: hayal, dengeli ve güvenli dilimler.", + "Her program için YÖK Atlas verisinden taban sıralama, kontenjan ve yıllara göre eğilim.", + "Yapay zekâ destekli tercih raporu ve liste üzerinde soru sorabildiğin danışman sohbeti.", + "Üniversite ve bölüm kataloğu, üniversite sıralamaları, rehber yazıları.", + "Açık, koyu ve sistem teması.", + ], + }, +]; + +const GELIYOR = [ + "Listeni PDF olarak indirme ve paylaşma.", + "Yerleşme sonuçları açıklandığında listenin gerçekleşme karnesi.", + "Veli görünümü: listeyi birlikte inceleyip not bırakma.", +]; + +export default function SurumNotlariPage() { + return ( + <> +
+ Beta · v{SURUM} + +

Sürüm notları

+ + + +
+

+ KolayTercih şu an beta sürümünde +

+

+ Ürün çalışıyor ve gerçek YÖK Atlas verisiyle liste üretiyor; ama + hâlâ her gün bir şeyler düzeltiyor, eksik gördüğümüz yerleri + tamamlıyoruz. Bir hata, yanlış bir sayı, anlaşılmayan bir ekran + ya da “keşke şöyle olsa” dediğin bir şey görürsen bize yaz: her + geri bildirim okunur ve çoğu bir sonraki sürüme girer. +

+ + + Geri bildirim gönder + + +

+ destek@kolaytercih.com · Hangi sayfada, hangi sıralamayla ne + gördüğünü yazarsan daha hızlı çözeriz. Kart bilgini asla e-postayla + paylaşma. +

+
+ +
+

+ Neler değişti +

+
    + {SURUMLER.map((s) => ( +
  1. + +
    +

    + v{s.surum} +

    + + {s.baslik} + + +
    +
      + {s.maddeler.map((m) => ( +
    • {m}
      • + ))} +
    +
    2. + ))} +
+
+ +
+

+ Sırada ne var +

+
    + {GELIYOR.map((m) => ( +
  • {m}
    • + ))} +
+

+ Sıra geri bildirimle değişir; en çok istenen öne alınır. +

+
+ +

+ İpucu: D açık / koyu temayı değiştirir, + ⌘ + K aramayı açar. +

+
+ + + ); +} diff --git a/src/components/animasyonlu-mark.tsx b/src/components/animasyonlu-mark.tsx index 406e12a..5cbca50 100644 --- a/src/components/animasyonlu-mark.tsx +++ b/src/components/animasyonlu-mark.tsx @@ -166,12 +166,15 @@ function donguyuBaslat( * yerinden başlar. */ export function AnimasyonluMark({ + id, className, sadeceHover = false, oynat = true, varyant = "rota", renk = "marka", }: { + /** Kök elemanın id'si (ör. tema geçişinin merkez noktası, lib/tema-gecisi.ts). */ + id?: string; className?: string; sadeceHover?: boolean; /** `sadeceHover` yokken döngü açık mı. `false` iken işaret durağandır. */ @@ -284,6 +287,7 @@ export function AnimasyonluMark({ return (