PR Smorgasbord

[OleMussmann]

I collected a long list of tweaks and improvements in a theme extension. Please pick whatever you want to have included from the list below and I'll open separate PRs for any of the chosen items, or subsets of those. Let me know if I can explain features in more detail. I might need your help if you want to have things optional or configurable in the hugo.toml.

1. fix nested ul/ol/li spacing https://ole.mn/posts/markdown_showcase/#lists (scroll down a bit) PR: fix nested ul/ol/li spacing #83
2. fix reflow of header links /home /posts /etc.: narrow your browser window to see PR: prevent linebreaks in header words for small window sizes #84
3. fix image rendering PR: Image optimization #87
   • SVGs work, closes Page bundle can't handle *.svg images #79
   • SEO improvements
     • the first image (best guess for "header" image) of the page is loaded "eager", subsequent ones "lazy"
       • prevents larger Cumulative Layout Shifts (CSL) through "eager" loading
       • overridable on a per-image basis
     • drastically reduce image size
       • images are auto-resized to content-width (overridable)
       • images are served as webp (overridable)
4. introduce more image tags, combine with #small and #full
   • #lazy load image lazily
   • #eager load image eagerly
   • #noresize don't auto-resize image
   • #nowebp don't auto-convert to webp
5. make mermaid colorschemes configurable for light and dark mode PR: Configure mermaid theme #86
   • set in hugo.toml
   • switches (reinitializes) with light/dark theme change
6. add notice boxes https://ole.mn/posts/markdown_showcase/#notice-boxes
   • based on https://github.com/martignoni/hugo-notice extension
7. add iceberg color scheme
   • light and dark
   • styling for notice boxes
   • code theme auto-switches between "friendly" and "nord"
     • maybe proper iceberg code theme in the future?
8. add manicule shortcode https://ole.mn/posts/markdown_showcase/#manicules PR: add manicule shortcode #82
   • font-independent SVG
   • colored by var(--content-primary)
   • switches with theme
9. add slide page for presentations https://ole.mn/slides/
   • mouseover animations
   • featured image -> link to presentation
   • info text -> link to description
10. remove bullets from task lists https://ole.mn/posts/markdown_showcase/#task-lists
11. add theme tweaks (probably a matter of taste), see https://ole.mn or https://ole.mn/posts/a-helpful-noob/
    • Average font for running text
    • Habibi font for headings
    • Victor Mono font for code
    • larger font size, increased white space
    • block text with hyphenation
    • scaling » design element before (non h1) headings for better readability
    • colored line-summary
    • color links with var(--content-secondary) on hover PR: add var(--content-secondary) color to links on hover #85

[tomfran]

Thank you, I'll have a look in the following days!

[tomfran]

So, 1 and 2 can be merged I feel, you can open a PR with both.

---

How are you achieving 3? I would like to see the code. Also, 3 and 4 can go into the same PR. I am not a huge fan of introducing a new feature with the need to opt-out and the nowebp tag, but perhaps it makes sense here. Again, feel free to open a PR for this.

Also, the wiki needs to be updated, we can do it together, or even I could do it, after agreeing on the code and new tags.

---

5 could be merged, it needs a wiki update I feel.

---

Is iceberg different than the current light nord theme? If so, you could add a new color scheme.

---

8 can be added, again with a wiki entry explaining how to use it.

---

Not a huge fan of 6 and 9, I feel the first one could make the theme, but I don't like the UI, 9 is something I would never introduce, but I guess `typo-plus can take care of this use case.

---

Finally, about the theme tweaks:

• I am thinking about tweaking the font a little bit, perhaps introducing two fonts as you did for headings and content. IU was thinking of introducing some alternatives, like a set of fonts that one can choose, but how can one exclude them from the static folder easily? I.e. without manually deleting them after a hugo build?
• I am a fan of link colors on hover, you can add it in one of the previous PRs;
• For the rest, I would leave those changes out, such as font scaling, this », and other color changes. Those can easily live in your fork, and one can decide to include them if they want 👍🏻

---

Thank you so much for all your work by the way, while some of those changes are a bit off my vision for the theme, others are really nice quality-of-life improvements and can be merged if you're willing to open the PRs.

Also, it's a nice idea to have a typo-plus theme, thanks 😄

[OleMussmann]

I did not expect you to use all of the above changes, especially the ones that change the look&feel of the theme a lot. But I did want to give you the choice for it. 😄 Anything that won't end up in typo will stay in the -plus extension.

The above list is edited with PR links. I'm holding back on the iceberg theme for a bit, it might still change a bit. I need to dig through the extension in more detail, maybe there's small fixes that I have missed. In that case, I'll add it here later.

---

For setting fonts, this might help. Instead of all fonts permanently living in the static folder, you could copy only the chosen ones.

{{ (resources.Get "foo.txt" | resources.Copy "foo/bar.txt").Publish }}