新增了一个 review PR 时方便跳转到英文原文的 user script

[Justineo]

// ==UserScript==
// @name         Link to English version
// @namespace    https://cn.vuejs.org/
// @version      0.1
// @description  Add a link back to English version
// @author       Justineo
// @match        https://github.com/vuejs/docs-next-zh-cn/pull/*/files
// @grant        none
// ==/UserScript==

(function() {
    const URL_PATTERN = /^https:\/\/github\.com\/[^/]+\/[^/]+\/blob\/[^/]+\/(.+)$/;

    function inject() {
        const menus = [
            ...document.querySelectorAll("details-menu.show-more-popover"),
        ];

        menus.forEach((menu) => {
            const links = [...menu.querySelectorAll("a")];
            const fileLink = links.find(
                ({ textContent }) => textContent.trim() === "View file"
            );
            const href = fileLink.href;
            const newHref = href.replace(
                URL_PATTERN,
                (_, path) => `https://github.com/vuejs/docs-next/blob/master/${path}`
            );

            const newLink = document.createElement("a");
            newLink.href = newHref;
            newLink.className = fileLink.className;
            newLink.target = "_blank";
            newLink.setAttribute("role", fileLink.getAttribute("role"));
            newLink.setAttribute("rel", fileLink.getAttribute("rel"));
            newLink.textContent = "View upstream";
            fileLink.parentNode.insertBefore(newLink, fileLink.nextSibling);
        });
    }

    inject();
})();

启用 Tampermonkey 以后把上面这段代码添加为一个新的 user script 即可。效果如下：

在 diff 视图下，新增了一个 View upstream 的链接，点击可以在新窗口打开原文对应文件。

Ps. GitHub 从 PR 再点到 Files tab 走的是异步跳转，可能会匹配不上，随手写的所以也没支持这种逻辑，如果没效果可以刷新一下。

@Jinjiang @veaba

[veaba]

挺酷的功能，已添加。

我是使用的三屏，可能多开一个 vscode 无碍。

[veaba]

我前阵子有一个想法，但酝酿的不太成熟，借助这次讨论稍微说下，后续有成熟的 demo 再放出来
大致思路如下：

1. 通过双击 div，改变contenteditable:true，正在阅读的 vue 文档的用户就可以直接编辑中文文档的错别字，就地更改。
2. 就地更改的结果会经过github 授权，再发起PR 到 docs-next-zh-cn 。
3. 借助你这个功能的思路，可以再加上拉取原英文 md 做对比。
4. 最近在参考如何处理 diff 过程，以及中间层级数据库存储。
5. 这样的话，我们大大提高了 纠错过程效率
6. 再加上监控原仓库 PR，及时更新到中文。

[Justineo]

听起来不错！不过用户阅读的是 HTML，这个里面的内容怎么映射到 Markdown 源码，我理解这个是比较有难度的一个环节。

[veaba]

听起来不错！不过用户阅读的是 HTML，这个里面的内容怎么映射到 Markdown 源码，我理解这个是比较有难度的一个环节。

是的，你说的对。

我现在的思路是，路由名词 + 埋点。

1. 可能需要开发一个 vuepress 插件，在生成文档的时候，埋进 github commit msg + commit hash 数据 到 html attribute 中
2. 其次是对比 当前所编辑 HTML 段落 是第几段，对应解析 md 是第几段，这就是上面提到的 diff 过程。

[veaba]

补充一下，备选方案2： 也可以将 HTML 重新转为 Markdown 来实现（这可能失去git 追踪commit 的特性）

[Justineo]

不过如果真的要做这样一套东西，感觉只用在 Vue 文档上有点大材小用，建议设计得更通用一点 😂

[veaba]

不过如果真的要做这样一套东西，感觉只用在 Vue 文档上有点大材小用，建议设计得更通用一点 😂

哈哈，我其实想抽离出来一个独立的类似插件之类的东西。

这个确实值得好好思考下，怎么设计先。反正最不济，先给 vue 文档使用。

😂我的思路是实现，再归纳总结，先从 0 ——>1 先，务实主义者。

[veaba]

@Justineo good news~ 😎

已解决前面谈及的比较难的环节，就是 HTML 如何映射 Markdown 的问题。

网页：

对应的源文件路径：

1. 接下来，继续完善这个插件 （该 repo 还是草稿阶段）。

2. 然后再写一个后端服务，拉取源文件，并在指定行替换一下当前行，使用 app 发起 PR，整个链条就全部打通了。

