@xingwangzhe/satteri-photoswipe 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 王兴家
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# @xingwangzhe/satteri-photoswipe
+
+[中文文档](README_CN.md) | [English](#)
+
+> Satteri HAST plugin that wraps `<img>` with PhotoSwipe v5 `<a>` containers using [official attributes](https://photoswipe.com/getting-started/).
+
+## Features
+
+- **PhotoSwipe v5 native** — uses `data-pswp-width`, `data-pswp-height`, `data-pswp-srcset`, `data-cropped`
+- **Auto attribute mapping** — `width`/`height` → `data-pswp-*`, `alt` → `aria-label`, `srcset` → `data-pswp-srcset`
+- **Exposes selector** — `defaultSelector` ready for `PhotoSwipeLightbox` config
+- **Zero-config** — `photoswipe()` just works
+
+## Install
+
+```bash
+bun add @xingwangzhe/satteri-photoswipe
+```
+
+Requires `satteri >= 0.8.0`. [PhotoSwipe v5](https://photoswipe.com/) must be loaded client-side.
+
+## Usage
+
+```js
+// astro.config.mjs
+import { photoswipe, defaultSelector } from "@xingwangzhe/satteri-photoswipe";
+
+export default defineConfig({
+  markdown: {
+    processor: satteri({
+      hastPlugins: [photoswipe()],
+    }),
+  },
+});
+```
+
+Markdown:
+
+```markdown
+![A photo](photo.jpg)
+```
+
+Output:
+
+```html
+<a href="photo.jpg" data-pswp-width="800" data-pswp-height="600" aria-label="A photo">
+  <img src="photo.jpg" alt="A photo" />
+</a>
+```
+
+### Client-side setup
+
+```js
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import PhotoSwipe from "photoswipe";
+import { defaultSelector } from "@xingwangzhe/satteri-photoswipe";
+
+const lightbox = new PhotoSwipeLightbox({
+  gallery: defaultSelector, // "a[data-pswp-width]"
+  children: "img",
+  pswpModule: PhotoSwipe,
+});
+lightbox.init();
+```
+
+## API
+
+### `photoswipe(options?)`
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `selector` | `string` | `"a[data-pswp-width]"` | CSS selector for `PhotoSwipeLightbox` gallery |
+| `cropped` | `boolean` | `false` | Add `data-cropped="true"` for cropped thumbnails |
+
+### `defaultSelector`
+
+`"a[data-pswp-width]"` — pass directly to `PhotoSwipeLightbox({ gallery: defaultSelector })`.
+
+### `createPhotoswipePlugin(options?)`
+
+Returns `{ plugin, selector }`. For advanced use cases.
+
+## How it maps attributes
+
+| `<img>` attribute | `<a>` attribute | PhotoSwipe v5 usage |
+|-------------------|-----------------|---------------------|
+| `src` | `href` | Full-size image URL |
+| `width` | `data-pswp-width` | Image width in px (required) |
+| `height` | `data-pswp-height` | Image height in px (required) |
+| `srcset` | `data-pswp-srcset` | Responsive images |
+| `data-pswp-src` | `data-pswp-src` | Passthrough (overrides href) |
+| `alt` | `aria-label` | Accessibility |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("satteri");var t={WIDTH:`data-pswp-width`,HEIGHT:`data-pswp-height`,SRC:`data-pswp-src`,SRCSET:`data-pswp-srcset`,CROPPED:`data-cropped`};function n(n){let r=n?.selector??`a[${t.WIDTH}]`,i=n?.cropped??!1;return{plugin:(0,e.defineHastPlugin)({name:`satteri-photoswipe`,element:{filter:[`img`],visit(e,n){let r=e.properties??{},a=String(r.src??``);if(!a)return;let o={href:a},s=r.width??r[t.WIDTH],c=r.height??r[t.HEIGHT];s!=null&&(o[t.WIDTH]=String(s)),c!=null&&(o[t.HEIGHT]=String(c));let l=r.srcset??r[t.SRCSET];l!=null&&(o[t.SRCSET]=String(l)),r[t.SRC]!=null&&(o[t.SRC]=String(r[t.SRC])),r.alt!=null&&(o[`aria-label`]=String(r.alt)),i&&(o[t.CROPPED]=`true`),n.wrapNode(e,{type:`element`,tagName:`a`,properties:o,children:[]})}}}),selector:r}}function r(e){return n(e).plugin}var i=n(),a=i.plugin,o=i.selector;exports.createPhotoswipePlugin=n,exports.defaultSelector=o,exports.photoswipe=r,exports.photoswipePlugin=a;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { createPhotoswipePlugin, defaultSelector, photoswipe, photoswipePlugin, } from "./plugin";
+export type { PhotoswipeOptions } from "./plugin";

package/dist/index.mjs

@@ -0,0 +1,40 @@
+import { defineHastPlugin as e } from "satteri";
+//#region src/plugin.ts
+var t = {
+	WIDTH: "data-pswp-width",
+	HEIGHT: "data-pswp-height",
+	SRC: "data-pswp-src",
+	SRCSET: "data-pswp-srcset",
+	CROPPED: "data-cropped"
+};
+function n(n) {
+	let r = n?.selector ?? `a[${t.WIDTH}]`, i = n?.cropped ?? !1;
+	return {
+		plugin: e({
+			name: "satteri-photoswipe",
+			element: {
+				filter: ["img"],
+				visit(e, n) {
+					let r = e.properties ?? {}, a = String(r.src ?? "");
+					if (!a) return;
+					let o = { href: a }, s = r.width ?? r[t.WIDTH], c = r.height ?? r[t.HEIGHT];
+					s != null && (o[t.WIDTH] = String(s)), c != null && (o[t.HEIGHT] = String(c));
+					let l = r.srcset ?? r[t.SRCSET];
+					l != null && (o[t.SRCSET] = String(l)), r[t.SRC] != null && (o[t.SRC] = String(r[t.SRC])), r.alt != null && (o["aria-label"] = String(r.alt)), i && (o[t.CROPPED] = "true"), n.wrapNode(e, {
+						type: "element",
+						tagName: "a",
+						properties: o,
+						children: []
+					});
+				}
+			}
+		}),
+		selector: r
+	};
+}
+function r(e) {
+	return n(e).plugin;
+}
+var i = n(), a = i.plugin, o = i.selector;
+//#endregion
+export { n as createPhotoswipePlugin, o as defaultSelector, r as photoswipe, a as photoswipePlugin };

package/dist/plugin.d.ts

@@ -0,0 +1,36 @@
+export interface PhotoswipeOptions {
+    /**
+     * CSS selector for PhotoSwipe to find gallery links.
+     * Default: "a[data-pswp-width]" — PhotoSwipe v5 requires width/height.
+     * @see https://photoswipe.com/getting-started/
+     */
+    selector?: string;
+    /** Whether to mark thumbnail as cropped (affects opening animation). Default: false */
+    cropped?: boolean;
+}
+export declare function createPhotoswipePlugin(options?: PhotoswipeOptions): {
+    plugin: {
+        name: string;
+        element: {
+            filter: string[];
+            visit(node: Readonly<import("hast").Element>, ctx: import("satteri").HastVisitorContext): void;
+        };
+    };
+    selector: string;
+};
+/** Factory function. Usage: `photoswipe()` — aligns with `katex()` style */
+export declare function photoswipe(options?: PhotoswipeOptions): {
+    name: string;
+    element: {
+        filter: string[];
+        visit(node: Readonly<import("hast").Element>, ctx: import("satteri").HastVisitorContext): void;
+    };
+};
+export declare const photoswipePlugin: {
+    name: string;
+    element: {
+        filter: string[];
+        visit(node: Readonly<import("hast").Element>, ctx: import("satteri").HastVisitorContext): void;
+    };
+};
+export declare const defaultSelector: string;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@xingwangzhe/satteri-photoswipe",
+  "version": "0.1.0",
+  "description": "Satteri HAST plugin that wraps images with PhotoSwipe lightbox containers",
+  "type": "module",
+  "license": "MIT",
+  "author": "xingwangzhe",
+  "homepage": "https://github.com/xingwangzhe/satteri-photoswipe#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xingwangzhe/satteri-photoswipe"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --emitDeclarationOnly --declarationDir dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
+    "lint": "oxlint src test",
+    "lint:fix": "oxlint --fix src test",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "satteri": ">=0.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "oxfmt": "^0.55.0",
+    "oxlint": "^1.70.0",
+    "satteri": "^0.9.0",
+    "typescript": "^5.9.0",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0"
+  },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "satteri",
+    "photoswipe",
+    "hast",
+    "lightbox",
+    "image",
+    "gallery",
+    "markdown",
+    "plugin"
+  ]
+}