---
import Layout from '../../../layouts/Layout.astro';
import Header from '../../../components/Header.astro';
import Footer from '../../../components/Footer.astro';

const lang = 'zh' as const;

const docs = [
  { slug: 'shortcuts', title: '键盘快捷键', lead: '全部快捷键 —— 文件 / 视图 / 编辑 / 导出。' },
  { slug: 'export', title: '导出与复制', lead: 'PDF / DOCX / HTML / PNG / 打印 / 富文本复制 —— 什么场景用哪个。' },
  { slug: 'markdown-syntax', title: 'Markdown 语法参考', lead: '标题、列表、表格、公式、Mermaid —— SoloMD 支持的全部语法。' },
  { slug: 'mcp', title: 'MCP 服务', lead: '让 Claude Desktop / Codex CLI / Cursor 等 AI 客户端直接读写你的笔记仓库。' },
  { slug: 'cli', title: '命令行工具', lead: 'solomd：open / new / list / search / cat —— 在 Shell 里管道处理 Markdown。' },
];
---

<Layout
  title="SoloMD 文档"
  description="SoloMD 的键盘快捷键、导出格式、Markdown 语法参考和使用指南。"
  lang={lang}
>
  <Header lang={lang} />
  <main>
    <section class="container docs-index">
      <h1>文档</h1>
      <p class="lead">用好 SoloMD 需要的一切 —— 快捷键、导出选项、Markdown 语法、工作流指南。</p>

      <div class="docs-cards">
        {docs.map((d) => (
          <a href={`/zh/docs/${d.slug}/`} class="docs-card">
            <h2>{d.title}</h2>
            <p>{d.lead}</p>
            <span class="arrow">→</span>
          </a>
        ))}
      </div>

      <p class="docs-footer">
        找不到想要的？在
        <a href="https://github.com/zhitongblog/solomd/issues" rel="external">GitHub</a>
        开 issue。
      </p>
    </section>
  </main>
  <Footer lang={lang} />
</Layout>

<style>
  .docs-index { max-width: 860px; padding: 40px 20px 80px; }
  .docs-index h1 { font-size: 2rem; margin: 10px 0 14px; }
  .docs-index .lead { font-size: 1.05rem; color: var(--text-muted, #555); margin-bottom: 32px; }
  .docs-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .docs-card { display: block; padding: 20px 24px; border: 1px solid #e5e5e0; border-radius: 10px; text-decoration: none; color: inherit; position: relative; transition: transform 0.1s, border-color 0.1s; }
  .docs-card:hover { transform: translateY(-2px); border-color: #ff9f40; }
  .docs-card h2 { margin: 0 0 6px; font-size: 1.2rem; }
  .docs-card p { margin: 0; color: var(--text-muted, #555); }
  .docs-card .arrow { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); color: #ff9f40; font-size: 1.4rem; }
  .docs-footer { margin-top: 40px; font-size: 0.95rem; color: var(--text-muted, #555); }
</style>
