vowel 0.6.0 → 0.6.2

package/README.md

@@ -12,7 +12,7 @@ See the docs: [vowel.cc](https://vowel.cc).
 ### Launch checklist
 
 - [x] CLI
-- [ ] Docs
+- [x] Docs
 - [x] Classes
 - [x] Route patterns
 - [x] Post list metadata
@@ -40,7 +40,7 @@ See the docs: [vowel.cc](https://vowel.cc).
   - [x] Robots.txt
   - [x] Sitemap.xml
   - [x] RSS
-  - [x] 404.html (just make 404.md)
+  - [ ] 404.html (just make 404.md)
 - [ ] Markup
   - [.] Image as figure
   - [x] Admonitions

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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)
 }
 
@@ -1031,7 +1072,16 @@ function writeFile(destination, 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))
+    const image = createDynamicImage(src, database, destination.path.path, alt)
+    if (index === 0 && parent.children.length > 1) {
+      console.log(parent.children)
+      const [_, ...caption] = parent.children
+      parent.children = [
+        h("figure", [image, h("figcaption", caption)])
+      ]
+    } else {
+      parent.children.splice(index, 1, image)
+    }
   })
 
   visit(treeContent, testPaths, ({ children: [child] }, i, p) => {