Dynamic release notes rendering

[katarinasupe]

I explored two options, and each currently has a blocker:

Option 1: Server-side rendering
In this option there are both .jsx and .mdx file for the same page, since in the .jsx data is being fetched in getStaticProps (pre-rendering at build time). The problem is that he page renders as .jsx file and it doesn't fit well with our docs. I tried fixing that with Nextra Layout but then other issues arise which I didn't manage to get resolved.

Option 2: Client-side rendering
This option is not ideal, and it would be better to have server-side rendering for this kind of static page. Still, to overcome the issue of Option 1, I tried this option as well. This option fetches the data in to component on the fly, but this means it will fetch the data multiple times (for every Lab release that uses this component). Here, the issue is that the API (https://lab.memgraph.com/public/versions) does not allow requests from the frontend (due to CORS restrictions), and the browser blocks the fetch request (might be just because of the local development).

Next steps: ask the Platform team if they are familiar with this and maybe have a solution.
This is not a priority.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
documentation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 24, 2025 6:48am

[AlexIchenskiy]

I've tried to make it work on the server side using next-mdx-remote but it is still not working properly with Nextra layout.
However, we've allowed CORS requests on the Lab side so the release notes can now be fetched from the client. You can test it in the preview. There is still some work that needs to be done with styling the fetched data and adding it into the sidenav, but it is already a great step forward. Do we have some additional design requirements here, or is it ok to align it with the rest of the page?

[katarinasupe]

Hi @AlexIchenskiy, that's great! 👏
Regarding the design requirements, it is good enough to align with the rest of the page and follow the structure as in the example below:

Lab v3.0.0 - Jan 29th, 2025
⚠️ Breaking changes
✨ New features
🛠️ Improvements
🐞 Bug fixes

[AlexIchenskiy]

Hey @katarinasupe, thanks for the feedback!

For now, the preview shows the latest Lab update with styles aligned to the rest of the page. However, it is not added to the table of contents. I can try adding it programmatically, but this solution is somewhat fragile - it will break if anything changes in Nextra. One option is to fix the Nextra version, ensuring stability, but I am unsure if this is the best approach. Do you have any suggestions, or do you think I should use this solution?

Also, how do you think we should structure the release notes? I believe achieving what we currently have without significant effort and UX challenges may be difficult, as this involves mixed MDX and fetched data that cannot be sorted by date together. Is it a good idea to separate Lab updates from other product updates into different sections for better organization and sorting? Let me know your thoughts so we can decide the best approach for integrating the new Lab release notes fetching mechanism :)

[katarinasupe]

Note: @AlexIchenskiy and I synced and agreed that the title will be manually written so it's visible in the table of content. This will be applied to the latest release and merged to main.

[AlexIchenskiy]

Dynamic release notes rendering for the Lab is ready! It fetches the data client-side to render release notes for three existing categories: new, improvement, and fix. For future releases or changes, new categories can be easily added to the corresponding lists in the LabReleasesClient component which is responsible for fetching, filtering and rendering.
All you need to do to use it is add the title manually in the MDX, followed by the component with the desired version specified, like this:

### Lab v3.1.0 - Mar 12th, 2025

<LabReleasesClient version="3.1.0" />

as shown in the code. It can only be tested on https://documentation-git-dynamic-release-notes-memgraph.vercel.app/ or https://memgraph.com/ due to CORS restrictions. You can test it on this branch or contact the platform team if you want to add more links to allow CORS for testing on other branches :)

[katarinasupe]

Thank you @AlexIchenskiy! I'll merge it to master and track how it performs 😄 @tonilastre this means that it can be used for the next version of Lab. Please open the PR for release notes for the next version on the release branch, as you know when the release notes are ready.