Giter Site home page Giter Site logo

Comments (10)

welpo avatar welpo commented on August 27, 2024 1

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.

from tabi.

welpo avatar welpo commented on August 27, 2024 1

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

Thanks for the request, discussion and PR!

from tabi.

gacallea avatar gacallea commented on August 27, 2024 1

Thank you the same and for merging!

from tabi.

welpo avatar welpo commented on August 27, 2024

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.

from tabi.

gacallea avatar gacallea commented on August 27, 2024

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

from tabi.

welpo avatar welpo commented on August 27, 2024

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!

from tabi.

gacallea avatar gacallea commented on August 27, 2024

@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 :)

from tabi.

gacallea avatar gacallea commented on August 27, 2024
  • 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.

from tabi.

gacallea avatar gacallea commented on August 27, 2024

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!

from tabi.

welpo avatar welpo commented on August 27, 2024

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!

from tabi.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.