Inline-Changelog in Documentation

[Cahllagerfeld]

Adds an inline changelog to /docs.
The content of the component is generated from the CHANGELOG.md file that gets generated from the github action on release creation

[Cahllagerfeld]

Note to myself: Check if these can be devDependencies as well

[Cahllagerfeld]

This might be refactorable to use the compile-function from mdsvex. I'm not sure about this though, because we want to extract data from the ast, and not modify it and return a renderable html file

[Cahllagerfeld]

In the vague case, where this is possible we can remove all these dependencies again 🤔

[arjandhakal]

I played around with mdsvex, it seems you can directly render the html from the CHANGELOG.md file.

Something like this:

  const rawChangelog = Object.values(import.meta.glob('/CHANGELOG.md', { eager: true, as: 'raw' }));

  const data = await compile(rawChangelog[0]);
  const changes = data?.code ?? '<p>No change to show <p>';

Though it means , changing the timeline.svelte to something like this:

<script lang="ts">
  export let changes: string;
</script>

<div class="changelogs">
  {@html changes}
</div>

<style>
  .changelogs :global(h2) {
    color: gray;
  }
</style>

[Cahllagerfeld]

Yes, that's true - I didn't want to render the entire page though. I only wanted to extract some elements of the markdown ast and render them as html, not the entire page. The compile function might still do the trick here, I didn't test it just yet though

[arjandhakal]

Ah, in that case It seems there is not an easy way to do it with compile. The compile function does have a option that uses the remark or rehype plugins. But, since I am not familiar with this I'm not sure if there are any that would help in extracting the desired elements. :(