vowel 0.6.0 → 0.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "bin": "bin.js",
   "main": "index.js",
   "scripts": {
@@ -67,6 +67,7 @@
     "unist-util-stringify-position": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "unist-util-visit-parents": "^6.0.0",
+    "unpic": "^4.2.2",
     "url-metadata": "^5.4.1",
     "voot": "^0.1.0",
     "votive": "^0.4.0",

package/plugins/markdown/index.js

@@ -19,7 +19,7 @@ import { h } from 'hastscript'
 import { normalizeHeadings } from 'mdast-normalize-headings'
 import { readFileSync } from "fs"
 import { remove } from "unist-util-remove"
-import { testURL, testHashtags, createHashtagPage, toTitleCase, hashtagRegexSingle, createImagePaths, imageSizes } from "./../../utils.js"
+import { testURL, testHashtags, createHashtagPage, toTitleCase, hashtagRegexSingle, createImagePaths, imageSizes, imageExts } from "./../../utils.js"
 import { toHast } from 'mdast-util-to-hast'
 import { toString as hastToString } from 'hast-util-to-string'
 import { toString as mdastToString } from 'mdast-util-to-string'
@@ -27,6 +27,7 @@ import { unified } from "unified"
 import { visit } from "unist-util-visit"
 import toc from "@jsdevtools/rehype-toc"
 import slug from "rehype-slug"
+import * as unpic from "unpic"
 
 const VOWEL_DIR = path.normalize(path.join(import.meta.dirname, "../../"))
 
@@ -57,10 +58,50 @@ Disallow: /`
  * @param {string} dependent
  */
 function createDynamicImage(imagePath, database, dependent, alt, itemprop) {
-  console.log({ imagePath })
+  // TODO: Hardcode image height and width
+  const parsed = path.parse(imagePath);
+  const isURL = testURL(imagePath)
+  const isImg = !parsed.ext.search(/^.(png|jpeg|jpg)$/);
+
+  if (isURL) {
+    const parsedImageURL = unpic.parseUrl(imagePath)
+    if (parsedImageURL) {
+
+      const sources = [...imageExts, "jpeg"].map((format, index) => {
+
+        const isImg = index === imageExts.length
+        // TODO: Ignore images that have options already specified
+        const urls = imageSizes.map(size => {
+          return unpic.transformUrl({
+            format: format,
+            url: parsedImageURL.src,
+            provider: parsedImageURL.cdn,
+            width: size
+          })
+        })
+
+        const sizes = urls.map((url, index) => `${url} ${imageSizes[index]}w`).join(", ")
+
+        return h(isImg ? "img" : "source", {
+          type: "image/" + format,
+          srcset: sizes,
+          src: isImg && urls.at(-1),
+          loading: isImg && "lazy",
+          sizes: "100vw",
+          alt: isImg && alt
+        })
+      })
+
+      return h("picture", { itemprop: itemprop && "image" }, sources)
+    }
+  }
+
+  if (!isImg) return
+
   const relativePath = imagePath.startsWith("/") ? path.relative("/", imagePath) : imagePath
   const image = database.target.getWithTrackers(relativePath, dependent)
-  console.log({ relativePath, image })
+  console.log({ image, relativePath })
+  if (!image) return
   const formats = createImagePaths(image.abstract.sourcePath, "./", image.abstract.uuid)
 
 
@@ -79,7 +120,7 @@ function createDynamicImage(imagePath, database, dependent, alt, itemprop) {
     })
   })
 
-  
+
   return h("picture", { itemprop: itemprop && "image" }, sources)
 }