From 93256540f50f02b2dff1700c70c20383089dffb9 Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Wed, 20 May 2026 11:39:31 +0800 Subject: [PATCH] fix(docs): localize related article cards --- docs/.vitepress/config.mjs | 23 + docs/.vitepress/theme/data/relatedArticles.js | 763 +++++++++++++++++- 2 files changed, 785 insertions(+), 1 deletion(-) diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index e3f1070..0c2fe21 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -1659,6 +1659,19 @@ const getStage1Sidebar = (locale) => { ) } +const docFooterLabels = { + 'zh-cn': { prev: '上一页', next: '下一页' }, + en: { prev: 'Previous page', next: 'Next page' }, + 'ja-jp': { prev: '前のページ', next: '次のページ' }, + 'zh-tw': { prev: '上一頁', next: '下一頁' }, + 'ko-kr': { prev: '이전 페이지', next: '다음 페이지' }, + 'es-es': { prev: 'Página anterior', next: 'Página siguiente' }, + 'fr-fr': { prev: 'Page précédente', next: 'Page suivante' }, + 'de-de': { prev: 'Vorherige Seite', next: 'Nächste Seite' }, + 'ar-sa': { prev: 'الصفحة السابقة', next: 'الصفحة التالية' }, + 'vi-vn': { prev: 'Trang trước', next: 'Trang tiếp theo' } +} + export default defineConfig({ markdown: { config: (md) => { @@ -1813,6 +1826,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: '页面导航' }, + docFooter: docFooterLabels['zh-cn'], nav: [ { text: '首页', link: '/zh-cn/' }, { @@ -2666,6 +2680,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'On this page' }, + docFooter: docFooterLabels.en, nav: [ { text: 'Home', link: '/en/' }, { @@ -2752,6 +2767,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'このページの目次' }, + docFooter: docFooterLabels['ja-jp'], nav: [ { text: 'ホーム', link: '/ja-jp/' }, { @@ -2804,6 +2820,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: '頁面導航' }, + docFooter: docFooterLabels['zh-tw'], nav: [ { text: '首頁', link: '/zh-tw/' }, { @@ -2856,6 +2873,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: '페이지 탐색' }, + docFooter: docFooterLabels['ko-kr'], nav: [ { text: '홈', link: '/ko-kr/' }, { @@ -2908,6 +2926,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'Navegación de página' }, + docFooter: docFooterLabels['es-es'], nav: [ { text: 'Inicio', link: '/es-es/' }, { @@ -2960,6 +2979,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'Navigation de page' }, + docFooter: docFooterLabels['fr-fr'], nav: [ { text: 'Accueil', link: '/fr-fr/' }, { @@ -3012,6 +3032,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'Seitennavigation' }, + docFooter: docFooterLabels['de-de'], nav: [ { text: 'Start', link: '/de-de/' }, { @@ -3064,6 +3085,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'تنقل الصفحة' }, + docFooter: docFooterLabels['ar-sa'], nav: [ { text: 'الرئيسية', link: '/ar-sa/' }, { @@ -3117,6 +3139,7 @@ Sitemap: ${siteUrl}/sitemap.xml level: [1, 6], label: 'Điều hướng trang' }, + docFooter: docFooterLabels['vi-vn'], nav: [ { text: 'Trang chủ', link: '/vi-vn/' }, { diff --git a/docs/.vitepress/theme/data/relatedArticles.js b/docs/.vitepress/theme/data/relatedArticles.js index 074a116..24c5629 100644 --- a/docs/.vitepress/theme/data/relatedArticles.js +++ b/docs/.vitepress/theme/data/relatedArticles.js @@ -195,9 +195,770 @@ const supportedLocales = [ const getLocaleFromKey = (key) => supportedLocales.find((locale) => key.startsWith(`${locale}/`)) +const getArticleSlug = (href) => + href + .replace(/^\/zh-cn\//, '') + .replace(/\/$/, '') + .split('/') + .at(-1) + +const localizedArticleText = { + en: { + 'ai-capabilities-through-games': { + title: '0.2 Understand AI Capabilities Through Mini Games', + description: + 'Build intuition through a playful exercise and see what problems are suitable for AI.' + }, + 'finding-great-idea': { + title: '1.0 Find Ideas Worth Building', + description: + 'Turn "I have an idea" into a product direction you can validate.' + }, + 'building-prototype': { + title: '1.2 Turn Ideas into Interactive Prototypes', + description: + 'Go from requirement breakdown to a working first demo quickly.' + }, + 'lovart-assets': { + title: '2.0 Build an Asset Agent from NanoBanana', + description: + 'Move into practice and build a stable, reusable asset production workflow.' + }, + 'introduction-to-ai-ide': { + title: 'Beginner 2: Master AI Coding Tools', + description: + 'Move from web experiments to a local AI IDE and set up a real development environment.' + }, + 'learning-map': { + title: 'Back to the Learning Map', + description: + 'Review the full path, stage goals, and recommended learning order.' + }, + 'integrating-ai-capabilities': { + title: 'Beginner 4: Add AI Capabilities', + description: + 'Connect real APIs and turn a visual prototype into a usable product.' + }, + 'appendix-b-common-errors': { + title: 'Appendix: Common Errors and Fixes', + description: + 'Quickly diagnose and fix environment, dependency, and runtime issues.' + }, + 'complete-project-practice': { + title: 'Beginner 5: Complete Project Practice', + description: + 'Connect the pieces into a complete business flow and build a presentable product.' + }, + 'figma-mastergo': { + title: 'Advanced: Figma and MasterGo Basics', + description: + 'Strengthen the design-to-development workflow for more structured delivery.' + }, + 'ai-interface-code': { + title: 'Junior Backend: API Design and Development', + description: + 'Connect AI capabilities through maintainable backend interfaces.' + }, + 'fullstack-app': { + title: 'Stage 2 Assignment: Full-Stack App', + description: + 'Upgrade prototype skills into a deployable full-stack application.' + }, + 'database-supabase': { + title: 'Junior Backend: Database to Supabase', + description: 'Add data modeling, storage, and permission capabilities.' + }, + 'ui-design': { + title: '2.2 Build a Modern App: UI Design', + description: + 'Complete page hierarchy, components, and layout under a unified visual system.' + }, + 'design-to-code': { + title: '2.6 From Design Prototype to Code', + description: + 'Convert design files into maintainable frontend code and components.' + }, + 'modern-component-library': { + title: '2.7 Upgrade UI with Modern Component Libraries', + description: + 'Use component libraries to improve consistency and development speed.' + } + }, + 'zh-tw': { + 'ai-capabilities-through-games': { + title: '0.2 用「小遊戲」理解 AI 能力邊界', + description: '先用遊戲化方式建立手感，快速理解哪些問題適合交給 AI。' + }, + 'finding-great-idea': { + title: '1.0 找到值得做的點子', + description: '把「我有想法」變成「我有可驗證的產品方向」。' + }, + 'building-prototype': { + title: '1.2 把想法做成可互動原型', + description: '從需求拆解到頁面落地，快速完成第一版 Demo。' + }, + 'lovart-assets': { + title: '2.0 從 NanoBanana 出發做素材 Agent', + description: '進入實戰階段，學習構建穩定可複用的素材生產流程。' + }, + 'introduction-to-ai-ide': { + title: '初級二：學會 AI 程式設計工具', + description: '把網頁試玩升級到本地 AI IDE，建立完整開發環境。' + }, + 'learning-map': { + title: '返回學習地圖', + description: '按完整路線查看每個階段目標與推薦學習順序。' + }, + 'integrating-ai-capabilities': { + title: '初級四：給原型加上 AI 能力', + description: '接入真實 API，讓頁面從「可看」變成「可用」。' + }, + 'appendix-b-common-errors': { + title: '附錄：常見報錯與解決方案', + description: '遇到環境、依賴或執行異常時，快速定位並修復。' + }, + 'complete-project-practice': { + title: '初級五：完整專案實戰', + description: '把分散能力拼成完整業務鏈路，做出可展示的成品。' + }, + 'figma-mastergo': { + title: '進階：Figma 與 MasterGo 入門', + description: '繼續強化設計到開發的協作流程，為工程化打基礎。' + } + }, + 'ja-jp': { + 'ai-capabilities-through-games': { + title: '0.2 ミニゲームで AI の能力境界を理解する', + description: + 'ゲーム感覚で手触りをつかみ、AI に任せやすい問題を素早く理解します。' + }, + 'finding-great-idea': { + title: '1.0 作る価値のあるアイデアを見つける', + description: + '「アイデアがある」を「検証できるプロダクト方向」に変えます。' + }, + 'building-prototype': { + title: '1.2 アイデアを操作できるプロトタイプにする', + description: + '要件分解から画面実装まで進め、最初の Demo を素早く完成させます。' + }, + 'lovart-assets': { + title: '2.0 NanoBanana から素材 Agent を作る', + description: + '実践段階に進み、安定して再利用できる素材制作フローを学びます。' + }, + 'introduction-to-ai-ide': { + title: '初級二：AI プログラミングツールを学ぶ', + description: + 'Web 上の試作からローカル AI IDE へ進み、開発環境を整えます。' + }, + 'learning-map': { + title: '学習ロードマップに戻る', + description: '全体ルート、各段階の目標、推奨学習順を確認します。' + }, + 'integrating-ai-capabilities': { + title: '初級四：プロトタイプに AI 能力を追加する', + description: + '実際の API を接続し、画面を「見える」から「使える」へ進化させます。' + }, + 'appendix-b-common-errors': { + title: '付録：よくあるエラーと解決策', + description: '環境、依存関係、実行時の問題を素早く特定して修正します。' + }, + 'complete-project-practice': { + title: '初級五：完全プロジェクト実践', + description: + '分散した能力を一つの業務フローにまとめ、見せられる成果物にします。' + }, + 'figma-mastergo': { + title: '発展：Figma と MasterGo 入門', + description: + '設計から開発までの協作フローを強化し、工程化の基礎を固めます。' + } + }, + 'ko-kr': { + 'ai-capabilities-through-games': { + title: '0.2 미니게임으로 AI 역량의 경계 이해하기', + description: + '게임형 실습으로 감각을 익히고 어떤 문제를 AI에 맡기기 좋은지 이해합니다.' + }, + 'finding-great-idea': { + title: '1.0 만들 가치가 있는 아이디어 찾기', + description: '"아이디어가 있다"를 검증 가능한 제품 방향으로 바꿉니다.' + }, + 'building-prototype': { + title: '1.2 아이디어를 인터랙티브 프로토타입으로 만들기', + description: + '요구사항 분해부터 화면 구현까지 빠르게 첫 Demo를 완성합니다.' + }, + 'lovart-assets': { + title: '2.0 NanoBanana에서 소재 Agent 만들기', + description: + '실전 단계로 들어가 안정적으로 재사용 가능한 소재 생산 흐름을 배웁니다.' + }, + 'introduction-to-ai-ide': { + title: '초급 2: AI 코딩 도구 익히기', + description: '웹 실습에서 로컬 AI IDE로 넘어가 개발 환경을 갖춥니다.' + }, + 'learning-map': { + title: '학습 지도 돌아가기', + description: '전체 경로, 단계별 목표, 추천 학습 순서를 확인합니다.' + }, + 'integrating-ai-capabilities': { + title: '초급 4: 프로토타입에 AI 기능 추가하기', + description: + '실제 API를 연결해 화면을 볼 수 있는 것에서 쓸 수 있는 것으로 바꿉니다.' + }, + 'appendix-b-common-errors': { + title: '부록: 자주 만나는 오류와 해결책', + description: '환경, 의존성, 실행 오류를 빠르게 찾고 고칩니다.' + }, + 'complete-project-practice': { + title: '초급 5: 완성 프로젝트 실습', + description: + '분산된 기능을 완전한 업무 흐름으로 묶어 보여줄 수 있는 결과물을 만듭니다.' + }, + 'figma-mastergo': { + title: '심화: Figma와 MasterGo 입문', + description: '디자인에서 개발까지의 협업 흐름을 강화합니다.' + } + }, + 'es-es': { + 'ai-capabilities-through-games': { + title: '0.2 Entender las capacidades de IA con minijuegos', + description: + 'Desarrolla intuición con un ejercicio lúdico y entiende qué problemas encajan con IA.' + }, + 'finding-great-idea': { + title: '1.0 Encontrar ideas que vale la pena construir', + description: + 'Convierte "tengo una idea" en una dirección de producto verificable.' + }, + 'building-prototype': { + title: '1.2 Convertir ideas en prototipos interactivos', + description: + 'Pasa del desglose de requisitos a una primera demo funcional.' + }, + 'lovart-assets': { + title: '2.0 Crear un Agent de recursos desde NanoBanana', + description: + 'Entra en la práctica y construye un flujo estable de producción de recursos reutilizables.' + }, + 'introduction-to-ai-ide': { + title: 'Nivel inicial 2: dominar herramientas de programación con IA', + description: + 'Pasa de probar en la web a trabajar con un AI IDE local y un entorno completo.' + }, + 'learning-map': { + title: 'Volver a la ruta de aprendizaje', + description: + 'Revisa la ruta completa, los objetivos por etapa y el orden recomendado.' + }, + 'integrating-ai-capabilities': { + title: 'Nivel inicial 4: añadir capacidades de IA', + description: + 'Conecta APIs reales y convierte una pantalla visible en una herramienta usable.' + }, + 'appendix-b-common-errors': { + title: 'Apéndice: errores comunes y soluciones', + description: + 'Diagnostica y corrige problemas de entorno, dependencias y ejecución.' + }, + 'complete-project-practice': { + title: 'Nivel inicial 5: práctica de proyecto completo', + description: + 'Une capacidades dispersas en un flujo de negocio completo y presentable.' + }, + 'figma-mastergo': { + title: 'Avanzado: introducción a Figma y MasterGo', + description: 'Refuerza el flujo de colaboración de diseño a desarrollo.' + } + }, + 'fr-fr': { + 'ai-capabilities-through-games': { + title: "0.2 Comprendre les limites de l'IA avec des mini-jeux", + description: + "Développez l'intuition avec un exercice ludique et voyez quels problèmes conviennent à l'IA." + }, + 'finding-great-idea': { + title: '1.0 Trouver une idée qui vaut la peine', + description: + 'Transformez "j’ai une idée" en direction produit vérifiable.' + }, + 'building-prototype': { + title: '1.2 Transformer une idée en prototype interactif', + description: + 'Passez du découpage des besoins à une première démo fonctionnelle.' + }, + 'lovart-assets': { + title: '2.0 Créer un Agent de ressources avec NanoBanana', + description: + 'Entrez dans la pratique et construisez un flux stable de production de ressources réutilisables.' + }, + 'introduction-to-ai-ide': { + title: 'Débutant 2 : maîtriser les outils de programmation IA', + description: + 'Passez des essais web à un AI IDE local avec un vrai environnement de développement.' + }, + 'learning-map': { + title: "Retour au parcours d'apprentissage", + description: + 'Revoyez le parcours complet, les objectifs par étape et l’ordre recommandé.' + }, + 'integrating-ai-capabilities': { + title: 'Débutant 4 : ajouter des capacités IA', + description: + 'Connectez de vraies API et transformez un prototype visible en produit utilisable.' + }, + 'appendix-b-common-errors': { + title: 'Annexe : erreurs courantes et solutions', + description: + 'Diagnostiquez et corrigez rapidement les problèmes d’environnement, de dépendances et d’exécution.' + }, + 'complete-project-practice': { + title: 'Débutant 5 : projet complet', + description: + 'Assemblez les capacités en un flux métier complet et présentable.' + }, + 'figma-mastergo': { + title: 'Avancé : bases de Figma et MasterGo', + description: + 'Renforcez le flux de collaboration entre design et développement.' + } + }, + 'de-de': { + 'ai-capabilities-through-games': { + title: '0.2 KI-Fähigkeiten mit Mini-Games verstehen', + description: + 'Entwickeln Sie spielerisch ein Gefühl dafür, welche Probleme gut zu KI passen.' + }, + 'finding-great-idea': { + title: '1.0 Ideen finden, die sich lohnen', + description: + 'Machen Sie aus "ich habe eine Idee" eine überprüfbare Produktrichtung.' + }, + 'building-prototype': { + title: '1.2 Ideen in interaktive Prototypen verwandeln', + description: 'Vom Anforderungszuschnitt zur ersten lauffähigen Demo.' + }, + 'lovart-assets': { + title: '2.0 Einen Asset-Agent mit NanoBanana bauen', + description: + 'Gehen Sie in die Praxis und bauen Sie einen stabilen, wiederverwendbaren Produktionsfluss.' + }, + 'introduction-to-ai-ide': { + title: 'Anfänger 2: KI-Programmierwerkzeuge beherrschen', + description: 'Wechseln Sie von Web-Experimenten zu einer lokalen AI IDE.' + }, + 'learning-map': { + title: 'Zurück zum Lernpfad', + description: + 'Prüfen Sie den Gesamtpfad, die Etappenziele und die empfohlene Reihenfolge.' + }, + 'integrating-ai-capabilities': { + title: 'Anfänger 4: KI-Fähigkeiten hinzufügen', + description: + 'Binden Sie echte APIs an und machen Sie aus einem sichtbaren Prototyp ein nutzbares Produkt.' + }, + 'appendix-b-common-errors': { + title: 'Anhang: häufige Fehler und Lösungen', + description: + 'Finden und beheben Sie Umgebungs-, Abhängigkeits- und Laufzeitprobleme schnell.' + }, + 'complete-project-practice': { + title: 'Anfänger 5: vollständiges Projektpraktikum', + description: + 'Verbinden Sie einzelne Fähigkeiten zu einem vollständigen, vorzeigbaren Ablauf.' + }, + 'figma-mastergo': { + title: 'Fortgeschritten: Figma und MasterGo Grundlagen', + description: 'Stärken Sie den Workflow von Design zu Entwicklung.' + } + }, + 'ar-sa': { + 'ai-capabilities-through-games': { + title: '0.2 فهم حدود قدرات الذكاء الاصطناعي عبر ألعاب صغيرة', + description: + 'اكتسب إحساساً عملياً بطريقة ممتعة وافهم ما يناسب الذكاء الاصطناعي.' + }, + 'finding-great-idea': { + title: '1.0 العثور على فكرة تستحق البناء', + description: 'حوّل "لدي فكرة" إلى اتجاه منتج قابل للتحقق.' + }, + 'building-prototype': { + title: '1.2 تحويل الفكرة إلى نموذج أولي تفاعلي', + description: 'من تحليل المتطلبات إلى أول عرض عملي بسرعة.' + }, + 'lovart-assets': { + title: '2.0 بناء Agent للمواد انطلاقاً من NanoBanana', + description: + 'ادخل مرحلة التطبيق وابنِ سير عمل مستقراً وقابلاً لإعادة الاستخدام.' + }, + 'introduction-to-ai-ide': { + title: 'المستوى الثاني: إتقان أدوات البرمجة بالذكاء الاصطناعي', + description: 'انتقل من التجربة على الويب إلى بيئة AI IDE محلية كاملة.' + }, + 'learning-map': { + title: 'العودة إلى خريطة التعلم', + description: 'راجع المسار الكامل وأهداف كل مرحلة وترتيب التعلم المقترح.' + }, + 'integrating-ai-capabilities': { + title: 'المستوى الرابع: إضافة قدرات الذكاء الاصطناعي', + description: + 'اربط واجهات API حقيقية وحوّل النموذج من قابل للمشاهدة إلى قابل للاستخدام.' + }, + 'appendix-b-common-errors': { + title: 'ملحق: الأخطاء الشائعة والحلول', + description: 'شخّص مشكلات البيئة والاعتماديات والتشغيل وأصلحها بسرعة.' + }, + 'complete-project-practice': { + title: 'المستوى الخامس: مشروع عملي كامل', + description: 'اجمع القدرات المتفرقة في مسار عمل كامل قابل للعرض.' + }, + 'figma-mastergo': { + title: 'متقدم: أساسيات Figma و MasterGo', + description: 'عزّز سير العمل من التصميم إلى التطوير.' + } + }, + 'vi-vn': { + 'ai-capabilities-through-games': { + title: '0.2 Hiểu ranh giới năng lực AI qua trò chơi nhỏ', + description: + 'Tạo cảm giác thực hành qua trò chơi và hiểu nhanh vấn đề nào phù hợp để giao cho AI.' + }, + 'finding-great-idea': { + title: '1.0 Tìm ý tưởng đáng làm', + description: + 'Biến "tôi có ý tưởng" thành một hướng sản phẩm có thể kiểm chứng.' + }, + 'building-prototype': { + title: '1.2 Biến ý tưởng thành nguyên mẫu tương tác', + description: + 'Từ tách yêu cầu đến dựng trang, hoàn thành nhanh bản Demo đầu tiên.' + }, + 'lovart-assets': { + title: '2.0 Tạo Agent sản xuất tài nguyên từ NanoBanana', + description: + 'Bước vào thực chiến và học cách xây dựng quy trình sản xuất tài nguyên ổn định, tái sử dụng được.' + }, + 'introduction-to-ai-ide': { + title: 'Sơ cấp 2: học công cụ lập trình AI', + description: + 'Từ thử nghiệm trên web chuyển sang AI IDE cục bộ và thiết lập môi trường phát triển đầy đủ.' + }, + 'learning-map': { + title: 'Quay lại lộ trình học tập', + description: + 'Xem lại toàn bộ lộ trình, mục tiêu từng giai đoạn và thứ tự học đề xuất.' + }, + 'integrating-ai-capabilities': { + title: 'Sơ cấp 4: thêm năng lực AI vào nguyên mẫu', + description: + 'Kết nối API thật để biến giao diện từ "xem được" thành "dùng được".' + }, + 'appendix-b-common-errors': { + title: 'Phụ lục: lỗi thường gặp và cách xử lý', + description: + 'Nhanh chóng xác định và sửa lỗi môi trường, phụ thuộc hoặc khi chạy.' + }, + 'complete-project-practice': { + title: 'Sơ cấp 5: thực chiến dự án hoàn chỉnh', + description: + 'Ghép các năng lực rời rạc thành một luồng nghiệp vụ hoàn chỉnh có thể trình bày.' + }, + 'figma-mastergo': { + title: 'Nâng cao: nhập môn Figma và MasterGo', + description: + 'Tiếp tục củng cố quy trình cộng tác từ thiết kế đến phát triển.' + } + } +} + +const localizedStage2ArticleText = { + en: { + 'ai-interface-code': { + title: 'Junior Backend: API Design and Development', + description: + 'Connect AI capabilities through maintainable backend interfaces.' + }, + 'fullstack-app': { + title: 'Stage 2 Assignment: Full-Stack App', + description: + 'Upgrade prototype skills into a deployable full-stack application.' + }, + 'database-supabase': { + title: 'Junior Backend: Database to Supabase', + description: 'Add data modeling, storage, and permission capabilities.' + }, + 'ui-design': { + title: '2.2 Build a Modern App: UI Design', + description: + 'Complete page hierarchy, components, and layout under a unified visual system.' + }, + 'design-to-code': { + title: '2.6 From Design Prototype to Code', + description: + 'Convert design files into maintainable frontend code and components.' + }, + 'modern-component-library': { + title: '2.7 Upgrade UI with Modern Component Libraries', + description: + 'Use component libraries to improve consistency and development speed.' + } + }, + 'zh-tw': { + 'ai-interface-code': { + title: '初中級：後端介面設計與開發', + description: '把 AI 能力規範地接入後端介面，提升工程可維護性。' + }, + 'fullstack-app': { + title: 'Stage 2 大作業：全端應用實戰', + description: '把原型能力升級為前後端一體化的可上線應用。' + }, + 'database-supabase': { + title: '初中級後端：從資料庫到 Supabase', + description: '補齊資料建模、儲存與權限能力，邁向工程化開發。' + }, + 'ui-design': { + title: '2.2 建構第一個現代應用程式 - UI 設計', + description: '在統一視覺規範下，完成頁面層級、元件和版面設計。' + }, + 'design-to-code': { + title: '2.6 從設計原型到專案程式碼', + description: '把設計稿準確轉成可維護的前端程式碼與元件結構。' + }, + 'modern-component-library': { + title: '2.7 使用現代元件庫更新你的介面', + description: '利用元件庫提升工程效率，讓介面一致性更穩定。' + } + }, + 'ja-jp': { + 'ai-interface-code': { + title: '初中級：バックエンド API 設計と開発', + description: 'AI 能力を保守しやすいバックエンド接口として接続します。' + }, + 'fullstack-app': { + title: 'Stage 2 課題：フルスタックアプリ実践', + description: + 'プロトタイプ能力を、公開可能なフルスタックアプリへ発展させます。' + }, + 'database-supabase': { + title: '初中級バックエンド：データベースから Supabase へ', + description: + 'データモデリング、保存、権限管理を補い、工程化開発へ進みます。' + }, + 'ui-design': { + title: '2.2 最初のモダンアプリを作る - UI デザイン', + description: + '統一された視覚仕様のもとで、ページ階層、コンポーネント、レイアウトを完成させます。' + }, + 'design-to-code': { + title: '2.6 デザインプロトタイプからコードへ', + description: + 'デザインを保守しやすいフロントエンドコードとコンポーネント構造に変換します。' + }, + 'modern-component-library': { + title: '2.7 モダンコンポーネントライブラリで UI を更新する', + description: 'コンポーネントライブラリで一貫性と開発効率を高めます。' + } + }, + 'ko-kr': { + 'ai-interface-code': { + title: '초중급: 백엔드 API 설계와 개발', + description: 'AI 기능을 유지보수 가능한 백엔드 인터페이스로 연결합니다.' + }, + 'fullstack-app': { + title: 'Stage 2 과제: 풀스택 앱 실전', + description: + '프로토타입 역량을 배포 가능한 풀스택 애플리케이션으로 확장합니다.' + }, + 'database-supabase': { + title: '초중급 백엔드: 데이터베이스에서 Supabase까지', + description: + '데이터 모델링, 저장, 권한 기능을 보강해 엔지니어링 개발로 나아갑니다.' + }, + 'ui-design': { + title: '2.2 첫 번째 모던 앱 만들기 - UI 디자인', + description: + '통일된 시각 규칙 아래 페이지 구조, 컴포넌트, 레이아웃을 완성합니다.' + }, + 'design-to-code': { + title: '2.6 디자인 프로토타입에서 코드로', + description: + '디자인을 유지보수 가능한 프런트엔드 코드와 컴포넌트로 전환합니다.' + }, + 'modern-component-library': { + title: '2.7 모던 컴포넌트 라이브러리로 UI 개선하기', + description: '컴포넌트 라이브러리로 UI 일관성과 개발 속도를 높입니다.' + } + }, + 'es-es': { + 'ai-interface-code': { + title: 'Backend junior: diseño y desarrollo de APIs', + description: + 'Integra capacidades de IA mediante interfaces backend mantenibles.' + }, + 'fullstack-app': { + title: 'Tarea Stage 2: aplicación full-stack', + description: + 'Convierte las habilidades de prototipado en una aplicación desplegable.' + }, + 'database-supabase': { + title: 'Backend junior: de base de datos a Supabase', + description: 'Completa modelado de datos, almacenamiento y permisos.' + }, + 'ui-design': { + title: '2.2 Crear una app moderna - Diseño UI', + description: + 'Completa jerarquía, componentes y layout bajo una guía visual unificada.' + }, + 'design-to-code': { + title: '2.6 Del prototipo de diseño al código', + description: + 'Convierte diseños en código frontend y componentes mantenibles.' + }, + 'modern-component-library': { + title: '2.7 Actualizar la UI con librerías modernas', + description: + 'Usa librerías de componentes para mejorar consistencia y velocidad.' + } + }, + 'fr-fr': { + 'ai-interface-code': { + title: 'Backend junior : conception et développement d’API', + description: + 'Intégrez les capacités IA via des interfaces backend maintenables.' + }, + 'fullstack-app': { + title: 'Devoir Stage 2 : application full-stack', + description: + 'Transformez les compétences de prototypage en application déployable.' + }, + 'database-supabase': { + title: 'Backend junior : de la base de données à Supabase', + description: 'Ajoutez modélisation de données, stockage et permissions.' + }, + 'ui-design': { + title: '2.2 Créer une application moderne - UI Design', + description: + 'Finalisez hiérarchie, composants et mise en page avec un système visuel unifié.' + }, + 'design-to-code': { + title: '2.6 Du prototype design au code', + description: + 'Transformez les maquettes en code frontend et composants maintenables.' + }, + 'modern-component-library': { + title: '2.7 Moderniser l’interface avec une bibliothèque de composants', + description: + 'Améliorez cohérence et efficacité avec des composants réutilisables.' + } + }, + 'de-de': { + 'ai-interface-code': { + title: 'Junior Backend: API-Design und Entwicklung', + description: + 'Binden Sie KI-Fähigkeiten über wartbare Backend-Schnittstellen ein.' + }, + 'fullstack-app': { + title: 'Stage 2 Aufgabe: Full-Stack-App', + description: + 'Entwickeln Sie Prototyping-Fähigkeiten zu einer deploybaren Anwendung weiter.' + }, + 'database-supabase': { + title: 'Junior Backend: von Datenbank zu Supabase', + description: + 'Ergänzen Sie Datenmodellierung, Speicherung und Berechtigungen.' + }, + 'ui-design': { + title: '2.2 Erste moderne App bauen - UI Design', + description: + 'Erstellen Sie Seitenhierarchie, Komponenten und Layout in einem einheitlichen visuellen System.' + }, + 'design-to-code': { + title: '2.6 Vom Designprototyp zum Code', + description: + 'Überführen Sie Designs in wartbaren Frontend-Code und Komponenten.' + }, + 'modern-component-library': { + title: '2.7 UI mit modernen Komponentenbibliotheken verbessern', + description: + 'Steigern Sie Konsistenz und Entwicklungstempo mit Komponentenbibliotheken.' + } + }, + 'ar-sa': { + 'ai-interface-code': { + title: 'الخلفية للمستوى المتوسط: تصميم وتطوير الواجهات', + description: 'اربط قدرات الذكاء الاصطناعي عبر واجهات خلفية قابلة للصيانة.' + }, + 'fullstack-app': { + title: 'مهمة Stage 2: تطبيق Full-Stack', + description: 'طوّر مهارات النمذجة إلى تطبيق كامل قابل للنشر.' + }, + 'database-supabase': { + title: 'الخلفية للمستوى المتوسط: من قاعدة البيانات إلى Supabase', + description: 'أكمل نمذجة البيانات والتخزين والصلاحيات.' + }, + 'ui-design': { + title: '2.2 بناء أول تطبيق حديث - تصميم UI', + description: 'أنجز هيكل الصفحات والمكونات والتخطيط ضمن نظام بصري موحد.' + }, + 'design-to-code': { + title: '2.6 من نموذج التصميم إلى الكود', + description: 'حوّل التصميم إلى كود واجهة أمامية ومكونات قابلة للصيانة.' + }, + 'modern-component-library': { + title: '2.7 تحديث الواجهة بمكتبات مكونات حديثة', + description: 'استخدم مكتبات المكونات لتحسين الاتساق وسرعة التطوير.' + } + }, + 'vi-vn': { + 'ai-interface-code': { + title: 'Backend sơ-trung cấp: thiết kế và phát triển API', + description: 'Kết nối năng lực AI qua các API backend dễ bảo trì.' + }, + 'fullstack-app': { + title: 'Bài tập Stage 2: ứng dụng full-stack', + description: + 'Nâng kỹ năng nguyên mẫu thành ứng dụng full-stack có thể triển khai.' + }, + 'database-supabase': { + title: 'Backend sơ-trung cấp: từ cơ sở dữ liệu đến Supabase', + description: 'Bổ sung mô hình dữ liệu, lưu trữ và phân quyền.' + }, + 'ui-design': { + title: '2.2 Xây dựng ứng dụng hiện đại đầu tiên - Thiết kế UI', + description: + 'Hoàn thiện tầng trang, component và bố cục trong một hệ thống thị giác thống nhất.' + }, + 'design-to-code': { + title: '2.6 Từ prototype thiết kế đến code', + description: + 'Chuyển thiết kế thành code frontend và cấu trúc component dễ bảo trì.' + }, + 'modern-component-library': { + title: '2.7 Cập nhật giao diện bằng thư viện component hiện đại', + description: + 'Dùng thư viện component để tăng tính nhất quán và tốc độ phát triển.' + } + } +} + +for (const locale of Object.keys(localizedStage2ArticleText)) { + localizedArticleText[locale] = { + ...localizedStage2ArticleText[locale], + ...localizedArticleText[locale] + } +} + +const withLocalizedArticleText = (item, locale) => { + const text = localizedArticleText[locale]?.[getArticleSlug(item.href)] + return text ? { ...item, ...text } : item +} + const localizeArticleLinks = (items, locale) => items.map((item) => ({ - ...item, + ...withLocalizedArticleText(item, locale), href: item.href.replace(/^\/zh-cn\/stage-1\//, `/${locale}/stage-1/`) }))