uptane.github.io icon indicating copy to clipboard operation
uptane.github.io copied to clipboard

Published 20 hours ago • verified publisher icon uptane

Suggestion for Reworking the History page for a nice interactive timeline

Open hexsecs opened this issue 1 year ago • 12 comments

Discussed in https://github.com/uptane/uptane.github.io/discussions/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.

hexsecs avatar Dec 11 '23 17:12 hexsecs

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.

Mikerniker avatar Dec 13 '23 16:12 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.

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

Abhijay007 avatar Dec 14 '23 09:12 Abhijay007

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 avatar Dec 14 '23 18:12 Mikerniker

Hi @Abhijay007

Here's an initial view of the History page:

https://github.com/uptane/uptane.github.io/assets/63586831/bd6bdf19-d2f2-40ff-a018-863ba4fa0ee8

  • 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!

Mikerniker avatar Dec 14 '23 20:12 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!

cc @hexsecs @jhdalek55

Abhijay007 avatar Dec 15 '23 06:12 Abhijay007

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

hexsecs avatar Jan 04 '24 01:01 hexsecs

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.

jhdalek55 avatar Jan 04 '24 02:01 jhdalek55

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

Mikerniker avatar Jan 04 '24 15:01 Mikerniker

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 avatar Jan 05 '24 14:01 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.

Abhijay007 avatar Jan 05 '24 14:01 Abhijay007

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 avatar Jan 05 '24 15:01 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.

Mikerniker avatar Jan 06 '24 12:01 Mikerniker