Add a logo to the navigation bar of the HTML rendered book - #1584
scattenlaeufer wants to merge 6 commits into
Conversation
The logo is placed at the top of the navication sidebar.
| key in the configuration file. | ||
| - **language:** The main language of the book, which is used as a language attribute `<html lang="en">` for example. | ||
| - **logo:** Path to a logo to shown at the top of the navigation bar. If this | ||
| is given as a relative path, it's base directory is the source directory. |
There was a problem hiding this comment.
| is given as a relative path, it's base directory is the source directory. | |
| is given as a relative path, its base directory is the source directory. |
There was a problem hiding this comment.
Which content types do we support for the logo?
There was a problem hiding this comment.
I'd have to further look into that, but it seems like pixel as well as vector graphics are supported.
There was a problem hiding this comment.
Yeah, img supports SVG. You can simply reference the HTML spec for img to state which image formats are supported.
| description = "The example book covers examples." | ||
| src = "my-src" # the source files will be found in `root/my-src` instead of `root/src` | ||
| language = "en" | ||
| logo = "static/logo.png" |
There was a problem hiding this comment.
If the SVG format is supported, I prefer to use an SVG example.
That way, we don't have to add a sample binary to the Git index, and save space, in addition to the general advantages of SVG logos (crispness, etc.).
There was a problem hiding this comment.
A quick test showed that SVG seems to be supported. Is there a logo I could use as a sample? If not, I'd just reuse the favicon.
There was a problem hiding this comment.
I think MdBook doesn't have a product logo yet. Using the favicon as sample seems fine, though .ico files may not be rendered correctly as source image for img-elements sometimes.
| multilingual: true, | ||
| src: PathBuf::from("source"), | ||
| language: Some(String::from("ja")), | ||
| // TODO: add a test logo |
There was a problem hiding this comment.
Could this comment be clarified further (in-source)?
| right: 0; | ||
| padding: 10px 10px; | ||
| } | ||
| .sidebar .sidebar-scrollbox .sidebar-book-logo img { |
There was a problem hiding this comment.
Please sort the property names below.
| <div class="sidebar-scrollbox"> | ||
| {{#if book_logo }} | ||
| <div class="sidebar-book-logo"> | ||
| <img src="{{ book_logo }}"> |
There was a problem hiding this comment.
Please add an alt attribute for e.g., accessibility. Although its content could be generated, because of language differences and because of the principle of least surprise, I propose to add a config field containing the alt title.
|
I'm wondering, would it be possible to make this part of the SUMMARY instead of making it a configuration option? That is, before the chapter list, allow an image to be specified. It could be constrained to only specific events for now (like images and maybe HTML?). That would alleviate the issues with needing to specify alt text, image width/height, and other details. I'm a little concerned about trying to specify things in TOML since specifying details like those can be difficult. |
|
Hi. Is there any update on this PR? It's a neat addition |
|
Is there any chance to have this feature? |
This is achieved by adding one line to the index.hbs. This is not ideal as we fix the whole theme by it and we should make sure to keep it up to date with upstream (using `mdbook init --theme`). Modifications to index.hbs are indicated by <!-- MODIFICATION START --> and <!-- MODIFICATION END -->. There is this relevant issue upstream: rust-lang/mdBook#1584
This is achieved by adding one line to the index.hbs. This is not ideal as we fix the whole theme by it and we should make sure to keep it up to date with upstream (using `mdbook init --theme`). Modifications to index.hbs are indicated by <!-- MODIFICATION START --> and <!-- MODIFICATION END -->. There is this relevant issue upstream: rust-lang/mdBook#1584
This is achieved by adding one line to the index.hbs. This is not ideal as we fix the whole theme by it and we should make sure to keep it up to date with upstream (using `mdbook init --theme`). Modifications to index.hbs are indicated by <!-- MODIFICATION START --> and <!-- MODIFICATION END -->. There is this relevant issue upstream: rust-lang/mdBook#1584
This is achieved by adding one line to the index.hbs. This is not ideal as we fix the whole theme by it and we should make sure to keep it up to date with upstream (using `mdbook init --theme`). Modifications to index.hbs are indicated by <!-- MODIFICATION START --> and <!-- MODIFICATION END -->. There is this relevant issue upstream: rust-lang/mdBook#1584
|
4 years ago......... pls merge this |
|
☔ The latest upstream changes (possibly #2681) made this pull request unmergeable. Please resolve the merge conflicts. |
rustbot
added
the
S-waiting-on-author
|
Sorry for the delay, we now have an mdbook team. I think this feature is a good idea. Nominating it for team discussion. |
GuillaumeGomez
added
the
A-needs-discussion
|
cc @rust-lang/mdbook |
|
Superseded by #3214. @Chocorean cherry-picked your commit so authorship attribution will be kept. Thanks for working on this! |
9 participants
I added the option to add an image as logo to the navigation bar by adding a configuration parameter to the
booktable of thebook.toml. This resolves #877I also thought about adding the option of a project logo to the bottom of the navigation sidebar, but wanted to wait for feedback to this first edit before adding more code.