diff --git a/package.json b/package.json index 3719b1e3..38d41410 100644 --- a/package.json +++ b/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": {} } diff --git a/src/lib/util/converter.server.ts b/src/lib/util/converter.server.ts index 31a0648f..69e3c056 100644 --- a/src/lib/util/converter.server.ts +++ b/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 { @@ -33,3 +34,18 @@ export async function _getFiles(entryType: EntryType): Promise { }) ) } + +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' + } + }}); + }; +} \ No newline at end of file