Add a logo to the navigation bar of the HTML rendered book #1584
Conversation
The logo is placed at the top of the navication sidebar.
| @@ -46,15 +46,19 @@ This is general information about your book. | |||
| `src` directly under the root folder. But this is configurable with the `src` | |||
| 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.
| ```toml | ||
| [book] | ||
| title = "Example book" | ||
| authors = ["John Doe", "Jane Doe"] | ||
| 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.
| @@ -761,6 +765,8 @@ mod tests { | |||
| 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)?
| @@ -344,6 +344,13 @@ ul#searchresults span.teaser em { | |||
| 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.
src/theme/index.hbs
Outdated
| @@ -103,6 +103,11 @@ | |||
|
|
|||
| <nav id="sidebar" class="sidebar" aria-label="Table of contents"> | |||
| <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? |
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.