Is there a way to move the first image from markdown to the frontmatter?

[marcofranssen]

I'm migrating my blog from one engine to another. Now I want to move the first image of my blogs to the coverImage attribute of my frontmatter.

Is there a way to achieve this?

I would basically need a transformer that takes the first image and moves that into the frontmatter. Any thoughts on how to do this?

[wooorm]

assuming when frontmatter is used that it’s YAML, then it would be:

module.exports = myPlugin

function myPlugin() {
  return transform
}

function transform(tree) {
  if (!tree.children[0] || tree.children[0].type !== 'yaml') return
  if (
    !tree.children[1] ||
    tree.children[1].type !== 'paragraph' ||
    tree.children[1].children.length !== 1 ||
    tree.children[1].children[0].type !== 'image'
  ) return

  tree.children[0].value += '\nsomeCoverImageProp: ' + JSON.stringify(tree.children[1].children[0].url)
  tree.children.splice(1, 1)
}

[marcofranssen]

That is assuming the image is in the first paragraph, but that isn't always the case, so would need a way to find the first image.

[wooorm]

Probably, see https://unifiedjs.com/learn/ for how to find nodes, remove them, etc!

[marcofranssen]

@wooorm that was exactly what I was looking for. I saw it somewhere in the last few days, but didn't recall where.

[marcofranssen]

I have the following now, however can't figure out how to delete the existing node.

function coverImage() {
  return (tree) => {
    const firstImage = find(tree, { type: "image" });
    if (!firstImage) {
      return;
    }
    const yaml = find(tree, { type: "yaml" });
    yaml.value += `coverImage: ${firstImage.url}`;
    console.log(yaml);
    // howto delete the original image?
  };
}

How do I know at which index to splice the particular image from the tree?

[marcofranssen]

Finally went with the solution to find the paragraph containing the image and remove it from the paragraph.