Can the frontmatter be dynamic?

Hi, I have a blog created with MDsveX written in Sveltekit and deployed on Netlify. It works amazingly.

But whenever I want to use images I have to use links in the blog post. I want to be able to import photos directly into the .svx files. Here’s an example of what I want to do:

Is something like this possible?

E: Can those variables, coverimg and thumbnailimg be exported and then imported along with frontmatter, because that would solve my problem as well?

[babichjacob]

This already works:

---
title: My lovely article
author: Dr. Fabuloso the Fabulous
coverimageAlt: Cool coverphoto
---

<script context="module">
  import coverimage from "$assets/demopost/some-image.jpg"

  metadata.coverimage = coverimage;
</script>

Blog post content

[pngwn]

Interesting. I’ll have a think about this. We could even do something simpler for the common case and have some default handling for certain things:

/** @type {MdsvexOptions} */
export const mdsvexConfig = {
  extensions: [".svelte.md"],
  frontmatter: {
    types: {
      coverimage: 'image-import'
    },
  },
};

That said we could also just detect this automatically (for images) and enable/ disable based on an boolean options, or do it based on extension instead:

/** @type {MdsvexOptions} */
export const mdsvexConfig = {
  extensions: [".svelte.md"],
  frontmatter: {
    types: [
     /\.jpg$|\.png$/, 'image-import' // or a function to handle it
    ],
  },
};

In line with other parts of the design for v1, I’m likely to handle this in an ‘official’ plugin:

import { transformFrontmatter } from 'mdsvex/plugins';

/** @type {MdsvexOptions} */
export const mdsvexConfig = {
  extensions: [".svelte.md"],
  plugins: [
    transformFrontmatter({
       transform: { 
         // not sure if a matcher on the value or a handler for the prop name is most appropriate, probably name based
         match: /\.jpg$|\.png$/,          
         handler: 'import' // builtin or a function to handle it
       } 
    })
  ],
};