next-blurhash-previews 0.0.1 → 0.0.3-beta10

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "arrowParens": "avoid"
+}

package/bin/generateBlurhash.js

@@ -0,0 +1,55 @@
+import sharp from "sharp";
+import fetch from "node-fetch";
+import { encode, isBlurhashValid } from "blurhash";
+
+import path from "path";
+const __dirname = process.cwd();
+
+export async function getSharpImage(imgPath) {
+  if (/^http/.test(imgPath)) {
+    const buffer = await fetch(imgPath)
+      .then(fetchResponse => fetchResponse.arrayBuffer())
+      .then(ab => Buffer.from(ab));
+
+    return sharp(buffer);
+  } else {
+    return sharp(imgPath);
+  }
+}
+
+export async function getBlurhash(path) {
+  const blurhashImage = await getSharpImage(path);
+  const dimensions = await blurhashImage.metadata();
+
+  const { width, height } = dimensions;
+
+  return new Promise((res, rej) => {
+    blurhashImage
+      .raw()
+      .ensureAlpha()
+      .toBuffer((err, buffer) => {
+        try {
+          if (err) {
+            console.log("Error getting buffer", err);
+          } else {
+            const blurhash = encode(
+              new Uint8ClampedArray(buffer),
+              width,
+              height,
+              4,
+              4
+            );
+            if (isBlurhashValid(blurhash)) {
+              return res({ blurhash, w: width, h: height });
+            } else {
+              console.log("FAIL");
+              return rej("FAIL");
+            }
+          }
+        } catch (err) {
+          console.log("FAIL", err);
+          return rej("FAIL", err);
+        }
+      });
+  });
+}

package/bin/markdown-sync.js

@@ -2,24 +2,62 @@
 
 import fs from "fs";
 import path, { dirname } from "path";
+import { fileURLToPath } from "url";
+
 import { reporter } from "vfile-reporter";
 import { remark } from "remark";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkStringify from "remark-stringify";
 
-import retextSentenceSpacing from "../plugin.js";
+import glob from "glob";
+import colors from "colors";
 
-import { fileURLToPath } from "url";
-const __filename = fileURLToPath(import.meta.url);
+import { blurhashPlugin } from "./remark-plugin.js";
+
+const directoryProcess = process.cwd();
+
+const allArgs = process.argv;
+const inputGlob = allArgs.at(-1);
+
+const files = glob.sync(inputGlob, { root: directoryProcess });
 
-const __dirname = dirname(__filename);
-const buffer = fs.readFileSync(path.join(__dirname, "example.md"));
+const publicPath = path.resolve(directoryProcess, "public");
+
+if (fs.existsSync(publicPath)) {
+  console.log(colors.blue(`Found path to public folder at: ${publicPath}\n\n`));
+  run();
+} else {
+  console.log(
+    colors.red(
+      `\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`
+    )
+  );
+}
+
+async function runFile(file) {
+  const buffer = fs.readFileSync(file);
+
+  return new Promise(res => {
+    remark()
+      .use(blurhashPlugin(publicPath))
+      .use(remarkFrontmatter)
+      .use(remarkStringify, {
+        fences: true,
+      })
+      .process(buffer)
+      .then(outputFile => {
+        fs.writeFileSync(file, outputFile.toString());
+        res();
+      });
+  });
+}
 
 async function run() {
-  remark()
-    .use(retextSentenceSpacing)
-    .process(buffer)
-    .then((file) => {
-      fs.writeFileSync("output.md", file.toString());
-    });
+  for (const file of files) {
+    console.log(colors.blue(`Processing file: ${file}\n`));
+    await runFile(file);
+    console.log(colors.blue(`${file} finished\n`));
+  }
 }
 
-run();
+//run();

package/bin/remark-plugin.js

