welpo / tabi

A modern Zola theme with search, multilingual support, optional JavaScript, a perfect Lighthouse score, and a focus on accessibility.
https://welpo.github.io/tabi/
MIT License
97 stars 32 forks source link

Feature Request: add Bluesky SVG to social icons #332

Closed gacallea closed 2 weeks ago

gacallea commented 2 weeks ago

Feature Request

Summary

it would be nice if you could add Bluesky SVG to social icons.

Motivation

Given the growing popularity, Bluesky is as important as other socials.

Please and thank you

welpo commented 2 weeks ago

Hey Andrea!

Sure thing! I see the icon is available in Font Awesome.

Would you like to make this PR? I'll gladly accept it.

gacallea commented 2 weeks ago

Hey @welpo!

I could give it a go later today, no problem :)

Question tho: why not use Font Awesome in Tubi directly via CSS or JavaScript then?

That would open all of it (at least the free side) and less annoyances/bugs for the codebase.

my 2c

welpo commented 2 weeks ago

I could give it a go later today, no problem :)

Great!

Question tho: why not use Font Awesome in Tubi directly via CSS or JavaScript then?

I haven't thoroughly considered the pros/cons for this. Some first thoughts against using the font as CSS:

Happy to change my mind on this, though, if it's truly beneficial!

gacallea commented 2 weeks ago

@welpo I use Zola, HTML, TailwindCSS + Font Awesome for my custom static music label site. It's pretty easy and transparent to use/implement. You could bundle FA if you want to avoid using URLs and worry about ad blockers. It is also better for performance that way.

Not much would be different for the user as well. You could still leave the user config as is and just tweak your code to use FA instead of SVGs. As an example from my label site:

-- config.toml
footersocials = [
  { url = "/catalog", name = "Gentle Wash Catalog", icon = "fa-solid fa-record-vinyl" },
  { url = "/contact", name = "Contact Gentle Wash", icon = "fa-solid fa-square-envelope" },
  { url = "/atom.xml", name = "Subscribe for News", icon = "fa-solid fa-square-rss" },
]

To keep using something like icon = "github" you could handle that in templates. No changes for the user nor breaking anything.

2 more cents :)

gacallea commented 2 weeks ago
  • Harder for users to add their own icons
  • Harder for tabi to provide non-Font Awesome icons (would we modify the font? provide some from the font, some from svgs?)

You could use Nerdfonts and solve all this issues at once https://www.nerdfonts.com

  • End users (people who visit a site using tabi) will need to load all icons (the "font"), even if the site only uses one or two

I believe you can make it in a way that only used icons/fonts are compiled in.

welpo commented 2 weeks ago

Not much would be different for the user as well

What I meant is: what if a tabi user has a specific icon they want to add? Do they need to get their own nerdfont/FA and add it there? Right now it's as simple as adding an SVG to the right folder (on their own content, not even on tabi's content).

You could use Nerdfonts and solve all this issues

This would make all users of tabi host and serve the entirety of icons tabi chooses to provide, no? Even if I kept the same selection as it is now, right now a user who only shows the RSS or email icon on the footer would need to serve a file containing all icons, as opposed to just the icons needed.

I believe you can make it in a way that only used icons/fonts are compiled in.

Wouldn't that add a build step on tabi users?

In summary, I'd be happy to switch the way we provide icons if:

I too use a font to serve icons on one of my websites, but I'm not sure this is the optimal approach for tabi.

gacallea commented 2 weeks ago

All fair points :) I didn't know it was that simple to add SVG to static/social_icons and it just works. I wouldn't have bothered you, otherwise. If Zola had a mechanism to integrate FA or NF that would be an amazing asset. Happy nonetheless!

welpo commented 2 weeks ago

No bother at all!

I honestly appreciate any and all efforts to make tabi better :) This discussion has made me think about this issue, which I hadn't given much thought to, so I'm grateful.

Plus, I realised nowhere in the docs does it explain this:

I didn't know it was that simple to add SVG to static/social_icons and it just works

I'll be fixing that soon!

welpo commented 2 weeks ago

Docs updated to explain how to use custom icons: 5ae629d171d12ed262d4862da65e7e8c8a21d87a

Thanks for the request, discussion and PR!

gacallea commented 1 week ago

Thank you the same and for merging!