Create FUNDING.yml12

.github/FUNDING.yml12

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

CONTRIBUTING.md

@@ -15,7 +15,7 @@ PageSpy 主要由三个仓库组成：
 - 服务器端代码在 [HuolalaTech/page-spy-api][page-spy-api] 仓库维护；
 - 需要在客户端引入的 SDK 代码在 [HuolalaTech/page-spy][page-spy-sdk] 仓库维护；
 
-提供服务的方式是托管在 Github Package 中的 Docker 镜像（推荐）、[NPM package][npm-package] 或者使用 [Release][github-release] 托管的可执行文件。
+提供服务的方式是托管在 GitHub Package 中的 Docker 镜像（推荐）、[NPM package][npm-package] 或者使用 [Release][github-release] 托管的可执行文件。
 
 ## Repo Setup
 

CONTRIBUTING_EN.md

@@ -15,7 +15,7 @@ PageSpy consist of three repositories：
 - Server: maintained in [HuolalaTech/page-spy-api][page-spy-api] repository;
 - SDK which be injected in client: maintained in [HuolalaTech/page-spy][page-spy-sdk] repository;
 
-PageSpy is served as a Docker image hosted on Github Package (recommended) / [NPM package][npm-package] or as a binary executable file hosted on the [Release][github-release] page.
+PageSpy is served as a Docker image hosted on GitHub Package (recommended) / [NPM package][npm-package] or as a binary executable file hosted on the [Release][github-release] page.
 
 ## Repo Setup
 

README.md

@@ -1,20 +1,48 @@
 [page-spy]: https://github.com/HuolalaTech/page-spy.git 'page-spy'