@@ -0,0 +1,66 @@
+import path from "path";
+import { visitParents } from "unist-util-visit-parents";
+
+import colors from "colors";
+
+import { getBlurhash } from "./generateBlurhash.js";
+
+export const blurhashPlugin = publicPath => () => {
+  return (tree, file, done) => {
+    let outstanding = 0;
+
+    visitParents(tree, "image", async (node, ancestors) => {
+      let { url: imagePath, alt } = node;
+
+      const originalImg = imagePath;
+      if (!/http/.test(imagePath)) {
+        if (imagePath.startsWith("/")) {
+          imagePath = imagePath.substr(1);
+        }
+
+        imagePath = path.resolve(publicPath, imagePath);
+      }
+
+      console.log(colors.blue(`Attempting ${imagePath}...`));
+
+      try {
+        outstanding++;
+
+        const blurHash = await getBlurhash(imagePath);
+
+        console.log(
+          colors.green(`Finished processing ${imagePath}\n\t`, blurHash)
+        );
+
+        const parent = ancestors[ancestors.length - 1];
+        const index = parent.children.indexOf(node);
+
+        const newNode = `
+<blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
+  <img alt="${alt || ""}" src="${originalImg}" slot="image" />
+  <canvas width="${blurHash.w}" height="${blurHash.h}" slot="preview"></canvas>
+</blurhash-image>`.trim();
+
+        parent.children[index] = {
+          type: "html",
+          value: newNode,
+        };
+      } catch (er) {
+        console.log(colors.red(`Error processing ${imagePath}\n\t`, er));
+      } finally {
+        outstanding--;
+        setTimeout(() => {
+          if (outstanding === 0) {
+            done();
+          }
+        }, 1);
+      }
+    });
+
+    setTimeout(() => {
+      if (outstanding === 0) {
+        done();
+      }
+    }, 1);
+  };
+};

package/components/ImageWithPreview.tsx

