RxJS v6 dash 文档

  1. 1. rxjs6.docset成品下载地址
  2. 2. 代码仓库
  3. 3. 原理
  4. 4. 步骤
    1. 4.1. 创建文件夹 <docset name>.docset/Contents/Resources/Documents/
    2. 4.2. 创建 Info.plist 文件 和 icon.png
    3. 4.3. 从 https://rxjs-dev.firebaseapp.com/api 解析有哪些 API
    4. 4.4. 创建 SQLite Index
    5. 4.5. 创建 每个 API 的 html 界面
    6. 4.6. 更多具体实现请看代码
  5. 5. 参考文档

rxjs6.docset成品下载地址

rxjs6.docset.zip

代码仓库

https://github.com/xinshangshangxin/dash-rxjs-6

原理

官方文档 Any HTML Documentation 可知, 只要有 HTML, 就可以轻松构建 Dash 文档

步骤

创建文件夹 <docset name>.docset/Contents/Resources/Documents/

创建 Info.plist 文件 和 icon.png

Info.plist 的模板 在 https://kapeli.com/resources/Info.plist

https://rxjs-dev.firebaseapp.com/api 解析有哪些 API

Network 中可以 看到 一个 /generated/docs/api/api-list.json的请求, 里面有每个 API 内容, 如下图

api-json

创建 SQLite Index

将上面 api-json 的内容 创建到 SQLite Index
CREATE TABLE searchIndex(id INTEGER PRIMARY KEY, name TEXT, type TEXT, path TEXT);

创建 每个 API 的 html 界面

  • api-json 的内容中 有 path 属性, 可以请求每个界面的详细内容(content属性)
    api-json
  • ReactiveX/rxjs的仓库中 发现 用了 assets/js/prettify.js来格式化代码, 所以相同的, 在我们创建的 html 界面中需要 prettify 来格式化代码显示, 代码如下
1
2
3
4
5
6
7
8
9
10
let codeEleList = document.querySelectorAll('body code-example');
[...codeEleList].forEach((ele) => {
let html = window.prettyPrintOne(ele.innerHTML, 'javascript', false);
ele.innerHTML = `<aio-code>
<pre class="prettyprint lang-javascript">
<code class="animated fadeIn">${html}
</code>
</pre>
</aio-code>`;
});
  • 由于是离线文档, 所以在 html 中所有的地址都要转化成相对路径, 代码如下
1
2
3
4
5
6
7
8
9
10
let depth = location.href.replace(/.*\/api\//, '').split('/').length;
let aEleList = document.querySelectorAll('a');
[...aEleList].forEach((ele) => {
let href = ele.href;
if (/\/api\//.test(href)) {
let depthStr = new Array(depth).fill('..').join('/');
let [preUrl, anchor = ''] = href.split('#');
ele.href = preUrl.replace(/.*\/api\//, `${depthStr}/api/`) + '.html' + '#' + anchor;
}
});

更多具体实现请看代码

https://github.com/xinshangshangxin/dash-rxjs-6

参考文档


文章若有纰漏请大家补充指正,谢谢~~

http://blog.xinshangshangxin.com SHANG 殇