welpo/tabi

Feature Request: add Bluesky SVG to social icons

gacallea opened this issue · 10 comments

gacallea commented

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

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

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

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:

  • 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?)
  • 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

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

gacallea commented

@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
  • 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

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:

  • Users can easily (no compiling, no extra software installs, no tinkering) add their own icons
  • No 3rd party URLs are loaded
  • It's easy for tabi to add/remove/update icons from various sources, without 3rd party tools or adding any build steps

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.

  • 👍1
gacallea commented

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

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

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

Thanks for the request, discussion and PR!

  • ❤️1
gacallea commented

Thank you the same and for merging!

  • ❤️1