feature: embedded instagram posts

[invisiblegaudi]

Problem:

Related to #122

When outputting HTML, it is desirable to embed instagram posts rather than have a link to them taking the reader away from the page.

Solution:

I would like to have a flag e.g. --embed-socials to add the necessary HTML and js to embed any urls to instagram posts

[invisiblegaudi]

willing to do the work for this

[simonhaenisch]

Two ideas to solve this without having to do any changes to md-to-pdf:

• a custom .js script that does the embedding within the page which you either set with the script config, or add to the end of the markdown content (you can just add <script> tag in the markdown); any sync handlers that you attach to the load or DOMContentLoaded event would automatically be awaited; if it's async with network requests, i think it should also work because of this: https://github.com/simonhaenisch/md-to-pdf/blob/9ab307b47d73d54b912e5a0d7e1613c721b12fde/src/lib/generate-output.ts#L98

• set a custom Marked renderer (https://marked.js.org/using_pro#renderer) to do the transformation, e.g. overwrite the link method, sth like:

const renderer = {
  link(string href, string title, string text) {
    const url = new URL(href)

    if (url.hostname === 'instagram.com') {
      // do sth fancy here that returns html to embed the post, could even fetch the html content here
      return <div>...</div>
    }

    return false // default renderer kicks in
  }
}

For the latter one it would be really useful to finally finish the stuff around the marked.use API, i.e. allowing to configure Marked plugins/extensions via the config, which is mainly about finishing #228 and #140. Sadly I didn't really find any time to work on it (I also don't have any sponsors for this project so it's hard for me to justify spending much time on it).

[invisiblegaudi]

Ok, i'll have a dig around and see if I can locate a suitable renderer, i.e. option 2. Save that, I can come up with a custom script i.e. option 1... there isn't any mention of a script config entry in the docs, maybe there should be? Also, a template for such a script would be useful, if I go with 1, maybe I can provide this

[simonhaenisch]

You're right, it's missing from the docs, but it's there in the types:

https://github.com/simonhaenisch/md-to-pdf/blob/95502c5b15aa56d781af00610c1a86fd6ee9405a/src/lib/config.ts#L85-L90

Using --script flag should also work (same as --stylesheet/stylesheet option).