@hutusi/amytis 1.6.0 → 1.8.0

package/src/app/notes/page.tsx

@@ -0,0 +1,31 @@
+import { getAllNotes, getNoteTags } from '@/lib/markdown';
+import { siteConfig } from '../../../site.config';
+import { Metadata } from 'next';
+import { t, tWith, resolveLocale } from '@/lib/i18n';
+import NoteContent from '@/components/NoteContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
+
+const PAGE_SIZE = siteConfig.pagination.notes ?? 20;
+
+export const metadata: Metadata = {
+  title: `${t('notes')} | ${resolveLocale(siteConfig.title)}`,
+  description: 'Knowledge base notes.',
+};
+
+export default function NotesPage() {
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+  const notes = allNotes.slice(0, PAGE_SIZE);
+  const tags = getNoteTags();
+
+  return (
+    <div className="layout-main">
+      <FlowHubTabs subtitle={tWith('notes_subtitle', { count: allNotes.length })} />
+      <NoteContent
+        notes={notes}
+        tags={tags}
+        pagination={totalPages > 1 ? { currentPage: 1, totalPages, basePath: '/notes' } : undefined}
+      />
+    </div>
+  );
+}

package/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllSeries, getSeriesData, getFeaturedPosts, getFeaturedBooks, getRecentFlows } from '@/lib/markdown';
+import { getAllPosts, getFeaturedSeries, getSeriesData, getFeaturedPosts, getFeaturedBooks, getRecentFlows } from '@/lib/markdown';
 import { siteConfig } from '../../site.config';
 import Hero from '@/components/Hero';
 import CuratedSeriesSection, { SeriesItem } from '@/components/CuratedSeriesSection';
@@ -16,94 +16,156 @@ export const metadata: Metadata = {
     title: resolveLocale(siteConfig.title),
     description: resolveLocale(siteConfig.description),
     siteName: resolveLocale(siteConfig.title),
+    url: siteConfig.baseUrl,
     type: 'website',
+    images: [{ url: siteConfig.ogImage, width: 1200, height: 630 }],
+  },
+  twitter: {
+    card: 'summary',
+    title: resolveLocale(siteConfig.title),
+    description: resolveLocale(siteConfig.description),
   },
 };
 
