fear: Better editing experience (#26)

* edit landing

* feat: more contributing guide

* fix: minor grammar problems

* fix: grammar error

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: punc error

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: ShizuhaAki

docs/.vitepress/config/zh.ts

@@ -10,7 +10,7 @@ export const zh = defineConfig({
     sidebar: sidebarGuide(),
 
     editLink: {
-      pattern: 'https://github.com/FDUCSLG/CS101/edit/main/docs/:path',
+      pattern: '/edit-landing.md?path=FDUCSLG/CS101/edit/main/docs/:path',
       text: '在 GitHub 上编辑此页面'
     },
 
@@ -90,7 +90,8 @@ function sidebarGuide(): DefaultTheme.Sidebar {
          { text: "发行版相关", link: "/linux-and-shell/on-distros" },
         ],
     },
-    { text: "关于 CS101 项目", link: "/project" },
-    { text: "关于我们", link: "/team" },
+    { text: "贡献指南", link: "/project/contributing" },
+    { text: "关于 CS101 项目", link: "/project/project" },
+    { text: "关于我们", link: "/project/team" },
   ]
 }

docs/.vitepress/theme/components/EditButton.vue

@@ -0,0 +1,24 @@
+<script setup>
+// extract ?path=... argument
+const paramsString = window.location.search;
+const params = new URLSearchParams(paramsString)
+const path = params.get('path')
+
+// fallback if not present
+const editUrl = path
+  ? `https://github.com/${path}`
+  : 'https://github.com/FDUCSLG/CS101'
+</script>
+
+<template>
+  <a
+    v-if="editUrl"
+    :href="editUrl"
+    target="_blank"
+    class="vp-button"
+    style="display:inline-block;padding:0.4em 1em;
+           background:#0366d6;color:white;
+           border-radius:4px;text-decoration:none;">
+    开始编辑
+  </a>
+</template>

docs/.vitepress/theme/index.ts

@@ -29,7 +29,7 @@ import 'vitepress-plugin-codeblocks-fold/style/index.css';
 import '@nolebase/vitepress-plugin-page-properties/client/style.css';
 import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css';
 import Confetti from "./components/Confetti.vue";
-
+import EditButton from "./components/EditButton.vue";
 import Hero from '../theme/Layout.vue';
 import NCard from './components/NCard.vue';
 
@@ -48,6 +48,7 @@ export default {
   },
   enhanceApp({ app }) {
     app.component("Confetti", Confetti); //注册全局组件
+    app.component("EditButton", EditButton);
     app.use(NolebaseEnhancedReadabilitiesPlugin, {
       spotlight: {
         disableHelp: true,

docs/edit-landing.md

@@ -0,0 +1,9 @@
+# Edit Landing
+
+欢迎您对 CS101 进行贡献！
+
+如果不知道怎么做，您可以阅读[贡献指南](./project/contributing.md)。
+
+准备好后，点击下面的按钮开始编辑吧！
+
+<EditButton/>

docs/index.md

@@ -10,8 +10,7 @@ hero:
   actions:
     - theme: brand
       text: 启动！
-      link: /tools/markdown1.md
-
+      link: /project/welcome.md
 features:
   - icon: 📝
     title: 课程资源

docs/project/contributing.md

@@ -0,0 +1,50 @@
+# 贡献指南
+CS101 项目采用 GitHub 进行协作。您可以参考 [Git & GitHub](../tools/git-and-github.md) 这篇文档来学会基本操作。
+
+要参与贡献，您需要一个 GitHub 账号（可以前往 [GitHub 的账号注册页面](https://github.com/signup) 注册），但不需要高超的 GitHub 技巧，即使你是一名新手，只要按照下面所述的步骤操作，也能够非常出色地完成编辑。
+
+## 编辑的基本步骤
+简单来说，是这么几步：
+
+1. 找到您想要编辑的页面；
+2. 滚动到最下方，点击 “在 GitHub 上编辑本页”，您会来到我们的编辑准备页面；
+3. 准备好后，点击 “开始编辑” 按钮跳转到 GitHub 的编辑器页面，您可在此进行编辑，编辑完后，在 Commit Message 框中，用以下的格式简要概括您的修改
+    ```
+    type: brief summary of what you did
+    ```
+    其中 `type` 为您此次所做的修改的类别。例如，如果是写作了新的内容，`type` 为 `feat`；如果是修复了过去的一个问题，`type` 为 `fix`。
+    >[!INFO] 提示
+    > 这是 Semantic/Conventional Commit Message 的要求。如果您想要了解更多的话，可以参考 [这个规范文档](https://www.conventionalcommits.org/en/v1.0.0/)。
+4. 点击 Propose Changes 按钮提交修改；
+5. 在下一个页面中，点击 Create Pull Request 按钮，在弹出的 Pull Request 详情页面中，简要叙述修改的内容；
+6. 大功告成！您只需要等待管理员审核并合并到主仓库中即可。
+
+## 在本地进行编辑
+如果您想要在本地进行编辑的话，就需要一定的 `git` 相关知识。您可以参考 [Git & GitHub](../tools/git-and-github.md) 这篇文档。
+
+不过，简单说来，您只需要做以下这些事情：
+
+### 准备工作
+您应该先安装好 Node.js 环境。请参考 [Node官网](https://nodejs.org) 上的指南。
+
+接着，fork 并 clone 本仓库，并配置环境
+```shell
+git clone https://github.com/<your-username>/CS101
+cd CS101
+npm install
+npm run docs:dev
+```
+
+这样就可以在[http://localhost:5173](http://localhost:5173)实时预览您的编辑了。
+
+### 修改工作
+每次修改前，您应当创建一个新的 branch，并在那里修改。
+
+```shell
+git checkout -b my-branch-name
+git add .
+git commit -m "<type>: <brief commit message>"
+git push -u origin my-branch-name
+```
+
+修改完后，将您的工作 commit 并 push 回上游，并开启一个 Pull Request 即可。

docs/project.md docs/project/project.mddocs/project.md renamed to docs/project/project.md

@@ -0,0 +1,12 @@
+# 欢迎来到 CS101！
+
+CS101 项目是复旦大学 FDUCSLG 社团推动发起的一项面向**所有人**的计算机通识入门指南。我们致力于成为一个免费，开放，持续更新的计算机基础知识整合站点。
+
+## 项目组织
+目前，CS101 项目着重建设的是以下两个模块：
+
+- FAQ101：以一问一答形式进行的计算机基础知识扫盲和常见问题解答。欢迎向我们提问！
+- Tools101：作为一个合格的计算机学术用户，你应该学会的常用工具。
+
+## 贡献指南
+向 CS101 贡献并不困难！如果不知道怎么开始，欢迎参考[贡献指南](./contributing.md)。