فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

2026-09-12 23:37:55 +03:30
parent 6bb6226e06
commit 6b49d035c2
43 changed files with 1194 additions and 262 deletions
@@ -7,6 +7,7 @@ import { ButtonLink } from '../components/Button';
 import { ArticleCard } from '../components/ArticleCard';
 import { Newsletter } from '../components/home/Newsletter';
 import { useSite } from '../api';
+import { useLang } from '../i18n/lang';
 import { applySeo } from '../seo';
 import { useEffect } from 'react';
 import { ARTICLE_EXTENSIONS } from '../components/admin/ArticleEditor';
@@ -32,6 +33,7 @@ function renderBody(article: Article): { html: string | null; legacy: string[] }
 export function ArticleDetail() {
  const { slug } = useParams<{slug: string;}>();
  const { articles, brand } = useSite();
+  const { t, href, lang } = useLang();
  const article = articles.find((a) => a.slug === slug);

  // عنوان تب، توضیح متا، OG و JSON-LD از خود مقاله
@@ -40,31 +42,32 @@ export function ArticleDetail() {
    applySeo({
      title: `${article.title} | ${brand}`,
      description: article.excerpt,
-      path: `/blog/${article.slug}`,
+      path: href(`/blog/${article.slug}`),
      image: article.image,
      type: 'article',
+      lang,
      jsonLd: {
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.title,
        description: article.excerpt,
        image: article.image ? new URL(article.image, window.location.origin).href : undefined,
-        inLanguage: 'fa',
+        inLanguage: lang,
        author: { '@type': 'Organization', name: brand },
        publisher: { '@type': 'Organization', name: brand },
-        mainEntityOfPage: new URL(`/blog/${article.slug}`, window.location.origin).href,
+        mainEntityOfPage: new URL(href(`/blog/${article.slug}`), window.location.origin).href,
      },
    });
-  }, [article?.id]);
+  }, [article?.id, lang, href]);

  if (!article) {
    return (
      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
-        <h1 className="text-section font-bold text-ivory">این مقاله پیدا نشد</h1>
-        <p className="mt-4 text-sm font-light text-ivory/60">فهرست کامل مقالات وبلاگ را ببینید.</p>
-        <ButtonLink to="/blog" variant="copper" className="mt-8">
-          بازگشت به وبلاگ
-          <ArrowLeftIcon className="h-4 w-4" />
+        <h1 className="text-section font-bold text-ivory">{t('articleNotFound')}</h1>
+        <p className="mt-4 text-sm font-light text-ivory/60">{t('articleNotFoundText')}</p>
+        <ButtonLink to={href('/blog')} variant="copper" className="mt-8">
+          {t('backToBlog')}
+          <ArrowLeftIcon className="h-4 w-4 ltr:-scale-x-100" />
        </ButtonLink>
      </section>);

@@ -84,15 +87,15 @@ export function ArticleDetail() {
          aria-hidden="true" />

        <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
-          <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
-            <Link to="/" className="transition-colors hover:text-copper">
-              صفحه اصلی
+          <nav aria-label={t('breadcrumbAria')} className="flex items-center gap-2 text-xs font-light text-ivory/50">
+            <Link to={href('/')} className="transition-colors hover:text-copper">
+              {t('home')}
            </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
-            <Link to="/blog" className="transition-colors hover:text-copper">
-              وبلاگ
+            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
+            <Link to={href('/blog')} className="transition-colors hover:text-copper">
+              {t('blog')}
            </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
            <span className="text-copper">{article.category}</span>
          </nav>
          <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{article.title}</h1>
@@ -109,7 +112,7 @@ export function ArticleDetail() {
      <article className="bg-ink py-20 lg:py-28">
        <div className="mx-auto max-w-3xl px-6">
          <Reveal>
-            <p className="border-r-2 border-copper pr-6 text-lg font-light leading-10 text-ivory/80">
+            <p className="border-copper ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6 text-lg font-light leading-10 text-ivory/80">
              {article.excerpt}
            </p>
          </Reveal>
@@ -129,9 +132,9 @@ export function ArticleDetail() {
        </div>
      </article>

-      <section className="bg-char py-20 lg:py-28" aria-label="مقالات مرتبط">
+      <section className="bg-char py-20 lg:py-28" aria-label={t('relatedArticlesAria')}>
        <div className="mx-auto max-w-site px-6 lg:px-10">
-          <h2 className="text-section font-bold text-ivory">مقالات مرتبط</h2>
+          <h2 className="text-section font-bold text-ivory">{t('relatedArticles')}</h2>
          <div className="mt-6 h-px w-24 bg-copper/70" />
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {related.map((item, i) =>
@@ -6,22 +6,25 @@ import { Reveal } from '../components/Reveal'
 import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
 import { useSite } from '../api'
+import { useLang } from '../i18n/lang'
 import { EditableItem } from '../admin/Editable'
 import { useAdmin } from '../admin/AdminContext'
 import { PlusIcon } from 'lucide-react'

 function DraftBadge({ className = '' }: { className?: string }) {
+  const { t } = useLang()
  return (
    <span
      className={`border border-amber-400/60 bg-ink/90 px-2 py-1 text-xs font-bold text-amber-300 ${className}`}
    >
-      پیش‌نویس
+      {t('draft')}
    </span>
  )
 }

 export function Blog() {
  const { articles } = useSite()
+  const { t, href } = useLang()
  const { isEditMode } = useAdmin()

  // دکمه «نوشتن مقاله جدید» فقط در حالت ویرایش ادمین دیده می‌شود
@@ -32,7 +35,7 @@ export function Blog() {
      className="inline-flex items-center gap-2 bg-copper px-6 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-105"
    >
      <PlusIcon className="h-4 w-4" />
-      نوشتن مقاله جدید
+      {t('writeNewArticle')}
    </Link>
  ) : null

@@ -41,11 +44,11 @@ export function Blog() {
    return (
      <>
        <PageHero pageKey="blog" />
-        <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+        <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
          <div className="mx-auto max-w-site px-6 text-center lg:px-10">
-            <h2 className="text-3xl font-bold text-ivory">هنوز مقاله‌ای منتشر نشده است</h2>
+            <h2 className="text-3xl font-bold text-ivory">{t('blogEmpty')}</h2>
            <p className="mt-4 text-sm font-light text-ivory/60">
-              به‌زودی نخستین نوشته‌های ما اینجا منتشر می‌شود.
+              {t('blogEmptyText')}
            </p>
            <div className="mt-8 flex justify-center">{writeButton}</div>
          </div>
@@ -61,28 +64,28 @@ export function Blog() {
    <>
      <PageHero pageKey="blog" />

-      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+      <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
        <div className="mx-auto max-w-site px-6 lg:px-10">
          <div className="mb-10 flex justify-start">{writeButton}</div>
          <Reveal>
            <EditableItem resource="articles" item={featured} editHref={`/admin/write/${featured.id}`}>
            <Link
-              to={`/blog/${featured.slug}`}
+              to={href(`/blog/${featured.slug}`)}
              className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
-              aria-label={`خواندن مقاله ${featured.title}`}
+              aria-label={`${t('readArticlePrefix')} ${featured.title}`}
            >
              <div className="overflow-hidden">
                <img
                  src={featured.image}
-                  alt={`تصویر مقاله ${featured.title}`}
+                  alt={`${t('articleImagePrefix')} ${featured.title}`}
                  className="h-full min-h-[20rem] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
                />
              </div>
              <div className="flex flex-col justify-center p-8 lg:p-12">
                <p className="text-xs font-light text-copper">
-                  مقاله ویژه — {featured.category}
+                  {t('featuredArticle')} — {featured.category}
                  {featured.status === 'draft' && (
-                    <DraftBadge className="mr-3 inline-block align-middle" />
+                    <DraftBadge className="inline-block align-middle ltr:ml-3 rtl:mr-3" />
                  )}
                </p>
                <h2 className="mt-6 text-2xl font-bold leading-[2.2] md:leading-[2.2] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
@@ -98,8 +101,8 @@ export function Blog() {
                    </span>
                  </span>
                  <span className="flex items-center gap-2 text-copper">
-                    ادامه مطلب
-                    <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-200 ease-lux group-hover:-translate-x-1" />
+                    {t('readMore')}
+                    <ArrowLeftIcon className="h-3.5 w-3.5 ltr:-scale-x-100 transition-transform duration-200 ease-lux rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1" />
                  </span>
                </div>
              </div>
@@ -113,7 +116,7 @@ export function Blog() {
                <EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
                  <div className="relative h-full">
                    {article.status === 'draft' && (
-                      <DraftBadge className="absolute left-3 top-3 z-10" />
+                      <DraftBadge className="absolute top-3 ltr:left-3 rtl:right-3 z-10" />
                    )}
                    <ArticleCard article={article} />
                  </div>
@@ -3,16 +3,18 @@ import { PageHero } from '../components/PageHero'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
 import { useSite } from '../api'
+import { useLang } from '../i18n/lang'
 import { AddItemButton, EditableItem } from '../admin/Editable'

 export function ContactPage() {
  const { offices } = useSite()
+  const { t } = useLang()
  
  return (
    <>
      <PageHero pageKey="contact" />

-      <section className="bg-ink py-24" aria-label="دفاتر ما">
+      <section className="bg-ink py-24" aria-label={t('officesAria')}>
        <div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
          {offices.map((office, i) => (
            <Reveal key={office.id} delay={0.06 * i} className="h-full">
@@ -5,10 +5,12 @@ import { SectionHeading } from '../components/SectionHeading'
 import { Stats } from '../components/home/Stats'
 import { ContactSection } from '../components/ContactSection'
 import { useSectionHeading, useSite } from '../api'
+import { useLang, formatNumber } from '../i18n/lang'
 import { AddItemButton, EditableItem } from '../admin/Editable'

 export function Investment() {
  const { investment_models } = useSite()
+  const { lang } = useLang()
  const heading = useSectionHeading('investment_models')

  return (
@@ -26,7 +28,7 @@ export function Investment() {
                    {/* لایه نوری ظریف که در زمان هاور روشن می‌شود */}
                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                    
-                    <p className="relative z-10 text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
+                    <p className="relative z-10 text-sm font-bold text-copper/80">{lang === 'fa' ? `۰${formatNumber(i + 1, lang)}` : formatNumber(i + 1, lang).padStart(2, '0')}</p>

                    <h3 className="relative z-10 mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
                      {model.title}
@@ -8,11 +8,13 @@ import { ContactSection } from '../components/ContactSection'
 import { Lightbox } from '../components/Lightbox'
 import { useEffect } from 'react';
 import { useSite, useStatusLabel } from '../api';
+import { useLang } from '../i18n/lang';
 import { applySeo } from '../seo';

 export function ProjectDetail() {
  const { slug } = useParams<{ slug: string }>()
  const { projects, brand } = useSite()
+  const { t, href, lang } = useLang()
  const project = projects.find((p) => p.slug === slug)
  const statusLabel = useStatusLabel(project?.status ?? '')
  const [lightbox, setLightbox] = useState<number | null>(null)
@@ -23,21 +25,22 @@ export function ProjectDetail() {
    applySeo({
      title: `${project.title} | ${brand}`,
      description: project.summary,
-      path: `/projects/${project.slug}`,
+      path: href(`/projects/${project.slug}`),
      image: project.image,
+      lang,
    });
-  }, [project?.id]);
+  }, [project?.id, lang, href]);

  if (!project) {
    return (
      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
-        <h1 className="text-section font-bold text-ivory">این پروژه پیدا نشد</h1>
+        <h1 className="text-section font-bold text-ivory">{t('projectNotFound')}</h1>
        <p className="mt-4 text-sm font-light text-ivory/60">
-          ممکن است نشانی تغییر کرده باشد. فهرست کامل پروژه‌ها را ببینید.
+          {t('projectNotFoundText')}
        </p>
-        <ButtonLink to="/projects" variant="copper" className="mt-8">
-          بازگشت به پروژه‌ها
-          <ArrowLeftIcon className="h-4 w-4" />
+        <ButtonLink to={href('/projects')} variant="copper" className="mt-8">
+          {t('backToProjects')}
+          <ArrowLeftIcon className="h-4 w-4 ltr:-scale-x-100" />
        </ButtonLink>
      </section>
    )
@@ -46,12 +49,12 @@ export function ProjectDetail() {
  const related = projects.filter((p) => p.slug !== project.slug).slice(0, 3)
  
  const facts = [
-    { label: 'موقعیت', value: project.location },
-    { label: 'سال', value: project.year },
-    { label: 'زیربنا', value: project.area },
-    { label: 'تعداد طبقات', value: project.floors },
-    { label: 'واحدها', value: project.units },
-    { label: 'کارفرما', value: project.client },
+    { label: t('specLocation'), value: project.location },
+    { label: t('specYear'), value: project.year },
+    { label: t('specArea'), value: project.area },
+    { label: t('specFloors'), value: project.floors },
+    { label: t('specUnits'), value: project.units },
+    { label: t('specClient'), value: project.client },
  ]

  return (
@@ -65,15 +68,15 @@ export function ProjectDetail() {
          aria-hidden="true"
        />
        <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
-          <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
-            <Link to="/" className="transition-colors hover:text-copper">
-              صفحه اصلی
+          <nav aria-label={t('breadcrumbAria')} className="flex items-center gap-2 text-xs font-light text-ivory/50">
+            <Link to={href('/')} className="transition-colors hover:text-copper">
+              {t('home')}
            </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
-            <Link to="/projects" className="transition-colors hover:text-copper">
-              پروژه‌ها
+            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
+            <Link to={href('/projects')} className="transition-colors hover:text-copper">
+              {t('projects')}
            </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            <ChevronLeftIcon className="h-3.5 w-3.5 ltr:rotate-180" />
            <span className="text-copper">{project.title}</span>
          </nav>
          <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{project.title}</h1>
@@ -81,7 +84,7 @@ export function ProjectDetail() {
        </div>
      </section>

-      <section className="bg-char py-20 lg:py-28" aria-label="جزئیات پروژه">
+      <section className="bg-char py-20 lg:py-28" aria-label={t('projectDetailsAria')}>
        <div className="mx-auto grid max-w-site items-start gap-12 px-6 lg:grid-cols-2 lg:gap-16 lg:px-10">
          
          <Reveal className="order-1">
@@ -89,7 +92,7 @@ export function ProjectDetail() {
              <span aria-hidden="true" className="h-px w-8 bg-copper" />
              {statusLabel}
            </span>
-            <h2 className="mt-4 text-3xl font-bold text-ivory">درباره پروژه</h2>
+            <h2 className="mt-4 text-3xl font-bold text-ivory">{t('aboutProject')}</h2>
            
            {project.body.map((para) => (
              <p key={para} className="mt-5 text-base font-light leading-9 text-ivory/70">
@@ -99,7 +102,7 @@ export function ProjectDetail() {

            <dl className="mt-10 grid grid-cols-2 gap-px border border-ivory/10 bg-ivory/10">
              {facts.map((f) => (
-                <div key={f.label} className="bg-ink p-6 md:p-8 text-right">
+                <div key={f.label} className="bg-ink p-6 md:p-8 ltr:text-left rtl:text-right">
                  <dt className="text-xs font-light text-ivory/50">{f.label}</dt>
                  <dd className="mt-3 text-sm font-bold text-ivory">{f.value}</dd>
                </div>
@@ -107,8 +110,8 @@ export function ProjectDetail() {
            </dl>

            <div className="mt-10">
-              <ButtonLink to="/contact" variant="outline" className="font-light">
-                پروژه‌ای مشابه دارید؟
+              <ButtonLink to={href('/contact')} variant="outline" className="font-light">
+                {t('similarProjectCta')}
              </ButtonLink>
            </div>
          </Reveal>
@@ -146,9 +149,9 @@ export function ProjectDetail() {
        </div>
      </section>

-      <section className="bg-ink py-20 lg:py-28" aria-label="پروژه‌های مرتبط">
+      <section className="bg-ink py-20 lg:py-28" aria-label={t('relatedProjectsAria')}>
        <div className="mx-auto max-w-site px-6 lg:px-10">
-          <h2 className="text-section font-bold text-ivory">پروژه‌های دیگر</h2>
+          <h2 className="text-section font-bold text-ivory">{t('otherProjects')}</h2>
          <div className="mt-6 h-px w-24 bg-copper/70" />
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {related.map((item, i) => (
@@ -6,12 +6,14 @@ import { Gallery } from '../components/home/Gallery';
 import { ContactSection } from '../components/ContactSection';
 import type { ProjectStatus } from '../data/site';
 import { useSite, useStatusLabel } from '../api';
+import { useLang } from '../i18n/lang';
 import { useFieldSaver } from '../admin/AdminContext';
 import { InlineEdit } from '../components/admin/InlineEdit';
 import { AddItemButton, EditableItem } from '../admin/Editable';

 export function Projects() {
  const { projects, status_labels } = useSite();
+  const { t } = useLang();
  const save = useFieldSaver();

  const saveStatusLabel = (key: string, value: string) => {
@@ -36,11 +38,11 @@ export function Projects() {
    <>
      <PageHero pageKey="projects" />
      
-      <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
+      <section className="bg-ink py-24 lg:py-32" aria-label={t('projectsListAria')}>
        <div className="mx-auto max-w-site px-6 lg:px-10">
          
          {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (وسط‌چین و بدون کادر) */}
-          <div className="flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+          <div className="flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label={t('projectFilterAria')}>
            {FILTERS.map((filter, index) => {
              const isSelected = status === filter.key;
              return (