+type HomepageSection = {
+  id: string;
+  enabled?: boolean;
+  weight: number;
+  maxItems?: number;
+  scrollThreshold?: number;
+};
+
 export default function Home() {
-  const allPosts = getAllPosts();
-  const allSeries = getAllSeries();
-  const featuredPosts = getFeaturedPosts();
-  const featuredBooks = getFeaturedBooks();
-  const recentFlows = getRecentFlows(siteConfig.flows?.recentCount ?? 5);
+  const features = siteConfig.features;
 
-  const pageSize = siteConfig.pagination.posts;
-  const posts = allPosts.slice(0, pageSize);
+  // Resolve ordered, enabled homepage sections from config
+  const sections = ([...(siteConfig.homepage?.sections as HomepageSection[] ?? [])])
+    .filter(s => s.enabled !== false)
+    .sort((a, b) => a.weight - b.weight);
 
-  const featuredConfig = siteConfig.featured || { series: { scrollThreshold: 2, maxItems: 6 }, stories: { scrollThreshold: 1, maxItems: 5 } };
+  const has = (id: string) => sections.some(s => s.id === id);
 
-  // Prepare serializable series data for the client component
-  const seriesItems: SeriesItem[] = Object.keys(allSeries).map(name => {
-    const seriesPosts = allSeries[name];
-    const slug = name.toLowerCase().replace(/ /g, '-');
-    const seriesData = getSeriesData(slug);
-    return {
-      name,
-      title: seriesData?.title || name,
-      excerpt: seriesData?.excerpt || "A growing collection of related thoughts.",
-      coverImage: seriesData?.coverImage,
-      url: `/series/${slug}`,
-      postCount: seriesPosts.length,
-      topPosts: seriesPosts.slice(0, 3).map(p => ({ slug: p.slug, title: p.title })),
-    };
-  });
+  // Derive per-section maxItems upfront for data loading
+  const recentFlowsMax = sections.find(s => s.id === 'recent-flows')?.maxItems ?? siteConfig.flows?.recentCount ?? 5;
+  const latestPostsMax = sections.find(s => s.id === 'latest-posts')?.maxItems ?? siteConfig.pagination.posts;
 
-  // Prepare serializable books data
-  const bookItems: BookItem[] = featuredBooks.map(b => ({
-    slug: b.slug,
-    title: b.title,
-    excerpt: b.excerpt,
-    coverImage: b.coverImage,
-    authors: b.authors,
-    chapterCount: b.chapters.length,
-    firstChapter: b.chapters[0]?.file,
-  }));
+  // Load data only for sections that are both enabled on homepage and globally
+  const allSeries = has('featured-series') && features?.series?.enabled !== false ? getFeaturedSeries() : {};
+  const featuredBooks = has('featured-books') && features?.books?.enabled !== false ? getFeaturedBooks() : [];
+  const recentFlows = has('recent-flows') && features?.flows?.enabled !== false
+    ? getRecentFlows(recentFlowsMax)
+    : [];
+  const needsPosts = has('featured-posts') || has('latest-posts');
+  const allPosts = needsPosts && features?.posts?.enabled !== false ? getAllPosts() : [];
+  const featuredPosts = has('featured-posts') && features?.posts?.enabled !== false ? getFeaturedPosts() : [];
 
-  // Prepare serializable flow data
-  const recentNoteItems: RecentNoteItem[] = recentFlows.map(f => ({
-    slug: f.slug,
-    date: f.date,
-    title: f.title,
-    excerpt: f.excerpt,
-  }));
+  const posts = allPosts.slice(0, latestPostsMax);
 
-  // Prepare serializable featured posts data
-  const featuredItems: FeaturedPost[] = featuredPosts.map(p => ({
-    slug: p.slug,
-    title: p.title,
-    excerpt: p.excerpt,
-    date: p.date,
-    category: p.category,
-    readingTime: p.readingTime,
-    coverImage: p.coverImage,
-  }));
+  // Prepare serializable data for client components
+  const seriesItems: SeriesItem[] = has('featured-series') && features?.series?.enabled !== false
+    ? Object.keys(allSeries).map(name => {
+        const seriesPosts = allSeries[name];
+        const slug = name; // name is already the series directory slug
+        const seriesData = getSeriesData(slug);
+        return {
+          name,
+          title: seriesData?.title || name,
+          excerpt: seriesData?.excerpt || "A growing collection of related thoughts.",
+          coverImage: seriesData?.coverImage,
+          url: `/series/${slug}`,
+          postCount: seriesPosts.length,
+          topPosts: seriesPosts.slice(0, 3).map(p => ({ slug: p.slug, title: p.title })),
+        };
+      })
+    : [];
 
-  return (
-    <div>
-      <Hero
-        tagline={siteConfig.hero.tagline}
-        title={siteConfig.hero.title}
-        subtitle={siteConfig.hero.subtitle}
-      />
+  const bookItems: BookItem[] = has('featured-books') && features?.books?.enabled !== false
+    ? featuredBooks.map(b => ({
+        slug: b.slug,
+        title: b.title,
+        excerpt: b.excerpt,
+        coverImage: b.coverImage,
+        authors: b.authors,
+        chapterCount: b.chapters.length,
+        firstChapter: b.chapters[0]?.file,
+      }))
+    : [];
 
-      <div className="layout-main pt-0 md:pt-0">
-        <CuratedSeriesSection
-          allSeries={seriesItems}
-          maxItems={featuredConfig.series.maxItems}
-          scrollThreshold={featuredConfig.series.scrollThreshold}
-        />
+  const recentNoteItems: RecentNoteItem[] = has('recent-flows') && features?.flows?.enabled !== false
+    ? recentFlows.map(f => ({
+        slug: f.slug,
+        date: f.date,
+        excerpt: f.excerpt,
+      }))
+    : [];
 
-        <SelectedBooksSection books={bookItems} />
+  const featuredItems: FeaturedPost[] = has('featured-posts') && features?.posts?.enabled !== false
+    ? featuredPosts.map(p => ({
+        slug: p.slug,
+        title: p.title,
+        excerpt: p.excerpt,
+        date: p.date,
+        category: p.category,
+        readingTime: p.readingTime,
+        coverImage: p.coverImage,
+      }))
+    : [];
 
-        <FeaturedStoriesSection
-          allFeatured={featuredItems}
-          maxItems={featuredConfig.stories.maxItems}
-          scrollThreshold={featuredConfig.stories.scrollThreshold}
-        />
+  const renderSection = (section: HomepageSection) => {
+    switch (section.id) {
+      case 'featured-series':
+        if (features?.series?.enabled === false) return null;
+        return (
+          <CuratedSeriesSection
+            key="featured-series"
+            allSeries={seriesItems}
+            maxItems={section.maxItems ?? 6}
+            scrollThreshold={section.scrollThreshold ?? 2}
+          />
+        );
+      case 'featured-books':
+        if (features?.books?.enabled === false) return null;
+        return (
+          <SelectedBooksSection
+            key="featured-books"
+            books={bookItems}
+            maxItems={section.maxItems ?? 4}
+            scrollThreshold={section.scrollThreshold ?? 2}
+          />
+        );
+      case 'featured-posts':
+        if (features?.posts?.enabled === false) return null;
+        return (
+          <FeaturedStoriesSection
+            key="featured-posts"
+            allFeatured={featuredItems}
+            maxItems={section.maxItems ?? 4}
+            scrollThreshold={section.scrollThreshold ?? 1}
+          />
+        );
+      case 'latest-posts':
+        if (features?.posts?.enabled === false) return null;
+        return <LatestWritingSection key="latest-posts" posts={posts} totalCount={allPosts.length} />;
+      case 'recent-flows':
+        if (features?.flows?.enabled === false) return null;
+        return <RecentNotesSection key="recent-flows" notes={recentNoteItems} />;
+      default:
+        return null;
+    }
+  };
 
-        <LatestWritingSection posts={posts} totalCount={allPosts.length} />
+  return (
+    <div>
+      {has('hero') && (
+        <Hero
+          tagline={siteConfig.hero.tagline}
+          title={siteConfig.hero.title}
+          subtitle={siteConfig.hero.subtitle}
+        />
+      )}
 
-        <RecentNotesSection notes={recentNoteItems} />
+      <div className="layout-main pt-0 md:pt-0">
+        {sections.filter(s => s.id !== 'hero').map(renderSection)}
       </div>
     </div>
   );

package/src/app/posts/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { getPostBySlug, getAllPosts, getRelatedPosts, getSeriesPosts, getSeriesData, PostData } from '@/lib/markdown';
+import { getPostBySlug, getAllPosts, getRelatedPosts, getSeriesPosts, getSeriesData, getAdjacentPosts, buildSlugRegistry, getBacklinks, PostData } from '@/lib/markdown';
 import { notFound } from 'next/navigation';
 import PostLayout from '@/layouts/PostLayout';
 import SimpleLayout from '@/layouts/SimpleLayout';
@@ -30,14 +30,7 @@ function resolvePostFromParam(rawSlug: string) {
  */
 export async function generateStaticParams() {
   const posts = getAllPosts();
-  const slugs = new Set<string>();
-
-  for (const post of posts) {
-    slugs.add(post.slug);
-    slugs.add(encodeURIComponent(post.slug));
-  }
-
-  return [...slugs].map((slug) => ({ slug }));
+  return posts.map((post) => ({ slug: post.slug }));
 }
 
 export const dynamicParams = false;
@@ -52,9 +45,9 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     };
   }
 
-  const ogImage = post.coverImage && !post.coverImage.startsWith('text:')
+  const ogImage = post.coverImage && !post.coverImage.startsWith('text:') && !post.coverImage.startsWith('./')
     ? post.coverImage
-    : `/icon.svg`;
+    : siteConfig.ogImage;
 
   return {
     title: `${post.title} | ${resolveLocale(siteConfig.title)}`,
@@ -105,6 +98,9 @@ export default async function PostPage({
   }
 
   const relatedPosts = getRelatedPosts(slug);
+  const { prev, next } = getAdjacentPosts(slug);
+  const slugRegistry = buildSlugRegistry();
+  const backlinks = getBacklinks(slug);
   let seriesPosts: PostData[] = [];
   let seriesTitle: string | undefined;
 
@@ -115,5 +111,5 @@ export default async function PostPage({
   }
 
   // Default to standard post layout
-  return <PostLayout post={post} relatedPosts={relatedPosts} seriesPosts={seriesPosts} seriesTitle={seriesTitle} />;
+  return <PostLayout post={post} relatedPosts={relatedPosts} seriesPosts={seriesPosts} seriesTitle={seriesTitle} prevPost={prev} nextPost={next} backlinks={backlinks} slugRegistry={slugRegistry} />;
 }

package/src/app/search.json/route.ts

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllBooks, getBookChapter, getAllFlows } from '@/lib/markdown';
+import { getAllPosts, getAllBooks, getBookChapter, getAllFlows, getAllNotes } from '@/lib/markdown';
 import { stripMarkdown } from '@/lib/search-utils';
 
 export const dynamic = 'force-static';
@@ -49,5 +49,19 @@ export async function GET() {
     });
   }
 