+[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
+[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
+[release-img]: https://img.shields.io/github/package-json/v/HuolalaTech/page-spy-web/release?label=Release
+[release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json
+[download-img]: https://img.shields.io/npm/dw/%40huolala-tech/page-spy-api
+[download-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-api
+[sdk-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy?label=SDK%20version
+[sdk-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy
+[sdk-build-img]: https://img.shields.io/github/actions/workflow/status/HuolalaTech/page-spy/coveralls.yml?logo=github&label=build
+[sdk-build-url]: https://github.com/HuolalaTech/page-spy/actions/workflows/coveralls.yml
+[sdk-coveralls-img]: https://img.shields.io/coverallsCoverage/github/HuolalaTech/page-spy?label=coverage
+[sdk-coveralls-url]: https://coveralls.io/github/HuolalaTech/page-spy?branch=main
+[sdk-min-img]: https://img.shields.io/bundlephobia/min/@huolala-tech/page-spy?label=minfied%20size
+[sdk-min-url]: https://unpkg.com/browse/@huolala-tech/page-spy/dist/index.min.js
+[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API%20version
+[api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags
+[api-go-img]: https://img.shields.io/github/go-mod/go-version/HuolalaTech/page-spy-api?label=go
+[api-go-url]: https://github.com/HuolalaTech/page-spy-api/blob/master/go.mod
+
+<div align="center">
+  <img src="./logo.svg" height="100" />
+
+  <h1>Page Spy</h1>
+
+[![Release][release-img]][release-url]
+[![license][license-img]][license-url] <br />
+[![NPM SDK][sdk-ver-img]][sdk-ver-url]
+[![Build Status][sdk-build-img]][sdk-build-url]
+[![Coverage Status][sdk-coveralls-img]][sdk-coveralls-url]
+[![SDK size][sdk-min-img]][sdk-min-url] <br />
+[![API Version][api-ver-img]][api-ver-url]
+[![Go Version][api-go-img]][api-go-url]
 
 [English](./README_EN.md) | 中文
 
-<p align="center">
-  <img src="./logo.svg" height="120" />
-</p>
-
-<h1 align="center">Page Spy</h1>
+</div>
 
 ## 介绍
 
 **PageSpy** 是一款用来调试远程 Web 项目的工具。
 
 基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。
 
-[![主页](./.github/assets/home.jpg)](https://huolalatech.github.io/page-spy-web)
+![主页](./.github/assets/dashboard.png)
 
 ## 何时使用？
 
@@ -54,15 +82,7 @@ $ yarn global add @huolala-tech/page-spy-api
 $ npm install -g @huolala-tech/page-spy-api
 ```
 
-安装完成之后你可以在命令行中直接执行 `page-spy-api` 启动服务。该命令会在运行目录下面生成配置文件 config.json，修改配置文件可以修改运行端口：
-
-```json
-{
-  "port": "6752"
-}
-```
-
-部署完成后浏览器访问 `<host>:6752`，页面顶部会出现 `接入 SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。
+安装完成之后你可以在命令行中直接执行 `page-spy-api` 启动服务。部署完成后浏览器访问 `<host>:6752`，页面顶部会出现 `接入 SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。
 
 ## 技术支持
 

README_EN.md

@@ -1,18 +1,48 @@
 [page-spy]: https://github.com/HuolalaTech/page-spy.git 'page-spy'
+[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
+[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
+[release-img]: https://img.shields.io/github/package-json/v/HuolalaTech/page-spy-web/release?label=Release
+[release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json
+[download-img]: https://img.shields.io/npm/dw/%40huolala-tech/page-spy-api
+[download-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-api
+[sdk-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy?label=SDK%20version
+[sdk-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy
+[sdk-build-img]: https://img.shields.io/github/actions/workflow/status/HuolalaTech/page-spy/coveralls.yml?logo=github&label=build
+[sdk-build-url]: https://github.com/HuolalaTech/page-spy/actions/workflows/coveralls.yml
+[sdk-coveralls-img]: https://img.shields.io/coverallsCoverage/github/HuolalaTech/page-spy?label=coverage
+[sdk-coveralls-url]: https://coveralls.io/github/HuolalaTech/page-spy?branch=main
+[sdk-min-img]: https://img.shields.io/bundlephobia/min/@huolala-tech/page-spy?label=minfied%20size
+[sdk-min-url]: https://unpkg.com/browse/@huolala-tech/page-spy/dist/index.min.js
+[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API%20version
+[api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags
+[api-go-img]: https://img.shields.io/github/go-mod/go-version/HuolalaTech/page-spy-api?label=go
+[api-go-url]: https://github.com/HuolalaTech/page-spy-api/blob/master/go.mod
+[telegram-img]: https://img.shields.io/badge/Join-Telegram-blue?logo=telegram
+[telegram-url]: https://t.me/pagespy
+
+<div align="center">
+  <img src="./logo.svg" height="100" />
+
+  <h1>Page Spy</h1>
+
+[![Release][release-img]][release-url]
+[![license][license-img]][license-url] <br />
+[![NPM SDK][sdk-ver-img]][sdk-ver-url]
+[![Build Status][sdk-build-img]][sdk-build-url]
+[![Coverage Status][sdk-coveralls-img]][sdk-coveralls-url]
+[![SDK size][sdk-min-img]][sdk-min-url] <br />
+[![API Version][api-ver-img]][api-ver-url]
+[![Go Version][api-go-img]][api-go-url]
 
 English | [中文](./README.md)
 
-<p align="center">
-  <img src="./logo.svg" height="120" />
-</p>
-
-<h1 align="center">Page Spy</h1>
+</div>
 
 **PageSpy** is a remote debugging tool for web project.
 
 Based on encapsulation of native web APIs, it filters and transforms the parameters of native methods when called, and converts into messages with specific format for consumption by the debugger client. The debugger presents ui in an interactive devtools-like for easy viewing after receives the message data.
 
-[![Home](./.github/assets/home-en.jpg)](https://huolalatech.github.io/page-spy-web)
+![Home](./.github/assets/dashboard-en.png)
 
 ## When should I use?
 
@@ -52,16 +82,7 @@ $ yarn global add @huolala-tech/page-spy-api
 $ npm install -g @huolala-tech/page-spy-api
 ```
 
-After the download is complete, you can directly execute `page-spy-api` in the command line to start the service.
-It will also generate a configuration file called config.json in the running directory, and modifying this file allows you to change the running port.
-
-```json
-{
-  "port": "6752"
-}
-```
-
-Once the deployment is successful, you can open the browser and access `<host>:6752`, the `Inject SDK` menu will be at the top, and you can find how to configure and integrate in the business project by click the menu.
+After the download is complete, you can directly execute `page-spy-api` in the command line to start the service. Once the deployment is successful, you can open the browser and access `<host>:6752`, the `Inject SDK` menu will be at the top, and you can find how to configure and integrate in the business project by click the menu.
 
 ## Roadmap
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huolala-tech/page-spy-web",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
   "license": "MIT",

src/assets/locales/en.json

@@ -34,7 +34,7 @@
     "title": "All-In-One<br />Remote Debugging Tool",
     "desc": "Debug remotely and easily with a range of features like chrome devtool.",
     "goStart": "Start debugging",
-    "goGithub": "View on Github"
+    "goGithub": "View on GitHub"
   },
   "intro": {
     "does": "What PageSpy does",

src/assets/locales/ja.json

@@ -34,7 +34,7 @@
     "title": "多機能<br />リモートデバッグツール",
     "desc": "Google Chromeのコンソールのように簡単にリモートデバッグを開始します。",
     "goStart": "デバッグを開始",
-    "goGithub": "Github リポジトリ"
+    "goGithub": "GitHub リポジトリ"
   },
   "intro": {
     "does": "PageSpyでできること",

src/assets/locales/ko.json

@@ -34,7 +34,7 @@
     "title": "다기능<br />원격 디버깅 도구",
     "desc": "Google Chrome 콘솔을 사용하는 것처럼 간단히 원격 디버깅을 시작하세요.",
     "goStart": "디버깅 시작",
-    "goGithub": "Github 저장소"
+    "goGithub": "GitHub 저장소"
   },
   "intro": {
     "does": "PageSpy가 할 수 있는 일",

src/assets/locales/zh.json

@@ -34,7 +34,7 @@
     "title": "多功能<br />远程调试工具",
     "desc": "像使用谷歌浏览器的控制台一样简单地开始远程调试。",
     "goStart": "开始调试",
-    "goGithub": "Github 仓库"
+    "goGithub": "GitHub 仓库"
   },
   "intro": {
     "does": "PageSpy 可以做到",

src/pages/Docs/md/usage-en.mdx

@@ -86,5 +86,5 @@ configure and integrate in the business project by click the menu.
 Besides of above, you will get the realtime notification when there have new data or data changed.
 
 <p style={{ marginTop: 28 }}>
-  Welcome to submit PR or issue on <a href={githubUrl}>Github</a>.
+  Welcome to submit PR or issue on <a href={githubUrl}>GitHub</a>.
 </p>

src/pages/Docs/md/usage-ja.mdx

@@ -69,5 +69,5 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 さらに、新しいデータやデータが変更された場合、リアルタイム通知を受け取ります。
 
 <p style={{ marginTop: 28 }}>
-  <a href={githubUrl}>Github</a> でPRまたはissueを提出いただければ幸いです。
+  <a href={githubUrl}>GitHub</a> でPRまたはissueを提出いただければ幸いです。
 </p>

src/pages/Docs/md/usage-ko.mdx

@@ -66,5 +66,5 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 또한, 새로운 데이터 또는 데이터가 변경되면 실시간 알림을받습니다.
 
 <p style={{ marginTop: 28 }}>
-  <a href={githubUrl}>Github</a> 에서 PR 또는 이슈를 제출 해 주시기 바랍니다.
+  <a href={githubUrl}>GitHub</a> 에서 PR 또는 이슈를 제출 해 주시기 바랍니다.
 </p>

src/pages/Docs/md/usage-zh.mdx

@@ -68,5 +68,5 @@ export const githubUrl = import.meta.env.VITE_GITHUB_REPO;
 除此之外，当有新的数据或者数据发生变化的时候会实时的收到通知。
 
 <p style={{ marginTop: 28 }}>
-  欢迎在 <a href={githubUrl}>Github</a> 上提交 PR 或 issue。
+  欢迎在 <a href={githubUrl}>GitHub</a> 上提交 PR 或 issue。
 </p>

src/pages/Layouts/NavMenu/index.tsx

@@ -121,7 +121,7 @@ export const NavMenuOnPc = () => {
       >
         <Space>
           <GithubOutlined style={{ fontSize: 16 }} />
-          <span>Github</span>
+          <span>GitHub</span>
         </Space>
       </a>
     </div>
@@ -232,12 +232,12 @@ export const NavMenuOnMobile = () => {
                 <span>{t('common.lang')}</span>
               </Space>
             </div>
-            {/* Github */}
+            {/* GitHub */}
             <div className="menu-item">
               <a href={import.meta.env.VITE_GITHUB_REPO} target="_blank">
                 <Space>
                   <GithubOutlined style={{ fontSize: 16 }} />
-                  <span>Github</span>
+                  <span>GitHub</span>
                 </Space>
               </a>
             </div>