@riebeckite/plugin-ux 0.0.32 → 0.0.33
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 +7 -3
- package/README_ja.md +11 -7
- package/dist/index.d.ts +1 -3
- package/dist/index.js +2 -4
- package/dist/src/inject.d.ts +0 -9
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -8,6 +8,10 @@ and table-of-contents scroll-spy at runtime.
|
|
|
8
8
|
|
|
9
9
|
[日本語](./README_ja.md)
|
|
10
10
|
|
|
11
|
+
## Live example
|
|
12
|
+
|
|
13
|
+
A reading-progress bar runs along the top of this page, and a back-to-top button appears once you scroll. The **Contents** rail also follows the current section.
|
|
14
|
+
|
|
11
15
|
## Features
|
|
12
16
|
|
|
13
17
|
- **Reading progress bar** — a thin fixed bar (`.rb-ux__progress`) that follows
|
|
@@ -25,12 +29,12 @@ idempotent.
|
|
|
25
29
|
|
|
26
30
|
```ts
|
|
27
31
|
import { defineConfig } from "@riebeckite/core";
|
|
28
|
-
import {
|
|
32
|
+
import { ux } from "@riebeckite/plugin-ux";
|
|
29
33
|
|
|
30
34
|
export default defineConfig({
|
|
31
35
|
// ...
|
|
32
36
|
plugins: [
|
|
33
|
-
|
|
37
|
+
ux({
|
|
34
38
|
progress: true,
|
|
35
39
|
backToTop: true,
|
|
36
40
|
tocScrollSpy: true,
|
|
@@ -96,7 +100,7 @@ Styles ship as `@riebeckite/plugin-ux/style.css` and use the theme's
|
|
|
96
100
|
|
|
97
101
|
## Exports
|
|
98
102
|
|
|
99
|
-
- `
|
|
103
|
+
- `ux(options?)` / `ux(options?)` — plugin factory
|
|
100
104
|
- `initUx` — browser initializer
|
|
101
105
|
- Types: `UxOptions`, `UxResolvedConfig`
|
|
102
106
|
|
package/README_ja.md
CHANGED
|
@@ -6,10 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|
[English](./README.md)
|
|
8
8
|
|
|
9
|
+
## 実行例
|
|
10
|
+
|
|
11
|
+
このページの上部には読書プログレスバーが表示され、スクロールするとトップへ戻るボタンが現れます。**Contents** の目次も現在のセクションに追従します。
|
|
12
|
+
|
|
9
13
|
## できること
|
|
10
14
|
|
|
11
15
|
- **読み進捗バー**: 画面上部に固定した細いバー(`.rb-ux__progress`)が記事のスクロール量に追従します。
|
|
12
|
-
- **トップへ戻るボタン**: 一定量スクロールすると表示される button 要素(`.rb-ux__back-to-top`)。`aria-label` を持ち、スムーズスクロールで先頭へ戻ります。
|
|
16
|
+
- **トップへ戻るボタン**: 一定量スクロールすると表示される `button` 要素(`.rb-ux__back-to-top`)。`aria-label` を持ち、スムーズスクロールで先頭へ戻ります。
|
|
13
17
|
- **目次のスクロール連動**: 記事の目次コンテナ内の `a[href^="#"]` を `IntersectionObserver` で監視し、現在位置の見出しリンクに `.rb-ux__toc-active` を付けます。
|
|
14
18
|
|
|
15
19
|
いずれも対応する DOM が無いページでは何もしません。`initUx()` は何度呼んでも二重に初期化しません。
|
|
@@ -18,12 +22,12 @@
|
|
|
18
22
|
|
|
19
23
|
```ts
|
|
20
24
|
import { defineConfig } from "@riebeckite/core";
|
|
21
|
-
import {
|
|
25
|
+
import { ux } from "@riebeckite/plugin-ux";
|
|
22
26
|
|
|
23
27
|
export default defineConfig({
|
|
24
28
|
// ...
|
|
25
29
|
plugins: [
|
|
26
|
-
|
|
30
|
+
ux({
|
|
27
31
|
progress: true,
|
|
28
32
|
backToTop: true,
|
|
29
33
|
tocScrollSpy: true,
|
|
@@ -33,7 +37,7 @@ export default defineConfig({
|
|
|
33
37
|
});
|
|
34
38
|
```
|
|
35
39
|
|
|
36
|
-
`
|
|
40
|
+
`ux` は `ux` という別名でもエクスポートしています。
|
|
37
41
|
|
|
38
42
|
## オプション
|
|
39
43
|
|
|
@@ -48,7 +52,7 @@ export default defineConfig({
|
|
|
48
52
|
|
|
49
53
|
クライアント側の初期化コードは静的にバンドルされ、プラグインのオプションを直接受け取れません。そのためこのプラグインは、ビルド時に各記事 HTML の先頭へ不活性な JSON 設定要素を挿入します。これは実装用のデータであり、記事本文には表示しません。
|
|
50
54
|
|
|
51
|
-
`initUx()` はこの要素を読み取って設定を復元します。要素が無い場合は全機能が有効な既定値で動作します。挿入は `onPostProcessed` で行い、`onManifestCreated`
|
|
55
|
+
`initUx()` はこの要素を読み取って設定を復元します。要素が無い場合は全機能が有効な既定値で動作します。挿入は `onPostProcessed` で行い、`onManifestCreated` でも未挿入の記事エントリへ反映します。挿入はページごとに 1 回だけで、`data-rb-ux-config` を目印に重複挿入を防ぎます。
|
|
52
56
|
|
|
53
57
|
## 出力される HTML / CSS フック
|
|
54
58
|
|
|
@@ -56,7 +60,7 @@ export default defineConfig({
|
|
|
56
60
|
| --- | --- |
|
|
57
61
|
| `rb-ux__progress` | 進捗バーのトラック(`role="progressbar"`) |
|
|
58
62
|
| `rb-ux__progress-bar` | 進捗に応じて `scaleX` されるバー |
|
|
59
|
-
| `rb-ux__back-to-top` |
|
|
63
|
+
| `rb-ux__back-to-top` | トップへ戻るボタン |
|
|
60
64
|
| `rb-ux__back-to-top--visible` | 表示状態のとき付与 |
|
|
61
65
|
| `rb-ux__toc-active` | 現在位置の目次リンク |
|
|
62
66
|
|
|
@@ -78,7 +82,7 @@ export default defineConfig({
|
|
|
78
82
|
|
|
79
83
|
## 主なエクスポート
|
|
80
84
|
|
|
81
|
-
- `
|
|
85
|
+
- `ux(options?)` / `ux(options?)`: プラグインを作成する
|
|
82
86
|
- `initUx`: クライアント側の初期化
|
|
83
87
|
- 型: `UxOptions`、`UxResolvedConfig`
|
|
84
88
|
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,4 @@ export type { UxOptions, UxResolvedConfig } from "./src/options.js";
|
|
|
7
7
|
* None of the features change the rendered article markup, so the plugin
|
|
8
8
|
* only injects a JSON config element and registers a browser initializer.
|
|
9
9
|
*/
|
|
10
|
-
export declare function
|
|
11
|
-
/** Alias kept for naming symmetry with the other plugin factories. */
|
|
12
|
-
export declare const ux: typeof uxPlugin;
|
|
10
|
+
export declare function ux(options?: UxOptions): import("@riebeckite/core").RiebeckitePlugin<UxOptions>;
|
package/dist/index.js
CHANGED
|
@@ -43,7 +43,7 @@ function injectUxConfig(html, config) {
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
// index.ts
|
|
46
|
-
function
|
|
46
|
+
function ux(options = {}) {
|
|
47
47
|
const config = resolveUxConfig(options);
|
|
48
48
|
return definePlugin({
|
|
49
49
|
name: "ux",
|
|
@@ -69,7 +69,6 @@ function uxPlugin(options = {}) {
|
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
|
-
var ux = uxPlugin;
|
|
73
72
|
function validateUxOptions(options) {
|
|
74
73
|
if (!options) return [];
|
|
75
74
|
const issues = [];
|
|
@@ -87,6 +86,5 @@ function validateUxOptions(options) {
|
|
|
87
86
|
return issues;
|
|
88
87
|
}
|
|
89
88
|
export {
|
|
90
|
-
ux
|
|
91
|
-
uxPlugin
|
|
89
|
+
ux
|
|
92
90
|
};
|
package/dist/src/inject.d.ts
CHANGED
|
@@ -1,13 +1,4 @@
|
|
|
1
1
|
import { type UxResolvedConfig } from "./options.js";
|
|
2
|
-
/**
|
|
3
|
-
* Serializes the resolved options into an inert JSON script element.
|
|
4
|
-
*
|
|
5
|
-
* Client initializers are static and receive no plugin options, so the build
|
|
6
|
-
* injects this element into the article HTML and reads it back at runtime.
|
|
7
|
-
* `escapeScriptJson` neutralizes `<`, `>`, `&`, U+2028 and U+2029 so labels
|
|
8
|
-
* can never terminate the script element.
|
|
9
|
-
*/
|
|
10
|
-
export declare function renderUxConfigElement(config: UxResolvedConfig): string;
|
|
11
2
|
/**
|
|
12
3
|
* Prepends the configuration element exactly once.
|
|
13
4
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/plugin-ux",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.33",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"./style.css": "./style.css"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@riebeckite/core": "0.0.
|
|
24
|
+
"@riebeckite/core": "0.0.33"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|