185 lines
9.5 KiB
TypeScript
185 lines
9.5 KiB
TypeScript
import { getViewer } from '@/lib/viewer'
|
|
import Topnav from '@/components/topnav'
|
|
import Footer from '@/components/footer'
|
|
import Link from 'next/link'
|
|
import { getPayload } from 'payload'
|
|
import configPromise from '@payload-config'
|
|
import { TOPICS, topicsFor, INTEREST_MAP } from '@/lib/topics'
|
|
import { formatNumber, guidesLabel, minutesLabel, MEMBERSHIP_PRICE } from '@/lib/format'
|
|
import { freeEarlyAccess, accessLabel, LAUNCH_POLICY } from '@/lib/launch'
|
|
|
|
export const dynamic = 'force-dynamic'
|
|
|
|
/* Demo seed articles remain in the library, but never in the popular section. */
|
|
const DEMO_POST_SLUGS = ['first-arabic-agent', 'agent-loop-stop-condition', 'choosing-your-model', 'systematic-model-eval', 'simple-arabic-rag', 'vector-databases-in-practice', 'safe-agent-guardrails', 'agent-output-review-gates', 'indispensable-ai-tools', 'tool-pipelines-and-permissions', 'ai-in-your-business', 'prototype-to-production', 'article-agent-guide']
|
|
|
|
type Doc = { id: number; title: string; slug: string; dek?: string | null; access: 'free' | 'vip'; category: string; level?: string | null; readingMinutes: number; views?: number | null; cover?: { url?: string | null } | number | null }
|
|
|
|
export default async function HomePage() {
|
|
const viewer = await getViewer()
|
|
const payload = await getPayload({ config: configPromise })
|
|
const { docs: raw } = await payload.find({
|
|
collection: 'posts',
|
|
where: { status: { equals: 'published' } },
|
|
depth: 1,
|
|
limit: 200,
|
|
sort: '-publishedAt',
|
|
select: { title: true, slug: true, dek: true, access: true, category: true, level: true, readingMinutes: true, cover: true },
|
|
})
|
|
const docs = raw as unknown as Doc[]
|
|
const freeCount = docs.filter(d => d.access === 'free').length
|
|
|
|
// Hero personalization: matching the viewer's interest floats to the top,
|
|
// level match ranks higher, ties keep the -publishedAt order. Anonymous
|
|
// viewers get the plain newest-first list.
|
|
const interestTopic = viewer?.interest ? INTEREST_MAP[viewer.interest] : undefined
|
|
const score = (d: Doc) => {
|
|
if (!interestTopic || !topicsFor(d).includes(interestTopic)) return 0
|
|
return d.level === viewer?.level ? 2 : 1
|
|
}
|
|
const hero = docs
|
|
.map((d, i) => ({ d, i, s: score(d) }))
|
|
.sort((a, b) => b.s - a.s || a.i - b.i)
|
|
.slice(0, 4)
|
|
.map(({ d }) => d)
|
|
const counts = Object.fromEntries(TOPICS.map(t => [t.key, docs.filter(d => topicsFor(d).includes(t.key)).length]))
|
|
// Query the complete published collection, not just the 200 newest posts.
|
|
// Read-count ties prefer the newest publication, then a stable slug order.
|
|
const { docs: popular } = await payload.find({
|
|
collection: 'posts',
|
|
where: { and: [{ status: { equals: 'published' } }, { slug: { not_in: DEMO_POST_SLUGS } }] },
|
|
depth: 1,
|
|
limit: 6,
|
|
sort: ['-views', '-publishedAt', 'slug'],
|
|
select: { title: true, slug: true, dek: true, access: true, category: true, readingMinutes: true, cover: true, views: true },
|
|
})
|
|
const startHere = popular as unknown as Doc[]
|
|
|
|
return (
|
|
<div id="site" className="site-page v2 v2-home">
|
|
{/* Organization structured data (home page only; WebSite LD lives in layout). */}
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Organization',
|
|
name: 'أنور پآي',
|
|
url: process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai',
|
|
logo: `${process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'}/brand/icon-256.png`,
|
|
}),
|
|
}}
|
|
/>
|
|
<Topnav viewer={viewer} />
|
|
<main id="content">
|
|
<section className="home-hero">
|
|
<div className="wrap home-hero-grid">
|
|
<div className="home-hero-copy">
|
|
<p className="kicker">مكتبة عربية للذكاء الاصطناعي العملي</p>
|
|
<h1>افهم الذكاء الاصطناعي، ثم ابنِ به.</h1>
|
|
<p className="lede">محتوى عربي عملي عن الوكلاء والنماذج والأتمتة، يكتبه مهندسو بنية تحتية لمن يريد أن يشغّل شيئاً حقيقياً.</p>
|
|
<div className="actions">
|
|
<a className="btn btn-primary" href="/articles">ابدأ القراءة المجانية</a>
|
|
<Link className="btn btn-quiet" href="/articles">تصفح المكتبة</Link>
|
|
</div>
|
|
</div>
|
|
{hero.length > 0 && (
|
|
<aside className="hero-panel" aria-labelledby="new-title">
|
|
<h2 id="new-title">أحدث المحتوى</h2>
|
|
<ul role="list">
|
|
{hero.map(d => {
|
|
const coverUrl = typeof d.cover === 'object' ? d.cover?.url ?? null : null
|
|
return (
|
|
<li key={d.id}>
|
|
<Link href={`/posts/${d.slug}`}>
|
|
{coverUrl && <img className="hero-panel-thumb" src={coverUrl} alt="" width={72} height={48} loading="lazy" />}
|
|
<span className="hero-panel-title">{d.title}</span>
|
|
<span className="meta-row"><span>{d.category}</span><span>{minutesLabel(d.readingMinutes)}</span><span className={d.access === 'vip' ? 'is-vip' : undefined}>{accessLabel(d.access)}</span></span>
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
<Link className="text-link" href="/articles">كل المحتوى</Link>
|
|
</aside>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="home-paths" id="topics" aria-labelledby="paths-title">
|
|
<div className="wrap">
|
|
<header className="section-head">
|
|
<h2 id="paths-title">اختر مساراً حسب ما تريد بناءه</h2>
|
|
<p>ينتمي كل عنصر محتوى إلى مسار، ويظهر محتوى المبتدئين أيضاً في الأساسيات.</p>
|
|
</header>
|
|
<ol className="paths" role="list">
|
|
{TOPICS.map(topic => (
|
|
<li key={topic.key}>
|
|
<Link href={`/topics/${topic.key}`} className="path">
|
|
<span className="path-name">{topic.label}</span>
|
|
<span className="path-hint">{topic.hint}</span>
|
|
<span className="path-count">{guidesLabel(counts[topic.key])}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
{startHere.length > 0 && (
|
|
<section className="home-start" aria-labelledby="start-title">
|
|
<div className="wrap">
|
|
<header className="section-head">
|
|
<h2 id="start-title">الأكثر قراءة</h2>
|
|
<Link className="text-link" href="/articles">كل المحتوى ({formatNumber(docs.length)})</Link>
|
|
</header>
|
|
<ul className="card-grid" role="list">
|
|
{startHere.map(post => {
|
|
const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
|
|
return (
|
|
<li key={post.id}>
|
|
<article className="guide">
|
|
{coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
|
|
<p className="meta-row"><span className="cat">{post.category}</span><span>{minutesLabel(post.readingMinutes)}</span><span>{formatNumber(post.views ?? 0)} قراءة</span><span className={post.access === 'vip' ? 'is-vip' : undefined}>{accessLabel(post.access)}</span></p>
|
|
<h3><Link href={`/posts/${post.slug}`}>{post.title}</Link></h3>
|
|
<p className="guide-dek">{post.dek}</p>
|
|
<span className="guide-link" aria-hidden="true">اقرأ المحتوى</span>
|
|
</article>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<section className="home-membership" id="membership" aria-labelledby="membership-title">
|
|
<div className="wrap membership-panel">
|
|
<div>
|
|
<h2 id="membership-title">اقرأ مجاناً الآن؛ العضوية خطة مستقبلية.</h2>
|
|
<p>{LAUNCH_POLICY.summary}</p>
|
|
</div>
|
|
<div className="membership-offer">
|
|
{freeEarlyAccess() ? (
|
|
<>
|
|
<p className="price price-early">وصول مبكر مجاني</p>
|
|
<p className="early-line">يمكنك قراءة المحتوى المنشور خلال الوصول المبكر دون بطاقة دفع.</p>
|
|
</>
|
|
) : (
|
|
<p className="price"><bdi dir="ltr">{MEMBERSHIP_PRICE}</bdi> <span>شهرياً، وتلغي متى شئت</span></p>
|
|
)}
|
|
<ul role="list">
|
|
<li>{guidesLabel(docs.length - freeCount)} مصنفة للعضوية مستقبلاً ومفتوحة الآن</li>
|
|
<li>قوالب وقوائم فحص قابلة للتنزيل</li>
|
|
<li>القراءة دون حساب؛ التسجيل العام متوقف</li>
|
|
</ul>
|
|
<Link className="btn btn-primary" href="/subscription">تفاصيل الوصول المبكر</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|