doc: add badges.

sixons · Dec 3, 2022 · 51c4d2a · 51c4d2a
1 parent ca80355
commit 51c4d2a
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 14 deletions.
diff --git a/docs/electron.md b/docs/electron.md
@@ -1,7 +1,13 @@
 Electron 备忘清单
 ====
 
-此快速参考备忘单提供了 Electron v21 API 说明和使用示例。
+[![NPM version](https://img.shields.io/npm/v/electron.svg?style=flat)](https://www.npmjs.com/package/electron)
+[![Downloads](https://img.shields.io/npm/dm/electron.svg?style=flat)](https://www.npmjs.com/package/electron)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/electron/electron)](https://github.com/electron/electron/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/electron/electron)
+
+此快速参考备忘单提供了 Electron v21 API 说明和使用示例
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ----

diff --git a/docs/htmx.md b/docs/htmx.md
@@ -1,7 +1,13 @@
 \</> htmx 备忘清单
 ===
 
+[![NPM version](https://img.shields.io/npm/v/htmx.org.svg?style=flat)](https://npmjs.org/package/htmx.org)
+[![Downloads](https://img.shields.io/npm/dm/htmx.org.svg?style=flat)](https://www.npmjs.com/package/htmx.org)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/bigskysoftware/htmx)](https://github.com/bigskysoftware/htmx/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/bigskysoftware/htmx)
+
 适合初学者的综合 [htmx](https://htmx.org/) 备忘清单
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ---
@@ -17,17 +23,12 @@
   点击我
 </button>
 ```
+<!--rehype:className=wrap-text-->
 
 `hx-post` 和 `hx-swap` 属性告诉 `htmx`：
 
 > 当用户单击此按钮时，向 `/clicked` 发出 `AJAX` 请求，并用响应替换整个按钮
 
----
-
-[![NPM version](https://img.shields.io/npm/v/htmx.org.svg?style=flat)](https://npmjs.org/package/htmx.org)
-[![Downloads](https://img.shields.io/npm/dm/htmx.org.svg?style=flat)](https://www.npmjs.com/package/htmx.org)
-[![Repo Dependents](https://badgen.net/github/dependents-repo/bigskysoftware/htmx)](https://github.com/bigskysoftware/htmx/network/dependents)
-
 ```bash
 $ npm install htmx.org
 ```

diff --git a/docs/lessjs.md b/docs/lessjs.md
@@ -1,7 +1,12 @@
 Less 备忘清单
 ===
 
-本备忘单旨在快速理解 [Less](https://github.com/less/less.js) 所涉及的主要概念，显示了它的常用方法使用清单。
+[![NPM version](https://img.shields.io/npm/v/less.svg?style=flat)](https://npmjs.org/package/less)
+[![Downloads](https://img.shields.io/npm/dm/less.svg?style=flat)](https://www.npmjs.com/package/less)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/less/less.js)
+
+本备忘单旨在快速理解 [Less](https://github.com/less/less.js) 所涉及的主要概念，显示了它的常用方法使用清单
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ---

diff --git a/docs/nextjs.md b/docs/nextjs.md
@@ -1,7 +1,13 @@
 Next.js 备忘清单
 ===
 
-这是一份快速参考备忘单，包含 Next.js 的 API 参考列表和一些示例
+[![NPM version](https://img.shields.io/npm/v/next.svg?style=flat)](https://www.npmjs.com/package/next)
+[![Downloads](https://img.shields.io/npm/dm/next.svg?style=flat)](https://www.npmjs.com/package/next)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/vercel/next.js)](https://github.com/vercel/next.js/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/vercel/next.js)
+
+这是一份快速参考备忘单，包含 [Next.js](https://nextjs.org/) 的 API 参考列表和一些示例
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ----

diff --git a/docs/react-native.md b/docs/react-native.md
@@ -1,7 +1,13 @@
 React Native 备忘清单
 ===
 
+[![NPM version](https://img.shields.io/npm/v/react-native.svg?style=flat)](https://npmjs.org/package/react-native)
+[![Downloads](https://img.shields.io/npm/dm/react-native.svg?style=flat)](https://www.npmjs.com/package/react-native)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/facebook/react-native)](https://github.com/facebook/react-native/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/facebook/react-native)
+
 适合初学者的综合 [React Native](https://reactnative.dev/) 备忘清单，在开始 [React Native](https://reactnative.dev/) 之前需要先掌握 [react](./react.md) 库
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ---

diff --git a/docs/react.md b/docs/react.md
@@ -1,14 +1,20 @@
 React 备忘清单
 ===
 
+[![NPM version](https://img.shields.io/npm/v/react.svg?style=flat)](https://npmjs.org/package/react)
+[![Downloads](https://img.shields.io/npm/dm/react.svg?style=flat)](https://www.npmjs.com/package/react)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/facebook/react)](https://github.com/facebook/react/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/facebook/react)
+
 适合初学者的综合 React 备忘清单。
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ----
 
 ### 介绍
 
-React 是一个用于构建用户界面的 JavaScript 库。
+React 是一个用于构建用户界面的 JavaScript 库
 
 - [React 官方文档](https://reactjs.org/) _(reactjs.org)_
 - [Styled Components 备忘清单](./styled-components.md) _(jaywcjlove.github.io)_

diff --git a/docs/sass.md b/docs/sass.md
@@ -1,7 +1,13 @@
 Sass
 ===
 
-这是一份快速参考备忘单，列出了 [SASS](https://sass-lang.com) 最有用的功能。
+[![NPM version](https://img.shields.io/npm/v/sass.svg?style=flat)](https://www.npmjs.com/package/sass)
+[![Downloads](https://img.shields.io/npm/dm/sass.svg?style=flat)](https://www.npmjs.com/package/sass)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/sass/dart-sass)](https://github.com/sass/dart-sass/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/sass/dart-sass)
+
+这是一份快速参考备忘单，列出了 [SASS](https://sass-lang.com) 最有用的功能
+<!--rehype:style=padding-top: 12px;-->
 
 Sass 基础
 --------

diff --git a/docs/styled-components.md b/docs/styled-components.md
@@ -1,7 +1,13 @@
 Styled Components 备忘清单
 ====
 
-此快速参考备忘单提供了使用 CSS in JS 工具的各种方法。
+[![NPM version](https://img.shields.io/npm/v/styled-components.svg?style=flat)](https://npmjs.org/package/styled-components)
+[![Downloads](https://img.shields.io/npm/dm/styled-components.svg?style=flat)](https://www.npmjs.com/package/styled-components)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/styled-components/styled-components)](https://github.com/styled-components/styled-components/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/styled-components/styled-components)
+
+此快速参考备忘单提供了使用 CSS in JS 工具的各种方法
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ----

diff --git a/docs/stylus.md b/docs/stylus.md
@@ -1,7 +1,13 @@
 Stylus 备忘清单
 ===
 
-本备忘单旨在快速理解 [stylus](https://github.com/stylus/stylus) 所涉及的主要概念，显示了它的常用方法使用清单。
+[![NPM version](https://img.shields.io/npm/v/stylus.svg?style=flat)](https://npmjs.org/package/stylus)
+[![Downloads](https://img.shields.io/npm/dm/stylus.svg?style=flat)](https://www.npmjs.com/package/stylus)
+[![Repo Dependents](https://badgen.net/github/dependents-repo/stylus/stylus)](https://github.com/stylus/stylus/network/dependents)
+[![Github repo](https://badgen.net/badge/icon/Github?icon=github&label)](https://github.com/stylus/stylus)
+
+本备忘单旨在快速理解 [stylus](https://github.com/stylus/stylus) 所涉及的主要概念，显示了它的常用方法使用清单
+<!--rehype:style=padding-top: 12px;-->
 
 入门
 ---

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
-    "refs-cli": "^1.2.3"
+    "refs-cli": "^1.2.5"
   },
   "engines": {
     "node": ">=16.0.0"