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.