✨ feat: add date visibility options to post list

[sam9032]

Summary

This pull request adds an option to the config.toml to change the displayed dates on the bloglist.

Related issue

326

Changes

config.toml

# There are three options to display dates on the bloglist. The bloglist is used on the frontpage and the blog site.
# Use one of the three options.
# Shows the "Last updated on" date
bloglist_date = "updated"
# Shows the creation date
# bloglist_date = "date"
# Shows both dates
# bloglist_date = "both"

Accessibility

Screenshots

See the dates on the left side

Option bloglist_date = "updated":

Option bloglist_date = "date":

Option bloglist_date = "both":

Type of change

• [ ] Bug fix (fixes an issue without altering functionality)
• [x] New feature (adds non-breaking functionality)
• [ ] Breaking change (alters existing functionality)
• [ ] UI/UX improvement (enhances user interface without altering functionality)
• [ ] Refactor (improves code quality without altering functionality)
• [ ] Documentation update
• [ ] Other (please describe below)

---

Checklist

• [ ] Undo demo-setting for config.toml (post_listing_date should be "date")
• [x] I have verified the accessibility of my changes
• [ ] I have tested all possible scenarios for this change
• [x] I have updated theme.toml with a sane default for the feature
• [x] I have made corresponding changes to the documentation:
  • [x] Updated config.toml comments
  • [x] Updated theme.toml comments
  • [x] Updated "Mastering tabi" post in English
  • [x] (Optional) Updated "Mastering tabi" post in Spanish
  • [x] (Optional) Updated "Mastering tabi" post in Catalan

[netlify[bot]]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	c5501956418b096ded6fe57a786f6d71f644ad43
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/66749a78ee7b290008167db9
😎 Deploy Preview	https://deploy-preview-330--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sam9032]

There are still open tasks:

• documentation
• rss / atom site that implements the new options

[welpo]

Thanks for working on this!

I've:

• sorted the CSS
• simplified the logic a bit (avoiding duplication)
• used the i18n string
• renamed option to post_listing_date
• updated theme.toml to match config.toml
• rephrased config.toml comments/docs

I have also changed the formatting a bit, removing the separator.

Before

After

I think this looks cleaner. What are your thoughts?

---

An alternative that looks even cleaner, to my eyes, without any losses, is changing "Last updated on" to "Updated on". The message is the same, but it looks neater:

This would require changing all i18n strings (I'd do that on another PR), and I could use the opportunity to use string substitution, as not all languages use the $updated_string + $date format, but rather $date + $updated_string.

---

What are your thoughts on the current redesign (sans the separator)? And how about the shortened version ("Updated on" instead of "Last updated on"?

[sam9032]

Thank you!

What are your thoughts on the current redesign (sans the separator)?

With a wide screen this would be my preferred design too but I don't like the design on smaller screens. That was the reason I added the separator:

And how about the shortened version ("Updated on" instead of "Last updated on"?

I like that one!

[welpo]

With a wide screen this would be my preferred design too but I don't like the design on smaller screens. That was the reason I added the separator

Aah great catch! I'll do a separator only for mobile/narrow screens, then!

[welpo]

Done! I've modified config.toml so you can see it live on the demo: https://deploy-preview-330--tabi-demo.netlify.app/

[sam9032]

It is looking great now. Thank you!

[sam9032]

There is an error now, if there is no "updated" date in the blog post 🤔

[welpo]

Thanks for the catch and fix!

[welpo]

I'll try to do some thorough testing and write the docs this week, then we can merge :)

[welpo]

There are still open tasks:

* documentation

* rss / atom site that implements the new options

Done! You can see it in the PR demo.

Could I ask you to do some final testing, trying to break the feature, before we merge?

[sam9032]

Thank you so much!

I would love to test it. I'll be away for a week from now and pretty much offline, unfortunately I won't be able to work on it until after that.

On Thu, 2024-06-20 at 14:11 -0700, Óscar wrote:

There are still open tasks:

• documentation

• rss / atom site that implements the new options Done! You can see it in the PR demo [1]. Could I ask you to do some final testing, trying to break the feature, before we merge? — Reply to this email directly, view it on GitHub [2], or unsubscribe [3]. You are receiving this because you authored the thread.Message ID: @.***>

[1] PR demo https://deploy-preview-330--tabi-demo.netlify.app/ [2] view it on GitHub https://github.com/welpo/tabi/pull/330#issuecomment-2181568712 [3] unsubscribe https://github.com/notifications/unsubscribe-auth/AC6OX3RWBHD3VTNLIMHNUXTZINAPZAVCNFSM6AAAAABJLDJNLKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBRGU3DQNZRGI

[welpo]

No worries! There's no rush.

[welpo]

Hey @sam9032! I added the i18n update in #342.

If we can double check this PR is bug-free, I'll merge :)