From 215af5dc1e5236f4bff5d6a6401d4a473077de52 Mon Sep 17 00:00:00 2001 From: mlange-42 Date: Wed, 18 Jan 2023 12:38:46 +0100 Subject: [PATCH 1/5] use CSS to hide elements on certain themes --- src/book/init.rs | 3 +++ src/renderer/html_handlebars/hbs_renderer.rs | 1 + src/theme/css/exclude.css | 23 ++++++++++++++++++++ src/theme/mod.rs | 6 +++++ tests/init.rs | 1 + 5 files changed, 34 insertions(+) create mode 100644 src/theme/css/exclude.css diff --git a/src/book/init.rs b/src/book/init.rs index dd3fa8b0..97dc88d4 100644 --- a/src/book/init.rs +++ b/src/book/init.rs @@ -143,6 +143,9 @@ impl BookBuilder { let mut variables_css = File::create(cssdir.join("variables.css"))?; variables_css.write_all(theme::VARIABLES_CSS)?; + let mut excludes_css = File::create(cssdir.join("exclude.css"))?; + excludes_css.write_all(theme::EXCLUDES_CSS)?; + let mut favicon = File::create(themedir.join("favicon.png"))?; favicon.write_all(theme::FAVICON_PNG)?; diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs index 1b648dac..920a899e 100644 --- a/src/renderer/html_handlebars/hbs_renderer.rs +++ b/src/renderer/html_handlebars/hbs_renderer.rs @@ -229,6 +229,7 @@ impl HtmlHandlebars { write_file(destination, "css/print.css", &theme.print_css)?; } write_file(destination, "css/variables.css", &theme.variables_css)?; + write_file(destination, "css/exclude.css", &theme.excludes_css)?; if let Some(contents) = &theme.favicon_png { write_file(destination, "favicon.png", contents)?; } diff --git a/src/theme/css/exclude.css b/src/theme/css/exclude.css new file mode 100644 index 00000000..38e7321f --- /dev/null +++ b/src/theme/css/exclude.css @@ -0,0 +1,23 @@ +.light .no-light { + visibility: hidden; +} + +.rust .no-rust { + visibility: hidden; +} + +.navy .no-navy { + visibility: hidden; +} + +.ayu .no-ayu { + visibility: hidden; +} + +.coal .no-coal { + visibility: hidden; +} + +.navy, .ayu, .coal .no-dark { + visibility: hidden; +} diff --git a/src/theme/mod.rs b/src/theme/mod.rs index 7af5e2b7..dbc0c8b9 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -21,6 +21,7 @@ pub static CHROME_CSS: &[u8] = include_bytes!("css/chrome.css"); pub static GENERAL_CSS: &[u8] = include_bytes!("css/general.css"); pub static PRINT_CSS: &[u8] = include_bytes!("css/print.css"); pub static VARIABLES_CSS: &[u8] = include_bytes!("css/variables.css"); +pub static EXCLUDES_CSS: &[u8] = include_bytes!("css/exclude.css"); pub static FAVICON_PNG: &[u8] = include_bytes!("favicon.png"); pub static FAVICON_SVG: &[u8] = include_bytes!("favicon.svg"); pub static JS: &[u8] = include_bytes!("book.js"); @@ -54,6 +55,7 @@ pub struct Theme { pub general_css: Vec, pub print_css: Vec, pub variables_css: Vec, + pub excludes_css: Vec, pub favicon_png: Option>, pub favicon_svg: Option>, pub js: Vec, @@ -91,6 +93,7 @@ impl Theme { theme_dir.join("css/variables.css"), &mut theme.variables_css, ), + (theme_dir.join("css/exclude.css"), &mut theme.excludes_css), (theme_dir.join("highlight.js"), &mut theme.highlight_js), (theme_dir.join("clipboard.min.js"), &mut theme.clipboard_js), (theme_dir.join("highlight.css"), &mut theme.highlight_css), @@ -153,6 +156,7 @@ impl Default for Theme { general_css: GENERAL_CSS.to_owned(), print_css: PRINT_CSS.to_owned(), variables_css: VARIABLES_CSS.to_owned(), + excludes_css: EXCLUDES_CSS.to_owned(), favicon_png: Some(FAVICON_PNG.to_owned()), favicon_svg: Some(FAVICON_SVG.to_owned()), js: JS.to_owned(), @@ -213,6 +217,7 @@ mod tests { "css/general.css", "css/print.css", "css/variables.css", + "css/exclude.css", "book.js", "highlight.js", "tomorrow-night.css", @@ -240,6 +245,7 @@ mod tests { general_css: Vec::new(), print_css: Vec::new(), variables_css: Vec::new(), + excludes_css: Vec::new(), favicon_png: Some(Vec::new()), favicon_svg: Some(Vec::new()), js: Vec::new(), diff --git a/tests/init.rs b/tests/init.rs index 1c3b962b..c429f3b1 100644 --- a/tests/init.rs +++ b/tests/init.rs @@ -119,6 +119,7 @@ fn copy_theme() { "css/general.css", "css/print.css", "css/variables.css", + "css/exclude.css", "favicon.png", "favicon.svg", "highlight.css", From 83f190bed4b7896bce3a37c0a3d43038fb073d88 Mon Sep 17 00:00:00 2001 From: mlange-42 Date: Wed, 18 Jan 2023 13:01:43 +0100 Subject: [PATCH 2/5] tweak exclusion css, include in page --- src/theme/css/exclude.css | 21 ++++++++++++++------- src/theme/index.hbs | 1 + 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/theme/css/exclude.css b/src/theme/css/exclude.css index 38e7321f..19f0a540 100644 --- a/src/theme/css/exclude.css +++ b/src/theme/css/exclude.css @@ -1,23 +1,30 @@ .light .no-light { - visibility: hidden; + display: none; } .rust .no-rust { - visibility: hidden; + display: none; +} + +.light .no-light-themes, +.rust .no-light-themes { + display: none; } .navy .no-navy { - visibility: hidden; + display: none; } .ayu .no-ayu { - visibility: hidden; + display: none; } .coal .no-coal { - visibility: hidden; + display: none; } -.navy, .ayu, .coal .no-dark { - visibility: hidden; +.navy .no-dark-themes, +.ayu .no-dark-themes, +.coal .no-dark-themes { + display: none; } diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 147eb9af..d5164146 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -28,6 +28,7 @@ + {{#if print_enable}} {{/if}} From 213ed826405b38ae9f10812d58c7569bee701c4c Mon Sep 17 00:00:00 2001 From: mlange-42 Date: Wed, 18 Jan 2023 13:19:16 +0100 Subject: [PATCH 3/5] document the new feature --- .../src/format/images/rust-logo-blk-dark.svg | 1 + guide/src/format/markdown.md | 22 +++++++++++++++++++ guide/src/format/theme/README.md | 1 + 3 files changed, 24 insertions(+) create mode 100644 guide/src/format/images/rust-logo-blk-dark.svg diff --git a/guide/src/format/images/rust-logo-blk-dark.svg b/guide/src/format/images/rust-logo-blk-dark.svg new file mode 100644 index 00000000..9f108d66 --- /dev/null +++ b/guide/src/format/images/rust-logo-blk-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/guide/src/format/markdown.md b/guide/src/format/markdown.md index 963a1538..0bf1ce24 100644 --- a/guide/src/format/markdown.md +++ b/guide/src/format/markdown.md @@ -117,6 +117,28 @@ Which, of course displays the image like so: ![The Rust Logo](images/rust-logo-blk.svg) +## Theme-dependent images + +Image variants for different themes can be used via CSS classes. + +Here is an example for different images for light vs. dark themes: + +```markdown + + +``` + +Try switching the theme to see the effect below (brush icon at the top left of the page): + + + + +To exclude an image (or any HTML element) for all dark or all light themes +(incl. the Rust theme), use the classes `no-dark-themes` and `no-light-themes`. + +For even more control, elements can be hidden on an individual theme basis using the classes +`no-light`, `no-rust`, `no-coal`, `no-navy` and `no-ayu`. + ## Extensions mdBook has several extensions beyond the standard CommonMark specification. diff --git a/guide/src/format/theme/README.md b/guide/src/format/theme/README.md index 4a776e60..1d875945 100644 --- a/guide/src/format/theme/README.md +++ b/guide/src/format/theme/README.md @@ -18,6 +18,7 @@ Here are the files you can override: - **_css/chrome.css_** is for UI elements. - **_css/general.css_** is the base styles. - **_css/print.css_** is the style for printer output. + - **_css/exclude.css_** is for [theme-dependent images](../markdown.md#theme-dependent-images). - **_css/variables.css_** contains variables used in other CSS files. - **_book.js_** is mostly used to add client side functionality, like hiding / un-hiding the sidebar, changing the theme, ... From a78c44f18202aa3f1c134cba7a7ea510be89c085 Mon Sep 17 00:00:00 2001 From: mlange-42 Date: Wed, 18 Jan 2023 13:31:08 +0100 Subject: [PATCH 4/5] format css, tweak example image --- .../src/format/images/rust-logo-blk-dark.svg | 2 +- src/theme/css/exclude.css | 22 +++++-------------- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/guide/src/format/images/rust-logo-blk-dark.svg b/guide/src/format/images/rust-logo-blk-dark.svg index 9f108d66..c56a2cc9 100644 --- a/guide/src/format/images/rust-logo-blk-dark.svg +++ b/guide/src/format/images/rust-logo-blk-dark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/theme/css/exclude.css b/src/theme/css/exclude.css index 19f0a540..9847b1b8 100644 --- a/src/theme/css/exclude.css +++ b/src/theme/css/exclude.css @@ -1,8 +1,8 @@ -.light .no-light { - display: none; -} - -.rust .no-rust { +.light .no-light, +.rust .no-rust, +.navy .no-navy, +.ayu .no-ayu, +.coal .no-coal { display: none; } @@ -11,18 +11,6 @@ display: none; } -.navy .no-navy { - display: none; -} - -.ayu .no-ayu { - display: none; -} - -.coal .no-coal { - display: none; -} - .navy .no-dark-themes, .ayu .no-dark-themes, .coal .no-dark-themes { From dafc430b5f425b6069d3105568d5cacb316cc5ee Mon Sep 17 00:00:00 2001 From: mlange-42 Date: Wed, 18 Jan 2023 13:44:12 +0100 Subject: [PATCH 5/5] fix copy_theme unit test --- tests/init.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/init.rs b/tests/init.rs index c429f3b1..15d6ecef 100644 --- a/tests/init.rs +++ b/tests/init.rs @@ -116,10 +116,10 @@ fn copy_theme() { let expected = vec![ "book.js", "css/chrome.css", + "css/exclude.css", "css/general.css", "css/print.css", "css/variables.css", - "css/exclude.css", "favicon.png", "favicon.svg", "highlight.css",