Closed kimlaberinto closed 3 years ago
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.
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.
widgets/experience.html
[[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.
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:
index.html
by using the [widget.sidebar]
front matter.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!
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!
The PR specifically tackling this feature request is at #37
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:
resume-timeline-style = true
line to the front matter of posts which are to be shown in this style.components/summary-plain.html
to do the if-else checking on theresume-timeline-style
true/false boolean.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
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.