refactor: rehber feature'ı — makale ve liste feature bileşenlerine çıktı (Faz 3)
- rehber-kapak + el-cizimi-sema features/rehber/components/ altına taşındı (el-cizimi-sema'nın göreli font yolu yeni konuma göre düzeltildi) - /rehber'in kart gridi RehberListesi'ne, /rehber/[slug]'ın makale gövdesi (JsonLd + içerik + ilgili yazılar + notFound) RehberMakale'ye çıkarıldı; metadata/staticParams yardımcıları bileşen dosyasından export ediliyor - İki sayfa senkron: params.then() + sayfada Suspense, skeleton'lar colocated - rehber-queries.ts (server-only) lib/rehber'in feature kapısı - Davranış değişikliği yok; içerik build-time statik Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
@@ -1,85 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// Ürün genelindeki "el çizimi" mermaid şemalarının tek kaynağı: /meraklisina
|
||||
// hunisi de rehber yazılarındaki şemalar da bu bileşenle çizilir, böylece
|
||||
// görünüm (font, renk teması, çizgi titremesi) her yerde birebir aynı kalır.
|
||||
// Mermaid ağır bir paket olduğu için useEffect içinde dinamik import edilir;
|
||||
// sayfa paketine girmez.
|
||||
|
||||
import { useEffect, useId, useState } from "react";
|
||||
import localFont from "next/font/local";
|
||||
|
||||
// Şemanın "el çizimi" görünümüne uyan el yazısı fontu (Sweet Cucumber
|
||||
// Mocktail, Misti's Fonts). Türkçe glifler doğrulandı (ş, ğ, ı, İ… hepsi
|
||||
// var). DİKKAT: lisans "kişisel kullanım için ücretsiz" — canlıya çıkmadan
|
||||
// mistifonts.com/sweet-cucumber-mocktail adresinden ticari lisans alınmalı.
|
||||
const elYazisi = localFont({
|
||||
src: "../fonts/SweetCucumberMocktail.woff2",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export function ElCizimiSema({
|
||||
tanim,
|
||||
ariaLabel,
|
||||
figcaption,
|
||||
}: {
|
||||
/** Mermaid tanımı (flowchart vb.) */
|
||||
tanim: string;
|
||||
/** Şemanın tamamını anlatan erişilebilirlik metni */
|
||||
ariaLabel: string;
|
||||
figcaption?: React.ReactNode;
|
||||
}) {
|
||||
const [svg, setSvg] = useState<string | null>(null);
|
||||
// mermaid.render'ın istediği DOM id'si: useId'nin ":" karakterleri geçersiz
|
||||
const semaId = `sema-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
|
||||
|
||||
useEffect(() => {
|
||||
let iptal = false;
|
||||
import("mermaid").then(async ({ default: mermaid }) => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
look: "handDrawn",
|
||||
handDrawnSeed: 7, // her render'da aynı çizgi titremesi (deterministik)
|
||||
theme: "base",
|
||||
fontFamily: `${elYazisi.style.fontFamily}, cursive`,
|
||||
themeVariables: {
|
||||
primaryColor: "#ffffff",
|
||||
primaryBorderColor: "#e2e8f0",
|
||||
primaryTextColor: "#0f172a",
|
||||
lineColor: "#94a3b8",
|
||||
edgeLabelBackground: "#ffffff",
|
||||
fontFamily: `${elYazisi.style.fontFamily}, cursive`,
|
||||
fontSize: "17px", // script fontun x-yüksekliği düşük; okunurluk için büyütüldü
|
||||
},
|
||||
});
|
||||
const sonuc = await mermaid.render(semaId, tanim);
|
||||
if (!iptal) setSvg(sonuc.svg);
|
||||
});
|
||||
return () => {
|
||||
iptal = true;
|
||||
};
|
||||
}, [semaId, tanim]);
|
||||
|
||||
return (
|
||||
<figure className="mt-6">
|
||||
{svg ? (
|
||||
<div
|
||||
role="img"
|
||||
aria-label={ariaLabel}
|
||||
className={`${elYazisi.className} overflow-x-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full`}
|
||||
dangerouslySetInnerHTML={{ __html: svg }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
aria-hidden
|
||||
className="h-96 animate-pulse rounded-xl bg-slate-100"
|
||||
/>
|
||||
)}
|
||||
{figcaption ? (
|
||||
<figcaption className="mt-3 text-xs text-slate-500">
|
||||
{figcaption}
|
||||
</figcaption>
|
||||
) : null}
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
type RehberKapakProps = {
|
||||
baslik: string;
|
||||
className?: string;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
const VURGU_DESENLERI = [
|
||||
/^YKS Tercih Listesi/i,
|
||||
/^Ölü Tercih/i,
|
||||
/^Kaç Sıralama/i,
|
||||
/^Ek Yerleştirme/i,
|
||||
/^Taban Puan/i,
|
||||
/^YKS 2026 Tercih Takvimi/i,
|
||||
/^Devlet mi Vakıf mı\?/i,
|
||||
/^Baraj ve Başarı Sıralaması Şartları/i,
|
||||
/^TYT ile Önlisans Tercihi/i,
|
||||
/^Taban Sıralamalar/i,
|
||||
];
|
||||
|
||||
export function rehberBasliginiBol(baslik: string) {
|
||||
const eslesme = VURGU_DESENLERI.map((desen) => baslik.match(desen)).find(
|
||||
Boolean,
|
||||
);
|
||||
const vurgu = eslesme?.[0] ?? baslik.split(/\s+/).slice(0, 3).join(" ");
|
||||
return { vurgu, kalan: baslik.slice(vurgu.length) };
|
||||
}
|
||||
|
||||
export function rehberMetniniParcala(metin: string) {
|
||||
return metin.split(/(\d+(?:[.,]\d+)*)/g).filter(Boolean);
|
||||
}
|
||||
|
||||
function KapakMetni({ metin }: { metin: string }) {
|
||||
return rehberMetniniParcala(metin).map((parca, i) =>
|
||||
/^\d/.test(parca) ? (
|
||||
<span key={i} className="font-bricolage font-black italic">
|
||||
{parca}
|
||||
</span>
|
||||
) : (
|
||||
parca
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const KAPAK_PIKSELLERI = [
|
||||
[960, 50, 0.16], [980, 50, 0.28], [1020, 50, 0.12],
|
||||
[940, 70, 0.24], [980, 70, 0.12], [1000, 70, 0.3], [1060, 70, 0.18],
|
||||
[960, 90, 0.12], [1000, 90, 0.2], [1040, 90, 0.1], [1080, 90, 0.26],
|
||||
[1080, 110, 0.14], [1120, 110, 0.22], [1140, 110, 0.12],
|
||||
[60, 490, 0.12], [100, 490, 0.25], [120, 490, 0.14],
|
||||
[40, 510, 0.24], [80, 510, 0.12], [120, 510, 0.3], [160, 510, 0.16],
|
||||
[60, 530, 0.14], [100, 530, 0.22], [140, 530, 0.1], [180, 530, 0.27],
|
||||
] as const;
|
||||
|
||||
export function RehberKapak({
|
||||
baslik,
|
||||
className = "",
|
||||
compact = false,
|
||||
}: RehberKapakProps) {
|
||||
const { vurgu, kalan } = rehberBasliginiBol(baslik);
|
||||
const baslikBoyutu = compact
|
||||
? baslik.length > 70
|
||||
? "text-[clamp(15px,1.8vw,20px)]"
|
||||
: baslik.length > 52
|
||||
? "text-[clamp(17px,2.1vw,23px)]"
|
||||
: "text-[clamp(19px,2.4vw,27px)]"
|
||||
: baslik.length > 70
|
||||
? "text-[clamp(28px,4vw,48px)]"
|
||||
: baslik.length > 52
|
||||
? "text-[clamp(32px,4.5vw,54px)]"
|
||||
: "text-[clamp(36px,5vw,62px)]";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative isolate aspect-1200/630 w-full overflow-hidden rounded-3xl border border-[#2563eb]/15 bg-white font-bricolage text-[#2563eb] ${className}`}
|
||||
role="img"
|
||||
aria-label={`${baslik} yazı kapağı`}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 1200 630"
|
||||
preserveAspectRatio="none"
|
||||
className="absolute inset-0 size-full text-[#2563eb]"
|
||||
aria-hidden
|
||||
>
|
||||
{KAPAK_PIKSELLERI.map(([x, y, opacity]) => (
|
||||
<rect
|
||||
key={`${x}-${y}`}
|
||||
x={x}
|
||||
y={y}
|
||||
width="14"
|
||||
height="14"
|
||||
rx="4"
|
||||
fill="currentColor"
|
||||
fillOpacity={opacity}
|
||||
/>
|
||||
))}
|
||||
<rect x="1040" y="50" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
|
||||
<rect x="80" y="530" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
|
||||
</svg>
|
||||
|
||||
<div
|
||||
className={`relative flex h-full flex-col justify-between ${
|
||||
compact ? "p-[clamp(14px,2.2vw,24px)]" : "p-[clamp(20px,5vw,60px)]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className={`font-sans font-bold uppercase tracking-[0.2em] text-[#2563eb] ${
|
||||
compact
|
||||
? "text-[clamp(8px,1vw,11px)]"
|
||||
: "text-[clamp(10px,1.5vw,18px)]"
|
||||
}`}
|
||||
>
|
||||
Tercih Rehberi
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className={`max-w-[88%] text-balance font-heading font-light leading-[1.02] tracking-tight text-[#2563eb] ${baslikBoyutu}`}
|
||||
>
|
||||
<span className="font-bricolage font-semibold tracking-tighter text-[#ff5a00]">
|
||||
<KapakMetni metin={vurgu} />
|
||||
</span>
|
||||
{kalan ? (
|
||||
<>
|
||||
{/^\s/.test(kalan) ? " " : null}
|
||||
<KapakMetni metin={kalan.trimStart()} />
|
||||
</>
|
||||
) : null}
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center justify-end gap-0.5">
|
||||
<svg
|
||||
viewBox="0 0 180 180"
|
||||
className={
|
||||
compact
|
||||
? "size-[clamp(16px,1.8vw,22px)] shrink-0"
|
||||
: "size-[clamp(22px,3vw,38px)] shrink-0"
|
||||
}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
|
||||
<rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
|
||||
<rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
|
||||
</svg>
|
||||
<span
|
||||
className={`tracking-tighter text-[#2563eb] ${
|
||||
compact
|
||||
? "text-[clamp(10px,1.2vw,14px)]"
|
||||
: "text-[clamp(13px,2vw,24px)]"
|
||||
}`}
|
||||
>
|
||||
<span className="font-light">Kolay</span>
|
||||
<span className="font-semibold">Tercih</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user