3. 后面就只有一个问题，因为后端模块有些秘钥之类的，可能不是很适合开源（当然可以处理特殊的敏感信息），如过在 vuejs 组织下的话，这个 robot 或许要设置为 private。

4. 我此前已有过 go 语言开发 robot 的经验（也就是github APP），为了节省时间，我先继续用 go 来编写后端服务。

如果这个愿望向好的方向发展的话，后续再换回 node 编写就好了。

5. 可能的难题：后续应该还有一个第三方与后端通信的请求过程，跨域问题，可以采用 CORS、或者 websocket 来解决，这里是基于静态托管 gh-pages 可能无法做代理转发服务考虑的。

[Justineo]

VuePress 有生成 sourcemap 吗？

[veaba]

VuePress 有生成 sourcemap 吗？

dev 下是有的。

[veaba]

@Justineo 成功发起 PR， 可以针对 单行(纯 文本)，更复杂的需要拉取原内容（还没有开发完）。

PR

😄

post 的内容：

{
  "owner":"veaba",
  "repo":"vuepress-plugin-editable",
  "path":"/docs/README.md",
  "content":"它还会自.  这是纯文本( plain text)","line":10
}

录制了个视频，目前看来达到预期目标了。

3.mp4

[Justineo]

Nice! 从视频看好像有点问题，替换行被当成插入行了？

[veaba]

Nice! 从视频看好像有点问题，替换行被当成插入行了？

我的失误，内部 对行替换的时候 line +1，没替换准。

[veaba]

fix https://github.com/veaba/vuepress-plugin-editable/pull/4/files

[veaba]

来个 GIF

[veaba]

@Justineo 恭喜发财，哈哈，赶了一天的代码，踩了一堆坑

终于能够用了，后续再完善细节和文档。可以到 https://vue.datav.ai/ 去体验下。

[veaba]

@Justineo 时隔半年，重新拾起了这项改动。

下面的改动特性，实现 fork 的用户也可以向主仓库发起 PR。

QQ.20210901000030.mp4

当然，发现插件还有些 bug，后续需要优化。

期待通过后续的优化，迟早有一天，也可以中文文档里能够使用这个工具。

如果有兴趣的话，我重新使用 Node,js 重构应用，以方便后续展开协作，现在是用 Go 写的。

未来的预期的特性：

• 拉取当前路径所涉及到正在 发起 PR 的请求个数+特性
• 全局性的开关
• DOM 节点的精准捕捉。
• 双语对比
• 自动同步原仓库的 commit 到目标仓库

图1：没有 merge 之前

图2：应用到主仓库，通过 github actions 应用后自动部署。

[wxsms]

很棒的 user script！感谢。

我发现将 https://github.com/vuejs/docs-next/blob/master/${path} 中的 blob 改为 blame，可以跳转到带行号的源码界面，举例。对于评审这种场景来说可能会更方便。

[wxsms]

稍微修改了一下，现在可以支持异步跳转了，无需刷新。

// ==UserScript==
// @name         Link to English version
// @namespace    https://cn.vuejs.org/
// @version      0.1
// @description  Add a link back to English version
// @author       Justineo
// @match        https://github.com/vuejs/docs-next-zh-cn/pull/*
// @grant        none
// ==/UserScript==

async function sleep() {
    return new Promise(resolve => {
        setTimeout(resolve, 1000);
    });
}

(async function() {
    const URL_PATTERN = /^https:\/\/github\.com\/[^/]+\/[^/]+\/blob\/[^/]+\/(.+)$/;

    do {
        const selectedTab = document.querySelector('.tabnav-tab.selected')
        const href = selectedTab.getAttribute('href');
        // console.log('looking', href);
        if (href.endsWith('/files')) {
            break;
        }
        await sleep()
    } while (1)

        function inject() {
            const menus = [
                ...document.querySelectorAll("details-menu.show-more-popover"),
            ];

            menus.forEach((menu) => {
                const links = [...menu.querySelectorAll("a")];
                const fileLink = links.find(
                    ({ textContent }) => textContent.trim() === "View file"
                );
                const href = fileLink.href;
                const newHref = href.replace(
                    URL_PATTERN,
                    (_, path) => `https://github.com/vuejs/docs-next/blame/master/${path}`
            );

                const newLink = document.createElement("a");
                newLink.href = newHref;
                newLink.className = fileLink.className;
                newLink.target = "_blank";
                newLink.setAttribute("role", fileLink.getAttribute("role"));
                newLink.setAttribute("rel", fileLink.getAttribute("rel"));
                newLink.textContent = "View upstream";
                fileLink.parentNode.insertBefore(newLink, fileLink.nextSibling);
            });
        }

    inject();
})();