chore: checkpoint ai search comments and i18n foundation

frontend/src/pages/articles/[slug].astro

@@ -10,7 +10,9 @@ import BackToTop from '../../components/BackToTop.astro';
 import Lightbox from '../../components/Lightbox.astro';
 import CodeCopyButton from '../../components/CodeCopyButton.astro';
 import Comments from '../../components/Comments.astro';
+import ParagraphComments from '../../components/ParagraphComments.astro';
 import { apiClient } from '../../lib/api/client';
+import { formatReadTime, getI18n } from '../../lib/i18n';
 import { resolveFileRef, getPostTypeColor } from '../../lib/utils';
 
 export const prerender = false;
@@ -33,6 +35,7 @@ const typeColor = getPostTypeColor(post.type || 'article');
 const contentText = post.content || post.description || '';
 const wordCount = contentText.length;
 const readTimeMinutes = Math.ceil(wordCount / 300);
+const { locale, t } = getI18n(Astro);
 const articleMarkdown = contentText.replace(/^#\s+.+\r?\n+/, '');
 
 const markdownProcessor = await createMarkdownProcessor();
@@ -45,7 +48,7 @@ const renderedContent = await markdownProcessor.render(articleMarkdown);
   <Lightbox />
   <CodeCopyButton />
 
-  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8" data-article-slug={post.slug}>
     <div class="flex flex-col gap-8 lg:flex-row">
       <div class="min-w-0 flex-1">
         <TerminalWindow title={`~/content/posts/${post.slug}.md`} class="w-full">
@@ -55,17 +58,17 @@ const renderedContent = await markdownProcessor.render(articleMarkdown);
                 <div class="space-y-4">
                   <a href="/articles" class="terminal-link-arrow">
                     <i class="fas fa-arrow-left"></i>
-                    <span>返回文章索引</span>
+                    <span>{t('article.backToArticles')}</span>
                   </a>
 
                   <div class="flex flex-wrap items-center gap-2">
                     <span class="terminal-kicker">
                       <i class="fas fa-file-code"></i>
-                      document session
+                      {t('article.documentSession')}
                     </span>
                     <span class="terminal-chip">
                       <span class="h-2.5 w-2.5 rounded-full" style={`background-color: ${typeColor}`}></span>
-                      {post.type === 'article' ? 'article' : 'tweet'}
+                      {post.type === 'article' ? t('common.article') : t('common.tweet')}
                     </span>
                     <span class="terminal-chip">
                       <i class="fas fa-folder-tree text-[var(--primary)]"></i>
@@ -81,11 +84,11 @@ const renderedContent = await markdownProcessor.render(articleMarkdown);
                   </span>
                   <span class="terminal-stat-pill">
                     <i class="far fa-clock text-[var(--primary)]"></i>
-                    {readTimeMinutes} min
+                    {formatReadTime(locale, readTimeMinutes, t)}
                   </span>
                   <span class="terminal-stat-pill">
                     <i class="fas fa-font text-[var(--primary)]"></i>
-                    {wordCount} chars
+                    {t('common.characters', { count: wordCount })}
                   </span>
                 </div>
               </div>
@@ -126,6 +129,12 @@ const renderedContent = await markdownProcessor.render(articleMarkdown);
             </div>
           </div>
 
+          <div class="px-4 pb-2">
+            <div class="ml-4 mt-4">
+              <ParagraphComments postSlug={post.slug} />
+            </div>
+          </div>
+
           <div class="px-4 py-6">
             <div class="terminal-panel-muted ml-4 mt-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
               <span class="text-sm text-[var(--text-secondary)]">
@@ -134,14 +143,14 @@ const renderedContent = await markdownProcessor.render(articleMarkdown);
               <div class="flex flex-wrap gap-2">
                 <a href="/articles" class="terminal-action-button">
                   <i class="fas fa-list"></i>
-                  <span>back to index</span>
+                  <span>{t('common.backToIndex')}</span>
                 </a>
                 <button
                   class="terminal-action-button terminal-action-button-primary"
                   onclick={`navigator.clipboard.writeText(window.location.href)`}
                 >
                   <i class="fas fa-link"></i>
-                  <span>copy permalink</span>
+                  <span>{t('common.copyPermalink')}</span>
                 </button>
               </div>
             </div>