@riebeckite/plugin-hover-preview 0.0.11 → 0.0.13
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 +79 -79
- package/README_ja.md +62 -62
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
# @riebeckite/plugin-hover-preview
|
|
2
|
-
|
|
3
|
-
Quartz/Obsidian-Publish style popover previews for internal links. Hovering or
|
|
4
|
-
focusing a note link shows its title and a short excerpt without leaving the
|
|
5
|
-
page.
|
|
6
|
-
|
|
7
|
-
[日本語](./README_ja.md)
|
|
8
|
-
|
|
9
|
-
## Overview
|
|
10
|
-
|
|
11
|
-
At build time `hoverPreviewPlugin()` builds a preview index from the content
|
|
12
|
-
manifest (`permalink` → `{ title, excerpt, slug }`) and injects it once into
|
|
13
|
-
every page that contains internal links as an inert
|
|
14
|
-
`<script type="application/json" data-rb-hover-preview>` block. The client
|
|
15
|
-
entry `initHoverPreview` reads that payload and attaches hover, focus, and touch
|
|
16
|
-
handlers to the matching links.
|
|
17
|
-
|
|
18
|
-
The excerpt is plain text extracted from the rendered HTML: tags are stripped,
|
|
19
|
-
whitespace is collapsed, and the result is truncated to `excerptLength`
|
|
20
|
-
characters. Pages without internal links are left untouched, and the payload is
|
|
21
|
-
bounded by `maxEntries` when set.
|
|
22
|
-
|
|
23
|
-
## Usage
|
|
24
|
-
|
|
25
|
-
```ts
|
|
26
|
-
import { defineConfig } from "@riebeckite/core";
|
|
27
|
-
import { hoverPreviewPlugin } from "@riebeckite/plugin-hover-preview";
|
|
28
|
-
|
|
29
|
-
export default defineConfig({
|
|
30
|
-
// ...
|
|
31
|
-
plugins: [hoverPreviewPlugin()],
|
|
32
|
-
});
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
`hoverPreviewPlugin()` registers the style asset, the client entry, and the
|
|
36
|
-
build-time payload injection. `hoverPreview` is an alias of the same factory.
|
|
37
|
-
|
|
38
|
-
The client entry takes no arguments. Behavior is carried by data attributes on
|
|
39
|
-
the payload script, so the plugin works even when the client initializer is
|
|
40
|
-
called without options.
|
|
41
|
-
|
|
42
|
-
## Options
|
|
43
|
-
|
|
44
|
-
| Option | Default | Description |
|
|
45
|
-
| --------------- | -------------- | ------------------------------------------------------ |
|
|
46
|
-
| `delay` | `120` | Milliseconds before the popover appears. |
|
|
47
|
-
| `excerptLength` | `160` | Maximum excerpt length in characters. |
|
|
48
|
-
| `maxEntries` | unset | Upper bound on entries stored in the page payload. |
|
|
49
|
-
| `selector` | `a[href^="/"]` | Selector for internal links that receive a preview. |
|
|
50
|
-
| `className` | `rb-hover-preview` | Base class of the popover element. |
|
|
51
|
-
| `includeTitles` | `true` | Whether the popover shows the target entry title. |
|
|
52
|
-
|
|
53
|
-
```ts
|
|
54
|
-
hoverPreviewPlugin({
|
|
55
|
-
delay: 200,
|
|
56
|
-
excerptLength: 120,
|
|
57
|
-
maxEntries: 200,
|
|
58
|
-
selector: 'a[href^="/notes/"]',
|
|
59
|
-
});
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## API
|
|
63
|
-
|
|
64
|
-
- `hoverPreviewPlugin(options?)` — plugin factory
|
|
65
|
-
- `hoverPreview` — alias of `hoverPreviewPlugin`
|
|
66
|
-
- `resolveHoverPreviewOptions(options?)` — applies defaults and returns a
|
|
67
|
-
`ResolvedHoverPreviewOptions`
|
|
68
|
-
- `buildPreviewIndex(entries, options)` — builds a `HoverPreviewIndex`
|
|
69
|
-
(`permalink` → `{ title, excerpt, slug }`)
|
|
70
|
-
- `htmlToPlainText(html)` / `createExcerpt(html, length)` — excerpt helpers
|
|
71
|
-
- `initHoverPreview()` — browser initializer (also via
|
|
72
|
-
`@riebeckite/plugin-hover-preview/client`)
|
|
73
|
-
- Constants: `HOVER_PREVIEW_ATTRIBUTE`, `HOVER_PREVIEW_SCRIPT_ID`
|
|
74
|
-
- Types: `HoverPreviewOptions`, `ResolvedHoverPreviewOptions`,
|
|
75
|
-
`HoverPreviewEntry`, `HoverPreviewIndex`
|
|
76
|
-
|
|
77
|
-
## See also
|
|
78
|
-
|
|
79
|
-
- [Plugin guide](../../../docs/en/plugin-
|
|
1
|
+
# @riebeckite/plugin-hover-preview
|
|
2
|
+
|
|
3
|
+
Quartz/Obsidian-Publish style popover previews for internal links. Hovering or
|
|
4
|
+
focusing a note link shows its title and a short excerpt without leaving the
|
|
5
|
+
page.
|
|
6
|
+
|
|
7
|
+
[日本語](./README_ja.md)
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
At build time `hoverPreviewPlugin()` builds a preview index from the content
|
|
12
|
+
manifest (`permalink` → `{ title, excerpt, slug }`) and injects it once into
|
|
13
|
+
every page that contains internal links as an inert
|
|
14
|
+
`<script type="application/json" data-rb-hover-preview>` block. The client
|
|
15
|
+
entry `initHoverPreview` reads that payload and attaches hover, focus, and touch
|
|
16
|
+
handlers to the matching links.
|
|
17
|
+
|
|
18
|
+
The excerpt is plain text extracted from the rendered HTML: tags are stripped,
|
|
19
|
+
whitespace is collapsed, and the result is truncated to `excerptLength`
|
|
20
|
+
characters. Pages without internal links are left untouched, and the payload is
|
|
21
|
+
bounded by `maxEntries` when set.
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import { defineConfig } from "@riebeckite/core";
|
|
27
|
+
import { hoverPreviewPlugin } from "@riebeckite/plugin-hover-preview";
|
|
28
|
+
|
|
29
|
+
export default defineConfig({
|
|
30
|
+
// ...
|
|
31
|
+
plugins: [hoverPreviewPlugin()],
|
|
32
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
`hoverPreviewPlugin()` registers the style asset, the client entry, and the
|
|
36
|
+
build-time payload injection. `hoverPreview` is an alias of the same factory.
|
|
37
|
+
|
|
38
|
+
The client entry takes no arguments. Behavior is carried by data attributes on
|
|
39
|
+
the payload script, so the plugin works even when the client initializer is
|
|
40
|
+
called without options.
|
|
41
|
+
|
|
42
|
+
## Options
|
|
43
|
+
|
|
44
|
+
| Option | Default | Description |
|
|
45
|
+
| --------------- | -------------- | ------------------------------------------------------ |
|
|
46
|
+
| `delay` | `120` | Milliseconds before the popover appears. |
|
|
47
|
+
| `excerptLength` | `160` | Maximum excerpt length in characters. |
|
|
48
|
+
| `maxEntries` | unset | Upper bound on entries stored in the page payload. |
|
|
49
|
+
| `selector` | `a[href^="/"]` | Selector for internal links that receive a preview. |
|
|
50
|
+
| `className` | `rb-hover-preview` | Base class of the popover element. |
|
|
51
|
+
| `includeTitles` | `true` | Whether the popover shows the target entry title. |
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
hoverPreviewPlugin({
|
|
55
|
+
delay: 200,
|
|
56
|
+
excerptLength: 120,
|
|
57
|
+
maxEntries: 200,
|
|
58
|
+
selector: 'a[href^="/notes/"]',
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## API
|
|
63
|
+
|
|
64
|
+
- `hoverPreviewPlugin(options?)` — plugin factory
|
|
65
|
+
- `hoverPreview` — alias of `hoverPreviewPlugin`
|
|
66
|
+
- `resolveHoverPreviewOptions(options?)` — applies defaults and returns a
|
|
67
|
+
`ResolvedHoverPreviewOptions`
|
|
68
|
+
- `buildPreviewIndex(entries, options)` — builds a `HoverPreviewIndex`
|
|
69
|
+
(`permalink` → `{ title, excerpt, slug }`)
|
|
70
|
+
- `htmlToPlainText(html)` / `createExcerpt(html, length)` — excerpt helpers
|
|
71
|
+
- `initHoverPreview()` — browser initializer (also via
|
|
72
|
+
`@riebeckite/plugin-hover-preview/client`)
|
|
73
|
+
- Constants: `HOVER_PREVIEW_ATTRIBUTE`, `HOVER_PREVIEW_SCRIPT_ID`
|
|
74
|
+
- Types: `HoverPreviewOptions`, `ResolvedHoverPreviewOptions`,
|
|
75
|
+
`HoverPreviewEntry`, `HoverPreviewIndex`
|
|
76
|
+
|
|
77
|
+
## See also
|
|
78
|
+
|
|
79
|
+
- [Plugin guide](../../../docs/en/reference/plugin-api.md)
|
package/README_ja.md
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
# @riebeckite/plugin-hover-preview
|
|
2
|
-
|
|
3
|
-
内部リンクにカーソルを合わせると、リンク先のタイトルと抜粋をポップオーバーで表示するプラグインです。Quartz や Obsidian Publish のプレビューに近い挙動で、ページを離れずにリンク先の内容を確認できます。
|
|
4
|
-
|
|
5
|
-
[English](./README.md)
|
|
6
|
-
|
|
7
|
-
## 概要
|
|
8
|
-
|
|
9
|
-
ビルド時に `hoverPreviewPlugin()` がコンテンツマニフェストからプレビュー索引（`permalink` → `{ title, excerpt, slug }`）を作り、内部リンクを含むページへ一度だけ `<script type="application/json" data-rb-hover-preview>` として埋め込みます。クライアント側の `initHoverPreview` がこのデータを読み、対象リンクにホバー・フォーカス・タップの処理を付けます。
|
|
10
|
-
|
|
11
|
-
抜粋は描画済み HTML からタグを除いたプレーンテキストで、空白をまとめたうえで `excerptLength` 文字に切り詰めます。内部リンクのないページには何も挿入しません。`maxEntries` を指定するとページごとのデータ量を抑えられます。
|
|
12
|
-
|
|
13
|
-
## 設定する
|
|
14
|
-
|
|
15
|
-
```ts
|
|
16
|
-
import { defineConfig } from "@riebeckite/core";
|
|
17
|
-
import { hoverPreviewPlugin } from "@riebeckite/plugin-hover-preview";
|
|
18
|
-
|
|
19
|
-
export default defineConfig({
|
|
20
|
-
// ...
|
|
21
|
-
plugins: [hoverPreviewPlugin()],
|
|
22
|
-
});
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
`hoverPreviewPlugin()` がスタイル、クライアントエントリ、ビルド時のデータ注入をまとめて登録します。`hoverPreview` は同じファクトリの別名です。
|
|
26
|
-
|
|
27
|
-
クライアントエントリは引数を取りません。表示に関する設定はデータ用スクリプトの data 属性に載るため、初期化処理をオプションなしで呼んでも動作します。
|
|
28
|
-
|
|
29
|
-
## オプション
|
|
30
|
-
|
|
31
|
-
| オプション | 既定値 | 説明 |
|
|
32
|
-
| --------------- | -------------- | ------------------------------------------ |
|
|
33
|
-
| `delay` | `120` | ポップオーバーが出るまでの待ち時間（ミリ秒） |
|
|
34
|
-
| `excerptLength` | `160` | 抜粋の最大文字数 |
|
|
35
|
-
| `maxEntries` | 未指定 | ページに埋め込む項目数の上限 |
|
|
36
|
-
| `selector` | `a[href^="/"]` | プレビュー対象にする内部リンクのセレクタ |
|
|
37
|
-
| `className` | `rb-hover-preview` | ポップオーバーの基準クラス名 |
|
|
38
|
-
| `includeTitles` | `true` | ポップオーバーにタイトルを表示するか |
|
|
39
|
-
|
|
40
|
-
```ts
|
|
41
|
-
hoverPreviewPlugin({
|
|
42
|
-
delay: 200,
|
|
43
|
-
excerptLength: 120,
|
|
44
|
-
maxEntries: 200,
|
|
45
|
-
selector: 'a[href^="/notes/"]',
|
|
46
|
-
});
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## 主なエクスポート
|
|
50
|
-
|
|
51
|
-
- `hoverPreviewPlugin(options?)`: プラグインを作成する
|
|
52
|
-
- `hoverPreview`: `hoverPreviewPlugin` の別名
|
|
53
|
-
- `resolveHoverPreviewOptions(options?)`: 既定値を適用して `ResolvedHoverPreviewOptions` を返す
|
|
54
|
-
- `buildPreviewIndex(entries, options)`: `HoverPreviewIndex`（`permalink` → `{ title, excerpt, slug }`）を作る
|
|
55
|
-
- `htmlToPlainText(html)` / `createExcerpt(html, length)`: 抜粋を作る補助関数
|
|
56
|
-
- `initHoverPreview()`: ブラウザ側の初期化処理。`@riebeckite/plugin-hover-preview/client` からも読み込める
|
|
57
|
-
- 定数: `HOVER_PREVIEW_ATTRIBUTE`, `HOVER_PREVIEW_SCRIPT_ID`
|
|
58
|
-
- 型: `HoverPreviewOptions`, `ResolvedHoverPreviewOptions`, `HoverPreviewEntry`, `HoverPreviewIndex`
|
|
59
|
-
|
|
60
|
-
## 関連資料
|
|
61
|
-
|
|
62
|
-
- [プラグインシステム](../../../docs/ja/plugin-
|
|
1
|
+
# @riebeckite/plugin-hover-preview
|
|
2
|
+
|
|
3
|
+
内部リンクにカーソルを合わせると、リンク先のタイトルと抜粋をポップオーバーで表示するプラグインです。Quartz や Obsidian Publish のプレビューに近い挙動で、ページを離れずにリンク先の内容を確認できます。
|
|
4
|
+
|
|
5
|
+
[English](./README.md)
|
|
6
|
+
|
|
7
|
+
## 概要
|
|
8
|
+
|
|
9
|
+
ビルド時に `hoverPreviewPlugin()` がコンテンツマニフェストからプレビュー索引（`permalink` → `{ title, excerpt, slug }`）を作り、内部リンクを含むページへ一度だけ `<script type="application/json" data-rb-hover-preview>` として埋め込みます。クライアント側の `initHoverPreview` がこのデータを読み、対象リンクにホバー・フォーカス・タップの処理を付けます。
|
|
10
|
+
|
|
11
|
+
抜粋は描画済み HTML からタグを除いたプレーンテキストで、空白をまとめたうえで `excerptLength` 文字に切り詰めます。内部リンクのないページには何も挿入しません。`maxEntries` を指定するとページごとのデータ量を抑えられます。
|
|
12
|
+
|
|
13
|
+
## 設定する
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { defineConfig } from "@riebeckite/core";
|
|
17
|
+
import { hoverPreviewPlugin } from "@riebeckite/plugin-hover-preview";
|
|
18
|
+
|
|
19
|
+
export default defineConfig({
|
|
20
|
+
// ...
|
|
21
|
+
plugins: [hoverPreviewPlugin()],
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
`hoverPreviewPlugin()` がスタイル、クライアントエントリ、ビルド時のデータ注入をまとめて登録します。`hoverPreview` は同じファクトリの別名です。
|
|
26
|
+
|
|
27
|
+
クライアントエントリは引数を取りません。表示に関する設定はデータ用スクリプトの data 属性に載るため、初期化処理をオプションなしで呼んでも動作します。
|
|
28
|
+
|
|
29
|
+
## オプション
|
|
30
|
+
|
|
31
|
+
| オプション | 既定値 | 説明 |
|
|
32
|
+
| --------------- | -------------- | ------------------------------------------ |
|
|
33
|
+
| `delay` | `120` | ポップオーバーが出るまでの待ち時間（ミリ秒） |
|
|
34
|
+
| `excerptLength` | `160` | 抜粋の最大文字数 |
|
|
35
|
+
| `maxEntries` | 未指定 | ページに埋め込む項目数の上限 |
|
|
36
|
+
| `selector` | `a[href^="/"]` | プレビュー対象にする内部リンクのセレクタ |
|
|
37
|
+
| `className` | `rb-hover-preview` | ポップオーバーの基準クラス名 |
|
|
38
|
+
| `includeTitles` | `true` | ポップオーバーにタイトルを表示するか |
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
hoverPreviewPlugin({
|
|
42
|
+
delay: 200,
|
|
43
|
+
excerptLength: 120,
|
|
44
|
+
maxEntries: 200,
|
|
45
|
+
selector: 'a[href^="/notes/"]',
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## 主なエクスポート
|
|
50
|
+
|
|
51
|
+
- `hoverPreviewPlugin(options?)`: プラグインを作成する
|
|
52
|
+
- `hoverPreview`: `hoverPreviewPlugin` の別名
|
|
53
|
+
- `resolveHoverPreviewOptions(options?)`: 既定値を適用して `ResolvedHoverPreviewOptions` を返す
|
|
54
|
+
- `buildPreviewIndex(entries, options)`: `HoverPreviewIndex`（`permalink` → `{ title, excerpt, slug }`）を作る
|
|
55
|
+
- `htmlToPlainText(html)` / `createExcerpt(html, length)`: 抜粋を作る補助関数
|
|
56
|
+
- `initHoverPreview()`: ブラウザ側の初期化処理。`@riebeckite/plugin-hover-preview/client` からも読み込める
|
|
57
|
+
- 定数: `HOVER_PREVIEW_ATTRIBUTE`, `HOVER_PREVIEW_SCRIPT_ID`
|
|
58
|
+
- 型: `HoverPreviewOptions`, `ResolvedHoverPreviewOptions`, `HoverPreviewEntry`, `HoverPreviewIndex`
|
|
59
|
+
|
|
60
|
+
## 関連資料
|
|
61
|
+
|
|
62
|
+
- [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@riebeckite/plugin-hover-preview",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
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.13"
|
|
25
25
|
},
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|