@@ -3,17 +3,15 @@ import { decode } from "../node_modules/blurhash/dist/esm/index";
 type blurhash = { w: number; h: number; blurhash: string };
 
 class ImageWithPreview extends HTMLElement {
-  isReady: boolean = false;
-  loaded: boolean = false;
   sd: ShadowRoot;
   mo?: MutationObserver;
 
-  static observedAttributes = ["preview", "url"];
+  static observedAttributes = ["preview"];
 
-  get imgEl(): any {
+  get #imgEl(): any {
     return this.querySelector("img");
   }
-  get canvasEl(): any {
+  get #canvasEl(): any {
     return this.querySelector("canvas");
   }
 
@@ -24,65 +22,50 @@ class ImageWithPreview extends HTMLElement {
     this.sd.innerHTML = `<slot name="preview"></slot>`;
   }
 
-  checkReady = () => {
-    if (this.imgEl && this.canvasEl) {
-      this.ready();
+  #checkReady = () => {
+    if (this.#imgEl && this.#canvasEl) {
       this.mo?.disconnect();
+
+      if (this.#imgEl.complete) {
+        this.#imgLoad();
+      } else {
+        this.#updatePreview();
+        this.#imgEl.addEventListener("load", this.#imgLoad);
+      }
+
+      return true;
     }
-    return this.isReady;
   };
 
   connectedCallback() {
-    if (!this.checkReady()) {
-      this.mo = new MutationObserver(this.checkReady);
-      this.mo.observe(this, { subtree: true, childList: true, attributes: false });
+    if (!this.#checkReady()) {
+      this.mo = new MutationObserver(this.#checkReady);
+      this.mo.observe(this, {
+        subtree: true,
+        childList: true,
+        attributes: false,
+      });
     }
   }
 
-  ready() {
-    this.isReady = true;
-    this.updatePreview();
-    if (this.imgEl.complete) {
-      this.onImageLoad();
-    }
-    this.imgEl.addEventListener("load", this.onImageLoad);
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.isReady) {
-      return;
-    }
+  #imgLoad = () => {
+    this.sd.innerHTML = `<slot name="image"></slot>`;
+  };
 
-    if (name === "preview") {
-      this.updatePreview();
-    } else if (name === "url") {
-      this.loaded = false;
+  attributeChangedCallback(name) {
+    if (this.#canvasEl && name === "preview") {
+      this.#updatePreview();
     }
-
-    this.render();
   }
 
-  updatePreview() {
+  #updatePreview() {
     const previewObj = JSON.parse(this.getAttribute("preview")!);
-    updateBlurHashPreview(this.canvasEl, previewObj);
-  }
-
-  onImageLoad = () => {
-    if (this.getAttribute("url") !== this.imgEl.src) {
-      setTimeout(() => {
-        this.loaded = true;
-        this.render();
-      }, 1500);
-    }
-  };
-
-  render() {
-    this.sd.innerHTML = `<slot name="${this.loaded ? "image" : "preview"}"></slot>`;
+    updateBlurHashPreview(this.#canvasEl, previewObj);
   }
 }
 
-if (!customElements.get("uikit-image")) {
-  customElements.define("uikit-image", ImageWithPreview);
+if (!customElements.get("blurhash-image")) {
+  customElements.define("blurhash-image", ImageWithPreview);
 }
 
 function updateBlurHashPreview(canvasEl: HTMLCanvasElement, preview: blurhash) {

package/components/NextWrapper.tsx

@@ -1,7 +1,15 @@
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      ["blurhash-image"]: any;
+    }
+  }
+}
 
 export const ImageWithPreview = (props: any) => {
-  const wcRef = useRef(null);
+  const wcRef = useRef<any>(null);
 
   const { preview } = props;
   const { w, h } = JSON.parse(preview);
@@ -11,9 +19,9 @@ export const ImageWithPreview = (props: any) => {
   }, []);
 
   return (
-    <uikit-image ref={wcRef} {...props}>
+    <blurhash-image ref={wcRef} {...props}>
       <img style={{ display: "none" }} />
       <canvas width={w} height={h}></canvas>
-    </uikit-image>
+    </blurhash-image>
   );
 };

package/index.js

@@ -1,5 +1,3 @@
-import { imagePreviewBootstrap } from "./imagePreviewBootstrap";
+import { imagePreviewBootstrap } from "./imagePreviewBootstrap.js";
 
 export { imagePreviewBootstrap };
-
-export const src = `(() => { "use strict";var A=Object.defineProperty;var R=(t,e,s)=>e in t?A(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var u=(t,e,s)=>(R(t,typeof e!="symbol"?e+"":e,s),s);const G=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","#","$","%","*","+",",","-",".",":",";","=","?","@","[","]","^","_","{","|","}","~"],h=t=>{let e=0;for(let s=0;s<t.length;s++){const n=t[s],o=G.indexOf(n);e=e*83+o}return e},p=t=>{let e=t/255;return e<=.04045?e/12.92:Math.pow((e+.055)/1.055,2.4)},b=t=>{let e=Math.max(0,Math.min(1,t));return e<=.0031308?Math.round(e*12.92*255+.5):Math.round((1.055*Math.pow(e,.4166666666666667)-.055)*255+.5)},P=t=>t<0?-1:1,E=(t,e)=>P(t)*Math.pow(Math.abs(t),e);class v extends Error{constructor(e){super(e),this.name="ValidationError",this.message=e}}const k=t=>{if(!t||t.length<6)throw new v("The blurhash string must be at least 6 characters");const e=h(t[0]),s=Math.floor(e/9)+1,n=e%9+1;if(t.length!==4+2*n*s)throw new v(\`blurhash length mismatch: length is \${t.length} but it should be \${4+2*n*s}\`)},D=t=>{const e=t>>16,s=t>>8&255,n=t&255;return[p(e),p(s),p(n)]},H=(t,e)=>{const s=Math.floor(t/361),n=Math.floor(t/19)%19,o=t%19;return[E((s-9)/9,2)*e,E((n-9)/9,2)*e,E((o-9)/9,2)*e]},S=(t,e,s,n)=>{k(t),n=n|1;const o=h(t[0]),a=Math.floor(o/9)+1,c=o%9+1,q=(h(t[1])+1)/166,g=new Array(c*a);for(let r=0;r<g.length;r++)if(r===0){const i=h(t.substring(2,6));g[r]=D(i)}else{const i=h(t.substring(4+r*2,6+r*2));g[r]=H(i,q*n)}const l=e*4,d=new Uint8ClampedArray(l*s);for(let r=0;r<s;r++)for(let i=0;i<e;i++){let I=0,x=0,C=0;for(let m=0;m<a;m++)for(let f=0;f<c;f++){const M=Math.cos(Math.PI*i*f/e)*Math.cos(Math.PI*r*m/s);let w=g[f+m*c];I+=w[0]*M,x+=w[1]*M,C+=w[2]*M}let B=b(I),T=b(x),y=b(C);d[4*i+0+r*l]=B,d[4*i+1+r*l]=T,d[4*i+2+r*l]=y,d[4*i+3+r*l]=255}return d};class L extends HTMLElement{constructor(){super();u(this,"loaded",!1);u(this,"sd");u(this,"onImageLoad",()=>{this.getAttribute("url")!==this.currentImageEl.src&&setTimeout(()=>{this.loaded=!0,this.render()},1500)});this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}get currentImageEl(){return this.querySelector("img")}get currentCanvasEl(){return this.querySelector("canvas")}connectedCallback(){this.currentImageEl.complete&&this.onImageLoad(),this.currentImageEl.addEventListener("load",this.onImageLoad)}attributeChangedCallback(s,n,o){if(s==="preview"){const a=JSON.parse(o);O(this.currentCanvasEl,a)}else s==="url"&&o!==this.currentImageEl.getAttribute("src")&&(this.loaded=!1,this.currentImageEl.src=o||"");this.render()}render(){this.sd.innerHTML=\`<slot name="\${this.loaded?"image":"preview"}"></slot>\`}}u(L,"observedAttributes",["preview","url"]);customElements.get("uikit-image")||customElements.define("uikit-image",L);function O(t,e){const{w:s,h:n}=e;t.width=s,t.height=n;const o=S(e.blurhash,s,n),a=t.getContext("2d"),c=a.createImageData(s,n);c.data.set(o),a.putImageData(c,0,0)} })();`;

package/next-runner/blog-posts/post1.md

@@ -0,0 +1,303 @@
+---
+title: Loading css, css-modules, and Sass with webpack
+date: "2019-05-13T10:00:00.000Z"
+description: An introduction to loading css with webpack, and enabling css-modules, and SASS in the process
+---
+
+The css ecosystem is immense and, at times, intimidating. This post will start at the beginning. We'll go over loading basic css with webpack, then move on to css modules, and wrap up with Sass. If you have some experience loading css in webpack-based web applications, some of this may be old news for you.
+
+Note that while the code samples in this post use React, none of the concepts are specific to it in the least. Also, this post does _not_ cover css-in-js, for the simple reason that I haven't yet gotten around to diving into that ecosystem; I'm hoping by the time I do, it'll be a bit less crowded :)
+
+## Starting at the beginning: basic css loading
+
+Let's say we're rendering this component.
+
+```jsx
+const Component = () => (
+  <div className="pane">
+    <span>Pane Content</span>
+    <ul className="list">
+      <li className="list-item">Item 1</li>
+      <li className="list-item">Item 2</li>
+      <li className="list-item">Item 3</li>
+    </ul>
+  </div>
+);
+```
+
+Without accompanying styles, it'll look something like this.
+
+![Unstyled Component](/css-modules/unstyledComp.png)
+
+Let's add some basic styling. Let's start simple, and have the JS module this component sits in import a css file, with standard, global styling rules. The import will look like this
+
+```javascript
+import "./styles.css";
+```
+
+Let's create that file, and add some purposefully ugly styles
+
+```css
+.pane {
+  background-color: green;
+  max-width: 300px;
+}
+
+.pane span {
+  color: purple;
+}
+
+.list {
+  margin-left: 20px;
+}
+
+.list-item {
+  list-style-type: lower-greek;
+}
+```
+
+As we have it, this code leads to the following webpack error
+
+![Loading error](/css-modules/loadingError.png)
+
+webpack only knows how to load standard JavaScript by default. To add other content, like css, we need to tell webpack how to handle it. Let's do that now. First, install the `mini-css-extract-plugin` and `css-loader` plugins, using your favorite package manager, in your favorite cli.
+
+Now load the mini css extract plugin in your webpack.config.js file.
+
+```javascript
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+```
+
+Now, in the same config file, there should be a `module` object at the top of the config object, and somewhere under that, there should be a `rules` array. If either are missing, add them. Now, under `rules`, add this entry
+
+```javascript
+{
+  test: /\.css$/,
+  use: [MiniCssExtractPlugin.loader, "css-loader"]
+},
+```
+
+Finally, under the plugins array, also at the top level of your webpack.config object (add it if necessary), add this
+
+```javascript
+new MiniCssExtractPlugin({
+  filename: isProd ? "[name]-[contenthash].css" : "[name].css"
+});
+```
+
+If you're new to webpack, and that went a little too fast for you, check out the [webpack docs](https://webpack.js.org/plugins/mini-css-extract-plugin/#root) for a slower treatment of this.
+
+Now, if we restart webpack, and reload our page, we should see this disgusting, but technically correct result
+
+![Unstyled Component](/css-modules/styledComponent.png)
+
+"Success" - hooray.
+
+## Adding CSS Modules
+
+Right now we have code-split css. We can load css within any JavaScript module which uses it, and the CSS will only load if, and when that JS module is loaded. However, the css is global; if we add style rules for `list-item` in any other .css file, they'll conflict with the styles in this one. Wouldn't it be nice if we could have these styles be scoped only to the JS module which loads them? We can, with css-modules.
+
+css-modules are a pre-processor step on your css file. It runs through all of your class names, and makes them unique. Moreover, it creates an exported object from the css file, on which these unique class names are exposed.
+
+To enable this behavior, we'll first tweak the webpack loader rule, like so
+
+```javascript
+{
+  test: /\.css$/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: "css-loader",
+      options: { modules: true, exportOnlyLocals: false }
+    }
+  ]
+};
+```
+
+Note that the `exportOnlyLocals` may not be needed, as it should be the default; however, I've seen weird errors without it.
+
+As we have it, our styles will still be loaded, but exposed behind dynamically generated class names. To apply them to our component at development time, we need to grab them off of the css module. Let's do that now
+
+```jsx
+import styles from "./styles.css";
+const { pane, list, ["list-item"]: listItem } = styles;
+
+const Component = () => (
+  <div className={pane}>
+    <span>Pane Content</span>
+    <ul className={list}>
+      <li className={listItem}>Item 1</li>
+      <li className={listItem}>Item 2</li>
+      <li className={listItem}>Item 3</li>
+    </ul>
+  </div>
+);
+```
+
+We now import an object from the css file. The keys of this object are the class names we wrote originally in the css file, and the property values are the dynamically generated class names. Note the weird syntax around the `list-item` class. JavaScript identifiers cannot be hyphenated, so you'll either need to alias it, or just use valid JS names in your css modules.
+
+_Edit_ - after publishing this, Marc Bernstein pointed out on Twitter that css-loader has a `camelCase` option that will convert hyphenated class names to camel-cased equivalents. You can read the docs on it [here](https://github.com/webpack-contrib/css-loader#camelcase)
+
+Applying everything like so should reveal the same ugly output as before
+
+![Unstyled Component](/css-modules/styledComponent.png)
+
+## Best of Both Worlds?
+
+So far so good, but what if, like me, you think global styles aren't so bad, _sometimes_. What if you have some styles that you plan to be universal in your app, used almost everywhere, and manually importing them as dynamic values just isn't worth the effort? Examples might include a `.btn`, `.table`, or even a `.pane` class. What if the `.pane` class is intended to be used far and wide, with exactly one meaning. Can we make that class (and others) be global, while using css-modules for module-specific stylings, like our list classes, above.
+
+You can, and you have two options: you can define each and every global css class with `:global()` (see the [css-modules docs](https://github.com/css-modules/css-modules) for more info), or, my preferred approach, you can use a naming scheme to differentiate global css files from css-modules.
+
+Specifically, what if we decide that files ending with `.module.css` are css modules, and any other `.css` file is an old-school, global css file. webpack makes this possible with the `oneOf` construct. Basically, turn your entry in the `rules` section, from before, into this
+
+```javascript
+{
+  test: /\.css$/,
+  oneOf: [
+    {
+      test: /\.module\.css$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: "css-loader",
+          options: { modules: true, exportOnlyLocals: false }
+        }
+      ]
+    },
+    {
+      use: [MiniCssExtractPlugin.loader, "css-loader"]
+    }
+  ]
+};
+```
+
+This tells webpack to match `.css` files against the first rule that's valid. If the `.css` file ends in `.module.css`, use css modules. Else, use global styles. Let's try this out.
+
+Let's rename our original `styles.css` to be `styles.module.css`, and remove the `.pane` styles. It'll look like this now
+
+```css
+.list {
+  margin-left: 20px;
+}
+
+.list-item {
+  list-style-type: lower-greek;
+}
+```
+
+Now, let's add a new `styles.css` file, and put our `pane` styles from before, into it
+
+```css
+.pane {
+  background-color: green;
+  max-width: 300px;
+}
+
+.pane span {
+  color: purple;
+}
+```
+
+Now, we'll import the global css styles (probably in one place, at the root of our application) like we did originally
+
+```javascript
+import "./styles.css";
+```
+
+and we'll grab the dynamic class names for the things we left in the css module, as we did above
+
+```jsx
+import styles from "./styles.module.css";
+const { list, ["list-item"]: listItem } = styles;
+
+const Component = () => (
+  <div className="pane">
+    <span>Pane Content</span>
+    <ul className={list}>
+      <li className={listItem}>Item 1</li>
+      <li className={listItem}>Item 2</li>
+      <li className={listItem}>Item 3</li>
+    </ul>
+  </div>
+);
+```
+
+If all went well, everything should look identical to before.
+
+## Getting Sassy
+
+Lastly, let's say you want to add Sass. Being subject to normal developer constraints, you certainly can't convert each and every css file to be scss, so you want to support both, side-by-side. Fortunately this is the easiest part of the post. Since scss is a superset of css, we can just run all `.css` and `.scss` files through the `sass-loader` as a first step, and leave all the rest of the css processing the same, as before. Let's see how.
+
+First, we'll install some new dependencies
+
+```
+npm i node-sass sass-loader --save
+```
+
+Now, we'll add a slight tweak to our webpack rules
+
+```javascript
+{
+  test: /\.s?css$/,
+  oneOf: [
+    {
+      test: /\.module\.s?css$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: "css-loader",
+          options: { modules: true, exportOnlyLocals: false }
+        },
+        "sass-loader"
+      ]
+    },
+    {
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
+    }
+  ]
+};
+```
+
+We added `sass-loader` as a new, first loader (loaders are processed from right to left). Did you catch the other change? It's the two `?`'s in the `test` properties. `?` means optional in regular expressions, so all this means is, our rules now apply to both `.css` and `.scss` files. Plain `.css` files are processed by the sass-loader, but again, css is a subset of `scss`, so this is effectively a no-op.
+
+To make sure things still work, let's convert our css files to scss, add some Sass, and maybe even tweak the styles to be even cooler, and make sure everything still works.
+
+First, for `styles.css`, we'll rename it to `styles.scss`, and add a few upgrades.
+
+```scss
+$paneColor: pink;
+$paneSpanColor: purple;
+
+.pane {
+  background-color: $paneColor;
+  max-width: 300px;
+}
+
+.pane span {
+  color: $paneSpanColor;
+}
+```
+
+Now, we'll rename `styles.module.css` to be `styles.modules.scss` and make it look something like this
+
+```scss
+$listStyleType: armenian;
+
+.list {
+  margin-left: 20px;
+}
+
+.list-item {
+  list-style-type: $listStyleType;
+}
+```
+
+after re-starting our webpack process, our cool component should look like this
+
+![Unstyled Component](/css-modules/styledSass.png)
+
+## Concluding thoughts
+
+In the end, a few lines of webpack config allowed us to easily load global, or scoped css, with optional sass processing in either case. Of course this is only scratching the surface of what's possible. There's no shortage of PostCSS, or other plugins you could toss into the loader list.
+
+Happy Coding!

package/next-runner/blog-posts/post2.md

@@ -0,0 +1,10 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+

package/next-runner/blog-posts/post3.md

@@ -0,0 +1,10 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+

package/next-runner/blog-posts/post4.md

@@ -0,0 +1,10 @@
+![A](./img1.png)
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+![external image](https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg)
+

package/next-runner/package-lock.json

@@ -21,10 +21,17 @@
       }
     },
     "..": {
-      "version": "0.0.4",
+      "version": "0.0.1",
       "license": "ISC",
       "dependencies": {
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^1.3.2",
         "blurhash": "^1.1.5",
+        "colors": "^1.4.0",
+        "glob": "^8.0.3",
+        "next": "^12.2.0",
+        "node-fetch": "^3.2.6",
         "node-html-parser": "^5.3.3",
         "prettier": "^2.7.1",
         "remark": "^14.0.2",
@@ -33,10 +40,11 @@
         "to-vfile": "^7.2.3",
         "unist-util-visit": "^4.1.0",
         "unist-util-visit-parents": "^5.1.0",
-        "vfile-reporter": "^7.0.4"
+        "vfile-reporter": "^7.0.4",
+        "vite": "^2.9.13"
       },
       "bin": {
-        "next-static-markdown-previews": "index.js"
+        "next-blurhash-markdown": "bin/markdown-sync.js"
       }
     },
     "node_modules/@babel/runtime": {
@@ -2167,7 +2175,7 @@
         }
       }
     },
-    "node_modules/next-static-image-previews": {
+    "node_modules/next-blurhash-previews": {
       "resolved": "..",
       "link": true
     },
@@ -4481,10 +4489,17 @@
         "use-sync-external-store": "1.1.0"
       }
     },
