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

frontend/src/pages/ArticleDetail.tsx

@@ -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) =>