Skip to content
This repository has been archived by the owner on Sep 12, 2024. It is now read-only.

Inline-Changelog in Documentation #306

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

Cahllagerfeld
Copy link
Member

@Cahllagerfeld Cahllagerfeld commented Feb 23, 2023

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

@@ -53,8 +53,12 @@
},
"type": "module",
"dependencies": {
"hast-util-to-html": "^8.0.4",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

visit(mdast, 'listItem', (node) => {
node.type = 'paragraph';
// @ts-ignore it's following the official docs https://github.com/syntax-tree/mdast-util-to-hast#use
changes.push(toHtml(toHast(node)));
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Member Author

@Cahllagerfeld Cahllagerfeld Feb 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. :(

Copy link
Member

@Bashamega Bashamega left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please resolve the branch conflicts

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants