Suggestion for Reworking the History page for a nice interactive timeline

[hexsecs]

Discussed in #157

^{Originally posted by PhilPNguy November 30, 2023}
I suggest we relocate and make a nicer animation based spot for the "History" page.
It could be an interactive square area on the front page where users go 1 by 1 through the history of Uptane.

We are looking for a suggestion for reworking the project history page into something a little better looking, perhaps an interactive timeline.

This is a pretty cool idea, but maybe too zazzy for Uptane.
https://delikely.eu.org/Automotive-Security-Timeline/

Open to suggestions.

[Mikerniker]

There's an option to add a vertical timeline in Docusaurus with MDX. It's not as zazzy, but might be a possible option. Here's a link to the sample timeline.

[Abhijay007]

There's an option to add a vertical timeline in Docusaurus with MDX. It's not as zazzy, but might be a possible option. Here's a link to the sample timeline.

It's LGTM you can give it a shot, I think it just needs a few iterations around theming

[Mikerniker]

Hi @Abhijay007 , I can try to submit an initial draft History page with the template to see if it works out. I'm not familiar with MDX and React, so I might need some guidance a little later if that's fine.

[Mikerniker]

Hi @Abhijay007

Here's an initial view of the History page:

uptane_timeline.mp4

• Some things I'm not yet sure how to do with the mdx/react:
  • How to change the timeline (middle line color) -since it's currently white and can't be seen
  • How to add images for the round icons.
  • How to change the color for the linked text, so they're more readable.
• Also wasn't sure what the preferred formatting is for the years that have multiple events / milestones (2016, 2017, 2018, 2019, 2021), currently I just added them all in one VerticalTimelineElement block, but in separate paragraphs.
• Let me know if you want me to send the PR for this to review the code and/or if it fits with the theme you have in mind for the page.

Thanks!

[Abhijay007]

Hi @Abhijay007

Here's an initial view of the History page:

uptane_timeline.mp4

• Some things I'm not yet sure how to do with the mdx/react:

  • How to change the timeline (middle line color) -since it's currently white and can't be seen
  • How to add images for the round icons.
  • How to change the color for the linked text, so they're more readable.

• Also wasn't sure what the preferred formatting is for the years that have multiple events / milestones (2016, 2017, 2018, 2019, 2021), currently I just added them all in one VerticalTimelineElement block, but in separate paragraphs.

• Let me know if you want me to send the PR for this to review the code and/or if it fits with the theme you have in mind for the page.

Thanks!

cc @hexsecs @jhdalek55

[hexsecs]

@Mikerniker I like it. I'll review with the team in the upcoming website planning call to get some feedback.

[jhdalek55]

Looking forward to discussing this further on Friday. One comment that immediately comes to mind, though. Will the user have the option to screen these milestones one at a time? It scrolls through the items very fast, not giving ample opportunity to read the posts.

[Mikerniker]

Ok, will wait for feedback on it. Thanks!
Hi @jhdalek5, yes, users can scroll and read through the milestones at their preferred pace.

[Abhijay007]

Ok, will wait for feedback on it. Thanks! Hi @jhdalek5, yes, users can scroll and read through the milestones at their preferred pace.

@Mikerniker in today's call we decided to move further with something like this for the history timeline because it looks more relevant and readable: https://codepen.io/jkantner/pen/NWoVGXx, do you want to implement this? let me know if you need any assistance around the same

[Abhijay007]

Ok, will wait for feedback on it. Thanks! Hi @jhdalek5, yes, users can scroll and read through the milestones at their preferred pace.

@Mikerniker in today's call, we decided to move forward with something like this for the history timeline because it looks more relevant and readable: https://codepen.io/jkantner/pen/NWoVGXx. Do you want to implement this? Let me know if you need any assistance with the same.

We want to change the color scheme for the same. If you want, I will create a rough Figma design around the same and will share that with you.

[Mikerniker]

Hi @Abhijay007 ...I'm not very familiar with how to implement this with Docusaurus, is it a matter of adding the separate CSS, HTML, and JS files into the docs or should it be adapted to use mdx? Let me know if there's a reference for the proper approach to implement this with Docusaurus, or this can also be reassigned to someone who might be more familiar with how to implement it.

you can use JSX in mdx itself, you just need to convert those HTML and JS files into JSX and need to create a component out of it, or can use that directly instead.

[Mikerniker]

you can use JSX in mdx itself, you just need to convert those HTML and JS files into JSX and need to create a component out of it, or can use that directly instead.

@Abhijay007 Ok, i'll try to see how to convert to JSX and get back.