Merge pull request 'v1.1.0 Releases' (PR#7) from dev into main

Reviewed-on: #7

README.md

@@ -0,0 +1,71 @@
+# vditor-halo-render
+
+vditor halo render是一款用于halo-plugin-vditor的自定义解析器，可以解析自定义的语法来输出HTML结构。可以应用于文章的编写。 本解析器主要用于markdown编辑器。
+
+例如:
+
+**>>INPUT**
+
+```plaintext
+tips:info
+This is a info tips
+```
+
+**<<OUTPUT**
+
+```html
+<div class="halo-render halo-render-wrapper tips tips-info">
+    <div>This is a info tips</div>
+</div>
+```
+
+## 如何使用
+
+您可以直接引用releases包下的index.js和index.css，并将fonts和icons目录拷贝到可访问的路径。
+解析器导出了一个`HaloJs`对象可供使用。
+
+要进行解析处理您仅需要使用下面的方法即可进行处理。
+
+```js
+HaloJs.renderHalo("tips:info\nThis is a info tips", "/")
+```
+
+renderHalo方法会返回解析后的html结构。renderHalo的参数与返回值如下：
+
+```ts
+/**
+ * 解析自定义渲染
+ * @param content 待渲染的文本
+ * @param cdn 资源链接前缀
+ * @return 资源渲染结果
+ */
+function renderHalo(content: string, cdn: string): string;
+```
+
+## 语法参考
+
+- [语法介绍](doc/general.md)
+- [Tips组件](doc/tips.md)
+- [Git组件](doc/git.md)
+- [资源组件](doc/drive.md)
+
+## 开发
+
+1. 安装依赖
+
+    ```shell
+    npm install
+    ```
+
+2. 启动开发环境
+
+    ```shell
+    npm run dev
+    ```
+
+3. 打包
+
+    ```shell
+    npm run build
+    ```
+

demo/index.js

@@ -50,6 +50,10 @@ git:[@github/justice2001/halo-plugin-vditor]
 
 ---
 
+git:[@gitee/blossom-editor/blossom]
+
+---
+
 drive:baidu
 name: 网站资源集合
 link: https://www.baidu.com/

doc/drive.md

@@ -0,0 +1,46 @@
+# 资源分享组件
+
+资源分享组件可以帮助用户生成一个分享展示的模块，它会包含资源平台、资源内容、链接按钮和提取码的信息。
+
+当前资源平台支持百度网盘和阿里网盘的显示。
+
+## 语法
+
+```markdown
+drive:<platform>
+name: <title>
+link: <link>
+password: <password>
+```
+
+- `name`: 展示的资源标题
+- `link`: 跳转到资源的链接
+- `password`: 可选，资源提取码
+
+## platform
+
+当前支持的平台：
+
+- `baidu`: 百度网盘
+- `ali`: 阿里云盘
+
+平台实际上只是一个icon和标题的组合，并不会影响资源的访问，如果您不介意，您可以在下方的配置中填写任意的链接。
+
+## 示例
+
+- 阿里云盘
+  
+    ```markdown
+    drive:ali
+    name: 网站资源集合
+    link: https://www.ali.com/
+    ```
+  
+- 百度网盘
+
+    ```markdown
+    drive:baidu
+    name: 网站资源集合
+    link: https://www.baidu.com/
+    password: 1234
+    ```

doc/general.md

@@ -0,0 +1,29 @@
+# 语法设计
+
+## 类型标识
+
+解析器使用输入文本的第一行来标识渲染的类型，当前支持下面几种类型：
+
+- `tips` 提供多彩的提示组件
+- `git` 提供Git仓库信息的组件
+- `drive` 提供资源下载的组件
+
+渲染类型标识可以在后方加入一些子类型或配置信息，格式如下: 
+
+```plaintext
+<type>:<option | sub_type>
+```
+
+例如tips组件在后方标识了子类型，如`tips:danger`则表示使用`tips`解析器，解析为danger样式。
+
+git组件则在后方标识了一组配置，如`git:[@github/justice2001/halo-plugin-vditor]`
+
+具体的行为可以由解析器来自定义。
+
+## 内容
+
+从第二行起至最后一行，均为内容部分，这一部分会被作为整体传入到解析器中，解析器可以根据需要来设计语法。
+
+如`drive`组件则在此处处理附加的长配置信息。
+
+而`tips`则会将此部分内容解析为html附加到内容中。

doc/git.md

@@ -0,0 +1,55 @@
+# Git组件
+
+![Git Module](assets/git.png)
+
+Git组件为用户提供了在页面中嵌入git仓库的解决方案，常用的使用场景是为开源项目开发者发布文章时可以将此Git仓库快速嵌入到文章之中。
+
+当前git组件支持的平台包括
+
+- `GitHub`: 无需配置URL
+- `Gitee`: 无需配置URL
+
+## 语法
+
+```markdown
+git:[<url>@<platform>/<owner>/<repository>]
+```
+
+### url
+
+URL是平台的URL，当前为保留字段，为后续加入自建Gitlab和Gitea做支持准备。如果您使用的是官方的平台则无需填写此字段。
+
+URL示例：`https://gitlab.example.com/`
+
+### platform
+
+标识平台类型，解析器会根据不同的平台选择不同的API和返回值处理方式。当前解析器支持下列平台：
+
+- `Github`：仅支持官方平台
+- `Gitee`：仅支持官方平台
+
+### owner
+
+仓库所有者
+
+### repository
+
+仓库名称
+
+## 示例
+- GitHub平台
+
+    ```markdown
+    git:[@github/justice2001/halo-plugin-vditor]
+    ```
+- Gitee平台
+
+    ```markdown
+    git:[@gitee/blossom-editor/blossom]
+    ```
+
+- Gitea平台（当前未实现）
+
+  ```markdown
+  git:[https://git.mczhengyi.top@gitea/zhengyi/halo-plugin-vidtor]
+  ```

doc/tips.md

@@ -1,27 +1,21 @@
 # Tips组件
 
-使用`tips:[type]`来启用，type支持`info`, `success`, `danger`, `warn`四种类型
+![Tips Module](assets/tips.png)
 
+Tips为用户提供了多彩的提示组件，支持五种类型：`default`、`danger`、`success`、`warn`、`info`。
+
+同时内容支持渲染HTML内容。
+
+## 语法
+
+```markdown
+tips:<type>
+<content>
 ```
-tips:info
 
-Here is success
-
----
-
-tips:success
-
-Here is success
-
----
+## 示例
 
+```markdown
 tips:danger
-
-Here is danger
-
----
-
-tips:warn
-
-Here is Warning
+This is a Danger type tips
 ```

src/constant.ts

@@ -4,6 +4,15 @@ export const RENDER_CLASS = "halo-render halo-render-wrapper"
 export const LANGUAGE_COLOR: {[key: string]: string} = {
     "Java": "#b07219",
     "JavaScript": "#f1e05a",
+    "TypeScript": "#3178c6",
+    "Go": "#00ADD8",
+    "Shell": "#89e051",
+    "C": "#555555",
+    "C++": "#f34b7d",
+    "C#": "#178600",
+    "Python": "#3572A5",
+    "Rust": "#3572A5",
+    "MATLAB": "#e16737",
     "Lua": "#000080",
     "Default": "#333333"
 }

src/less/render.less

@@ -2,33 +2,39 @@
 
 .halo-render {
  margin: 5px;
-}
 
-.invalid-type {
- color: red;
- font-size: 20px;
- text-align: center;
- padding: 10px;
- background-color: lightpink;
- border-radius: @border-radius;
+ .btn {
+  background-color: @info-color;
+  color: #ffffff;
+  padding: 5px 8px;
+  text-align: center;
+  border-radius: @border-radius;
+  font-size: 14px;
+  min-width: 80px;
+  text-decoration: none;
+ }
+
+ .error {
+  text-align: center;
+  color: @danger-color;
+ }
+
+ .invalid-type {
+  color: red;
+  font-size: 20px;
+  text-align: center;
+  padding: 10px;
+  background-color: lightpink;
+  border-radius: @border-radius;
+ }
+
+ .iconfont {
+  font-family: iconfont, sans-serif;
+  font-size: 16px;
+ }
 }
 
 .halo-render-wrapper {
   margin: 20px 15px;
 }
 
-.btn {
- background-color: @info-color;
- color: #ffffff;
- padding: 5px 8px;
- text-align: center;
- border-radius: @border-radius;
- font-size: 14px;
- min-width: 80px;
- text-decoration: none;
-}
-
-.error {
- text-align: center;
- color: @danger-color;
-}

src/provider/drive-provider.ts

@@ -29,7 +29,7 @@ export class DriveProvider implements Provider {
                 `<span>${PLATFORM_LIST[driveInfo.platform].name}</span>` +
                 `</div>`
             html += `<div class="drive-info"> ${platform} <div class="drive-title">${driveInfo.name}</div></div>`
-            html += `<div class="download-info"><a class="btn" href="${driveInfo.link}" target="_blank">下载资源</a>`
+            html += `<div class="download-info"><a class="btn" href="${driveInfo.link}" target="_blank"><span class="iconfont">&#xeb2c;</span>下载资源</a>`
             if (driveInfo.password) {
                 html += `<div class="drive-password">提取码: ${driveInfo.password}</div>`
             }

src/utils/git-processor/git-processor.ts

@@ -1,10 +1,12 @@
 import {getGitHubInfo} from "./github-utils";
 import {HALO_RENDER_CACHE_VERSION, LANGUAGE_COLOR, RENDER_CLASS} from "../../constant";
+import {getGiteeInfo} from "./gitee-utils";
 
 export const cache: {[key: string]: RepoInfo|-1} = {}
 
 export const utils: {[key: string]: (args: IGitArgs) => Promise<RepoInfo>} = {
-    "github": getGitHubInfo
+    "github": getGitHubInfo,
+    "gitee": getGiteeInfo
 }
 
 export const icons: {[key: string]: string} = {

src/utils/git-processor/gitee-utils.ts

@@ -0,0 +1,35 @@
+import {IGitArgs, RepoInfo} from "./git-processor";
+
+export async function getGiteeInfo(args: IGitArgs): Promise<RepoInfo> {
+    const info = await fetch(`https://gitee.com/api/v5/repos/${args.owner}/${args.repo}`)
+    const json = await info.json()
+    console.log(info)
+    if (info.status !== 200) return new Promise((resolve, reject) => {
+        reject({
+            code: info.status,
+            msg: json['message']
+        })
+    })
+    const topics: Array<string> = []
+    json["project_labels"].forEach((label: {
+        id: number;
+        name: string;
+        ident: string
+    }) => {
+        topics.push(label.name)
+    })
+    return {
+        platform: "gitee",
+        url: json["html_url"],
+        owner: json["owner"]["login"],
+        name: json["name"],
+        stars: json["stargazers_count"],
+        watchers: json["watchers_count"],
+        language: json["language"],
+        description: json["description"],
+        openIssues: json["open_issues_count"],
+        lastPush: json["pushed_at"],
+        forks: json["forks_count"],
+        topic: topics
+    }
+}