+  // Add notes to search index
+  const notes = getAllNotes();
+  for (const note of notes) {
+    searchIndex.push({
+      title: note.title,
+      slug: `notes/${note.slug}`,
+      date: note.date,
+      excerpt: note.excerpt,
+      category: 'Note',
+      tags: note.tags,
+      content: stripMarkdown(note.content),
+    });
+  }
+
   return Response.json(searchIndex);
 }

package/src/app/series/[slug]/page.tsx

@@ -36,9 +36,27 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     return { title: 'Series Not Found' };
   }
 
+  const ogImage = seriesData.coverImage && !seriesData.coverImage.startsWith('text:') && !seriesData.coverImage.startsWith('./')
+    ? seriesData.coverImage
+    : siteConfig.ogImage;
+
   return {
     title: `${seriesData.title} - ${t('series')} | ${resolveLocale(siteConfig.title)}`,
     description: seriesData.excerpt,
+    openGraph: {
+      title: seriesData.title,
+      description: seriesData.excerpt,
+      type: 'website',
+      url: `${siteConfig.baseUrl}/series/${slug}`,
+      siteName: resolveLocale(siteConfig.title),
+      images: [{ url: ogImage, width: 1200, height: 630, alt: seriesData.title }],
+    },
+    twitter: {
+      card: ogImage !== siteConfig.ogImage ? 'summary_large_image' : 'summary',
+      title: seriesData.title,
+      description: seriesData.excerpt,
+      images: [ogImage],
+    },
   };
 }
 

