Headless CMS mixed content

[pzerelles]

I am getting markdown and json files from a headless cms. The json files can also have markdown in values and frontmatter in markdown files has sometimes, too.
What would you suggest is a good way to use that with SvelteKit? Single markdown pages are not the problem. But if I have a json file with markdown as value, can I somehow use your library to parse that markdown to HTML? Or even better, can I somehow create Svelte components from markdown and json files and then combine them?
For example, I have several different content blocks. They come as json files with maybe markdown values in some fields, some are pure values. Then there is a page content that can use those components and bring them in a certain order. That page could be a markdown file.

[pzerelles]

Another thing. I can use markdown not only for pages but also for components. But when I import such a component and have TypeScript enabled, I get "JSX element type '...' does not have any construct or call signatures.ts(2604)".

[pngwn]

I'd need a reproduction for this in order to dig into it, it could just be that typescript doesn't play nicely with mdsvex atm.

[pngwn]

mdsvex can be used on its own to produce a valid Svelte component. Assuming there is no Svelte syntax is the generated output it can be used as plain HTML that can be injected into the page. If it does contain Svelte syntax then it will need to be compiled with the svelte compiler after mdsvex has processed it.

One way to do this kind of thing in SvelteKit is to use a server route. In that server route we could fetch some JSON like this:

// in this example content is an array of 'blocks'
const response = {
  name: 'hello',
  id: 0123,
  author: 'Franklin',
  content: [{
    id: 0,
    type: 'text',
    value: 'hello i am text'
  },
  {
    id: 0,
    type: 'mdsvex',
    value: '> some quote'
  }
}

In the JSON endpoint you would need to fetch this JSON and then process it, the processing could look something like this:

import { compile } from "mdsvex";

async function transform({ name, id, author, content }) {
  // `compile` returns a promise, so we need to await it
  const transformed = Promise.all(
    content.map(async ({ id, type, value }) => ({
      id,
      type,
      value: type === "mdsvex" ? await compile(value) : value,
    }))
  );

  return {
    name,
    id,
    author,
    content: transformed,
  };
}

And then in your component after you fetch this data you can loop over the content blocks and handle them appropriately, using {@html } to inject the compiled mdsvex into the page, and handling other values in whatever way makes sense.

If any of those mdsvex blcoks contain svelte code you will need to use the Svelte compiler to compile them after mdsvex has transformed them. In this situation you could just use the compiler with mdvsex as a preprocess but the same approach as above could be taken. If the mdsvex content has any imports then you'll need to bundle them in this endpoint but the process should be similar.

If you end up with a Svelte component instead of HTML in those content blocks then you will need to eval or new Function the code and then mount them to the page using new Component({ target, props }). Be careful with eval and new Function, while they can be useful, they can also be dangerous. Make sure you never evaluate code that is provided by your users, or if you do, take necessary precautions.

I hope this helps a little!

[miedzikd]

Many people wonder how to parse content coming from CMS. I think this is a great answer @pngwn. Could you show a simple example here of how to use eval or new Function and mount them to the page using new Component? Then I can link all discussions and issues where people ask about that :)