✨ 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.
# "date" - Show only the original date of the post (default if unset).
# "updated" - Show only the last updated date of the post. If there is no last updated date, it shows the original date.
# "both" - Show both the original date and the last updated date.
post_listing_date = "date"

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

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

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	77a4b5f
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/66904b9bd3dc1f0008d5c98a
😎 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 #330 (comment) [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 :)

[sam9032]

ahhh, pressed the wrong button to sync the forked repo with your upstream repo.. :-(

[welpo]

Can you undo the changes? If not, I can give it a go.

[sam9032]

I've tried it, but it doesn't feel like a clean state. So please give it a go.

[welpo]

Should be solved! I'll test a bit tomorrow to ensure everything works as expected. Let me know if you can do the same~

[sam9032]

It works great and the translation function is really nice! Thank you very much 😊.

Just as an aside... the Atom feed is missing the separator in the mobile view. I don't know if that's even possible on this site?

PS. is there a way, to respect the dark/light mode for the atom site? 😀

[welpo]

the Atom feed is missing the separator in the mobile view

Great catch! Fixed it. Thank for for testing it. I'll do some more testing now and, hopefully, merge.

PS. is there a way, to respect the dark/light mode for the atom site? 😀

There is! I just tested for a bit and I think we can make that happen without breaking anything. Feel free to open another issue to discuss this :)

[sam9032]

Ha, no more complaints now. Amazing!
Already online on my site.

There is! I just tested for a bit and I think we can make that happen without breaking anything. Feel free to open another issue to discuss this :)

Thank you, maybe I'll get to it at the weekend :)

[welpo]

Just pushed one more commit to:

• Validate the post_listing_date setting. If a user sets e.g. 'updated_date'; it'll throw a descriptive error instead of silently failing.
• Fallback to 'date' if the variable is unset.
• Mention this default fallback on config and theme comments.

Time to merge!

[welpo]

Done! Thanks for suggesting the feature and working on it!

[welpo]

PS. is there a way, to respect the dark/light mode for the atom site? 😀

Check out #357!

[stalkerGH]

I would like to join the discussion.

I updated the tabi, checked the contents of the files, added the appropriate key in the config.toml file (bloglist_date = “both”), but I don't see both dates in the post list.

[welpo]

added the appropriate key in the config.toml file (bloglist_date = “both”)

The option was renamed to post_listing_date. I'll update the first post to reflect this change.

[sam9032]

I would like to join the discussion.

I updated the tabi, checked the contents of the files, added the appropriate key in the config.toml file (bloglist_date = “both”), but I don't see both dates in the post list.

Hi!

The relevant lines in the config.toml are:

# Determines how dates are displayed in the post listing (e.g. front page or /blog). Options:
# "date" - Show only the original date of the post (default if unset).
# "updated" - Show only the last updated date of the post. If there is no last updated date, it shows the original date.
# "both" - Show both the original date and the last updated date.
post_listing_date = "date"

tabi/config.toml

Line 153 in 82f7a98

post_listing_date = "date"

https://welpo.github.io/tabi/blog/mastering-tabi-settings/#display-the-date-of-posts-in-listing

The key bloglist_date was my first try and changed.

[stalkerGH]

It works with post_listing_date = "both", thank you!