add paginator on post page

[wold5]

This change displays the last and next article at the bottom of a post, a paginator. This is a first working example. Let me know what you think. It can also wait.

https://github.com/wold5/abridge/blob/d6eb9dc3a586055c7d2a9e89878eaa853fa4a39c/templates/macros/macros.html#L121-L141

Its build after the paginator from tale-zola: template here and css here (MIT license).
Tale-zola's implementation uses absolute/relative CSS positioning, which overlap on smaller screensizes. After fiddling a bit with CSS, the simplest solution was a flexbox setup. The CSS animations were left out, and truncation was added for long posts. It requires Zola 1.6.0 at minimum.

Note tale-zola puts the 'top' link in between both pagelinks, which looks OK.

PS. required is the @import "include/pagination";

[Jieiku]

I recently put in a lot of work eliminating all instances of import because import is deprecated

I think I like the idea of pagination on posts though, so I will check it out.

I can either merge in what you have here if you make some changes or I can just add it locally.

The related css should go into an @if bracket and have a variable (these scss variables can be overridden):

abridge/sass/abridge.scss

Line 192 in def54c8

$hr: true !default;//Horizontal Rule

abridge/sass/abridge.scss

Lines 869 to 879 in def54c8

	@if $hr {
	// https://github.com/picocss/pico
	hr {
	box-sizing: content-box; // Add the correct box sizing in Firefox
	height: 0; // Add the correct box sizing in Firefox
	overflow: visible; // Show the overflow in Edge and IE
	border: none;
	border-top: 1px solid var(--f1);
	}
	header hr, footer hr {border-top: 1px solid var(--c4)}
	}

additionally the related variable should be added to the overrides file:

abridge/COPY-TO-ROOT-SASS/abridge.scss

Line 164 in def54c8

//$hr: true,//Horizontal Rule

(I used to have all of this broken out into multiple files, but with @use and @include I would have had to use a mixin anytime a variable from another file is used, because there is no global scope now for variables, and I felt this just complicated the understanding for anyone wanting to edit these files, I am mostly only using mixins when a block of code is reusable, such as the fonts and the colors for the theme and syntax. Having all variables in the main scss makes the variables easy to override in the parent site using SASS @use with with (): https://sass-lang.com/documentation/at-rules/use#configuration)

abridge/COPY-TO-ROOT-SASS/abridge.scss

Line 1 in def54c8

@use '../themes/abridge/sass/abridge' with (

The variables being able to be overridden is particularly important for people that load the abridge theme as a git submodule, they want to get the latest Abridge changes while still being able to customize things. If they simply run a local copy of the theme and edit the files directly then they wont have the latest changes.

[Jieiku]

Oh, one more thing, abridge tries to use classes minimally. This means styling objects based on their html tag structure and reusing whatever styles we can (semantic html styling). I do however use a few classes when it solves a problem that is difficult to solve otherwise. I can handle that part after the merge though if I see an easy enough way to replace the classes with html selectors.

For the other paginator, it uses the code within the @if $nav section I believe, if you structure the html for the paginator similarly then the existing css selectors may handle the styling, or may only require a small tweak.

When I first created Abridge, I did so in a way that the css framework could be used for other things as well, not just zola projects.

[Jieiku]

Upon reviewing the scss for the nav section, I decided to rework how this is done, the DOM depth is too deep for these selectors.

[wold5]

I recently put in a lot of work eliminating all instances of import because import is deprecated

So thats why import was missing. I briefly fiddled with the @if conditions, which for some reason had no effect. Best I brush up on my SASS knowledge first.

Oh, one more thing, abridge tries to use classes minimally. This means styling objects based on their html tag structure and reusing whatever styles we can (semantic html styling).

I can either merge in what you have here if you make some changes or I can just add it locally.

I can try adapt it.

One thought about the HTML structure is moving this paginator into the footer <nav>. It has two nav objects already (icons & pages). The first example here (HTML spec) , even shows <article> having its own header and footer, next to those of body, which would make styling easier. But this is quite a large change (that I feel I can't make for you).

[Jieiku]

I just pushed a changed that effectively reduces the maximum DOM depth for selectors from 7 to 6, mostly this involved reworking the scss for the nav related components, and the templates with nav components.

[Jieiku]

Just let me know if you want me to give this a go, otherwise I will leave it to ya.

You should not need to use header or footer tags within the article tag for the selectors. you can reference direct descendants in scss by using ">"

[Jieiku]

I rebased the refactor branch, you may need to stash your changes then delete and recreate your fork.

I did this to cleanup the history before the upcoming merge.

[wold5]

Just let me know if you want me to give this a go, otherwise I will leave it to ya.

You should not need to use header or footer tags within the article tag for the selectors. you can reference direct descendants in scss by using ">"

Feel free to pick it up, it'll be easier for you as well. Otherwise I'll try again at the start of June.

[wold5]

Finally implemented it, but this PR is closed. Can you reopen it? Or should I open a new PR?

Changes are at https://github.com/wold5/abridge/tree/refactor

For the CSS: only the right-item text needed to be right-aligned (BTW, should work for RTL languages, not?).

1. kept default link colors: having the titles colored distracts, and it simplifies the CSS
2. it uses hardcoded arrows. Tried using the paginator arrow setup from {%- macro pagination(paginator, config)%}, like svgs svgh angl, but these don't line up well vertically with the text vertically

[Jieiku]

Yes it closed automatically when I rebased the refactor branch, open a new PR please.

The button to reopen is greyed out.

[Jieiku]

One thing I do not see is an option to disable this feature. (add to config.toml, probably under layout section of extra)

I think on by default is good though, just need to add the logic and variable for anyone that would want to disable it.

[wold5]

Done, see #123