Feature Request: Adding a "timeline" (resume style) type of card

[kimlaberinto]

Is your feature request related to a problem? Please describe.

I would like a way to to do an "Experience" timeline/resume style of summaries for the front page of my website using this theme. It's basically like a card style but instead focuses on a title field, dates string field (e.g. 2019 - present), organization field, and a location field. I also want to show the appropriate icons with the dates, organization, and location fields. I want to use this style of card for my portfolio website.

My proposed solution is detailed below. I would like your feedback on which to use before I code it up.

My solution is on how to use the same framework as the pages.html widget to accommodate this resume-timeline-style of card.

This is a similar effect I want to achieve. With the focus of the card being the title, organization, time. I won't add the blue circles though. Screenshot below from the demo website of the Hugo Academic Theme.

Describe the solution you'd like

I propose making the following changes:

• Adding resume-timeline-style = true line to the front matter of posts which are to be shown in this style.
• Modifying components/summary-plain.html to do the if-else checking on the resume-timeline-style true/false boolean.
• Adding a new utils/get-summary-resume-timeline-style.html to format the card appropriately (showing title, dates, organization, and location if such values exist on the front matter)

Two diagrams are below. The first shows the existing code (how I interpreted it). The second shows what the code would look like after my proposed change.

Before (link to diagram editor here):

Proposed Changes (link to diagram editor here):

Describe alternatives you've considered

I've also considered adding a new widget.
Disadvantage: Adding a new widget could make the coat bloated. Existing code with the page.html widget already achieves a similar desired effect.

I've also considered adding a new style in addition to plain, card, and masonry. Disadvantage: Adding a new style could get bloated. The existing plain and card summaries code already a similar desired desired effect.

Additional context

It can be used for other types of content. e.g. showing awards, history of employment, educational history, etc. It's basically a card with a title field, dates string field (e.g. 2019 - present), organization field, and a location field.

Direct Questions

0. Do you like the feature? I could implement this on my own website, but is this worth it for a PR into the theme?
1. What are thoughts on my solution?
2. How should I handle if a hugo theme user specifies the resume-experience and masonry options? (Probably rare case, we could leave as unsupported)
3. Do you have any other suggestions for naming this type of feature? I like resume-timeline-style since its flexible enough.

With the proposal as is right now, it all seems achievable for me with what I know now (though I'm fairly new to Hugo, HTML, and CSS). So I imagine that I could do the PR for my proposed solution, but let me know if you had another solution in mind.

[wangchucheng]

Thank you for your detailed description! I like this feature of course and I think this feature can be a widget for homepage?

In your current proposal, you want to treat each experience on the timeline as a separate markdown file. And show them in the form of a list if I understand correctly. But this causes each experience to generate a separate URL due to the way Hugo handles it, which is not necessary.

Based on this problem and this part will mainly be displayed on the homepage, I think we can make it as a widget. For example, we can use front matter to achive this. If we call this widget experience, we can make front matter like:

+++
# Name
title = "My Experiences"
weight = 2

[[experiences]]
    role = ...
    organization = ...
    # This is an example and we can talk about what needs to be added here.

[[experiences]]
    role = ...
    organization = ...
    # This is an example and we can talk about what needs to be added here.

# Normal widget settings like others
[widget]
    handler = "experience"
    width = "wide"

    [widget.sidebar]
        position = ""
        scale = ""

    [widget.background]
        color = "secondary"
+++

And then we can make an experience widget which can display those infomation in a card. If you need reference, this is similar to how about widget is implemented.

This way can solve some of your doubts and can be implemented in a more concise way. And this is why I designed the widget system on the homepage.

This is my current idea, if you have any ideas, please feel free to put forward it.

[kimlaberinto]

In your current proposal, you want to treat each experience on the timeline as a separate markdown file. And show them in the form of a list if I understand correctly. But this causes each experience to generate a separate URL due to the way Hugo handles it.

Ah yes, that's a good point! I don't think it would be necessary to have a seperate URL for each "experience".

Based on this problem and this part will mainly be displayed on the homepage, I think we can make it as a widget. For example, we can use front matter to achive this

That would work! Specifying everything in the front matter should work which can then be handled by the experience widget handler. I like this idea, and have no other ideas right now.

If I understood everything correctly, then we can make the following changes.

• Make a widget, tentative name: widgets/experience.html
  • This widget would range over all the [[experiences]]in the front matter and format it accordingly.

Do you think I should create new components and utils to support this widget (e.g. components/summary-list-experiences.html components/summary-experience.html utils/get-summary-experience.html)? Or do you like having a fully self contained widget?

I'm personally leaning towards a fully self-contained experience.html file with no extra components and utils files.

Also, do you have any concerns about the code duplication? I'm basically just copying code from the pages widget framework into a new widget and modifying it so that its all coming from the front matter. I think it'll be fine.

If you have no problems with the above, then I'll probably get started on this tomorrow and submit a PR. It should be fairly straight forward. And then we can discuss more on the PR and make any edits/changes.

[wangchucheng]

A fully self-contained experience.html file is totally great. But if you found that component partials are necessary, you can just create new files as you want (e.g. components/experience.html, components/experience-list.html).

There are two things you may need to pay attention to:

1. You don't need to make a sidebar inside widget as it is dealt in index.html by using the [widget.sidebar] front matter.
2. Please use tailwind to write css if it is possible. To use tailwind to write new styles you may need to npm install inside eureka theme folder and install what Hugo Pipes needs. Also remember to comment the build.useResourceCacheWhen in config.toml

Thank you in advance for the pr you will submit!

[kimlaberinto]

Thank you for the great communication and tips! Thanks so much!

I'll make sure to use Tailwind. I'm new to HTML and CSS, and I discovered Tailwind CSS through your theme. It's so useful. It makes things a lot easier for me!

[kimlaberinto]

The PR specifically tackling this feature request is at #37