Previous/Next articles order

[ZzMzaw]

Bug Report

Environment

Zola version: 0.18.0 tabi version or commit: 124c31eea62b1f992061ea6088298ddeb0f3e3da

Expected Behavior

I would expect the previous/next articles link to be in the same order as paginated posts and usual browser configuration i.e. previous article on the left (with an arrow pointing to the left) and next article on the right (with an arrow pointing to the right).

Current Behavior

The previous article is on the right and the next article is on the left

From Zola documentation (https://www.getzola.org/documentation/content/section/#date), pages are sorted by date from most recent to oldest which means most recent page has lowest id. Maybe switching page.lower and page.higher in tempates/page.html would be enough but I was not able to test it yet.

Step to Reproduce

Just set up a minimal site with two articles and set show_previous_next_article_links to true in config.toml. It can also be observed in the demo site (e.g. https://welpo.github.io/tabi/blog/mastering-tabi-settings/ which is the last article will have a link to previous article on the right).

[ZzMzaw]

I had some time to propose a fix.

I let you have a look at it and tell me if there is anything to change or if I misunderstood the expected result of this feature.

Many thanks in advance.

[welpo]

I'm not sure about this.

I looked for some examples:

• Substack appears to do it the way you expect it to work
• Blogspot + most other random blogs I visited, if they had the feature, it worked as it's implemented in tabi

So I'm not sure there's a standard. I see merits to both approaches.

Unless there's an authoritative guideline somewhere, my approach would be to add a custom option so users can invert the current order.

Perhaps a very verbose variable like invert_previous_next_article_links.

[ZzMzaw]

Thanks for the head's up.

It felt obvious to me at first. For people writing left to right, what is written (so the past/previous) is on the left and what has to be written (so the future/next) is on the right. In the same way, timelines have time flowing from the left (past) to the right (future).

But after searching a bit about the topic, I am far less confident.

I was not able to find any authoritative guideline either and I understood such a consideration may be localized as well (people writing from right to left may have different feelings).

When looking at how zola works, the paginator has previous page on the left and next page on the right. Nevertheless, as posts are ordered most recent first, next page means previous posts... It doesn't help much.

I'll implement invert_previous_next_article_links variable and add i the documentation what is the default order and what is the reverse one. I was wondering if there were anything special to take into account if the language displayed is right to left (RTL). It seems zola supports RTL but did you do anything special for tabi?

In addition, what do you think about adding "Prev - " and "Next - " (with translations) just before the article title in order to completely remove any ambiguity? If it makes sense to you, I could implement another very verbose variable like label_previous_next_article_links to add the labels only when configured.

Last but not least, has "‹ ›" been used on purpose instead of "← / →" used for similar links? If it was not, I can take care of using the arrow instead.

Thanks for your help and guidance.

P.S.: I cannot change the label (or at least don't know how to do so) but don't hesitate to change it from bug to enhancement.

[welpo]

I'll implement invert_previous_next_article_links variable and add i the documentation what is the default order and what is the reverse one.

Great! Thank you.

I was wondering if there were anything special to take into account if the language displayed is right to left (RTL). It seems zola supports RTL but did you do anything special for tabi?

I haven't done much in this regard besides some testing and i18n strings. I don't think we need to do anything for this feature.

In addition, what do you think about adding "Prev - " and "Next - " (with translations) just before the article title in order to completely remove any ambiguity?

I wanted to keep this section minimal to accomodate for long titles, but after some local testing I think this can work. We can use the already existing prev and next i18n strings, like: $prev: [article title].

If it makes sense to you, I could implement another very verbose variable like label_previous_next_article_links to add the labels only when configured.

Let's skip the variable and implement it globally.

Last but not least, has "‹ ›" been used on purpose instead of "← / →" used for similar links? If it was not, I can take care of using the arrow instead.

I used "‹ ›" to reduce the amount of space this section took up, trying to avoid wrapping long titles. However, since it seems unavoidable, let's use ← →.

---

Thanks for working on this. If you need any help (like documentation or any implementation details), don't hesitate to reach out!

[ZzMzaw]

I haven't done much in this regard besides some testing and i18n strings. I don't think we need to do anything for this feature.

:+1:

I wanted to keep this section minimal to accomodate for long titles, but after some local testing I think this can work. We can use the already existing prev and next i18n strings, like: $prev: [article title].

This is exactly what I had in mind. Nevertheless, I changed a bit the format to make it more language agnostic. Feel free to tell me if it doesn't suit you.

I was wondering if maybe it could be interesting to have the label above the title instead of prepended to it (maybe in a format similar to the metadata at the beginning of the article) or even the other way around (the link on the label : prev or next and the title in grey just below). I don't know if it would look better and if it would remain accessible. I'll try to post of screenshot if you think it can work.

Let's skip the variable and implement it globally.

:+1:

I used "‹ ›" to reduce the amount of space this section took up, trying to avoid wrapping long titles. However, since it seems unavoidable, let's use ← →.

It makes sense but I am no sure it will have a huge impact because the arrow size is not that big with the policy used.

---

I implemented the changes we discussed about the best I could. I let you have a look at the PR and provide your feedback.

Many thanks.

[welpo]

I was wondering if maybe it could be interesting to have the label above the title instead of prepended to it (maybe in a format similar to the metadata at the beginning of the article) or even the other way around (the link on the label : prev or next and the title in grey just below).

That might work… If you have something ready, I'd love to have a look!

[ZzMzaw]

I would propose something like that

It wraps pretty well and is easy to distinguish from the rest whether it is standard as in the previous screenshot, followed by comments as in: or narrowed as in:

I am not a UI/UX expert but I have the feeling the link between prev/next link and the title below is easy to understand. I only have one doubt about the font-weight. I used the same as the article meta but I am not sure it is readable enough (even if it suits me).

I thought it would make more sense to have the link on prev/next as for pages so I only focused on this proposal. It has the advantage to keep the most space for title (no need to worry about angle brackets or arrows anymore). Nevertheless, if you think it would be better the other way around, it wont be too complex to change.

As I might not be so much available in the coming days, I'll push a commit so you can look at the code which has been used to generate the capture. Feel free to provide any feedback and I'll update it when possible or modify it if you prefer.

Thanks again for your help.

[welpo]

Great job! I've made some minor changes. Visually, I used the sans-serif font, as the serif one is "reserved" for the article paragraphs.

I've improved accessibility by hiding the paragraph with the label. Otherwise screen readers would announce it twice: once for the next/prev link (good job with the aria-describedby), then again for the article title.

Minor change: Truncated long titles will get "…" at the end.

[welpo]

I've merged the PR #261.

Hopefully everything's all right with my latest changes. Do let me know if you encounter any issues.

Thanks for your great work on this!

[ZzMzaw]

That's really great.

Many thanks for always being supportive and providing so many advice.