Implemented basic sections

[Hysterelius]

On the way to fixing #143, have created the basic feature.

Here are the things lacking:

• [x] Custom CSS styling
• [x] Multi-lingual series
• [ ] Override pagination
• [ ] Collapsable for large series

I have just opened this so you can see my progress so far. You can see what I have done on the Maths page.

[netlify[bot]]

✅ Deploy Preview for abridge ready!

Name	Link
🔨 Latest commit	ed9f6d45238f730ee2824ca1ff527fdda271e446
🔍 Latest deploy log	https://app.netlify.com/sites/abridge/deploys/65094acd3a08be0008a0b4b3
😎 Deploy Preview	https://deploy-preview-144--abridge.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.

[Hysterelius]

I'm pretty much finished on this PR and feature, let me know what you think of the styling. Also, I decided not to override pagination as it could become too confusing, but it could be changed.

I am not sure how collapsibility would be implemented, but it could always be added later.

It would be great if you could have a look over my changes.

[Jieiku]

Need to also add the option to the overrides scss file (I would place it below toc in both files, since they are somewhat similar features): https://github.com/Jieiku/abridge/blob/c44af9da6d9db0f420eabce146058ae0ac48b353/COPY-TO-ROOT-SASS/abridge.scss#L185

I like the placement of the series block, it looks good, but when its in the right column above the ToC instead of:

Features (10 part Series)

I would simply have :

Series of 10

..... that should always keep it to 1 line regardless of series title.

For the in page series list (the one not above the ToC block) you could use the full title. (as it is now)

Need to get the margin spacing on the Series Block and the posts table of content to look the same so that it all looks consistent:

I recently removed some padding above the word "Index" however I may have gone a little too far, the idea here is that on very large pages with a loooooong table of contents, to try and make as efficient use of the page space as possible.

The easiest way to accomplish getting these looking consistent is to change this: <h4><a href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag.name }} ({{ parts_string }})</a></h4>

To this: <a class="si" href="{{ tag.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag.name }} ({{ parts_string }})</a>

Then if you think there needs to be a little more spacing you can adjust the si class.

We may also need to add some logic in the scss file for the si class, eg

