Update contributing guide with detailed submission steps and remove outdated Git guide; add new images for clarity.

Author: longsizhuo

CONTRIBUTING.md

@@ -1,102 +1,104 @@
 # 贡献指南/Contributing Guide
 
+## 投稿指南
 
+1. 在首页点击「我要投稿」，或在任意文档右上角使用「编辑」/「我要投稿」按钮
+   ![button](./public/git_assets/button.png)
 
+2. 浮窗中选择想贡献的章节，也可以先新建一个文件夹
+   ![setting](./public//git_assets/setting.png)
+   ![setting2](./public//git_assets/setting2.png)
+   选好后点击「下一步」
 
-## ✍️ 添加新文章
+3. 页面会跳转到 GitHub，新建文档时请保留顶部 Frontmatter 结构
+   ![file](./public//git_assets/file.png)
 
-### 步骤1：选择位置
+4. 点击 `Commit changes`，若是第一次投稿，GitHub 会提示先 Fork 仓库；按提示操作一次即可
+   ![fork](./public//git_assets/need_fork.png)
 
-确定你的文章在现有结构中的位置：
+5. Fork 完成后会自动返回原页面，然后一直“下一步”即可
+   ![after_fork](./public//git_assets/after_fork.png)
+   再点击一次 `Commit changes`
+   ![propose](./public//git_assets/propse_changes.png)
+   随后进入 PR 流程，按提示一路继续
+   ![pr1](./public//git_assets/pr.png)
+   ![pr2](./public//git_assets/pr2.png)
 
-```bash
-# 示例：添加新的数据结构主题
-docs/computer-science/data-structures/new-topic/
-
-# 示例：为现有主题添加文章
-docs/computer-science/data-structures/array/03-new-array-type.mdx
-```
+6. 恭喜你完成了首次 Pull Request！ 🎉
+   ![success](./public//git_assets/succuess.png)
 
-### 步骤2：创建文件
+—— 以下是代码贡献流程，若只提交文档可在此结束 ——
 
-创建新的 `.mdx` 文件，并包含正确的 Frontmatter：
-
-```bash
-# 如需要创建目录
-mkdir -p docs/computer-science/data-structures/new-topic
+---
 
-# 创建文件
-touch docs/computer-science/data-structures/new-topic/index.mdx
-```
+## Git 提交 Guide
 
-### 步骤3：编写内容
+#### 1. 将本项目直接fork到自己的账号下，这样就可以直接在自己的账号下进行修改和提交。
 
-使用 Markdown/MDX 编写文章：
+![fork1](./public//git_assets/fork1.jpg)
+![fork2](./public//git_assets/fork2.png)
 
-```mdx
----
-title: "文章标题"
-description: "文章简短描述"
-date: "2024-01-15"
-tags:
-  - your-topic
-  - another-tag
----
+_注意取消勾选仅克隆当前分支_
 
-# 文章标题
+#### 2. 克隆项目
 
-## 引言
+```
+git clone https://github.com/你自己的仓库名/involutionhell.github.io.git
+```
 
-这里是内容...
+修改为自己fork的仓库，改为你的https仓库的git地址
 
-## 第一节
+#### 3. 创建自己的分支
 
-更多内容...
+列出现有分支
 
-## 代码示例
+```
+git branch -a  #用于列出当前Git仓库中所有的分支,包括本地分支和远程分支。
 ```
 
-### 步骤4：测试修改
+![branch-all](./public//git_assets/branch-all.png)
 
-使用 Fumadocs 验证内容：
+##### 3.1 创建功能分支的约定命名
 
-```bash
-pnpm build
-pnpm migrate:images  # 迁移图片脚本
 ```
+git checkout -b feat/your-feature
 
-此命令将：
+# 它的作用是创建一个新的分支并立即切换到该分支上。
 
-- 验证 Frontmatter 语法
-- 检查 MDX 错误
-- 生成预览内容
+具体来说，这个命令相当于同时执行了两个操作：
+git branch feat/your-feature - 创建名为 feat/your-feature 的新分支
+git checkout feat/your-feature - 切换到这个新创建的分支
 
-### 步骤5：本地预览
+其中 feat/your-feature 是分支名称，通常遵循约定式命名：
 
-启动开发服务器并预览修改：
-
-```bash
-pnpm dev
+feat/ 前缀表示这是一个功能（feature）分支
+后面的 your-feature 通常是对功能的简要描述
 ```
 
-访问 `http://localhost:3000` 查看新内容。
-
-### 步骤6：提交 PR
+##### 3.2 创建文档分支的约定命名
 
-1. 提交修改：
+```
+git checkout -b doc_raven   # 自定义一个新的分支
+#git checkout -b doc_id 分支名字改为你的uid分支名称
+```
 
-   ```bash
-   git add .
-   git commit -m "Add: New article about [topic]"
-   ```
+#### 4. 提交更改分支
 
-2. 推送到你的 fork：
+```
+git add .
+根据你的变动情况
+git commit -m "add xxx" # 添加信息记录
+or
+git commit -m "edit xxx" # 修改信息记录
+or
+git commit -m "delete xxx" #删除信息记录
+```
 
-   ```bash
-   git push origin feat/your-article
-   ```
+#### 5. 推送分支到远程仓库
 
-3. 创建 Pull Request
+```
+git push origin doc_raven
+```
 
 ---
 

Git/GIT_GUIDE.md

@@ -141,65 +141,77 @@ export function Contribute() {
         }
       }}
     >
-      <DialogTrigger asChild>
-        <Button
-          variant="hero"
-          size="lg"
-          className="relative isolate w-full sm:w-auto mt-12 h-16 md:h-20 px-10 md:px-14 rounded-full
+      <div className="relative mt-12 inline-flex w-full sm:w-auto">
+        <DialogTrigger asChild>
+          <Button
+            variant="hero"
+            size="lg"
+            className="relative isolate w-full sm:w-auto h-16 md:h-20 px-10 md:px-14 rounded-none
                      text-lg md:text-2xl font-semibold tracking-wide overflow-hidden
                      shadow-xl ring-1 ring-white/30 dark:ring-white/10
                      bg-gradient-to-r from-sky-300 via-sky-400 to-blue-600
                      dark:from-indigo-950 dark:via-slate-900 dark:to-black
                      hover:shadow-[0_25px_60px_-12px] hover:scale-[1.03] transition-all duration-300 ease-out"
-        >
-          {/* Day gradient shimmer */}
-          <span
-            aria-hidden
-            className="pointer-events-none absolute -inset-1 opacity-30 blur-2xl transition-opacity duration-500
-                       bg-gradient-to-r from-sky-200 via-blue-300 to-sky-400 dark:opacity-0"
-          />
-          {/* Night nebula glow */}
-          <span
-            aria-hidden
-            className="pointer-events-none absolute -inset-1 opacity-0 blur-2xl transition-opacity duration-500
-                       dark:opacity-25 dark:bg-gradient-to-br dark:from-indigo-800 dark:via-fuchsia-700/50 dark:to-blue-900"
-          />
-
-          {/* Day clouds */}
-          <span
-            aria-hidden
-            className={`absolute -left-12 top-1/3 w-48 h-24 rounded-full bg-white/60 blur-2xl dark:hidden ${styles.driftSlow}`}
-          />
-          <span
-            aria-hidden
-            className={`absolute left-1/3 -bottom-8 w-64 h-28 rounded-full bg-white/40 blur-3xl dark:hidden ${styles.driftFast}`}
-          />
-
-          {/* Night stars */}
-          <span aria-hidden className="hidden dark:block">
+          >
+            {/* Day gradient shimmer */}
             <span
-              className={`absolute left-6 top-3 w-1 h-1 rounded-full bg-white/90 ${styles.twinkle}`}
+              aria-hidden
+              className="pointer-events-none absolute -inset-1 opacity-30 blur-2xl transition-opacity duration-500
+                         bg-gradient-to-r from-sky-200 via-blue-300 to-sky-400 dark:opacity-0"
             />
+            {/* Night nebula glow */}
             <span
-              className={`absolute left-1/3 top-2 w-1 h-1 rounded-full bg-white/80 ${styles.twinkleDelay1}`}
-            />
-            <span
-              className={`absolute left-2/3 top-5 w-1 h-1 rounded-full bg-white/70 ${styles.twinkleDelay2}`}
+              aria-hidden
+              className="pointer-events-none absolute -inset-1 opacity-0 blur-2xl transition-opacity duration-500
+                         dark:opacity-25 dark:bg-gradient-to-br dark:from-indigo-800 dark:via-fuchsia-700/50 dark:to-blue-900"
             />
+
+            {/* Day clouds */}
             <span
-              className={`absolute right-8 top-4 w-1 h-1 rounded-full bg-white/90 ${styles.twinkleDelay3}`}
+              aria-hidden
+              className={`absolute -left-12 top-1/3 w-48 h-24 rounded-full bg-white/60 blur-2xl dark:hidden ${styles.driftSlow}`}
             />
             <span
-              className={`absolute right-1/4 bottom-3 w-1 h-1 rounded-full bg-white/80 ${styles.twinkle}`}
+              aria-hidden
+              className={`absolute left-1/3 -bottom-8 w-64 h-28 rounded-full bg-white/40 blur-3xl dark:hidden ${styles.driftFast}`}
             />
-          </span>
 
-          <span className="relative z-10 flex items-center gap-3 text-white">
-            <Sparkles className="h-6 w-6 opacity-95" />
-            <span className={styles.textGlow}>我要投稿</span>
-          </span>
-        </Button>
-      </DialogTrigger>
+            {/* Night stars */}
+            <span aria-hidden className="hidden dark:block">
+              <span
+                className={`absolute left-6 top-3 w-1 h-1 rounded-full bg-white/90 ${styles.twinkle}`}
+              />
+              <span
+                className={`absolute left-1/3 top-2 w-1 h-1 rounded-full bg-white/80 ${styles.twinkleDelay1}`}
+              />
+              <span
+                className={`absolute left-2/3 top-5 w-1 h-1 rounded-full bg-white/70 ${styles.twinkleDelay2}`}
+              />
+              <span
+                className={`absolute right-8 top-4 w-1 h-1 rounded-full bg-white/90 ${styles.twinkleDelay3}`}
+              />
+              <span
+                className={`absolute right-1/4 bottom-3 w-1 h-1 rounded-full bg-white/80 ${styles.twinkle}`}
+              />
+            </span>
+
+            <span className="relative z-10 flex items-center gap-3 text-white">
+              <Sparkles className="h-6 w-6 opacity-95" />
+              <span className={styles.textGlow}>我要投稿</span>
+            </span>
+          </Button>
+        </DialogTrigger>
+        <a
+          href="https://github.com/InvolutionHell/involutionhell.github.io?tab=contributing-ov-file#%EF%B8%8F-%E6%B7%BB%E5%8A%A0%E6%96%B0%E6%96%87%E7%AB%A0"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="查看投稿指南"
+          title="查看投稿指南"
+          className="absolute top-0 right-0 flex h-9 w-9 translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/80 bg-white text-sky-600 shadow-lg ring-1 ring-sky-400/60 transition-transform hover:-translate-y-1/2 hover:translate-x-1/2 hover:scale-105 hover:shadow-xl dark:border-slate-700 dark:bg-slate-900 dark:text-sky-300"
+        >
+          <span className="text-lg font-semibold">?</span>
+        </a>
+      </div>
       <DialogContent className="sm:max-w-2xl">
         <DialogHeader>
           <DialogTitle>我要投稿</DialogTitle>

app/components/Contribute.tsx

@@ -57,12 +57,12 @@ export function Hero() {
           </p>
 
           <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
-            <Button asChild>
+            <Button asChild className="rounded-none">
               <a href="/docs/ai" target="_blank" rel="noopener noreferrer">
                 访问知识库 <ExternalLink className="ml-2 h-4 w-4" />
               </a>
             </Button>
-            <Button variant="outline" asChild>
+            <Button variant="outline" asChild className="rounded-none">
               <a
                 href="https://github.com/involutionhell"
                 target="_blank"