@riebeckite/plugin-lightbox 0.0.31 → 0.0.33

package/README.md

@@ -17,17 +17,23 @@ Two parts:
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
-import { lightboxPlugin } from "@riebeckite/plugin-lightbox";
+import { lightbox } from "@riebeckite/plugin-lightbox";
 
 export default defineConfig({
   // ...
-  plugins: [lightboxPlugin()],
+  plugins: [lightbox()],
 });
 ```
 
 The plugin registers `style.css` and a client entry (`initLightbox`), which
 the app calls on page initialization.
 
+## Live example
+
+Click the image to open the lightbox.
+
+![riebeckite-logo.png](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/riebeckite-logo.png.md)
+
 ## Behavior
 
 ### Build (`rehypeLightbox`)
@@ -70,7 +76,7 @@ to style the displayed image without selecting its descendants.
 
 ## Exports
 
-- `lightboxPlugin(options?)` — plugin factory
+- `lightbox(options?)` — plugin factory
 - `rehypeLightbox(options?)` — rehype transform
 - `initLightbox(root?, options?)` — client initializer, returns a cleanup
   function

package/README_ja.md

@@ -8,18 +8,24 @@
 
 ## 仕組み
 
-ビルド時の Rehype 変換と、ブラウザ側の初期化処理で動きます。変換では画像をトリガーリンクで囲み、初期化処理ではアクセシブルなダイアログを用意します。
+ビルド時の Rehype 変換と、ブラウザ側の初期化処理の 2 つで構成されます。変換では画像をトリガーリンクで囲み、初期化処理ではアクセシブルなダイアログを用意します。
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
-import { lightboxPlugin } from "@riebeckite/plugin-lightbox";
+import { lightbox } from "@riebeckite/plugin-lightbox";
 
 export default defineConfig({
   // ...
-  plugins: [lightboxPlugin()],
+  plugins: [lightbox()],
 });
 ```
 
+## 実行例
+
+画像をクリックすると lightbox が開きます。
+
+![riebeckite-logo.png](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/riebeckite-logo.png.ja.md)
+
 ## 利用時の挙動
 
 - `rehypeLightbox` は各 `<img>` を `.rr-lightbox-trigger` で囲みます。
@@ -27,8 +33,7 @@ export default defineConfig({
 - `initLightbox` は `Escape`、背景クリック、閉じるボタンでダイアログを閉じ、開く前のフォーカスを戻します。
 - 開いている間は `html[data-lightbox-open="true"]` を設定するため、CSS でスクロールを止められます。
 
-Theme は `rr-lightbox` の root に `--rr-lightbox-image-border-radius` を指定すると、
-子要素を選択せずに表示中の画像を調整できます。
+テーマ側では、`rr-lightbox` のルート要素に `--rr-lightbox-image-border-radius` を指定すると、子要素を選択せずに表示中の画像を調整できます。
 
 ## オプション
 
@@ -37,16 +42,16 @@ Theme は `rr-lightbox` の root に `--rr-lightbox-image-border-radius` を指
 | `selectorClass` | `string` | `"rr-lightbox-trigger"` | トリガーに使う CSS クラス |
 | `expandLabel` | `string` | `"Expand image"` | トリガーとダイアログのアクセシブルラベル |
 | `closeLabel` | `string` | `"Close"` | 閉じるボタンのアクセシブルラベル |
-| `autoWrapImages` | `boolean` | `true` | 初期化時に未処理の画像も囲むか。クライアント側だけの設定 |
+| `autoWrapImages` | `boolean` | `true` | 初期化時に未処理の画像も囲むか。クライアント側でのみ有効 |
 
-`initLightbox()` はイベントリスナー、ダイアログ、追加したトリガーを解除する cleanup 関数を返します。
+`initLightbox()` はイベントリスナー、ダイアログ、追加したトリガーを片付けるクリーンアップ関数を返します。
 
 ## 公開 API
 
-- `lightboxPlugin(options?)`：プラグインファクトリ
+- `lightbox(options?)`：プラグインファクトリ
 - `rehypeLightbox(options?)`：Rehype 変換
 - `initLightbox(root?, options?)`：ブラウザ初期化関数
-- `initLightboxFromOptions(options?)`：プラグインのクライアントスクリプトが呼ぶ、オプションを先に取る初期化関数
+- `initLightboxFromOptions(options?)`：プラグインのクライアントスクリプトが呼ぶ初期化関数。オプションを第 1 引数に取る
 - `LightboxOptions`、`LightboxInitOptions`：型
 
 ## 関連資料

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export { initLightboxFromOptions } from "./client.js";
 export { initLightbox } from "./src/init.js";
 export { rehypeLightbox } from "./src/rehype.js";
 export type { LightboxInitOptions, LightboxOptions } from "./src/types.js";
-export declare function lightboxPlugin(options?: LightboxOptions): import("@riebeckite/core").RiebeckitePlugin<LightboxOptions>;
+export declare function lightbox(options?: LightboxOptions): import("@riebeckite/core").RiebeckitePlugin<LightboxOptions>;

package/dist/index.js

@@ -250,7 +250,7 @@ function initLightboxFromOptions(options = {}) {
 }
 
 // index.ts
-function lightboxPlugin(options = {}) {
+function lightbox(options = {}) {
   return definePlugin({
     name: "lightbox",
     processedContentCache: {
@@ -280,6 +280,6 @@ function lightboxPlugin(options = {}) {
 export {
   initLightbox,
   initLightboxFromOptions,
-  lightboxPlugin,
+  lightbox,
   rehypeLightbox
 };

package/dist/src/hast.d.ts

@@ -1,5 +1,4 @@
 import type { ElementNode, HastNode } from "./types.js";
 export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ElementNode, index?: number) => void, parent?: ElementNode, index?: number): void;
-export declare function isElementNode(node: HastNode): node is ElementNode;
 export declare function getStringProperty(node: ElementNode, key: string): string | null;
 export declare function mergeClassName(current: string | null, next: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-lightbox",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33"
   },
   "publishConfig": {
     "access": "public"