@if $series or $toc {

PS: The same treatment needs to be done to the recent posts block (keeping a consistent look with spacing), however there is other work that is also on my todo list for the recent posts block. When I initially implemented the feature I reused some code and never went back and cleaned that up. I would prefer that people could use just table of contents without also having to use the recent posts block. In config.toml I have recent = true, that value should only affect the recent posts block, then I should also have a toc = true, so that they can use only one of the features if they wanted.

https://github.com/Jieiku/abridge/blob/c44af9da6d9db0f420eabce146058ae0ac48b353/config.toml#L114

So for the recent posts block you could clean that up too to match the series block and table of contents block as far as spacing goes if you wanted. It also needs its logic separated but I can do that later if your not wanting to mess with it.

Also I see you reused some of the scss from the toc for the series-toc which is good, it keeps it consistent, because series-toc is not a sticky element you can remove the top attribute:

I noticed you made use of the cursor attribute in the scss, a links should have that automatically, is there a way those could be removed so that we can keep the css as light as possible.

There might also be other scss elements that can be removed from this pull request, but I am not certain without testing removing these one a time and looking at the result, you could see if there is any extra scss that can be removed. You don't have to go out of your way to make it lighter, like restructuring the heck out of it, but if there are any attributes that are simply not doing anything then those should be removed.

(I recently did a LOT of cleanup for the main Navigation Menu, but have not pushed the commit for it yet, and will probably wait to push my commit until we get yours in so that you do not have to resolve merge conflicts. )

[Jieiku]

Override pagination

I think it is a good idea to override the pagination, but it may not even be necessary if the posts are within their own section. The simplest solution is to make sure that series are true sections, and by that I mean any articles that are part of a series would go into their own section folder, so for instance if I made the 3 video streaming site shortcodes into a series:

The _index.md file would simply have the metadata and if you wanted an introduction page for the series you could palce it here, the rest of the md files in the folder would be the content that is part of that series, they would need to reference the template used, for normal posts that would be pages.html, this would also keep the content organized on disk. (using a transparent section would probably work best here so that the pagination stays true on the index.)

As a benefit/side affect the result in the URL would be that instead of this:

https://abridge.netlify.app/overview-embed-youtube/ https://abridge.netlify.app/overview-embed-vimeo/ https://abridge.netlify.app/overview-embed-streamable/

you would have:

https://abridge.netlify.app/overview-video-sites/overview-embed-youtube/ https://abridge.netlify.app/overview-video-sites/overview-embed-vimeo/ https://abridge.netlify.app/overview-video-sites/overview-embed-streamable/

Another benefit to this is that on the _index.md you could also specify an overview page.

https://abridge.netlify.app/overview-video-sites/

so maybe you have a page that simply discusses whats in that section, and if this is not desired you can instead set render=false, which is what I do for pages:

https://github.com/Jieiku/abridge/blob/c44af9da6d9db0f420eabce146058ae0ac48b353/content/pages/_index.md?plain=1#L2

Collapsible for large series

For collapsible menu on the series.... you could probably create it similar to a paginator, and have a configurable max length, so any series up to 20 items could display the full list, and any series beyond 20 items could be paginated, so for instance if you were on article 7 of 32:

1. article one
...
5. article five
6. article six
7.  article seven
8.  article eight
9.  article nine
...
32. article 32

Collapsible for large series could be saved for a later feature, I think it may be a bit involved.

Honestly they can both be saved for later if you would rather me work on them later. (that may actually be best because I have some commits for #129 that would probably be useful here.)

[Hysterelius]

Thank you for all your advice and feedback, especially when you're busy!

---

Features (10 part Series) I would simply have: Series of 10

I believe that 10 part Series is a better choice as it simplifies translations and, in my opinion, is more intuitive.

So for the recent posts block you could clean that up too to match the series block and table of contents block as far as spacing goes if you wanted. It also needs its logic separated but I can do that later if your not wanting to mess with it.

Yep, I'll have a look at making a consistent style for these blocks.

I think it is a good idea to override the pagination, but it may not even be necessary if the posts are within their own section. The simplest solution is to make sure that series are true sections,

~I'll see what changes that true sections need and whether they will work.~ Had a quick look, and it seems you'll have to create an index.html page to explain the sections, and the individual posts won't appear in any of the recent posts - which I feel is not ideal.

For collapsible menu on the series.... you could probably create it similar to a paginator, and have a configurable max length, so any series up to 20 items could display the full list, and any series beyond 20 items could be paginated, so for instance if you were on article 7 of 32:

I'll have a play with this and see how it goes.

Honestly they can both be saved for later if you would rather me work on them later. (that may actually be best because I have some commits for https://github.com/Jieiku/abridge/issues/129 that would probably be useful here.)

I'll still just have a little look how I go, and we can see from there.

---

Summary (for me):

• [x] Cut title
• [x] Clean up spacing on blocks
• [x] Remove unused css: cursor, top
• [ ] True sections for pages: fix tags
• [x] WIP: collapsibility

[Hysterelius]

So for the recent posts block you could clean that up too to match the series block and table of contents block as far as spacing goes if you wanted. It also needs its logic separated but I can do that later if your not wanting to mess with it.

I have fixed this just by putting this at the bottom of abridge.scss file:

.toc h1 {
  margin: 0;
}

It could probably be under its own @if block, but I don't really see the point if it is just one element.

[Jieiku]

Let me know when this is ready for merge, we could save some of the other features for later. I would like to get this in before I push my commit for the pages template, so that you do not need to resolve merge conflicts..

[Hysterelius]

The basic functionality is ready for deployment. I am currently working on a MVP for condensing of series and will have a look at folder (true) sections.

Series are currently based on a shared tag, but it may require a breaking change if we were to switch over to true sections.

What CSS I changed/removed:

- Added new `@if` for series - Created new `series` parent class to house shared styling - Removed `min-width` on in-place blocks - Removed unnecessary `text-decoration: none`

[Jieiku]

Thanks! Looks good, going to merge now.

[Hysterelius]

Honestly they can both be saved for later if you would rather me work on them later. (that may actually be best because I have some commits for https://github.com/Jieiku/abridge/issues/129 that would probably be useful

I have started to work a bit on the logic for the pages and would like to know if it would be best time to start to implement it?

Also, have you made in progress on true sections and pagination? Otherwise, I am happy to have a lock at some more logic to deal with pagination.

[Jieiku]

I mostly just restructured the css for the side column blocks so that the classes can be reused. I also got all of my other pending commits in.

I tested creating a section just now, using transparent=true, and the pagination at the bottom of the page still went by date instead of section. I used transparent=true so that the posts would show up in the recent posts block...

I have multiple ideas for solving this, but all of them involve a good deal of work. As far as Organizing on disk goes transparent section work without issue, I just pushed a commit here:

https://github.com/Jieiku/abridge/commit/ba30a59c478715056ac2d01d16aac75a22ea0628

Now you will see them under the video-streaming-sites transparent section:

https://abridge.netlify.app/video-streaming-sites/overview-embed-youtube/

and if you go here:

https://abridge.netlify.app/video-streaming-sites/

you will see a 404 page (as intended), but if you change render = true for that section, then you will see the page that describes that section: https://github.com/Jieiku/abridge/blob/ba30a59c478715056ac2d01d16aac75a22ea0628/content/video-streaming-sites/_index.md?plain=1#L2 (you can test it with zola serve)

To NOT use a transparent section would mean that multiple parts of Abridge would have to account for other sections where that is desired... the index that lists the posts, the recent posts block, even the archives page. So I am not sure if it is a good thing to pursue. (does it solve any real problems?)

It may be simpler to use transparent section for organization on disk, and for the pagination at the bottom of the page we could just rework it so that it stays within that series...

I do not have time for either solution at the moment.

Feel free to work on anything you want whenever, I just had so many changes to get in that I knew resolving the merge conflicts could have been a nightmare for you.