Add support for webp, and allow image metadata

oleeskild · Sep 30, 2023 · ee4b044 · ee4b044
1 parent 736c866
commit ee4b044
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 8 deletions.
diff --git a/src/compiler/GardenPageCompiler.ts b/src/compiler/GardenPageCompiler.ts
@@ -30,6 +30,7 @@ import {
 	FRONTMATTER_REGEX,
 	BLOCKREF_REGEX,
 } from "../utils/regexes";
+import Logger from "js-logger";
 
 export interface Asset {
 	path: string;
@@ -697,7 +698,7 @@ export class GardenPageCompiler {
 
 		//![[image.png]]
 		const transcludedImageRegex =
-			/!\[\[(.*?)(\.(png|jpg|jpeg|gif))\|(.*?)\]\]|!\[\[(.*?)(\.(png|jpg|jpeg|gif))\]\]/g;
+			/!\[\[(.*?)(\.(png|jpg|jpeg|gif|webp))\|(.*?)\]\]|!\[\[(.*?)(\.(png|jpg|jpeg|gif|webp))\]\]/g;
 		const transcludedImageMatches = text.match(transcludedImageRegex);
 
 		if (transcludedImageMatches) {
@@ -730,7 +731,7 @@ export class GardenPageCompiler {
 		}
 
 		//![](image.png)
-		const imageRegex = /!\[(.*?)\]\((.*?)(\.(png|jpg|jpeg|gif))\)/g;
+		const imageRegex = /!\[(.*?)\]\((.*?)(\.(png|jpg|jpeg|gif|webp))\)/g;
 		const imageMatches = text.match(imageRegex);
 
 		if (imageMatches) {
@@ -777,20 +778,40 @@ export class GardenPageCompiler {
 
 		//![[image.png]]
 		const transcludedImageRegex =
-			/!\[\[(.*?)(\.(png|jpg|jpeg|gif))\|(.*?)\]\]|!\[\[(.*?)(\.(png|jpg|jpeg|gif))\]\]/g;
+			/!\[\[(.*?)(\.(png|jpg|jpeg|gif|webp))\|(.*?)\]\]|!\[\[(.*?)(\.(png|jpg|jpeg|gif|webp))\]\]/g;
 		const transcludedImageMatches = text.match(transcludedImageRegex);
 
 		if (transcludedImageMatches) {
 			for (let i = 0; i < transcludedImageMatches.length; i++) {
 				try {
 					const imageMatch = transcludedImageMatches[i];
 
-					const [imageName, size] = imageMatch
+					//[image.png|100]
+					//[image.png|meta1 meta2|100]
+					const [imageName, ...metaDataAndSize] = imageMatch
 						.substring(
 							imageMatch.indexOf("[") + 2,
 							imageMatch.indexOf("]"),
 						)
 						.split("|");
+
+					const lastValue =
+						metaDataAndSize[metaDataAndSize.length - 1];
+					const lastValueIsSize = !isNaN(parseInt(lastValue));
+
+					const size = lastValueIsSize ? lastValue : undefined;
+					let metaData = "";
+
+					if (metaDataAndSize.length > 1) {
+						metaData = metaDataAndSize
+							.slice(0, metaDataAndSize.length - 1)
+							.join(" ");
+					}
+
+					if (!lastValueIsSize) {
+						metaData += ` ${lastValue}`;
+					}
+
 					const imagePath = getLinkpath(imageName);
 
 					const linkedFile = this.metadataCache.getFirstLinkpathDest(
@@ -805,7 +826,16 @@ export class GardenPageCompiler {
 					const imageBase64 = arrayBufferToBase64(image);
 
 					const cmsImgPath = `/img/user/${linkedFile.path}`;
-					const name = size ? `${imageName}|${size}` : imageName;
+
+					let name = "";
+
+					if (metaData && size) {
+						name = `${imageName}|${metaData}|${size}`;
+					} else if (size) {
+						name = `${imageName}|${size}`;
+					} else {
+						name = imageName;
+					}
 
 					const imageMarkdown = `![${name}](${encodeURI(
 						cmsImgPath,
@@ -815,13 +845,14 @@ export class GardenPageCompiler {
 
 					imageText = imageText.replace(imageMatch, imageMarkdown);
 				} catch (e) {
+					Logger.debug(e);
 					continue;
 				}
 			}
 		}
 
 		//![](image.png)
-		const imageRegex = /!\[(.*?)\]\((.*?)(\.(png|jpg|jpeg|gif))\)/g;
+		const imageRegex = /!\[(.*?)\]\((.*?)(\.(png|jpg|jpeg|gif|webp))\)/g;
 		const imageMatches = text.match(imageRegex);
 
 		if (imageMatches) {
@@ -857,7 +888,8 @@ export class GardenPageCompiler {
 					const imageMarkdown = `![${imageName}](${cmsImgPath})`;
 					assets.push({ path: cmsImgPath, content: imageBase64 });
 					imageText = imageText.replace(imageMatch, imageMarkdown);
-				} catch {
+				} catch (e) {
+					Logger.debug(e);
 					continue;
 				}
 			}

diff --git a/src/dg-testVault/A Assets/travolta.webp b/src/dg-testVault/A Assets/travolta.webp
diff --git a/src/dg-testVault/E Embeds/E05 WEBP published.md b/src/dg-testVault/E Embeds/E05 WEBP published.md
@@ -0,0 +1,5 @@
+---
+dg-publish: true
+---
+
+![[travolta.webp]]
diff --git a/src/test/snapshot/snapshot.md b/src/test/snapshot/snapshot.md
@@ -227,7 +227,16 @@ Bonus pic:
 </div></div>
 
 ==========
-009 Comments.md
+E Embeds/E05 WEBP published.md
+==========
+---
+{"dg-publish":true,"permalink":"/e-embeds/e05-webp-published/"}
+---
+
+
+![travolta.webp](/img/user/A%20Assets/travolta.webp)
+==========
+E Embeds/E04 PNG reuse.md
 ==========
 ---
 {"dg-publish":true,"permalink":"/e-embeds/e04-png-reuse/"}
@@ -236,13 +245,19 @@ Bonus pic:
 This file uses the same image as in [[E Embeds/E03 PNG_not_published\|E03 PNG_not_published]]. When removing the other one, the image should not be removed. 
 
 ![unused_image.png|100](/img/user/A%20Assets/unused_image.png)
+==========
+E Embeds/E02 PNG published.md
+==========
 ---
 {"dg-publish":true,"permalink":"/e-embeds/e02-png-published/"}
 ---
 
 
 
 ![travolta.png](/img/user/A%20Assets/travolta.png)
+==========
+009 Comments.md
+==========
 ---
 {"dg-publish":true,"permalink":"/009-comments/"}
 ---