vowel 0.4.0 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "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",
@@ -67,8 +68,8 @@
     "unist-util-visit": "^5.0.0",
     "unist-util-visit-parents": "^6.0.0",
     "url-metadata": "^5.4.1",
-    "votive": "^0.2.0",
     "voot": "^0.1.0",
+    "votive": "^0.4.0",
     "xast-util-sitemap": "^2.0.0",
     "xast-util-to-xml": "^4.0.0",
     "xml": "^1.0.1",

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 } 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'
@@ -50,7 +50,46 @@ 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) {
+  console.log({ imagePath })
+  const relativePath = imagePath.startsWith("/") ? path.relative("/", imagePath) : imagePath
+  const image = database.target.getWithTrackers(relativePath, dependent)
+  console.log({ relativePath, image })
+  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 +114,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",
@@ -233,7 +269,7 @@ function readFile(string, filePath, destinationPath, database, config) {
                 type: "text",
                 value: match[4]
               },
-              
+
               ...convertTagsToLinks(remainder)
             ]
           }
@@ -297,6 +333,7 @@ function readFile(string, filePath, destinationPath, database, config) {
               abstract,
               metadata: tagMetadata
             })
+
           })
         }
       }
@@ -728,7 +765,9 @@ function writeFile(destination, database, config) {
       dependent: destination.path,
       query: {}
     })
-  }).filter(({ path }) => path)
+  }).filter(({ path, dir }) => {
+    return path && path !== "tags.html" && dir !== "tags"
+  })
 
   const treeStyleSheets = []
 
@@ -988,7 +1027,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) => {
 
@@ -1008,7 +1052,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)
       }
@@ -1033,9 +1077,18 @@ function writeFile(destination, database, config) {
 
       if (count) targets.splice(Number(count))
 
-      const list = h("section",
+      const escapedDir = folder.replace("_", "--").replace(path.sep, "_")
+      const escapedDirs = escapedDir.split("_").filter(a => a).map((segment, index, array) => {
+        return "_" + array.slice(0, index + 1).join("_")
+      })
+      escapedDirs.unshift("_")
+      const dirClasses = escapedDirs.join(".")
+
+      const list = h(`ul.${dirClasses}`,
         targets.map(target => {
-          return h('article', makeHead(target.metadata, target.metadata.prettyURL))
+          return h('li',
+            h('article', makeHead(target.metadata, target.metadata.prettyURL, database, config))
+          )
         })
       )
 
@@ -1133,6 +1186,7 @@ function writeFile(destination, database, config) {
   const globalNavItems = everything.filter(item => {
     return item.dir === ""
       && item.path !== "index.html"
+      && item.path !== "tags.html"
   })
     .map(getChildren)
 

package/stylesheets/DefaultStyles.css

@@ -226,15 +226,23 @@
 		border-left: 5px solid var(--primary-border-color);
 	}
 
-	article {
+	main>article {
 		border: 1px solid var(--primary-border-color);
-		background: var(--soft-background);
 		padding: 2rem 2rem 2rem;
 		border-radius: calc(1rem + 5px);
 		display: flex;
 		flex-direction: column;
 	}
 
+	main>ul._ {
+		list-style: none;
+		padding: 0;
+
+		& article {
+			padding-bottom: 1em;
+		}
+	}
+
 	th,
 	td {
 		border-bottom: 1px solid var(--border-color-softer);

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) {