next-blurhash-previews 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/.prettierrc +3 -0
- package/bin/generateBlurhash.js +55 -0
- package/bin/markdown-sync.js +42 -12
- package/bin/remark-plugin.js +63 -0
- package/components/ImageWithPreview.tsx +31 -48
- package/components/NextWrapper.tsx +12 -4
- package/next-runner/blog-posts/post1.md +11 -0
- package/next-runner/blog-posts/post2.md +10 -0
- package/next-runner/blog-posts/post3.md +10 -0
- package/next-runner/blog-posts/post4.md +10 -0
- package/next-runner/package-lock.json +22 -6
- package/next-runner/pages/_document.js +1 -3
- package/next-runner/pages/index.js +30 -9
- package/next-runner/public/img1.png +0 -0
- package/next-runner/public/img5.png +0 -0
- package/next-runner/styles/Home.module.css +3 -0
- package/next-runner/yarn.lock +7 -2
- package/package.json +7 -4
- package/util/setBootstrap.js +12 -3
- package/vite.config.ts +2 -2
- package/example.md +0 -9
- package/output.md +0 -15
- package/plugin.js +0 -78
package/.prettierrc
ADDED
@@ -0,0 +1,55 @@
|
|
1
|
+
import sharp from "sharp";
|
2
|
+
import fetch from "node-fetch";
|
3
|
+
import { encode, isBlurhashValid } from "blurhash";
|
4
|
+
|
5
|
+
import path from "path";
|
6
|
+
const __dirname = process.cwd();
|
7
|
+
|
8
|
+
export async function getSharpImage(imgPath) {
|
9
|
+
if (/^http/.test(imgPath)) {
|
10
|
+
const buffer = await fetch(imgPath)
|
11
|
+
.then(fetchResponse => fetchResponse.arrayBuffer())
|
12
|
+
.then(ab => Buffer.from(ab));
|
13
|
+
|
14
|
+
return sharp(buffer);
|
15
|
+
} else {
|
16
|
+
return sharp(imgPath);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
export async function getBlurhash(path) {
|
21
|
+
const blurhashImage = await getSharpImage(path);
|
22
|
+
const dimensions = await blurhashImage.metadata();
|
23
|
+
|
24
|
+
const { width, height } = dimensions;
|
25
|
+
|
26
|
+
return new Promise((res, rej) => {
|
27
|
+
blurhashImage
|
28
|
+
.raw()
|
29
|
+
.ensureAlpha()
|
30
|
+
.toBuffer((err, buffer) => {
|
31
|
+
try {
|
32
|
+
if (err) {
|
33
|
+
console.log("Error getting buffer", err);
|
34
|
+
} else {
|
35
|
+
const blurhash = encode(
|
36
|
+
new Uint8ClampedArray(buffer),
|
37
|
+
width,
|
38
|
+
height,
|
39
|
+
4,
|
40
|
+
4
|
41
|
+
);
|
42
|
+
if (isBlurhashValid(blurhash)) {
|
43
|
+
return res({ blurhash, w: width, h: height });
|
44
|
+
} else {
|
45
|
+
console.log("FAIL");
|
46
|
+
return rej("FAIL");
|
47
|
+
}
|
48
|
+
}
|
49
|
+
} catch (err) {
|
50
|
+
console.log("FAIL", err);
|
51
|
+
return rej("FAIL", err);
|
52
|
+
}
|
53
|
+
});
|
54
|
+
});
|
55
|
+
}
|
package/bin/markdown-sync.js
CHANGED
@@ -2,24 +2,54 @@
|
|
2
2
|
|
3
3
|
import fs from "fs";
|
4
4
|
import path, { dirname } from "path";
|
5
|
+
import { fileURLToPath } from "url";
|
6
|
+
|
5
7
|
import { reporter } from "vfile-reporter";
|
6
8
|
import { remark } from "remark";
|
9
|
+
import glob from "glob";
|
10
|
+
import colors from "colors";
|
7
11
|
|
8
|
-
import
|
12
|
+
import { blurhashPlugin } from "./remark-plugin.js";
|
9
13
|
|
10
|
-
|
11
|
-
|
14
|
+
const directoryProcess = process.cwd();
|
15
|
+
|
16
|
+
const allArgs = process.argv;
|
17
|
+
const inputGlob = allArgs.at(-1);
|
18
|
+
|
19
|
+
const files = glob.sync(inputGlob, { root: directoryProcess });
|
12
20
|
|
13
|
-
const
|
14
|
-
|
21
|
+
const publicPath = path.resolve(directoryProcess, "public");
|
22
|
+
|
23
|
+
if (fs.existsSync(publicPath)) {
|
24
|
+
run();
|
25
|
+
} else {
|
26
|
+
console.log(
|
27
|
+
colors.red(
|
28
|
+
`\nERROR: Could not find Next's public directory to resolve images from. Looking for:\n\n${publicPath}\n\nEnsure you run this command from your Next application.\n`
|
29
|
+
)
|
30
|
+
);
|
31
|
+
}
|
32
|
+
|
33
|
+
async function runFile(file) {
|
34
|
+
const buffer = fs.readFileSync(file);
|
35
|
+
|
36
|
+
return new Promise(res => {
|
37
|
+
remark()
|
38
|
+
.use(blurhashPlugin(publicPath))
|
39
|
+
.process(buffer)
|
40
|
+
.then(outputFile => {
|
41
|
+
fs.writeFileSync(file, outputFile.toString());
|
42
|
+
res();
|
43
|
+
});
|
44
|
+
});
|
45
|
+
}
|
15
46
|
|
16
47
|
async function run() {
|
17
|
-
|
18
|
-
.
|
19
|
-
|
20
|
-
.
|
21
|
-
|
22
|
-
});
|
48
|
+
for (const file of files) {
|
49
|
+
console.log(colors.blue(`Processing file: ${file}\n`));
|
50
|
+
await runFile(file);
|
51
|
+
console.log(colors.blue(`${file} finished\n`));
|
52
|
+
}
|
23
53
|
}
|
24
54
|
|
25
|
-
run();
|
55
|
+
//run();
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import path from "path";
|
2
|
+
import { visitParents } from "unist-util-visit-parents";
|
3
|
+
import prettier from "prettier";
|
4
|
+
|
5
|
+
import colors from "colors";
|
6
|
+
|
7
|
+
import { getBlurhash } from "./generateBlurhash.js";
|
8
|
+
|
9
|
+
export const blurhashPlugin = publicPath => () => {
|
10
|
+
return (tree, file, done) => {
|
11
|
+
let outstanding = 0;
|
12
|
+
|
13
|
+
visitParents(tree, "image", async (node, ancestors) => {
|
14
|
+
let { url: imagePath, alt } = node;
|
15
|
+
|
16
|
+
const originalImg = imagePath;
|
17
|
+
if (!/http/.test(imagePath)) {
|
18
|
+
imagePath = path.resolve(publicPath, imagePath);
|
19
|
+
}
|
20
|
+
|
21
|
+
console.log(colors.blue(`Attempting ${imagePath}...`));
|
22
|
+
|
23
|
+
try {
|
24
|
+
outstanding++;
|
25
|
+
|
26
|
+
const blurHash = await getBlurhash(imagePath);
|
27
|
+
|
28
|
+
console.log(
|
29
|
+
colors.green(`Finished processing ${imagePath}\n\t`, blurHash)
|
30
|
+
);
|
31
|
+
|
32
|
+
const parent = ancestors[ancestors.length - 1];
|
33
|
+
const index = parent.children.indexOf(node);
|
34
|
+
|
35
|
+
const newNode = `
|
36
|
+
<blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
|
37
|
+
<img alt="${alt || ""}" src="${originalImg}" slot="image" />
|
38
|
+
<canvas width="${blurHash.w}" height="${blurHash.h}" slot="preview"></canvas>
|
39
|
+
</blurhash-image>`.trim();
|
40
|
+
|
41
|
+
parent.children[index] = {
|
42
|
+
type: "html",
|
43
|
+
value: prettier.format(newNode, { parser: "html" }).trimEnd(),
|
44
|
+
};
|
45
|
+
} catch (er) {
|
46
|
+
console.log(colors.red(`Error processing ${imagePath}\n\t`, er));
|
47
|
+
} finally {
|
48
|
+
outstanding--;
|
49
|
+
setTimeout(() => {
|
50
|
+
if (outstanding === 0) {
|
51
|
+
done();
|
52
|
+
}
|
53
|
+
}, 1);
|
54
|
+
}
|
55
|
+
});
|
56
|
+
|
57
|
+
setTimeout(() => {
|
58
|
+
if (outstanding === 0) {
|
59
|
+
done();
|
60
|
+
}
|
61
|
+
}, 1);
|
62
|
+
};
|
63
|
+
};
|
@@ -3,17 +3,15 @@ import { decode } from "../node_modules/blurhash/dist/esm/index";
|
|
3
3
|
type blurhash = { w: number; h: number; blurhash: string };
|
4
4
|
|
5
5
|
class ImageWithPreview extends HTMLElement {
|
6
|
-
isReady: boolean = false;
|
7
|
-
loaded: boolean = false;
|
8
6
|
sd: ShadowRoot;
|
9
7
|
mo?: MutationObserver;
|
10
8
|
|
11
|
-
static observedAttributes = ["preview"
|
9
|
+
static observedAttributes = ["preview"];
|
12
10
|
|
13
|
-
get imgEl(): any {
|
11
|
+
get #imgEl(): any {
|
14
12
|
return this.querySelector("img");
|
15
13
|
}
|
16
|
-
get canvasEl(): any {
|
14
|
+
get #canvasEl(): any {
|
17
15
|
return this.querySelector("canvas");
|
18
16
|
}
|
19
17
|
|
@@ -24,65 +22,50 @@ class ImageWithPreview extends HTMLElement {
|
|
24
22
|
this.sd.innerHTML = `<slot name="preview"></slot>`;
|
25
23
|
}
|
26
24
|
|
27
|
-
checkReady = () => {
|
28
|
-
if (this
|
29
|
-
this.ready();
|
25
|
+
#checkReady = () => {
|
26
|
+
if (this.#imgEl && this.#canvasEl) {
|
30
27
|
this.mo?.disconnect();
|
28
|
+
|
29
|
+
if (this.#imgEl.complete) {
|
30
|
+
this.#imgLoad();
|
31
|
+
} else {
|
32
|
+
this.#updatePreview();
|
33
|
+
this.#imgEl.addEventListener("load", this.#imgLoad);
|
34
|
+
}
|
35
|
+
|
36
|
+
return true;
|
31
37
|
}
|
32
|
-
return this.isReady;
|
33
38
|
};
|
34
39
|
|
35
40
|
connectedCallback() {
|
36
|
-
if (!this
|
37
|
-
this.mo = new MutationObserver(this
|
38
|
-
this.mo.observe(this, {
|
41
|
+
if (!this.#checkReady()) {
|
42
|
+
this.mo = new MutationObserver(this.#checkReady);
|
43
|
+
this.mo.observe(this, {
|
44
|
+
subtree: true,
|
45
|
+
childList: true,
|
46
|
+
attributes: false,
|
47
|
+
});
|
39
48
|
}
|
40
49
|
}
|
41
50
|
|
42
|
-
|
43
|
-
this.
|
44
|
-
|
45
|
-
if (this.imgEl.complete) {
|
46
|
-
this.onImageLoad();
|
47
|
-
}
|
48
|
-
this.imgEl.addEventListener("load", this.onImageLoad);
|
49
|
-
}
|
50
|
-
|
51
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
52
|
-
if (!this.isReady) {
|
53
|
-
return;
|
54
|
-
}
|
51
|
+
#imgLoad = () => {
|
52
|
+
this.sd.innerHTML = `<slot name="image"></slot>`;
|
53
|
+
};
|
55
54
|
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
this.loaded = false;
|
55
|
+
attributeChangedCallback(name) {
|
56
|
+
if (this.#canvasEl && name === "preview") {
|
57
|
+
this.#updatePreview();
|
60
58
|
}
|
61
|
-
|
62
|
-
this.render();
|
63
59
|
}
|
64
60
|
|
65
|
-
updatePreview() {
|
61
|
+
#updatePreview() {
|
66
62
|
const previewObj = JSON.parse(this.getAttribute("preview")!);
|
67
|
-
updateBlurHashPreview(this
|
68
|
-
}
|
69
|
-
|
70
|
-
onImageLoad = () => {
|
71
|
-
if (this.getAttribute("url") !== this.imgEl.src) {
|
72
|
-
setTimeout(() => {
|
73
|
-
this.loaded = true;
|
74
|
-
this.render();
|
75
|
-
}, 1500);
|
76
|
-
}
|
77
|
-
};
|
78
|
-
|
79
|
-
render() {
|
80
|
-
this.sd.innerHTML = `<slot name="${this.loaded ? "image" : "preview"}"></slot>`;
|
63
|
+
updateBlurHashPreview(this.#canvasEl, previewObj);
|
81
64
|
}
|
82
65
|
}
|
83
66
|
|
84
|
-
if (!customElements.get("
|
85
|
-
customElements.define("
|
67
|
+
if (!customElements.get("blurhash-image")) {
|
68
|
+
customElements.define("blurhash-image", ImageWithPreview);
|
86
69
|
}
|
87
70
|
|
88
71
|
function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {
|
@@ -1,7 +1,15 @@
|
|
1
|
-
import { useEffect, useRef } from "react";
|
1
|
+
import React, { useEffect, useRef } from "react";
|
2
|
+
|
3
|
+
declare global {
|
4
|
+
namespace JSX {
|
5
|
+
interface IntrinsicElements {
|
6
|
+
["blurhash-image"]: any;
|
7
|
+
}
|
8
|
+
}
|
9
|
+
}
|
2
10
|
|
3
11
|
export const ImageWithPreview = (props: any) => {
|
4
|
-
const wcRef = useRef(null);
|
12
|
+
const wcRef = useRef<any>(null);
|
5
13
|
|
6
14
|
const { preview } = props;
|
7
15
|
const { w, h } = JSON.parse(preview);
|
@@ -11,9 +19,9 @@ export const ImageWithPreview = (props: any) => {
|
|
11
19
|
}, []);
|
12
20
|
|
13
21
|
return (
|
14
|
-
<
|
22
|
+
<blurhash-image ref={wcRef} {...props}>
|
15
23
|
<img style={{ display: "none" }} />
|
16
24
|
<canvas width={w} height={h}></canvas>
|
17
|
-
</
|
25
|
+
</blurhash-image>
|
18
26
|
);
|
19
27
|
};
|
@@ -21,10 +21,17 @@
|
|
21
21
|
}
|
22
22
|
},
|
23
23
|
"..": {
|
24
|
-
"version": "0.0.
|
24
|
+
"version": "0.0.1",
|
25
25
|
"license": "ISC",
|
26
26
|
"dependencies": {
|
27
|
+
"@types/react": "^18.0.15",
|
28
|
+
"@types/react-dom": "^18.0.6",
|
29
|
+
"@vitejs/plugin-react": "^1.3.2",
|
27
30
|
"blurhash": "^1.1.5",
|
31
|
+
"colors": "^1.4.0",
|
32
|
+
"glob": "^8.0.3",
|
33
|
+
"next": "^12.2.0",
|
34
|
+
"node-fetch": "^3.2.6",
|
28
35
|
"node-html-parser": "^5.3.3",
|
29
36
|
"prettier": "^2.7.1",
|
30
37
|
"remark": "^14.0.2",
|
@@ -33,10 +40,11 @@
|
|
33
40
|
"to-vfile": "^7.2.3",
|
34
41
|
"unist-util-visit": "^4.1.0",
|
35
42
|
"unist-util-visit-parents": "^5.1.0",
|
36
|
-
"vfile-reporter": "^7.0.4"
|
43
|
+
"vfile-reporter": "^7.0.4",
|
44
|
+
"vite": "^2.9.13"
|
37
45
|
},
|
38
46
|
"bin": {
|
39
|
-
"next-
|
47
|
+
"next-blurhash-markdown": "bin/markdown-sync.js"
|
40
48
|
}
|
41
49
|
},
|
42
50
|
"node_modules/@babel/runtime": {
|
@@ -2167,7 +2175,7 @@
|
|
2167
2175
|
}
|
2168
2176
|
}
|
2169
2177
|
},
|
2170
|
-
"node_modules/next-
|
2178
|
+
"node_modules/next-blurhash-previews": {
|
2171
2179
|
"resolved": "..",
|
2172
2180
|
"link": true
|
2173
2181
|
},
|
@@ -4481,10 +4489,17 @@
|
|
4481
4489
|
"use-sync-external-store": "1.1.0"
|
4482
4490
|
}
|
4483
4491
|
},
|
4484
|
-
"next-
|
4492
|
+
"next-blurhash-previews": {
|
4485
4493
|
"version": "file:..",
|
4486
4494
|
"requires": {
|
4495
|
+
"@types/react": "^18.0.15",
|
4496
|
+
"@types/react-dom": "^18.0.6",
|
4497
|
+
"@vitejs/plugin-react": "^1.3.2",
|
4487
4498
|
"blurhash": "^1.1.5",
|
4499
|
+
"colors": "^1.4.0",
|
4500
|
+
"glob": "^8.0.3",
|
4501
|
+
"next": "^12.2.0",
|
4502
|
+
"node-fetch": "^3.2.6",
|
4488
4503
|
"node-html-parser": "^5.3.3",
|
4489
4504
|
"prettier": "^2.7.1",
|
4490
4505
|
"remark": "^14.0.2",
|
@@ -4493,7 +4508,8 @@
|
|
4493
4508
|
"to-vfile": "^7.2.3",
|
4494
4509
|
"unist-util-visit": "^4.1.0",
|
4495
4510
|
"unist-util-visit-parents": "^5.1.0",
|
4496
|
-
"vfile-reporter": "^7.0.4"
|
4511
|
+
"vfile-reporter": "^7.0.4",
|
4512
|
+
"vite": "^2.9.13"
|
4497
4513
|
}
|
4498
4514
|
},
|
4499
4515
|
"object-assign": {
|
@@ -1,7 +1,5 @@
|
|
1
1
|
import Document, { Html, Head, Main, NextScript } from "next/document";
|
2
|
-
import { imagePreviewBootstrap, src } from "next-
|
3
|
-
|
4
|
-
import Script from "next/script";
|
2
|
+
import { imagePreviewBootstrap, src } from "next-blurhash-previews";
|
5
3
|
|
6
4
|
export default class MyDocument extends Document {
|
7
5
|
render() {
|
@@ -11,16 +11,37 @@ export default function Home() {
|
|
11
11
|
<div className={styles.container}>
|
12
12
|
Root
|
13
13
|
<br />
|
14
|
-
<button onClick={() => setVal(
|
14
|
+
<button onClick={() => setVal(x => x + 1)}>Refresh</button>
|
15
15
|
{val}
|
16
|
-
<
|
17
|
-
<
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
16
|
+
<div style={{ display: "flex" }}>
|
17
|
+
<blurhash-image
|
18
|
+
key={val}
|
19
|
+
url="/dynamo-introduction/img1.png"
|
20
|
+
preview='{ "w": 364, "h": 196, "blurhash": "L8S6SsD*%gt7IVM|tRRj~qWBM{NG" }'
|
21
|
+
>
|
22
|
+
<img slot="image" src="/dynamo-introduction/img1.png" />
|
23
|
+
<canvas slot="preview" width="364" height="196"></canvas>
|
24
|
+
</blurhash-image>
|
25
|
+
<blurhash-image
|
26
|
+
key={val + 2}
|
27
|
+
url="/dynamo-introduction/img5a.png"
|
28
|
+
preview='{ "w": 500, "h": 139, "blurhash": "LnPGmj_zIA:KS}j[s:ay-VWVRjay" }'
|
29
|
+
>
|
30
|
+
<img slot="image" src="/dynamo-introduction/img5a.png" />
|
31
|
+
<canvas slot="preview" width="500" height="139"></canvas>
|
32
|
+
</blurhash-image>
|
33
|
+
<blurhash-image
|
34
|
+
key={val + 5}
|
35
|
+
url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
|
36
|
+
preview='{ "w": 106, "h": 160, "blurhash": "U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW" }'
|
37
|
+
>
|
38
|
+
<img
|
39
|
+
slot="image"
|
40
|
+
src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
|
41
|
+
/>
|
42
|
+
<canvas slot="preview" width="106" height="160"></canvas>
|
43
|
+
</blurhash-image>
|
44
|
+
</div>
|
24
45
|
</div>
|
25
46
|
);
|
26
47
|
}
|
Binary file
|
Binary file
|
package/next-runner/yarn.lock
CHANGED
@@ -1122,11 +1122,15 @@
|
|
1122
1122
|
"resolved" "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
|
1123
1123
|
"version" "1.4.0"
|
1124
1124
|
|
1125
|
-
"next-
|
1125
|
+
"next-blurhash-previews@file:/Users/arackis/Documents/git/next-blurhash-previews":
|
1126
1126
|
"resolved" "file:.."
|
1127
|
-
"version" "0.0.
|
1127
|
+
"version" "0.0.1"
|
1128
1128
|
dependencies:
|
1129
|
+
"@types/react" "^18.0.15"
|
1130
|
+
"@types/react-dom" "^18.0.6"
|
1131
|
+
"@vitejs/plugin-react" "^1.3.2"
|
1129
1132
|
"blurhash" "^1.1.5"
|
1133
|
+
"next" "^12.2.0"
|
1130
1134
|
"node-html-parser" "^5.3.3"
|
1131
1135
|
"prettier" "^2.7.1"
|
1132
1136
|
"remark" "^14.0.2"
|
@@ -1136,6 +1140,7 @@
|
|
1136
1140
|
"unist-util-visit" "^4.1.0"
|
1137
1141
|
"unist-util-visit-parents" "^5.1.0"
|
1138
1142
|
"vfile-reporter" "^7.0.4"
|
1143
|
+
"vite" "^2.9.13"
|
1139
1144
|
|
1140
1145
|
"next@12.2.0":
|
1141
1146
|
"integrity" "sha512-B4j7D3SHYopLYx6/Ark0fenwIar9tEaZZFAaxmKjgcMMexhVJzB3jt7X+6wcdXPPMeUD6r09weUtnDpjox/vIA=="
|
package/package.json
CHANGED
@@ -1,15 +1,16 @@
|
|
1
1
|
{
|
2
2
|
"name": "next-blurhash-previews",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.2",
|
4
4
|
"description": "",
|
5
5
|
"main": "index.js",
|
6
6
|
"bin": {
|
7
|
-
"next-
|
7
|
+
"next-blurhash-markdown": "./bin/markdown-sync.js"
|
8
8
|
},
|
9
9
|
"scripts": {
|
10
10
|
"test": "echo \"Error: no test specified\" && exit 1",
|
11
11
|
"build": "vite build",
|
12
|
-
"build-watch": "vite build -w"
|
12
|
+
"build-watch": "vite build -w",
|
13
|
+
"prepublish": "npm run build"
|
13
14
|
},
|
14
15
|
"type": "module",
|
15
16
|
"repository": {
|
@@ -27,8 +28,10 @@
|
|
27
28
|
"@types/react-dom": "^18.0.6",
|
28
29
|
"@vitejs/plugin-react": "^1.3.2",
|
29
30
|
"blurhash": "^1.1.5",
|
31
|
+
"colors": "^1.4.0",
|
32
|
+
"glob": "^8.0.3",
|
30
33
|
"next": "^12.2.0",
|
31
|
-
"node-
|
34
|
+
"node-fetch": "^3.2.6",
|
32
35
|
"prettier": "^2.7.1",
|
33
36
|
"remark": "^14.0.2",
|
34
37
|
"retext": "^8.1.0",
|
package/util/setBootstrap.js
CHANGED
@@ -4,9 +4,18 @@ export default function writeBootstrapScript() {
|
|
4
4
|
return {
|
5
5
|
name: "write-bootstrap-script",
|
6
6
|
closeBundle() {
|
7
|
-
let BootstrapModule = fs.readFileSync(
|
8
|
-
|
9
|
-
|
7
|
+
let BootstrapModule = fs.readFileSync(
|
8
|
+
"./components/imagePreviewBootstrap.tsx",
|
9
|
+
"utf8"
|
10
|
+
);
|
11
|
+
const bootstrapScript = fs.readFileSync(
|
12
|
+
"./build/imageWithPreview.js",
|
13
|
+
"utf8"
|
14
|
+
);
|
15
|
+
BootstrapModule = BootstrapModule.replace(
|
16
|
+
"/*HERE*/",
|
17
|
+
bootstrapScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
|
18
|
+
).replace(/\${/g, "\\${");
|
10
19
|
fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);
|
11
20
|
},
|
12
21
|
};
|
package/vite.config.ts
CHANGED
@@ -7,9 +7,9 @@ export default defineConfig({
|
|
7
7
|
target: "es2022",
|
8
8
|
outDir: "./build",
|
9
9
|
lib: {
|
10
|
-
entry: "components/
|
10
|
+
entry: "components/imageWithPreview.tsx",
|
11
11
|
formats: ["cjs"],
|
12
|
-
fileName: () => "
|
12
|
+
fileName: () => "imageWithPreview.js",
|
13
13
|
name: "imageWithPreview",
|
14
14
|
},
|
15
15
|
//minify: false,
|
package/example.md
DELETED
package/output.md
DELETED
package/plugin.js
DELETED
@@ -1,78 +0,0 @@
|
|
1
|
-
import fs from "fs";
|
2
|
-
import path, { dirname } from "path";
|
3
|
-
|
4
|
-
import sharp from "sharp";
|
5
|
-
import { encode, isBlurhashValid } from "blurhash";
|
6
|
-
|
7
|
-
import { visit } from "unist-util-visit";
|
8
|
-
import { visitParents } from "unist-util-visit-parents";
|
9
|
-
|
10
|
-
import HTMLParser from "node-html-parser";
|
11
|
-
import prettier from "prettier";
|
12
|
-
|
13
|
-
import { fileURLToPath } from "url";
|
14
|
-
const __filename = fileURLToPath(import.meta.url);
|
15
|
-
const __dirname = dirname(__filename);
|
16
|
-
|
17
|
-
export default function retextSentenceSpacing() {
|
18
|
-
return (tree, file, done) => {
|
19
|
-
visitParents(tree, "image", async (node, ancestors) => {
|
20
|
-
const { url } = node;
|
21
|
-
|
22
|
-
//const resolvedPath = path.join(process.cwd(), url);
|
23
|
-
const resolvedPath = path.join(__dirname, url);
|
24
|
-
console.log(resolvedPath);
|
25
|
-
|
26
|
-
const image = sharp(resolvedPath);
|
27
|
-
const dimensions = await image.metadata();
|
28
|
-
|
29
|
-
const { width, height } = dimensions;
|
30
|
-
console.log(height, width);
|
31
|
-
|
32
|
-
image
|
33
|
-
.raw()
|
34
|
-
.ensureAlpha()
|
35
|
-
.toBuffer((err, buffer) => {
|
36
|
-
console.log("got buffer");
|
37
|
-
try {
|
38
|
-
if (err) {
|
39
|
-
console.log("Error getting buffer", err);
|
40
|
-
} else {
|
41
|
-
const blurhash = encode(new Uint8ClampedArray(buffer), width, height, 4, 4);
|
42
|
-
if (isBlurhashValid(blurhash)) {
|
43
|
-
console.log({ blurhash, w: width, h: height });
|
44
|
-
} else {
|
45
|
-
return console.log("FAIL");
|
46
|
-
}
|
47
|
-
}
|
48
|
-
} catch (err) {
|
49
|
-
return console.log("FAIL", err);
|
50
|
-
}
|
51
|
-
});
|
52
|
-
|
53
|
-
const parent = ancestors[ancestors.length - 1];
|
54
|
-
const index = parent.children.indexOf(node);
|
55
|
-
|
56
|
-
const newNode = HTMLParser.parse(`<div>
|
57
|
-
<img />
|
58
|
-
<span>Hey there 2</span>
|
59
|
-
</div>`);
|
60
|
-
|
61
|
-
parent.children[index] = {
|
62
|
-
type: "html",
|
63
|
-
value: prettier.format(newNode.outerHTML, { parser: "html" }).trimEnd(),
|
64
|
-
};
|
65
|
-
|
66
|
-
setTimeout(() => {
|
67
|
-
done();
|
68
|
-
}, 3000);
|
69
|
-
//parent.children[index] = replacement;
|
70
|
-
|
71
|
-
// parent.children.push({
|
72
|
-
// type: "html",
|
73
|
-
// value: `<div><img /><span>Hey there</span></div>`,
|
74
|
-
// position: node.position,
|
75
|
-
// });
|
76
|
-
});
|
77
|
-
};
|
78
|
-
}
|