-    "next-static-image-previews": {
+    "next-blurhash-previews": {
       "version": "file:..",
       "requires": {
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^1.3.2",
         "blurhash": "^1.1.5",
+        "colors": "^1.4.0",
+        "glob": "^8.0.3",
+        "next": "^12.2.0",
+        "node-fetch": "^3.2.6",
         "node-html-parser": "^5.3.3",
         "prettier": "^2.7.1",
         "remark": "^14.0.2",
@@ -4493,7 +4508,8 @@
         "to-vfile": "^7.2.3",
         "unist-util-visit": "^4.1.0",
         "unist-util-visit-parents": "^5.1.0",
-        "vfile-reporter": "^7.0.4"
+        "vfile-reporter": "^7.0.4",
+        "vite": "^2.9.13"
       }
     },
     "object-assign": {

package/next-runner/pages/_document.js

@@ -1,7 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { imagePreviewBootstrap, src } from "next-static-image-previews";
-
-import Script from "next/script";
+import { imagePreviewBootstrap, src } from "next-blurhash-previews";
 
 export default class MyDocument extends Document {
   render() {

package/next-runner/pages/index.js

@@ -11,16 +11,37 @@ export default function Home() {
     <div className={styles.container}>
       Root
       <br />
-      <button onClick={() => setVal((x) => x + 1)}>Refresh</button>
+      <button onClick={() => setVal(x => x + 1)}>Refresh</button>
       {val}
-      <uikit-image key={val} url="/dynamo-introduction/img1.png" preview='{ "w": 364, "h": 196, "blurhash": "L8S6SsD*%gt7IVM|tRRj~qWBM{NG" }'>
-        <img slot="image" src="/dynamo-introduction/img1.png" />
-        <canvas slot="preview" width="364" height="196"></canvas>
-      </uikit-image>
-      <uikit-image key={val + 9} url="/dynamo-introduction/img5a.png" preview='{ "w": 2244, "h": 622, "blurhash": "LnPGmj_zIA:KS}j[s:ay-VWVRjay" }'>
-        <img slot="image" src="/dynamo-introduction/img5a.png" />
-        <canvas slot="preview" width="2244" height="622"></canvas>
-      </uikit-image>
+      <div style={{ display: "flex" }}>
+        <blurhash-image
+          key={val}
+          url="/dynamo-introduction/img1.png"
+          preview='{ "w": 364, "h": 196, "blurhash": "L8S6SsD*%gt7IVM|tRRj~qWBM{NG" }'
+        >
+          <img slot="image" src="/dynamo-introduction/img1.png" />
+          <canvas slot="preview" width="364" height="196"></canvas>
+        </blurhash-image>
+        <blurhash-image
+          key={val + 2}
+          url="/dynamo-introduction/img5a.png"
+          preview='{ "w": 500, "h": 139, "blurhash": "LnPGmj_zIA:KS}j[s:ay-VWVRjay" }'
+        >
+          <img slot="image" src="/dynamo-introduction/img5a.png" />
+          <canvas slot="preview" width="500" height="139"></canvas>
+        </blurhash-image>
+        <blurhash-image
+          key={val + 5}
+          url="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
+          preview='{ "w": 106, "h": 160, "blurhash": "U38|kkTJ01}A;{Or57;N01NG+?IW01rX^NAW" }'
+        >
+          <img
+            slot="image"
+            src="https://d193qjyckdxivp.cloudfront.net/medium-covers/573d1b97120426ef0078aa92/fcb820e4-36e3-4741-a3de-6994c46a66cc.jpg"
+          />
+          <canvas slot="preview" width="106" height="160"></canvas>
+        </blurhash-image>
+      </div>
     </div>
   );
 }

package/next-runner/styles/Home.module.css

@@ -0,0 +1,3 @@
+.container {
+  margin: 15px;
+}

package/next-runner/yarn.lock

@@ -1122,11 +1122,15 @@
   "resolved" "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   "version" "1.4.0"
 
-"next-static-image-previews@file:/Users/arackis/Documents/git/next-static-image-previews":
+"next-blurhash-previews@file:/Users/arackis/Documents/git/next-blurhash-previews":
   "resolved" "file:.."
-  "version" "0.0.4"
+  "version" "0.0.1"
   dependencies:
+    "@types/react" "^18.0.15"
+    "@types/react-dom" "^18.0.6"
+    "@vitejs/plugin-react" "^1.3.2"
     "blurhash" "^1.1.5"
+    "next" "^12.2.0"
     "node-html-parser" "^5.3.3"
     "prettier" "^2.7.1"
     "remark" "^14.0.2"
@@ -1136,6 +1140,7 @@
     "unist-util-visit" "^4.1.0"
     "unist-util-visit-parents" "^5.1.0"
     "vfile-reporter" "^7.0.4"
+    "vite" "^2.9.13"
 
 "next@12.2.0":
   "integrity" "sha512-B4j7D3SHYopLYx6/Ark0fenwIar9tEaZZFAaxmKjgcMMexhVJzB3jt7X+6wcdXPPMeUD6r09weUtnDpjox/vIA=="

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "next-blurhash-previews",
-  "version": "0.0.1",
+  "version": "0.0.3-beta10",
   "description": "",
   "main": "index.js",
+  "module": "index.js",
   "bin": {
-    "next-static-markdown-previews": "./bin/markdown-sync.js"
+    "blurhash-markdown": "./bin/markdown-sync.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "vite build",
-    "build-watch": "vite build -w"
+    "build-watch": "vite build -w",
+    "prepare": "npm run build"
   },
   "type": "module",
   "repository": {
@@ -27,10 +29,14 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^1.3.2",
     "blurhash": "^1.1.5",
+    "colors": "^1.4.0",
+    "glob": "^8.0.3",
+    "install": "^0.13.0",
     "next": "^12.2.0",
-    "node-html-parser": "^5.3.3",
-    "prettier": "^2.7.1",
+    "node-fetch": "^3.2.6",
+    "npm": "^8.15.1",
     "remark": "^14.0.2",
+    "remark-frontmatter": "^4.0.1",
     "retext": "^8.1.0",
     "sharp": "^0.30.7",
     "to-vfile": "^7.2.3",

package/util/setBootstrap.js

@@ -4,9 +4,18 @@ export default function writeBootstrapScript() {
   return {
     name: "write-bootstrap-script",
     closeBundle() {
-      let BootstrapModule = fs.readFileSync("./components/imagePreviewBootstrap.tsx", "utf8");
-      const bootstrapScript = fs.readFileSync("./build/ImageWithPreview.js", "utf8");
-      BootstrapModule = BootstrapModule.replace("/*HERE*/", bootstrapScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")).replace(/\${/g, "\\${");
+      let BootstrapModule = fs.readFileSync(
+        "./components/imagePreviewBootstrap.tsx",
+        "utf8"
+      );
+      const bootstrapScript = fs.readFileSync(
+        "./build/imageWithPreview.js",
+        "utf8"
+      );
+      BootstrapModule = BootstrapModule.replace(
+        "/*HERE*/",
+        bootstrapScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")
+      ).replace(/\${/g, "\\${");
       fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);
     },
   };

package/vite.config.ts

@@ -7,9 +7,9 @@ export default defineConfig({
     target: "es2022",
     outDir: "./build",
     lib: {
-      entry: "components/ImageWithPreview.tsx",
+      entry: "components/imageWithPreview.tsx",
       formats: ["cjs"],
-      fileName: () => "ImageWithPreview.js",
+      fileName: () => "imageWithPreview.js",
       name: "imageWithPreview",
     },
     //minify: false,

package/example.md

@@ -1,9 +0,0 @@
-![A](./img1.png)
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-![Query execution plan](/img5.png)

package/output.md

@@ -1,15 +0,0 @@
-<div>
-  <img />
-  <span>Hey there 2</span>
-</div>
-
-<some-component>
-  <p>Hello</p>
-</some-component>
-
-Yo
-
-<div>
-  <img />
-  <span>Hey there 2</span>
-</div>

package/plugin.js

@@ -1,78 +0,0 @@
-import fs from "fs";
-import path, { dirname } from "path";
-
-import sharp from "sharp";
-import { encode, isBlurhashValid } from "blurhash";
-
-import { visit } from "unist-util-visit";
-import { visitParents } from "unist-util-visit-parents";
-
-import HTMLParser from "node-html-parser";
-import prettier from "prettier";
-
-import { fileURLToPath } from "url";
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export default function retextSentenceSpacing() {
-  return (tree, file, done) => {
-    visitParents(tree, "image", async (node, ancestors) => {
-      const { url } = node;
-
-      //const resolvedPath = path.join(process.cwd(), url);
-      const resolvedPath = path.join(__dirname, url);
-      console.log(resolvedPath);
-
-      const image = sharp(resolvedPath);
-      const dimensions = await image.metadata();
-
-      const { width, height } = dimensions;
-      console.log(height, width);
-
-      image
-        .raw()
-        .ensureAlpha()
-        .toBuffer((err, buffer) => {
-          console.log("got buffer");
-          try {
-            if (err) {
-              console.log("Error getting buffer", err);
-            } else {
-              const blurhash = encode(new Uint8ClampedArray(buffer), width, height, 4, 4);
-              if (isBlurhashValid(blurhash)) {
-                console.log({ blurhash, w: width, h: height });
-              } else {
-                return console.log("FAIL");
-              }
-            }
-          } catch (err) {
-            return console.log("FAIL", err);
-          }
-        });
-
-      const parent = ancestors[ancestors.length - 1];
-      const index = parent.children.indexOf(node);
-
-      const newNode = HTMLParser.parse(`<div>
-        <img />
-        <span>Hey there 2</span>
-        </div>`);
-
-      parent.children[index] = {
-        type: "html",
-        value: prettier.format(newNode.outerHTML, { parser: "html" }).trimEnd(),
-      };
-
-      setTimeout(() => {
-        done();
-      }, 3000);
-      //parent.children[index] = replacement;
-
-      // parent.children.push({
-      //   type: "html",
-      //   value: `<div><img /><span>Hey there</span></div>`,
-      //   position: node.position,
-      // });
-    });
-  };
-}