insert a tag <img> or <h1> at the top of body?

[deadcoder0904]

i found rehype-meta but it only does meta tags.

rehype-document has js but it points to an external file.

is there a plugin that inserts a tag at the top of body in html?

repo → https://github.com/deadcoder0904/mdx-to-pdf-epub-mobi-using-unified/

[deadcoder0904]

oops, found out about https://github.com/jaywcjlove/rehype-rewrite in another tab as i posted this. weird. been searching for hours. would love to know if there is a more simpler solution.

[wooorm]

You can also make your own plugin for this, using existing utilities:

import {select} from 'hast-util-select'

let tree = getHastTreeSomehow()
let myElement = getMyHastElementSomehow()

let body = select('body', tree)
body.children.unshift(myElement)

[deadcoder0904]

this did the job. just had to be after rehypeDocument to make sure body tag is available.

.use(rehypeDocument, {
      title: meta.title || 'book',
      css: 'styles/pdf.css',
    }) // document should be after sanitize
    .use(rehypeRewrite, {
      rewrite: (node) => {
        if (node.type == 'element' && node.tagName == 'body') {
          node.children = [
            {
              type: 'element',
              tagName: 'img',
              properties: {
                src: meta.cover || '',
                alt: 'cover',
              },
            },
            ...node.children,
          ]
        }
      },
    })