vowel 0.5.0 → 0.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "bin": "bin.js",
   "main": "index.js",
   "scripts": {
@@ -58,6 +58,7 @@
     "remark-html": "^16.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "sharp": "^0.35.3",
     "unified": "^11.0.5",
     "unist-util-find": "^3.0.0",
     "unist-util-is": "^6.0.0",
@@ -66,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/images/index.js

@@ -1,10 +1,38 @@
+import { randomUUID } from "node:crypto"
 import fs from "fs/promises"
+import sharp from 'sharp'
+import path from "node:path"
+import {createImagePath, imageSizes, imageExts } from "./../../utils.js"
 
 /** @import * as Votive from "votive" */
 
+
 /** @type {Votive.ProcessorWrite} */
 async function writeImage(destination, database, config) {
+  const { uuid, sourcePath } = destination.abstract
+
+  const defaultFormat = path.extname(sourcePath)
+
+  const image = sharp(destination.path)
+
+  const images = imageSizes.flatMap(size => {
+    [...imageExts, defaultFormat].map(ext => {
+      const filePath = createImagePath({
+        targetFilePath: sourcePath,
+        size,
+        ext,
+        targetDirectory: config.destinationFolder,
+        uuid
+      })
+
+      return image.clone().resize(size).toFile(filePath)
+    })
+  })
+
+  await Promise.all(images)
+
   const buffer = await fs.readFile(destination.path)
+
   return {
     data: buffer,
   }
@@ -12,11 +40,13 @@ async function writeImage(destination, database, config) {
 
 /** @type {Votive.ProcessorRead} */
 function readImagePath(string) {
+  const uuid =randomUUID()
 
   const data = {
     metadata: {},
     abstract: {
-      path: string
+      sourcePath: string,
+      uuid
     }
   }
 

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 } 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, "../../"))
 
@@ -50,7 +51,86 @@ User-agent: CCBot
 Disallow: /`
 
 
-function makeHead(metadata, url) {
+
+/**
+ * @param {string} imagePath
+ * @param {Votive.Database} database
+ * @param {string} dependent
+ */
+function createDynamicImage(imagePath, database, dependent, alt, itemprop) {
+  // 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({ image, relativePath })
+  if (!image) return
+  const formats = createImagePaths(image.abstract.sourcePath, "./", image.abstract.uuid)
+
+
+  const sources = formats.map((format, index) => {
+    const isImg = index === formats.length - 1
+
+    const sizes = format.map((size, index) => `/${size} ${imageSizes[index]}w`).join(", ")
+    const type = "image/" + path.extname(format[0]).slice(1)
+    return h(isImg ? "img" : "source", {
+      type,
+      srcset: sizes,
+      loading: isImg && "lazy",
+      src: isImg && "/" + format.at(-1),
+      sizes: "100vw",
+      alt: isImg && alt
+    })
+  })
+
+
+  return h("picture", { itemprop: itemprop && "image" }, sources)
+}
+
+/**
+ * @param {object} metadata
+ * @param {string} url
+ * @param {Votive.Database} database
+ * @param {Votive.VotiveConfig} config
+ */
+function makeHead(metadata, url, database, config) {
 
   const treeMainHead = []
 
@@ -75,19 +155,16 @@ function makeHead(metadata, url) {
     )
   }
 
-  if (metadata.image) treeMainHead.push(
-    h("img", {
-      src: metadata.image,
-      itemprop: "image"
-    })
-  )
 
-  if (!metadata.image && metadata.first_image && url) treeMainHead.push(
-    h("img", {
-      src: metadata.first_image,
-      itemprop: "image"
-    })
-  )
+
+
+  if (metadata.image || (metadata.first_image && url)) {
+    const metaImage = metadata.image || metadata.first_image
+
+    treeMainHead.push(
+      createDynamicImage(metaImage, database, url, null, true)
+    )
+  }
 
   if (metadata.fm_description) treeMainHead.push(
     h("p",
@@ -991,7 +1068,12 @@ function writeFile(destination, database, config) {
 
   const treeContentSlugged = slugger.runSync(treeContent)
 
-  const treeMainHead = makeHead(metadata)
+  const treeMainHead = makeHead(metadata, null, database, config)
+
+  visit(treeContent, { tagName: "img" }, (node, index, parent) => {
+    const { src, alt } = node.properties
+    parent.children.splice(index, 1, createDynamicImage(src, database, destination.path, alt))
+  })
 
   visit(treeContent, testPaths, ({ children: [child] }, i, p) => {
 
@@ -1011,7 +1093,7 @@ function writeFile(destination, database, config) {
       const target = database.target.getWithTrackers(targetFilePath, destination.path)
 
       if (target) {
-        const article = h('article', makeHead(target.metadata, target.metadata.prettyURL))
+        const article = h('article', makeHead(target.metadata, target.metadata.prettyURL, database, config))
 
         p.children.splice(i, 1, article)
       }
@@ -1046,7 +1128,7 @@ function writeFile(destination, database, config) {
       const list = h(`ul.${dirClasses}`,
         targets.map(target => {
           return h('li',
-            h('article', makeHead(target.metadata, target.metadata.prettyURL))
+            h('article', makeHead(target.metadata, target.metadata.prettyURL, database, config))
           )
         })
       )

package/utils.js

@@ -1,7 +1,47 @@
 import {fromMarkdown} from 'mdast-util-from-markdown'
 import {toHast} from 'mdast-util-to-hast'
 import {toHtml} from 'hast-util-to-html'
+import path from "node:path"
+import { randomUUID } from "node:crypto"
 
+export const imageSizes = [414, 768, 1440, 1920]
+export const imageExts = ["avif", "webp"]
+
+/**
+ * @param {object} params
+ * @property {string} targetFilePath
+ * @property {number} size
+ * @property {string} targetDirectory
+ * @property {string} uuid
+ */
+export function createImagePath({ targetFilePath, size, ext, targetDirectory, uuid }) {
+  const { dir, name } = path.parse(targetFilePath)
+  return path.format({
+    dir: path.relative(".", path.normalize(path.join(targetDirectory, dir))),
+    name: `${name}-${uuid}-${size}`,
+    ext
+  })
+}
+
+/**
+ * @param {string} targetFilePath
+ * @param {string} targetDirectory
+ * @param {string} uuid
+ */
+export function createImagePaths(targetFilePath, targetDirectory, uuid) {
+  const defaultExt = path.extname(targetFilePath)
+  return [...imageExts, defaultExt].map(ext => {
+    return imageSizes.map(size => {
+      return createImagePath({
+        targetFilePath,
+        size,
+        ext,
+        targetDirectory,
+        uuid
+      })
+    })
+  })
+}
 
 /** @param {string} text */
 export function testURL(text) {