astro-openmoji 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -3
- package/dist/index.js +1 -1
- package/dist/rehype.js +1 -1
- package/dist/{transform-CnWUZewM.js → transform-CcxaX6qn.js} +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
# astro-openmoji
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/astro-openmoji)
|
|
4
|
+
[](https://github.com/xjn2005/astro-openmoji/actions/workflows/publish.yml)
|
|
5
|
+
|
|
3
6
|
在 Astro 构建 Markdown 时，把源码中的原生 Unicode Emoji 转换为本地 [OpenMoji](https://openmoji.org/) SVG。
|
|
4
7
|
|
|
5
8
|
- Markdown 源文件保持不变
|
|
@@ -39,13 +42,13 @@ export default defineConfig({
|
|
|
39
42
|
```html
|
|
40
43
|
<p>
|
|
41
44
|
今天学 CMake 学得有些
|
|
42
|
-
<img class="openmoji" src="/openmoji/1F635-200D-1F4AB.svg" alt="😵💫" style="width:
|
|
45
|
+
<img class="openmoji" src="/openmoji/1F635-200D-1F4AB.svg" alt="😵💫" style="width:var(--openmoji-size,1.25em);height:var(--openmoji-size,1.25em);vertical-align:var(--openmoji-vertical-align,-0.22em);display:inline-block">
|
|
43
46
|
，但总算跑通了
|
|
44
|
-
<img class="openmoji" src="/openmoji/1F680.svg" alt="🚀" style="width:
|
|
47
|
+
<img class="openmoji" src="/openmoji/1F680.svg" alt="🚀" style="width:var(--openmoji-size,1.25em);height:var(--openmoji-size,1.25em);vertical-align:var(--openmoji-vertical-align,-0.22em);display:inline-block">
|
|
45
48
|
</p>
|
|
46
49
|
```
|
|
47
50
|
|
|
48
|
-
`alt` 始终保留原 Emoji
|
|
51
|
+
`alt` 始终保留原 Emoji。内联样式默认以 `1.25em` 渲染图片并对齐文字基线；尺寸仍跟随当前字体缩放，不会引入客户端 JavaScript。
|
|
49
52
|
|
|
50
53
|
## 配置项
|
|
51
54
|
|
|
@@ -63,6 +66,24 @@ openmoji({
|
|
|
63
66
|
| `assetDir` | `string` | `"openmoji"` | 输出目录和公共 URL 路径，可使用 `emoji/assets` 这样的相对路径 |
|
|
64
67
|
| `className` | `string` | `"openmoji"` | 生成的 `<img>` 使用的单个 CSS 类名 |
|
|
65
68
|
|
|
69
|
+
### 尺寸与对齐
|
|
70
|
+
|
|
71
|
+
OpenMoji 图形在 SVG 画布内通常带有留白，因此插件默认使用 `1.25em`，让可见图形更接近原生 Emoji 的视觉高度。可以通过 CSS 自定义属性调整生成图片，不需要使用 `!important`：
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
.openmoji {
|
|
75
|
+
--openmoji-size: 1.1em;
|
|
76
|
+
--openmoji-vertical-align: -0.15em;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
| CSS 自定义属性 | 默认值 | 说明 |
|
|
81
|
+
| --- | --- | --- |
|
|
82
|
+
| `--openmoji-size` | `1.25em` | 同时控制生成图片的宽度和高度 |
|
|
83
|
+
| `--openmoji-vertical-align` | `-0.22em` | 控制图片相对文字基线的垂直位置 |
|
|
84
|
+
|
|
85
|
+
如果需要恢复旧版外观，可设置 `--openmoji-size: 1em` 和 `--openmoji-vertical-align: -0.125em`。使用自定义 `className` 时，将这些变量设置在对应类名上即可。
|
|
86
|
+
|
|
66
87
|
Astro 的 `base` 会自动加入图片 URL。例如 `base: "/blog"` 时，图片地址为 `/blog/openmoji/1F680.svg`，资源仍输出到 `dist/openmoji/`。
|
|
67
88
|
|
|
68
89
|
## 转换范围
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as openmojiAssetRoot, n as normalizeBase, r as resolveOptions, t as transformOpenmojiTree } from "./transform-
|
|
1
|
+
import { i as openmojiAssetRoot, n as normalizeBase, r as resolveOptions, t as transformOpenmojiTree } from "./transform-CcxaX6qn.js";
|
|
2
2
|
import { copyFile, mkdir, readFile } from "node:fs/promises";
|
|
3
3
|
import { isUnifiedProcessor, unified } from "@astrojs/markdown-remark";
|
|
4
4
|
// src/index.ts
|
package/dist/rehype.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as openmojiAssetRoot, n as normalizeBase, r as resolveOptions, t as transformOpenmojiTree } from "./transform-
|
|
1
|
+
import { i as openmojiAssetRoot, n as normalizeBase, r as resolveOptions, t as transformOpenmojiTree } from "./transform-CcxaX6qn.js";
|
|
2
2
|
// src/rehype.ts
|
|
3
3
|
const rehypeOpenmoji = (options = {}) => {
|
|
4
4
|
const resolved = resolveOptions(options);
|
|
@@ -47,7 +47,7 @@ function assetUrl(base, assetDir, filename) {
|
|
|
47
47
|
}
|
|
48
48
|
// src/transform.ts
|
|
49
49
|
const skippedElements = /* @__PURE__ */ new Set(["code", "pre"]);
|
|
50
|
-
const imageStyle = "width:
|
|
50
|
+
const imageStyle = "width:var(--openmoji-size,1.25em);height:var(--openmoji-size,1.25em);vertical-align:var(--openmoji-vertical-align,-0.22em);display:inline-block";
|
|
51
51
|
function transformOpenmojiTree(tree, options) {
|
|
52
52
|
transformChildren(tree, options);
|
|
53
53
|
}
|