Component Support

Embedding components inside your content (much like this page on Rummij) is as simple as passing a component tag to the calling code, then processing that server-side at the destination.

Note: for SSR frameworks like Svelte, Next.js or Nuxt.js these need to be processed server-side, as the tags won't do anything useful once they hit the page.

Passing component tags as raw HTML

The first step is to stop the component being escaped by the Markdown renderer by using an @html code block:

```@html
  <MyComponent />
```

Next, on the client website add processing to break the Pullnote built HTML into 2 chunks:

+layout.server.js
  var split = note.content_html.split("<MyComponent />");
  if (split.length > 1) {
    note.intro_html = split[0];
    note.content_html = split[1];
  }

Then you can slice components in as part of the output, which will be caught by the SSR:

+layout.svelte
  <script>
    export let data;
    const note = data.note;
  </script>

  {#if note.intro_html}
    {@html note.intro_html}
  {/if}

  <MyComponent />

  {@html note.content_html}

Handling props

The easiest way to pass information is to send parameters alongside the note via note.params. If not, pass props in via the component HTML then use string-processing:

```@html
  <MyComponent prop="Hello world" />
```