diff --git a/docs/intro.md b/docs/intro.md index f8aec7a..aaa5937 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -1,7 +1,7 @@ --- sidebar_label: "介绍" label: "介绍" -sidebar_position: 1 +sidebar_position: 0 slug: / --- @@ -90,4 +90,4 @@ GitLink（确实开源）是CCF官方指定的开源创新服务平台，旨在 - \ No newline at end of file + diff --git a/docs/视频教程.mdx b/docs/视频教程.mdx index d5e0a92..0af6d0f 100644 --- a/docs/视频教程.mdx +++ b/docs/视频教程.mdx @@ -1,5 +1,7 @@ --- -sidebar_position: 2 +sidebar_label: "视频介绍" +label: "视频介绍" +sidebar_position: 0.5 --- # GitLink 视频教程 @@ -14,7 +16,7 @@ import VideoDemo from '../src/components/VideoDemo'; title="GitLink 平台介绍" description="快速了解 GitLink 平台的主要功能和使用场景" platform="bilibili" - videoId="BV1Gx411w7vd" + videoId="BV1Gx411w7vd" options={{ showTips: true }} /> @@ -64,4 +66,4 @@ import VideoDemo from '../src/components/VideoDemo'; :::info 问题反馈 如果您对视频内容有任何疑问，或者希望我们提供更多特定主题的视频教程，请通过 [GitLink 社区](https://www.gitlink.org.cn) 或邮箱 gitlink@ccf.org.cn 联系我们。 -::: \ No newline at end of file +::: diff --git a/docusaurus.config.js b/docusaurus.config.js index 7927c3f..efba934 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -82,6 +82,10 @@ module.exports = { { type: 'custom-back-to-top', position: 'right' + }, + { + type: 'custom-qa-button', + position: 'right' } ], }, diff --git a/src/components/QAButtonNavbarItem.js b/src/components/QAButtonNavbarItem.js new file mode 100644 index 0000000..cdc231d --- /dev/null +++ b/src/components/QAButtonNavbarItem.js @@ -0,0 +1,35 @@ +import React from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; + +export default function QAButtonNavbarItem() { + return ( + + {() => { + const history = require('@docusaurus/router').useHistory(); + return ( +
+ +
+ ); + }} + + ); +} \ No newline at end of file diff --git a/src/pages/qa.js b/src/pages/qa.js new file mode 100644 index 0000000..bbd4830 --- /dev/null +++ b/src/pages/qa.js @@ -0,0 +1,86 @@ +import React from 'react'; + +const wechatGroups = [ + { img: '/img/question/wechat1.png', label: '微信技术交流答疑群1' }, + { img: '/img/question/wechat2.png', label: '微信技术交流答疑群2' }, +]; + +const qqGroups = [ + { img: '/img/question/qq1.png', label: 'QQ技术交流答疑群1' }, + { img: '/img/question/qq2.png', label: 'QQ技术交流答疑群2' }, +]; + +export default function QA() { + return ( +
+
+

疑问解答与交流群

+
+
+

微信交流群

+
+ {wechatGroups.map((g, i) => ( +
+ {g.label} +
{g.label}
+
+ ))} +
+
+
+

QQ交流群

+
+ {qqGroups.map((g, i) => ( +
+ {g.label} +
{g.label}
+
+ ))} +
+
+
+
+

官网论坛

+ + 访问官网论坛 + +
+
+ GitLink Logo +
+
+
+ ); +} \ No newline at end of file diff --git a/src/theme/NavbarItem/index.js b/src/theme/NavbarItem/index.js index 0c0246f..5684553 100644 --- a/src/theme/NavbarItem/index.js +++ b/src/theme/NavbarItem/index.js @@ -2,6 +2,7 @@ import React from 'react'; import NavbarItem from '@theme-original/NavbarItem'; import PdfExportNavbarItem from '../../components/PdfExportNavbarItem'; import PdfBackToTopNavbarItem from '../../components/PdfBackToTopNavbarItem'; +import QAButtonNavbarItem from '../../components/QAButtonNavbarItem'; export default function NavbarItemWrapper(props) { if (props.type === 'custom-pdf-export') { @@ -10,5 +11,8 @@ export default function NavbarItemWrapper(props) { if (props.type === 'custom-back-to-top') { return ; } + if (props.type === 'custom-qa-button') { + return ; + } return ; -} \ No newline at end of file +} diff --git a/static/img/question/qq1.png b/static/img/question/qq1.png new file mode 100644 index 0000000..7cda7c3 Binary files /dev/null and b/static/img/question/qq1.png differ diff --git a/static/img/question/qq2.png b/static/img/question/qq2.png new file mode 100644 index 0000000..7cda7c3 Binary files /dev/null and b/static/img/question/qq2.png differ diff --git a/static/img/question/wechat1.png b/static/img/question/wechat1.png new file mode 100644 index 0000000..b2c12f0 Binary files /dev/null and b/static/img/question/wechat1.png differ diff --git a/static/img/question/wechat2.png b/static/img/question/wechat2.png new file mode 100644 index 0000000..b2c12f0 Binary files /dev/null and b/static/img/question/wechat2.png differ diff --git a/versioned_docs/version-1.1.0/intro.md b/versioned_docs/version-1.1.0/intro.md index 9832d1a..aa7e05b 100644 --- a/versioned_docs/version-1.1.0/intro.md +++ b/versioned_docs/version-1.1.0/intro.md @@ -1,7 +1,7 @@ --- sidebar_label: "介绍" label: "介绍" -sidebar_position: 1 +sidebar_position: 0 slug: / --- diff --git a/versioned_docs/version-1.1.0/第三方服务/WebIDE.md b/versioned_docs/version-1.1.0/第三方服务/WebIDE.mdx similarity index 93% rename from versioned_docs/version-1.1.0/第三方服务/WebIDE.md rename to versioned_docs/version-1.1.0/第三方服务/WebIDE.mdx index 9fb89d1..c571b22 100644 --- a/versioned_docs/version-1.1.0/第三方服务/WebIDE.md +++ b/versioned_docs/version-1.1.0/第三方服务/WebIDE.mdx @@ -1,19 +1,22 @@ --- -sidebar_label: 'WebIDE' -sidebar_position: 9 - +sidebar_label: 'WebIDE' +sidebar_position: 9 + --- + +import VideoDemo from '../../../src/components/VideoDemo'; + ## WebIDE背景 传统的代码托管平台提供了代码仓库的 Git/SVN 的管理，可以在平台上做代码浏览、代码评审、缺陷管理、CI 流水线等和代码相关的活动。其中代码浏览、代码评审所用的编辑器组件一般为 CodeMirror，代码高亮使用 highlight.js，常常只提供了读代码的场景。蚂蚁研发效能部门云研发团队通过自研的 OpenSumi 框架及基于 OpenSumi 框架做的专门针对于 Web IDE（无远程容器）场景的极速版 Web IDE 框架，与内部代码托管平台碰撞出了创新型的、只依赖浏览器的、IDE 风格的代码阅读、代码编写、代码提交、代码运行、代码评审等场景，极大的提高了用户在代码托管平台阅读代码、代码评审、轻研发等场景的效率。本次蚂蚁研发效能云研发团队和 CCF（中国计算机学会）GitLink 代码托管平台合作，将内部极速版 Web IDE 应用到了 Gitlink 代码托管平台上，解决了长久以来的用户反馈的很多体验问题。 ## Web IDE 核心能力 对标有容器的标准版，极速版 IDE 主要在读、写、运行、提交等方面进行了探索： -**1. 读：** +**1. 读：** - a. 适配了多种代码托管平台，例如 Gitlink、Github、Gitlab 等代码托管平台，业务可以非常方便的使用代码服务的能力 - b. 内置了包括 Java、TS/JS、C++、Go、Python、Rust 等几十种常见语言的语法高亮支持 - c. 支持了如 Git Blame、GitGraph 等代码阅读辅助插件 - + **2. 写：** - a. 支持 HTML/CSS/JS/Markdown 等在线语言服务能力，支持错误诊断能力 - b. 浏览器文件系统 @@ -21,7 +24,7 @@ sidebar_position: 9 **3. 运行：** - a. 支持基于 Skypack 的前端代码运行方案 - b. 支持基于 Pyodide 的 Python 运行 - + **4. 提交：** - a. 支持 WebSCM，提供分支切换/新增、代码提交等能力 @@ -48,7 +51,7 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力： - 3.代码修改流程重，耗时久：代码 Diff 组件只有读能力，无法快速修改一些拼写或 lint 错误，需要在本地找到对应文件后修改提交 针对于上述需求，蚂蚁云研发团队和 Gitlink 打造了 IDE 风格的代码评审场景： ![](../../../static/img/di_san_fang/WebIDE/IDE模式的代码评审.png)
- +
IDE模式的代码评审
- 1.变更树 a. 提供平铺和树状两种浏览方式 b. 变更树使用 OpenSumi Recycle 组件，对于大 PR 也能通过虚拟滚动高性能的查看变更文件 - 2.工具栏 a. 提供 IDE 编辑器基础设置，如字体大小、编码、忽略收尾空格等 b. 快速切换当前分支历史版本与基线的对比 c. 变更文件快速定位、设置已查看，并支持快捷键快速执行 @@ -59,6 +62,28 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力： ![](../../../static/img/di_san_fang/WebIDE/代码评审.png)
代码评审时可修改代码
+## WebIDE 功能演示 + +下面是 GitLink WebIDE 的功能演示视频，通过观看视频，您可以直观地了解如何使用 WebIDE 进行代码浏览、编辑和提交等操作。 + + + +### 在线运行演示 + + + ## Gitlink Web IDE Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大，更有大部分用户仅仅是为了代码阅读将代码克隆到本地，尽管保证了一致的体验，但整个链路繁琐费时。 基于这个洞察，蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE，可以一键快速打开 Web IDE 访问阅读项目仓库代码，实现项目与 IDE 的无缝衔接，保持研发同学的日常偏好习惯，同时完美兼容 Gitlink 代码托管平台。更重要的是，通过无容器在浏览器上直接运行一个极速版 IDE，确保「秒开」的即时体验。 @@ -135,4 +160,4 @@ Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、 随着 Webassembly 技术的发展，一些后端语言也可以运行在浏览器里，在 2021 年 Google IO 大会上，StackBlitz 展示了他们最近做的技术：WebContainer，该能力可以将语言运行时编译为 Webassembly 从而运行在浏览器上。Code-Runner-For-Web 插件结合 Pyodide，已经将 Python 的运行搬到了浏览器上，新版极速版也默认集成了该插件。 ![](../../../static/img/di_san_fang/WebIDE/Python代码运行.png)
-
Python代码运行
\ No newline at end of file +
Python代码运行
diff --git a/versioned_docs/version-1.1.0/视频教程.mdx b/versioned_docs/version-1.1.0/视频教程.mdx new file mode 100644 index 0000000..0bac24f --- /dev/null +++ b/versioned_docs/version-1.1.0/视频教程.mdx @@ -0,0 +1,69 @@ +--- +sidebar_label: "视频介绍" +label: "视频介绍" +sidebar_position: 0.5 +--- + +# GitLink 视频教程 + +在本页面，您可以找到各种 GitLink 功能的视频教程演示。这些视频将帮助您更直观地了解 GitLink 的使用方法。 + +import VideoDemo from '../../src/components/VideoDemo'; + +## 快速入门 + + + +## 代码库管理 + + + +## WebIDE 功能 + + + +## DevOps 引擎 + + + +## 团队协作 + + + +:::tip 提示 +视频中使用的是最新版 GitLink 界面，如果您使用的版本界面略有不同，功能和操作方式基本一致。 +::: + +:::info 问题反馈 +如果您对视频内容有任何疑问，或者希望我们提供更多特定主题的视频教程，请通过 [GitLink 社区](https://www.gitlink.org.cn) 或邮箱 gitlink@ccf.org.cn 联系我们。 +:::