feat: v1

.github/workflows/regression.yml

@@ -0,0 +1,31 @@
+name: regression
+
+on:
+  push:
+    branches: 
+      - main
+
+jobs:
+  regression:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout source
+        uses: actions/checkout@v2
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.7.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run the tests
+        run: pnpm test

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright © 2023 — present Naiyer Asif
+
+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.

README.md

@@ -0,0 +1,100 @@
+# rehype-figure
+
+[![npm](https://img.shields.io/npm/v/@microflash/rehype-figure)](https://www.npmjs.com/package/@microflash/rehype-figure)
+[![regression](https://github.com/Microflash/rehype-figure/actions/workflows/regression.yml/badge.svg)](https://github.com/Microflash/rehype-figure/actions/workflows/regression.yml)
+[![license](https://img.shields.io/npm/l/@microflash/rehype-figure)](./LICENSE.md)
+
+[rehype](https://github.com/rehypejs/rehype) plugin to transform an image with alt text to a figure with caption
+
+- [What's this?](#whats-this)
+- [Install](#install)
+- [Use](#use)
+- [API](#api)
+- [License](#license)
+
+## What's this?
+
+This package is a [unified](https://github.com/unifiedjs/unified) ([rehype](https://github.com/rehypejs/rehype)) plugin that takes an image node with alt text (e.g., `![Alt text](path-to-image.jpg)`) and converts it to a [figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) element with caption.
+
+```html
+<figure>
+  <img src="path-to-image.jpg" alt="Alt text">
+  <figcaption>Alt Text</figcaption>
+</figure>
+```
+
+## Install
+
+This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+In Node.js (16.0+), install with [npm](https://docs.npmjs.com/cli/install):
+
+```sh
+npm install @microflash/rehype-figure
+```
+
+> For Node.js versions below 16.0, stick to 1.x.x versions of this plugin.
+
+In Deno, with [esm.sh](https://esm.sh/):
+
+```js
+import rehypeFigure from "https://esm.sh/@microflash/rehype-figure";
+```
+
+In browsers, with [esm.sh](https://esm.sh/):
+
+```html
+<script type="module">
+  import rehypeFigure from "https://esm.sh/@microflash/rehype-figure?bundle";
+</script>
+```
+
+## Use
+
+Say we have the following module `example.js`:
+
+```js
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeFigure from "@microflash/rehype-figure";
+import rehypeStringify from "rehype-stringify";
+
+main()
+
+async function main() {
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype)
+    .use(rehypeFigure)
+    .use(rehypeStringify)
+    .process("![Alt text](path-to-image.jpg)");
+
+  console.log(String(file));
+}
+```
+
+Running that with `node example.js` yields:
+
+```html
+<figure>
+  <img src="path-to-image.jpg" alt="Alt Text">
+  <figcaption>Alt Text</figcaption>
+</figure>
+```
+
+## API
+
+The default export is `rehypeFigure`.
+
+The following options are available. All of them are optional.
+
+- `className`: class for the wrapped `figure` element
+
+By default, no classes are added to the `figure` element.
+
+## License
+
+[MIT](./LICENSE.md)

index.js

@@ -0,0 +1,58 @@
+import { visit } from "unist-util-visit";
+import { whitespace } from "hast-util-whitespace";
+import { remove } from "unist-util-remove";
+import { h } from "hastscript";
+
+export default function rehypeFigure(options = {}) {
+	return (tree) => {
+		// unwrap the images inside the paragraph
+		visit(tree, { tagName: "p" }, (node, index, parent) => {
+			if (!hasOnlyImages(node)) {
+				return;
+			}
+
+			remove(node, "text");
+
+			parent.children.splice(index, 1, ...node.children);
+
+			return index;
+		});
+
+		// wrap images in figure
+		visit(tree, (node) => isImageWithAlt(node), (node, index, parent) => {
+			if (isImageWithCaption(parent) || isImageLink(parent)) {
+				return;
+			}
+
+			const figure = createFigure(node, options);
+
+			node.tagName = figure.tagName;
+			node.children = figure.children;
+			node.properties = figure.properties;
+		});
+	};
+}
+
+function hasOnlyImages({ children }) {
+	return children.every((child) => child.tagName === "img" || whitespace(child));
+}
+
+function isImageWithAlt({ tagName, properties }) {
+	return tagName === "img" && Boolean(properties.alt) && Boolean(properties.src);
+}
+
+function isImageWithCaption({ tagName, children }) {
+	return tagName === "figure" && children.some((child) => child.tagName === "figcaption");
+}
+
+function isImageLink({ tagName }) {
+	return tagName === "a";
+}
+
+function createFigure({ properties }, options) {
+	const props = options.className ? { class: options.className } : {};
+	return h("figure", props, [
+		h("img", { ...properties }),
+		h("figcaption", properties.alt)
+	]);
+}

package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@microflash/rehype-figure",
+	"version": "1.0.0",
+	"description": "rehype plugin to transform an image with alt text to a figure with caption",
+	"license": "MIT",
+	"keywords": [
+		"unified",
+		"rehype",
+		"rehype-plugin",
+		"plugin",
+		"figure",
+		"caption",
+		"image"
+	],
+	"repository": "https://github.com/Microflash/rehype-figure.git",
+	"bugs": "https://github.com/Microflash/rehype-figure/issues",
+	"homepage": "https://github.com/Microflash/rehype-figure#readme",
+	"author": "Naiyer Asif (https://www.naiyerasif.com)",
+	"type": "module",
+	"main": "index.js",
+	"files": [
+		"index.js"
+	],
+	"scripts": {
+		"test": "ava"
+	},
+	"dependencies": {
+		"hast-util-whitespace": "^2.0.1",
+		"hastscript": "^7.2.0",
+		"unist-util-remove": "^3.1.1",
+		"unist-util-visit": "^4.1.2"
+	},
+	"devDependencies": {
+		"ava": "^5.3.1",
+		"rehype-stringify": "^9.0.4",
+		"remark-parse": "^10.0.2",
+		"remark-rehype": "^10.1.0",
+		"unified": "^10.1.2"
+	},
+	"ava": {
+		"files": [
+			"test/**/*.test.js"
+		]
+	}
+}