package/src/app/subscribe/page.tsx

@@ -0,0 +1,17 @@
+import { Metadata } from 'next';
+import { siteConfig } from '../../../site.config';
+import { resolveLocale } from '@/lib/i18n';
+import SubscribePage from '@/components/SubscribePage';
+
+export const metadata: Metadata = {
+  title: `Subscribe | ${resolveLocale(siteConfig.title)}`,
+  description: 'Stay updated with new posts and notes. Subscribe via RSS, email, Telegram, or WeChat.',
+};
+
+export default function SubscribeRoute() {
+  return (
+    <div className="layout-main">
+      <SubscribePage />
+    </div>
+  );
+}

package/src/app/tags/[tag]/page.tsx

@@ -1,11 +1,11 @@
 import { getAllTags, getPostsByTag, getFlowsByTag } from '@/lib/markdown';
-import PostCard from '@/components/PostCard';
-import FlowTimelineEntry from '@/components/FlowTimelineEntry';
 import { notFound } from 'next/navigation';
 import { siteConfig } from '../../../../site.config';
 import { Metadata } from 'next';
 import { resolveLocale } from '@/lib/i18n';
 import TagPageHeader from '@/components/TagPageHeader';
+import TagSidebar from '@/components/TagSidebar';
+import TagContentTabs from '@/components/TagContentTabs';
 
 export async function generateStaticParams() {
   const tags = getAllTags();
@@ -38,6 +38,7 @@ export default async function TagPage({
   const decodedTag = decodeURIComponent(tag);
   const posts = getPostsByTag(decodedTag);
   const flows = getFlowsByTag(decodedTag);
+  const allTags = getAllTags();
 
   if (posts.length === 0 && flows.length === 0) {
     notFound();
@@ -45,32 +46,14 @@ export default async function TagPage({
 
   return (
     <div className="layout-container">
-      <TagPageHeader tag={decodedTag} postCount={posts.length + flows.length} />
+      <div className="grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start">
+        <TagSidebar key={decodedTag} tags={allTags} activeTag={decodedTag} />
 
-      {posts.length > 0 && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {posts.map(post => (
-            <PostCard key={post.slug} post={post} />
-          ))}
+        <div className="flex-1 min-w-0">
+          <TagPageHeader tag={decodedTag} />
+          <TagContentTabs posts={posts} flows={flows} />
         </div>
-      )}
-
-      {flows.length > 0 && (
-        <div className={posts.length > 0 ? 'mt-12' : ''}>
-          <div className="space-y-0">
-            {flows.map(flow => (
-              <FlowTimelineEntry
-                key={flow.slug}
-                date={flow.date}
-                title={flow.title}
-                excerpt={flow.excerpt}
-                tags={flow.tags}
-                slug={flow.slug}
-              />
-            ))}
-          </div>
-        </div>
-      )}
+      </div>
     </div>
   );
 }

package/src/app/tags/page.tsx

@@ -1,9 +1,9 @@
 import { getAllTags } from '@/lib/markdown';
-import Tag from '@/components/Tag';
 import { siteConfig } from '../../../site.config';
 import { Metadata } from 'next';
 import { t, resolveLocale } from '@/lib/i18n';
 import PageHeader from '@/components/PageHeader';
+import TagsIndexClient from '@/components/TagsIndexClient';
 
 export const metadata: Metadata = {
   title: `${t('tags')} | ${resolveLocale(siteConfig.title)}`,
@@ -12,8 +12,7 @@ export const metadata: Metadata = {
 
 export default function TagsPage() {
   const tags = getAllTags();
-  const sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a]);
-  const totalTags = sortedTags.length;
+  const totalTags = Object.keys(tags).length;
 
   return (
     <div className="layout-main">
@@ -26,11 +25,7 @@ export default function TagsPage() {
       />
 
       <main>
-        <div className="flex flex-wrap justify-center gap-3 md:gap-4">
-          {sortedTags.map((tag) => (
-            <Tag key={tag} tag={tag} count={tags[tag]} variant="large" showHash={false} />
-          ))}
-        </div>
+        <TagsIndexClient tags={tags} />
       </main>
     </div>
   );

package/src/components/AuthorCard.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { getAuthorSlug } from '@/lib/markdown';
+import { siteConfig } from '../../site.config';
+import { t } from '@/lib/i18n';
+
+export default function AuthorCard({ authors }: { authors: string[] }) {
+  if (!authors || authors.length === 0) return null;
+
+  return (
+    <div className="mt-12 pt-12 border-t border-muted/20">
+      <div className="flex flex-col gap-6">
+        {authors.map((author) => {
+          const slug = getAuthorSlug(author);
+          const profile = siteConfig.authors?.[author];
+
+          return (
+            <div key={author} className="flex items-start gap-4">
+              <div className="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0 text-accent font-serif font-bold text-lg select-none">
+                {author.charAt(0).toUpperCase()}
+              </div>
+              <div className="min-w-0">
+                <p className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-1">
+                  {t('written_by')}
+                </p>
+                <Link
+                  href={`/authors/${slug}`}
+                  className="font-serif font-semibold text-heading hover:text-accent transition-colors no-underline"
+                >
+                  {author}
+                </Link>
+                {profile?.bio && (
+                  <p className="text-sm text-foreground/70 mt-1.5 leading-relaxed">
+                    {profile.bio}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/Backlinks.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { BacklinkSource } from '@/lib/markdown';
+import { t } from '@/lib/i18n';
+
+interface BacklinksProps {
+  backlinks: BacklinkSource[];
+}
+
+export default function Backlinks({ backlinks }: BacklinksProps) {
+  if (!backlinks.length) return null;
+
+  return (
+    <div className="mt-12 pt-12 border-t border-muted/20">
+      <h3 className="text-sm font-sans font-semibold uppercase tracking-widest text-muted mb-4">
+        {t('backlinks')}
+      </h3>
+      <div className="flex flex-col gap-4">
+        {backlinks.map(bl => (
+          <div key={`${bl.type}-${bl.slug}`} className="flex flex-col gap-1">
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted/60 border border-muted/20 rounded px-1.5 py-0.5">
+                {bl.type}
+              </span>
+              <Link
+                href={bl.url}
+                className="text-sm font-medium text-heading hover:text-accent no-underline transition-colors"
+              >
+                {bl.title}
+              </Link>
+            </div>
+            {bl.context && (
+              <p className="text-sm text-muted leading-relaxed">&ldquo;{bl.context}&rdquo;</p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/Comments.tsx

@@ -4,15 +4,31 @@ import Giscus from '@giscus/react';
 import { siteConfig } from '../../site.config';
 import { useTheme } from 'next-themes';
 
+// Maps site locale codes to Giscus-supported language codes.
+// Full list: https://github.com/giscus/giscus/tree/main/locales
+const GISCUS_LANG: Record<string, string> = {
+  en: 'en',
+  zh: 'zh-CN',
+  'zh-TW': 'zh-TW',
+  ja: 'ja',
+  ko: 'ko',
+  de: 'de',
+  fr: 'fr',
+  es: 'es',
+  pt: 'pt',
+  ru: 'ru',
+};
+
 export default function Comments({ slug }: { slug: string }) {
   const { provider, giscus, disqus } = siteConfig.comments;
   const { theme, systemTheme } = useTheme();
-  
+
   const currentTheme = theme === 'system' ? systemTheme : theme;
+  const giscusLang = GISCUS_LANG[siteConfig.i18n.defaultLocale] ?? siteConfig.i18n.defaultLocale;
 
   if (provider === 'giscus' && giscus.repo) {
     return (
-      <div className="mt-16 pt-12 border-t border-muted/20">
+      <div className="mt-12 pt-12 border-t border-muted/20">
         <Giscus
           id="comments"
           repo={giscus.repo as `${string}/${string}`}
@@ -25,7 +41,7 @@ export default function Comments({ slug }: { slug: string }) {
           emitMetadata="0"
           inputPosition="top"
           theme={currentTheme === 'dark' ? 'transparent_dark' : 'light'}
-          lang="en"
+          lang={giscusLang}
           loading="lazy"
         />
       </div>
@@ -34,7 +50,7 @@ export default function Comments({ slug }: { slug: string }) {
 
   if (provider === 'disqus' && disqus.shortname) {
     return (
-      <div className="mt-16 pt-12 border-t border-muted/20">
+      <div className="mt-12 pt-12 border-t border-muted/20">
         <div id="disqus_thread"></div>
         <script
           dangerouslySetInnerHTML={{

package/src/components/ExternalLinks.tsx

@@ -1,18 +1,22 @@
+'use client';
+
 import { ExternalLink } from '@/lib/markdown';
+import { useLanguage } from './LanguageProvider';
 
 interface ExternalLinksProps {
   links: ExternalLink[];
 }
 
 export default function ExternalLinks({ links }: ExternalLinksProps) {
+  const { t } = useLanguage();
   if (!links || links.length === 0) {
     return null;
   }
 
   return (
-    <div className="mt-12 pt-8 border-t border-muted/20">
+    <div className="mt-12 pt-12 border-t border-muted/20">
       <h3 className="text-sm font-sans font-semibold uppercase tracking-widest text-muted mb-4">
-        Discuss this post
+        {t('discuss_post')}
       </h3>
       <div className="flex flex-wrap gap-3">
         {links.map((link) => (