diff --git a/packages/content-handler/src/websites/medium-handler.ts b/packages/content-handler/src/websites/medium-handler.ts index 8079cfa3f..2c6a42750 100644 --- a/packages/content-handler/src/websites/medium-handler.ts +++ b/packages/content-handler/src/websites/medium-handler.ts @@ -13,6 +13,37 @@ export class MediumHandler extends ContentHandler { return u.hostname.endsWith('medium.com') } + addImages(document: Document): Document { + const pictures = document.querySelectorAll('picture') + + pictures.forEach((pict) => { + const source = pict.querySelector('source') + if (source) { + const srcSet = source.getAttribute('srcSet') + + const sources = (srcSet || '') + .split(', ') + .map((src) => src.split(' ')) + .sort((a, b) => + Number(a[1].replace('w', '')) > Number(b[1].replace('w', '')) + ? -1 + : 1 + ) + + // This should be the largest image in the source set. + if (sources && sources.length && Array.isArray(sources[0])) { + const url = sources[0][0] + const img = document.createElement('img') + img.src = url + pict.after(img) + pict.remove() + } + } + }) + + return document + } + async preHandle(url: string): Promise { console.log('prehandling medium url', url) @@ -22,9 +53,10 @@ export class MediumHandler extends ContentHandler { const response = await axios.get(res.toString()) const dom = parseHTML(response.data).document + const imageAddedDom = this.addImages(dom) return { title: dom.title, - content: response.data as string, + content: imageAddedDom.body.outerHTML, url: res.toString(), } } catch (error) {