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
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { AramaFunnelKarti } from "@/components/arama-funnel-karti";
|
||||
import { RehberKapak } from "@/components/rehber-kapak";
|
||||
import { RehberKapak } from "@/features/rehber/components/rehber-kapak";
|
||||
import { UniLogo } from "@/components/uni-logo";
|
||||
import { aramaNormalize, eslesmePuani } from "@/lib/arama";
|
||||
import type { RehberOzet } from "@/lib/rehber";
|
||||
|
||||
85
src/features/rehber/components/el-cizimi-sema.tsx
Normal file
85
src/features/rehber/components/el-cizimi-sema.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
159
src/features/rehber/components/rehber-kapak.tsx
Normal file
159
src/features/rehber/components/rehber-kapak.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
53
src/features/rehber/components/rehber-listesi.tsx
Normal file
53
src/features/rehber/components/rehber-listesi.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { getAllRehberler } from "../rehber-queries";
|
||||
import { RehberKapak } from "./rehber-kapak";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export function RehberListesi() {
|
||||
const yazilar = getAllRehberler();
|
||||
|
||||
return (
|
||||
<ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
|
||||
{yazilar.map((y) => (
|
||||
<li key={y.slug} className="mb-5 break-inside-avoid">
|
||||
<Link
|
||||
href={`/rehber/${y.slug}`}
|
||||
className="block overflow-hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
|
||||
>
|
||||
<RehberKapak
|
||||
baslik={y.baslik}
|
||||
compact
|
||||
className="rounded-[1.15rem]"
|
||||
/>
|
||||
<div className="px-3 pb-3 pt-4">
|
||||
<p className="text-sm leading-6 text-slate-600">{y.aciklama}</p>
|
||||
<span className="mt-4 inline-flex items-center gap-1.5 font-bricolage text-sm font-semibold text-primary">
|
||||
Yazıyı oku
|
||||
<ArrowRight className="size-4" aria-hidden />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export function RehberListesiSkeleton() {
|
||||
return (
|
||||
<ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
|
||||
{Array.from({ length: 3 }, (_, i) => (
|
||||
<li key={i} className="mb-5 break-inside-avoid">
|
||||
<div className="rounded-3xl border border-slate-200 bg-white p-2 shadow-sm">
|
||||
<Skeleton className="aspect-[1200/630] w-full rounded-[1.15rem]" />
|
||||
<div className="px-3 pb-3 pt-4">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="mt-2 h-5 w-2/3" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
138
src/features/rehber/components/rehber-makale.tsx
Normal file
138
src/features/rehber/components/rehber-makale.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { getAllRehberler, getAllRehberSlugs, getRehber } from "../rehber-queries";
|
||||
import { JsonLd, articleJsonLd, breadcrumbJsonLd } from "@/lib/seo";
|
||||
import { CtaSiraForm } from "@/components/cta-sira-form";
|
||||
import { ElCizimiSema } from "./el-cizimi-sema";
|
||||
import { RehberKapak } from "./rehber-kapak";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
// Sayfanın generateStaticParams'ı için — sayfalar *-queries import etmez.
|
||||
export function rehberStaticSlugs(): string[] {
|
||||
const slugs = getAllRehberSlugs();
|
||||
if (slugs.length === 0) {
|
||||
throw new Error("rehber: content/rehber altında hiç makale yok");
|
||||
}
|
||||
return slugs;
|
||||
}
|
||||
|
||||
export function rehberYaziMetadata(slug: string): Metadata {
|
||||
const yazi = getRehber(slug);
|
||||
if (!yazi) return {};
|
||||
return {
|
||||
title: yazi.baslik,
|
||||
description: yazi.aciklama,
|
||||
alternates: { canonical: `/rehber/${slug}` },
|
||||
openGraph: {
|
||||
type: "article",
|
||||
title: yazi.baslik,
|
||||
description: yazi.aciklama,
|
||||
publishedTime: yazi.tarih,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function RehberMakale({ slug }: { slug: string }) {
|
||||
const yazi = getRehber(slug);
|
||||
if (!yazi) notFound();
|
||||
|
||||
const digerYazilar = getAllRehberler()
|
||||
.filter((y) => y.slug !== slug)
|
||||
.slice(0, 4);
|
||||
|
||||
return (
|
||||
<>
|
||||
<JsonLd
|
||||
data={articleJsonLd({
|
||||
title: yazi.baslik,
|
||||
description: yazi.aciklama,
|
||||
path: `/rehber/${slug}`,
|
||||
datePublished: yazi.tarih,
|
||||
})}
|
||||
/>
|
||||
<JsonLd
|
||||
data={breadcrumbJsonLd([
|
||||
{ name: "Ana Sayfa", path: "/" },
|
||||
{ name: "Rehber", path: "/rehber" },
|
||||
{ name: yazi.baslik, path: `/rehber/${slug}` },
|
||||
])}
|
||||
/>
|
||||
|
||||
<article>
|
||||
<RehberKapak baslik={yazi.baslik} className="mt-6 shadow-sm" />
|
||||
<h1 className="mt-8 font-heading text-3xl font-bold text-slate-900 sm:text-4xl">
|
||||
{yazi.baslik}
|
||||
</h1>
|
||||
<p className="mt-3 text-base leading-7 text-slate-600">
|
||||
{yazi.aciklama}
|
||||
</p>
|
||||
<div
|
||||
className="mt-8 text-[15px] leading-7 text-slate-700
|
||||
[&_h2]:mt-10 [&_h2]:font-heading [&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-slate-900
|
||||
[&_h3]:mt-6 [&_h3]:font-heading [&_h3]:text-base [&_h3]:font-bold [&_h3]:text-slate-900
|
||||
[&_p]:mt-3
|
||||
[&_a]:font-medium [&_a]:text-primary hover:[&_a]:underline
|
||||
[&_strong]:font-semibold [&_strong]:text-slate-900
|
||||
[&_ul]:mt-3 [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-6
|
||||
[&_ol]:mt-3 [&_ol]:list-decimal [&_ol]:space-y-1.5 [&_ol]:pl-6
|
||||
[&_table]:mt-4 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm
|
||||
[&_th]:border [&_th]:border-slate-200 [&_th]:bg-slate-50 [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold
|
||||
[&_td]:border [&_td]:border-slate-200 [&_td]:px-3 [&_td]:py-2
|
||||
[&_blockquote]:mt-4 [&_blockquote]:border-l-4 [&_blockquote]:border-primary/30 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-slate-600"
|
||||
>
|
||||
{yazi.parcalar.map((parca, i) =>
|
||||
parca.tip === "html" ? (
|
||||
<div key={i} dangerouslySetInnerHTML={{ __html: parca.html }} />
|
||||
) : (
|
||||
<ElCizimiSema
|
||||
key={i}
|
||||
tanim={parca.sema.tanim}
|
||||
ariaLabel={parca.sema.ariaLabel}
|
||||
figcaption={parca.sema.altyazi}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div className="mt-12">
|
||||
<CtaSiraForm />
|
||||
</div>
|
||||
|
||||
{digerYazilar.length > 0 ? (
|
||||
<section className="mt-12">
|
||||
<h2 className="font-heading text-xl font-bold text-slate-900">
|
||||
Diğer rehber yazıları
|
||||
</h2>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{digerYazilar.map((y) => (
|
||||
<li key={y.slug}>
|
||||
<Link
|
||||
href={`/rehber/${y.slug}`}
|
||||
className="text-sm font-medium text-primary hover:underline"
|
||||
>
|
||||
{y.baslik}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function RehberMakaleSkeleton() {
|
||||
return (
|
||||
<div>
|
||||
<Skeleton className="mt-6 aspect-[1200/630] w-full rounded-3xl" />
|
||||
<Skeleton className="mt-8 h-10 w-3/4" />
|
||||
<div className="mt-3 space-y-3">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<Skeleton key={i} className="h-5 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
src/features/rehber/rehber-queries.ts
Normal file
11
src/features/rehber/rehber-queries.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import "server-only";
|
||||
|
||||
// Rehber feature'ının sorgu kapısı. İçerik motoru @/lib/rehber'de yaşar
|
||||
// (content/rehber'i build sırasında fs'ten okur); feature bileşenleri ve
|
||||
// sayfa yardımcıları yalnızca buradan okur.
|
||||
export {
|
||||
getAllRehberler,
|
||||
getAllRehberSlugs,
|
||||
getRehber,
|
||||
type RehberOzet,
|
||||
} from "@/lib/rehber";
|
||||
Reference in New Issue
Block a user