[FR] English Language Support and Internationalization Framework

[square-story]

Introduction 介紹

I would like to propose implementing comprehensive English language support for The Vale platform to make this valuable mental health resource accessible to a broader international audience. Currently, while the README has both English and Traditional Chinese versions, the web application itself appears to primarily serve Traditional Chinese users.

Content 內容

Problem Statement:
The Vale is a meaningful platform for emotional support and mental health, but its current language limitations may prevent many English-speaking users from accessing this valuable resource. Mental health support should be accessible across language barriers.

Proposed Solution:

1. Internationalization (i18n) Framework Implementation:

   • Integrate Next.js internationalization support (next-i18n or next-intl)
   • Set up proper locale routing (/en, /zh-TW)
   • Configure language detection and switching mechanisms

2. Content Translation:

   • Translate all UI text, labels, buttons, and navigation elements
   • Translate static content including landing page, help resources
   • Ensure proper handling of dynamic content (user posts, comments)

3. Localized User Experience:

   • Language switcher component in the navigation
   • Proper RTL/LTR text direction support
   • Locale-specific date/time formatting
   • Cultural considerations for mental health messaging

4. Technical Implementation:

   • Translation key management system
   • Fallback mechanisms for missing translations
   • SEO optimization for multiple languages
   • Proper meta tags and OpenGraph data per locale

Value Proposition:

• Expands accessibility to English-speaking communities globally
• Builds upon existing bilingual documentation foundation
• Aligns with the open-source mission of broad community support
• Enhances the platform's reach for mental health advocacy

Request for Assignment:
I would like to volunteer to implement this feature and request assignment to this issue. I have experience with Next.js internationalization and am passionate about making mental health resources more accessible.

Additional context 補充內容

This feature would complement the existing Traditional Chinese support and create a foundation for adding additional languages in the future. The bilingual README demonstrates the project's existing commitment to multilingual accessibility, and extending this to the web application would be a natural progression.

[3underscoreN]

Hi Sadik,

Thank you for opening an issue for FR!

This is surely a great feature to have, but given the limited resources we (well, or mostly just me) have right now, I would like to discuss my concern here.

Difficulty in Translating User Content

Currently, the Vale has quite an amount of posts and comments, some of which are related to self-harm and some use Chinese abbreviations. I'm worried that translating these user posts will result in loss of accuracy on actual meaning. Cloud LLMs are not feasible either as they may filter self-harm content.

If such feature are to be implemented, should we still keep the idea of translating dynamic content? Or perhaps we can separate the Chinese and English database to avoid translation, but that requires extra effort in maintenance.

Contribution

For contribution, please feel free to fork the project and start from there. Maybe start from next-intl. I will be happy to also create a feature branch for translation, as well as translating static content.

For questions, feel free to further comment. Looking forward to your contribution!

[square-story]

Hi Kelvin,

Thank you for the detailed feedback and concerns about the i18n implementation! After analyzing the repository structure, tech stack, and your specific concerns about dynamic content translation, I'd like to propose a comprehensive solution strategy.

Repository Analysis & Tech Stack Assessment

Based on my analysis of the codebase:

Current Tech Stack:

• Next.js 15.5.2 with App Router (src/app/ structure)
• TypeScript (95.9% of codebase)
• Tailwind CSS + Radix UI components
• PostgreSQL (Neon) + Redis (Upstash)
• Clerk for authentication
• Azure OpenAI integration

Key Architecture Insights:

• Clean separation between UI components (src/components/) and app routes
• Modular component structure (BentoGridMenu, ViewCards, CommentForm, etc.)
• Existing localization foundation with bilingual README
• Current component structure already supports the modular i18n approach

Recommended I18n Integration: next-intl

After analyzing the project structure, I recommend next-intl over next-i18n for several reasons:

1. Better App Router Support: Native support for Next.js 15's App Router
2. Type Safety: Full TypeScript support with compile-time translation key validation
3. Performance: Tree-shakable with smaller bundle sizes
4. Maintenance: Actively maintained with regular updates
5. Flexibility: Better handling of complex pluralization and nested objects

Solution Strategy for Dynamic Content Concerns

Option 1: Language-Segregated Approach (Recommended)

Instead of translating existing Chinese content, implement a dual-language community approach:

Benefits:

• ✅ Preserves original Chinese posts with cultural context and abbreviations
• ✅ No translation accuracy concerns for sensitive mental health content
• ✅ Each language community develops naturally
• ✅ Simpler implementation and maintenance

Implementation:

// Database schema addition
posts: {
  id: string,
  content: string,
  language: 'zh-TW' | 'en', // Add language field
  // ... other fields
}

// API filtering
const posts = await db.posts.findMany({
  where: { language: locale }
})

Option 2: Hybrid Approach (Alternative)

• Keep existing Chinese content as Chinese-only
• Enable language switching for UI/navigation only
• Allow users to see "content not available in your language" with option to view original

Implementation Roadmap

Phase 1: Foundation Setup

npm install next-intl

File Structure:

src/
├── i18n/
│   ├── messages/
│   │   ├── en.json
│   │   └── zh-TW.json
│   ├── config.ts
│   └── middleware.ts
└── app/
    └── [locale]/  # Wrap existing routes

Phase 2: Component Translation

Focus on translating:

• Navigation elements
• Form labels and buttons
• Error/success messages
• Landing page content
• Help/static pages

Phase 3: Database Integration

Add language filtering to:

• Post queries
• Comment systems
• Search functionality

Phase 4: Enhanced Features

• Language switcher component
• Locale-specific date formatting
• Cultural adaptations for mental health messaging

Technical Implementation Plan

1. Middleware Configuration:

// src/middleware.ts
import createIntlMiddleware from 'next-intl/middleware';

export default createIntlMiddleware({
  locales: ['en', 'zh-TW'],
  defaultLocale: 'zh-TW',
  localePrefix: 'as-needed'
});

2. Translation Key Structure:

{
  "nav": {
    "home": "Home",
    "create": "Share Your Thoughts",
    "help": "Get Help"
  },
  "post": {
    "create": "Create Post",
    "submit": "Share Anonymously"  
  },
  "messages": {
    "contentNotAvailable": "This content is only available in {language}",
    "viewOriginal": "View Original"
  }
}

Addressing Your Concerns

Translation Accuracy: The language-segregated approach eliminates translation accuracy concerns entirely by keeping original content in its native language.

Maintenance Overhead: Using next-intl's type-safe approach reduces maintenance burden with compile-time validation and IDE support.

Resource Constraints: I can handle the initial implementation and provide comprehensive documentation for future contributors.

Request for Assignment & Contribution Plan

I would like to request assignment to this issue with the following contribution approach:

1. Start with Phase 1 implementation in a fork
2. Collaborate on translation keys for static content
3. Implement language-segregated post system
4. Create comprehensive documentation for future i18n additions
5. Provide migration scripts and setup instructions

I'm committed to:

• Following the existing code patterns and architecture
• Providing thorough testing and documentation
• Ensuring backward compatibility with existing Chinese content
• Creating a foundation for future language additions

Would you be open to creating a feature branch for this implementation? I'm happy to start with a minimal viable implementation focusing on UI translation first, then expanding based on your feedback.

Looking forward to contributing to making The Vale accessible to a broader international community! 🌍

Best regards,
Sadik