replacing img works, transforming afterwards not

package.json

@@ -57,11 +57,10 @@
     "typescript": "^5.2.2",
     "unist-util-visit": "^5.0.0",
     "vite": "^4.4.9",
-    "vitest": "^0.34.4"
-  },
-  "type": "module",
-  "dependencies": {
+    "vitest": "^0.34.4",
     "highlight.js": "^11.9.0",
     "rehype-highlight": "^7.0.0"
-  }
+  },
+  "type": "module",
+  "dependencies": {}
 }

src/lib/util/converter.server.ts

@@ -7,8 +7,9 @@ import remarkParseFrontmatter from 'remark-parse-frontmatter'
 import remarkRehype from 'remark-rehype'
 import rehypeStringify from 'rehype-stringify'
 import rehypeHighlight from 'rehype-highlight'
+import { visit } from 'unist-util-visit'
 
-const processor = remark().use(remarkFrontmatter).use(remarkParseFrontmatter).use(remarkRehype).use(rehypeHighlight).use(rehypeStringify).freeze()
+const processor = remark().use(remarkFrontmatter).use(remarkParseFrontmatter).use(remarkRehype).use(_enhanceImage).use(rehypeHighlight).use(rehypeStringify).freeze()
 
 // TODO still needs to be transformed to the corresponding Entry types
 export async function getRawEntries(entryType: EntryType): Promise<any[]> {
@@ -33,3 +34,18 @@ export async function _getFiles(entryType: EntryType): Promise<string[]> {
     })
   )
 }
+
+function _enhanceImage() {
+  console.log('_enhanceImage')
+  return (tree: any) => {
+    visit(tree, 'element', (node) => {
+      if (node.tagName === 'img') {
+        if (!node.properties.src.endsWith('gif') || !node.properties.src.endsWith('svg')) {
+          // TODO dont get processed by svelte or vite or whoever, need to solve this before putting it life
+          // node.tagName = 'enhanced:img'
+          // node.properties.src = `${node.properties.src}?w=1280;640;400`
+          // node.properties.sizes = '(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px'
+        }
+      }});
+  };
+}