refactor: restructure docs for i18n support

- Move existing documentation to docs/zh-cn/ - Initialize structure for multiple languages (ar-sa, de-de, en-us, etc.) - Add update_readmes.cjs utility script - Update deployment documentation
2026-01-13 20:09:45 +08:00
parent bfa503162c
commit 0e0de6382f
691 changed files with 4956 additions and 576 deletions
@@ -0,0 +1 @@
+../../assets
@@ -0,0 +1,237 @@
+---
+layout: home
+hero:
+  name: 'Easy-Vibe'
+  text: 'Vibe Coding を 0 から 1 へ'
+  tagline:
+    - プロダクト、デザイン、フルスタック開発を兼ね備えたスーパー個人になりましょう。
+    - アイデアからプロトタイプへ、プロトタイプから製品へ、すべてのアウトプットを納品可能な製品にします。
+    - AI をあなたのパートナーに：より速く、より安定して、より創造的に。
+    - システマティックな学習パスで、あなたの個人的技術と製品の護城河を構築します。
+  actions:
+    - theme: brand
+      text: 学習を始める
+      link: /stage-0/0.1-learning-map/
+    - theme: alt
+      text: ⭐️ GitHub で Star
+      link: https://github.com/datawhalechina/easy-vibe
+features:
+  - title: 初心者に優しい
+    details: 非技術的背景のために設計されています。「話せるならコードも書ける」から始めて、Snake などのゲームを通じて素早く始め、技術への恐怖を克服しましょう。
+  - title: 段階的な実践パス
+    details: 独自の「3段階」学習法。AI プロダクトマネージャー思考から、フルスタック開発実装、複雑なアプリケーション構築へ、着実に進みます。
+  - title: Vibe Coding の新しいパラダイム
+    details: AI 時代のプログラミングの中核をマスターしましょう。AI とペアプログラミングする方法を学び、IDE を最強のパートナーにします。
+  - title: リアルプロジェクト主導
+    details: おもちゃのコードはありません。Web プロトタイプ、フルスタックアプリケーション、WeChat ミニプログラムを自分の手で構築し、すべてのアイデアを本当の製品として落地させます。
+---
+
+<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
+  <h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Easy-Vibe を選ぶ理由</h2>
+  <p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
+    2025 年は AI プログラミングの元年です。ますます多くの人々が AI プログラミングを試していますが、しばしば単純なデモで止まっています。<br>
+    Easy-Vibe はこのギャップを埋めることに専念しており、プロのように AI で開発プロセスを整理し、プロトタイプから製品まで、製品落地の最後の 1 キロを橋渡しする方法を教えます。
+  </p>
+</div>
+
+<div class="stage-container">
+  <div class="stage-card">
+    <div class="stage-icon">🌱</div>
+    <h3>Stage 0: 入門</h3>
+    <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
+    <a href="./stage-0/0.1-learning-map/">詳しく見る →</a>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🎨</div>
+    <h3>Stage 1: AI プロダクトマネージャー</h3>
+    <p>Vibe Coding ワークフローをマスターしましょう。要件を分解し、高品質な Web アプリケーションプロトタイプを独立して完成させる方法を学びます。</p>
+    <a href="./stage-1/1.1-introduction-to-ai-ide/">詳しく見る →</a>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>Stage 2: フルスタック開発</h3>
+    <p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
+    <a href="./stage-2/frontend/2.0-lovart-assets/">詳しく見る →</a>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>Stage 3: 上級開発</h3>
+    <p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
+    <a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">詳しく見る →</a>
+  </div>
+</div>
+
+<style>
+.VPHomeHero .text {
+  font-size: 1.8rem;
+}
+
+.stage-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+  .stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
+  .stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
+  .stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
+  .stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
+
+  .stage-card {
+    background-color: var(--vp-c-bg-soft);
+    border-radius: 12px;
+    padding: 24px;
+    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    border: 1px solid var(--vp-c-bg-soft);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .stage-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: var(--card-color);
+    opacity: 0.5;
+    transition: opacity 0.2s;
+  }
+
+  .stage-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    border-color: var(--card-color);
+  }
+
+  .stage-card:hover::before {
+    opacity: 1;
+  }
+
+  .stage-icon {
+    font-size: 3rem;
+    margin-bottom: 16px;
+    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+  }
+
+  .stage-card h3 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--vp-c-text-1);
+    transition: color 0.2s;
+  }
+
+  .stage-card:hover h3 {
+    color: var(--card-color);
+  }
+
+  .stage-card p {
+    font-size: 0.9rem;
+    color: var(--vp-c-text-2);
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  .stage-card a {
+    color: var(--card-color);
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
+    display: inline-flex;
+    align-items: center;
+    transition: transform 0.2s;
+  }
+
+  .stage-card a:hover {
+    text-decoration: none;
+    transform: translateX(4px);
+  }
+</style>
+
+<div class="footer-cta">
+  <p class="love-text">Made with ❤️ by Open Source Contributors</p>
+  <h3 class="support-title">お役に立ちましたか？</h3>
+  <p class="support-text">あなたの Star が更新の励みになります 🚀</p>
+  <div class="github-badge">
+    <a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
+      <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
+    </a>
+  </div>
+</div>
+
+<style>
+.footer-cta {
+  margin-top: 100px;
+  padding: 40px 24px;
+  text-align: center;
+  background: var(--vp-c-bg-soft);
+  border-radius: 24px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 40px;
+  border: 1px solid var(--vp-c-bg-soft);
+  transition: border-color 0.3s;
+}
+
+.footer-cta:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.love-text {
+  color: var(--vp-c-text-3);
+  font-size: 0.875rem;
+  margin-bottom: 24px;
+  font-family: var(--vp-font-family-mono);
+}
+
+.support-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: var(--vp-c-text-1);
+}
+
+.support-text {
+  font-size: 1.1rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 24px;
+}
+
+.github-badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.github-badge img {
+  height: 32px;
+}
+
+.VPButton.alt[href*="github.com"] {
+  background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
+  background-size: 200% auto;
+  border: 1px solid transparent !important;
+  color: white !important;
+  font-weight: 600;
+  animation: gradient 3s linear infinite;
+  box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
+  transition: all 0.3s ease;
+}
+
+.VPButton.alt[href*="github.com"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
+  background-position: right center;
+}
+
+@keyframes gradient {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+</style>
@@ -0,0 +1,178 @@
+:root {
+  /* 调整侧边栏分组之间的间距 */
+  --vp-sidebar-nav-section-gap: 8px;
+  --ev-doc-font-size: 13px;
+  --ev-doc-line-height: 1.65;
+}
+
+.vp-doc {
+  font-size: var(--ev-doc-font-size);
+  line-height: var(--ev-doc-line-height);
+  --el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
+  --el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
+  --el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
+  --el-font-size-base: var(--ev-doc-font-size);
+  --el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
+  --el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
+  --el-font-line-height-primary: var(--ev-doc-line-height);
+}
+
+.vp-doc p,
+.vp-doc ul,
+.vp-doc ol {
+  line-height: var(--ev-doc-line-height) !important;
+}
+
+.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
+  margin: 10px 0;
+}
+
+.vp-doc blockquote {
+  font-size: 0.9em !important;
+  color: var(--vp-c-text-2);
+}
+
+.vp-doc blockquote p {
+  font-size: inherit !important;
+  line-height: 1.4 !important;
+}
+
+.vp-doc :where(li) {
+  margin: 4px 0;
+}
+
+.vp-doc :where(ul, ol) {
+  padding-left: 1.15em;
+}
+
+.vp-doc :where(h1, h2, h3, h4, h5, h6) {
+  line-height: 1.3;
+}
+
+.vp-doc :where(h1) {
+  margin: 22px 0 12px;
+}
+
+.vp-doc :where(h2) {
+  margin: 20px 0 10px;
+}
+
+.vp-doc h2 {
+  margin: 16px 0 8px !important;
+  padding-top: 10px !important;
+  border-top: 0 !important;
+}
+
+.vp-doc :where(h3) {
+  margin: 18px 0 8px;
+}
+
+.vp-doc :where(h4, h5, h6) {
+  margin: 16px 0 8px;
+}
+
+.vp-doc :where(hr) {
+  margin: 14px 0;
+}
+
+.vp-doc :where(th, td) {
+  padding: 6px 10px;
+}
+
+.vp-doc :where(:not(pre) > code) {
+  font-size: 0.95em;
+}
+
+/* 减少一级标题（如"前端开发"）底部的间距 */
+.VPSidebarItem.level-0 {
+  padding-bottom: 4px !important;
+}
+
+/* 减少一级标题文字与下方子菜单的间距 */
+.VPSidebarItem.level-0 > .item {
+  padding-bottom: 2px !important;
+}
+
+/* 调整子菜单项之间的间距 - 针对所有层级 */
+.VPSidebarItem.level-1 .item,
+.VPSidebarItem.level-2 .item,
+.VPSidebarItem.level-3 .item,
+.VPSidebarItem.level-4 .item {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+  min-height: 24px !important; /* 强制减小最小高度 */
+}
+
+/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
+.VPSidebarGroup {
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
+
+/* 进一步压缩分组标题与第一项之间的间距 */
+.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
+  margin-top: -2px !important;
+}
+
+/* 压缩分组标题本身的行高 */
+.VPSidebarItem.level-0 .text {
+  line-height: 1.3 !important;
+}
+
+/* 压缩子项的行高 */
+.VPSidebarItem.level-1 .text,
+.VPSidebarItem.level-2 .text,
+.VPSidebarItem.level-3 .text {
+  line-height: 1.4 !important;
+  padding: 0 !important; /* 移除文字本身的内边距 */
+}
+
+/* 强制链接本身没有额外的边距 */
+.VPSidebarItem .VPLink {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+  min-height: auto !important;
+}
+
+/* 图片高度限制策略：根据长宽比调整最大高度 */
+/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
+.vp-doc img.img-tall {
+  max-height: 380px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-very-tall {
+  max-height: 280px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-ultra-tall {
+  max-height: 200px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-width {
+  max-width: 100% !important;
+  max-height: 320px !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-height {
+  max-height: 450px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+/* Fix tagline wrapping issues */
+.VPHomeHero .tagline {
+  white-space: nowrap;
+  max-width: none !important;
+}