|
| 1 | +--- |
| 2 | +title: October 25th, 2025 |
| 3 | +layout: page |
| 4 | +parent: Blog posts |
| 5 | +tags: [programming, js, liquid, headaches] |
| 6 | +date: 2025-10-25 |
| 7 | +subject: JustTheDocsCeption |
| 8 | +nav_order: 996 |
| 9 | +--- |
| 10 | + |
| 11 | +{% include top-card.html %} |
| 12 | + |
| 13 | +I more or less spent the entire afternoon and evening trying to figure out how to modularize the whole table of contents stuff on index pages as I wasn't a fan of the default. Or well, I could sense it needed extra features. |
| 14 | + |
| 15 | +It was quite a |
| 16 | + |
| 17 | +battle. |
| 18 | + |
| 19 | +If you go on any category page (bar software as I'm still pondering on that one), you will see a very nice table of contents with sorting options. I'm into modularization a lot. If I can make something repetitive modular, I will do my best to do it, even if sometimes its kind of like scratching my right ear with my left hand. |
| 20 | + |
| 21 | +In this case it was similar, but it was more like scratching my right ear with my right hand, only that the arm wraps *around my head* first. |
| 22 | + |
| 23 | +The end result was phenomenal though, as now I can just slap a tiny snippet on each index, and modify it to my likeing. |
| 24 | +{% raw %} |
| 25 | +```liquid |
| 26 | +{% include ipage.html |
| 27 | +area='hardware' |
| 28 | +main='type' |
| 29 | +secondary='device' |
| 30 | +header='mods' |
| 31 | +%} |
| 32 | +``` |
| 33 | +{% endraw %} |
| 34 | +What happens here is all the pages containing `/hardware/` in the uri will have the `type` and the `device` displayed in a list that will just say `mods:` prior. And as per usual, I took it a step further, the `secondary` attribute being allowed to have more than 1 item <small>even though I do not have a usecase for it as of now</small>. |
| 35 | + |
| 36 | +All it took was to combine javascript with [Liquid](https://liquidjs.com/tutorials/intro-to-liquid.html) in the monstrosity bellow 👌 |
| 37 | + |
| 38 | +{% raw %} |
| 39 | +```liquid |
| 40 | +{% for post in sorted_posts %} |
| 41 | + {% if post.path contains include.area and post[main] %} |
| 42 | + <li data-{{ main }}="{{ post[main] }}" |
| 43 | + {% if secondary %} |
| 44 | + {% for opt in secondary %} |
| 45 | + data-{{opt}}="{{ post[opt] | downcase }}" |
| 46 | + {% endfor %} |
| 47 | + {% endif %} |
| 48 | + > |
| 49 | + <a href="{{ post.url }}"> |
| 50 | + {{ post[main]}} |
| 51 | + {% if secondary %} |
| 52 | + ➝ |
| 53 | + {% for sec in secondary %} |
| 54 | + {{post[sec]}}{% unless forloop.last %}, {% endunless %} |
| 55 | + {% endfor %} |
| 56 | + {% endif %} |
| 57 | + </a> |
| 58 | + </li> |
| 59 | + {% endif %} |
| 60 | +{% endfor %} |
| 61 | +``` |
| 62 | +{% endraw %} |
| 63 | + |
| 64 | +Thank you for reading 😎👉 |
| 65 | + |
| 66 | +**Some minutes into making this article edit:** *spent a bit of time figuring out how to show the liquid code, since it kept rendering, turns out it just had to be wrapped in* `raw` *tags.* |
| 67 | + |
| 68 | +{% include tags.html %} |
0 commit comments