+
+ fallback'i görünür.
+ const { codeToHtml } = await import("shiki")
const html = await codeToHtml(code, { lang: language, theme })
setHighlightedHtml(html)
}
diff --git a/src/components/use-pixel-heat.ts b/src/components/use-pixel-heat.ts
index 781405a..ee020d8 100644
--- a/src/components/use-pixel-heat.ts
+++ b/src/components/use-pixel-heat.ts
@@ -8,6 +8,11 @@
* SVG katmanları çoğunlukla pointer-events-none olduğundan imleç window
* üzerinden izlenir ve viewBox koordinatına çevrilir. Beklenen veri
* öznitelikleri: data-px, data-cx, data-cy, data-op (taban opaklık).
+ *
+ * Landing'de 16 örnek yaşar: her örneğin kendi window dinleyicisi yerine
+ * modül seviyesinde TEK pointermove dinleyicisi + rAF birleştirmesi kullanılır;
+ * kare başına en fazla bir tarama yapılır, imleçten uzak örnekler hiç
+ * piksel iterasyonuna girmez.
*/
import { useEffect, type RefObject } from "react";
@@ -26,6 +31,99 @@ type HeatTarget = {
baseOpacity: number;
};
+type HeatInstance = {
+ svg: SVGSVGElement;
+ viewW: number;
+ radius: number;
+ baseColor: string;
+ pixels: HeatTarget[];
+ hot: Set;
+ controls: Map;
+};
+
+const instances = new Set();
+let sonOlay: PointerEvent | null = null;
+let rafId = 0;
+
+function calistir(
+ inst: HeatInstance,
+ el: SVGRectElement,
+ to: { fill: string; fillOpacity: number },
+ duration: number,
+) {
+ inst.controls.get(el)?.stop();
+ inst.controls.set(el, animate(el, to, { duration, ease: "easeOut" }));
+}
+
+function tara() {
+ rafId = 0;
+ const e = sonOlay;
+ if (!e) return;
+ for (const inst of instances) {
+ const rect = inst.svg.getBoundingClientRect();
+ if (rect.width === 0) continue;
+ const scale = rect.width / inst.viewW;
+ const pad = inst.radius * scale;
+ // İmleç fırça menzilinin tamamen dışındaysa ve sıcak piksel yoksa
+ // bu örnek için hiç hesap yapma
+ if (
+ inst.hot.size === 0 &&
+ (e.clientX < rect.left - pad ||
+ e.clientX > rect.right + pad ||
+ e.clientY < rect.top - pad ||
+ e.clientY > rect.bottom + pad)
+ ) {
+ continue;
+ }
+ const x = (e.clientX - rect.left) / scale;
+ const y = (e.clientY - rect.top) / scale;
+ for (const p of inst.pixels) {
+ const d2 = (p.cx - x) ** 2 + (p.cy - y) ** 2;
+ const isHot = d2 <= inst.radius * inst.radius;
+ if (isHot && !inst.hot.has(p.el)) {
+ inst.hot.add(p.el);
+ calistir(
+ inst,
+ p.el,
+ { fill: HOT_COLOR, fillOpacity: HOT_OPACITY },
+ HEAT_DURATION,
+ );
+ } else if (!isHot && inst.hot.has(p.el)) {
+ inst.hot.delete(p.el);
+ calistir(
+ inst,
+ p.el,
+ { fill: inst.baseColor, fillOpacity: p.baseOpacity },
+ COOL_DURATION,
+ );
+ }
+ }
+ }
+}
+
+function onMove(e: PointerEvent) {
+ sonOlay = e;
+ if (!rafId) rafId = requestAnimationFrame(tara);
+}
+
+function kaydol(inst: HeatInstance) {
+ if (instances.size === 0) {
+ window.addEventListener("pointermove", onMove, { passive: true });
+ }
+ instances.add(inst);
+}
+
+function ayril(inst: HeatInstance) {
+ instances.delete(inst);
+ inst.controls.forEach((c) => c.stop());
+ if (instances.size === 0) {
+ window.removeEventListener("pointermove", onMove);
+ if (rafId) cancelAnimationFrame(rafId);
+ rafId = 0;
+ sonOlay = null;
+ }
+}
+
export function usePixelHeat(
svgRef: RefObject,
{
@@ -42,7 +140,6 @@ export function usePixelHeat(
const viewW = svg.viewBox.baseVal.width;
if (!viewW) return;
- const baseColor = getComputedStyle(svg).color;
const pixels: HeatTarget[] = Array.from(
svg.querySelectorAll("[data-px]"),
).map((el) => ({
@@ -53,61 +150,16 @@ export function usePixelHeat(
}));
if (pixels.length === 0) return;
- const hot = new Set();
- const controls = new Map();
-
- const run = (
- el: SVGRectElement,
- to: { fill: string; fillOpacity: number },
- duration: number,
- ) => {
- controls.get(el)?.stop();
- controls.set(el, animate(el, to, { duration, ease: "easeOut" }));
- };
-
- const onMove = (e: PointerEvent) => {
- const rect = svg.getBoundingClientRect();
- if (rect.width === 0) return;
- const scale = rect.width / viewW;
- const pad = radius * scale;
- // İmleç fırça menzilinin tamamen dışındaysa ve sıcak piksel yoksa
- // hiç hesap yapma (sayfada birden çok örnek dinlediği için önemli)
- if (
- hot.size === 0 &&
- (e.clientX < rect.left - pad ||
- e.clientX > rect.right + pad ||
- e.clientY < rect.top - pad ||
- e.clientY > rect.bottom + pad)
- ) {
- return;
- }
- const x = (e.clientX - rect.left) / scale;
- const y = (e.clientY - rect.top) / scale;
- for (const p of pixels) {
- const d2 = (p.cx - x) ** 2 + (p.cy - y) ** 2;
- const isHot = d2 <= radius * radius;
- if (isHot && !hot.has(p.el)) {
- hot.add(p.el);
- run(
- p.el,
- { fill: HOT_COLOR, fillOpacity: HOT_OPACITY },
- HEAT_DURATION,
- );
- } else if (!isHot && hot.has(p.el)) {
- hot.delete(p.el);
- run(
- p.el,
- { fill: baseColor, fillOpacity: p.baseOpacity },
- COOL_DURATION,
- );
- }
- }
- };
-
- window.addEventListener("pointermove", onMove, { passive: true });
- return () => {
- window.removeEventListener("pointermove", onMove);
- controls.forEach((c) => c.stop());
+ const inst: HeatInstance = {
+ svg,
+ viewW,
+ radius,
+ baseColor: getComputedStyle(svg).color,
+ pixels,
+ hot: new Set(),
+ controls: new Map(),
};
+ kaydol(inst);
+ return () => ayril(inst);
}, [svgRef, radius]);
}
diff --git a/src/components/user-nav.tsx b/src/components/user-nav.tsx
index 78f9bd9..f5c55f6 100644
--- a/src/components/user-nav.tsx
+++ b/src/components/user-nav.tsx
@@ -5,6 +5,18 @@ import { Button } from "@/components/ui/button";
import { ListemButonu } from "@/components/manuel-liste/listem-butonu";
import { SignOutButton } from "./sign-out-button";
+/**
+ * Suspense fallback'i: girişsiz görünümle aynı yükseklik/genişlikte sessiz
+ * bir pill — session sorgusu akarken header zıplamasın (CLS yok).
+ */
+export function UserNavFallback() {
+ return (
+
+
+
+ );
+}
+
export async function UserNav() {
const u = await getCurrentUser();
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 6681449..57d8233 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -37,6 +37,12 @@ export const auth = betterAuth({
verification: schema.verification,
},
}),
+ session: {
+ // Session'ı imzalı cookie'de önbelle: her istekte session tablosu
+ // sorgusu yapılmaz. Kredi/paket tazeliği getCurrentUser()'daki ayrı
+ // user sorgusuyla korunur (src/lib/session.ts).
+ cookieCache: { enabled: true, maxAge: 5 * 60 },
+ },
user: {
additionalFields: {
creditBalance: { type: "number", defaultValue: 0, input: false },