Add logo in navbar and favicon about wasabidoc HOT 6 CLOSED

from wasabidoc.

@MaxHillebrand I was going to open a pull request for this but I just realized it's only one line in the config file if we like the default size and all. Do you wish to integrate it yourself without a full PR for it? I think the default size for the logo is pretty good; let me know what you think. If we wish to change it it's a bit more work because we have to go and play with the css so I'll open a full PR for that (if needed).

Right under [themeConfig] you include the line logo = '/Logo_without_text.png'. It would look something like this:

title = "Wasabi Documentation"
description = "Wasabi is an open-source... "

[themeConfig]
logo = '/Logo_without_text.png'
displayAllHeaders = false
sidebarDepth = 0
repo = "zkSNACKs/WasabiDoc"
editLinks = true

    # why Wasabi sidebar
    # ----------------------------------------
    [[themeConfig.sidebar."/why-wasabi/"]]

    # ...
    # rest of the config file

from wasabidoc.

thanks @thunderbiscuit - this is merged in 31d61a9.

Another question that I want to do in this same issue, if possible.
How can we add a browser icon, meaning that the wasabi logo shows up in the browser tab of the doc window?

from wasabidoc.

Ah those are called favicons. After looking into this a little bit, a few things emerge.

1. Browsers request the favicon file by default, and VuePress makes everything in the /.vuepress/public/ directory accessible to the browser, so if you just put a file called favicon.ico in there, it will show up. I used a favicon generator to generate one from the initial logo we have. The problem is that the background is white, so it doesn't look to good by default; you first have to run it through something to remove the background to make it look slick. I found a website that did it in 2 seconds and it looks great. This is the quick and "good enough" solution for now, and I can open a PR with the little favicon I created. Whether it would look great on all browsers and all tablets and mobiles is yet to be tested, because the more advanced solution for favicons is to have a "set" of them.

2. And so the longer term solution is to define the favicons in the config file (because you can have multiple favicons depending on the device and other stuff, you'll see that the output from the favicon generator is like 16 little icon files). The problem is that there is currently a bug in the toml implementation of this for VuePress, and so it doesn't work with that. It only works in the config.js implementation (like here: https://v1.vuepress.vuejs.org/config/#head). So to implement this corner case thing we'd have to change using the toml format to the js format for the config files... I feel like it might be worth just waiting a bit for the VuePress team to fix it (the issue is open here).

If anyone has other ideas or more experience with frontend development and favicon files and wants to pitch in, I'm all ears. For now my thinking is that option 1 will be a pretty good solution that will work in most cases, and in #twoweeks we can build the more complex solution into the config file when it's solved. The other way is to implement theme inheritance here, and go right into the head tag of the index file and add the favicon code there.

from wasabidoc.

Awesome, thanks for the thorough answer @thunderbiscuit!!

Since the navbar icon was such a trivial fix, I think it's good enough to take this issue over with the favicon, I'll close this issue when we have this implemented.

Seems like you know about the nuances of this - I would really appreciate if you can do a separate PR with this.

from wasabidoc.

Just did. #44 will bring in the nice little icon we need for most use cases.

from wasabidoc.