-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Use embedded Font Awesome SVG icons #2484
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 3 commits
9004849
39d7615
2ca9f04
26a2d3a
905cce2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -218,6 +218,7 @@ impl HtmlHandlebars { | |
| let rendered = fix_code_blocks(&rendered); | ||
| let rendered = add_playground_pre(&rendered, playground_config, edition); | ||
| let rendered = hide_lines(&rendered, code_config); | ||
| let rendered = convert_fontawesome(&rendered); | ||
|
|
||
| rendered | ||
| } | ||
|
|
@@ -258,41 +259,7 @@ impl HtmlHandlebars { | |
| write_file(destination, "ayu-highlight.css", &theme.ayu_highlight_css)?; | ||
| write_file(destination, "highlight.js", &theme.highlight_js)?; | ||
| write_file(destination, "clipboard.min.js", &theme.clipboard_js)?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/css/font-awesome.css", | ||
| theme::FONT_AWESOME, | ||
| )?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/fonts/fontawesome-webfont.eot", | ||
| theme::FONT_AWESOME_EOT, | ||
| )?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/fonts/fontawesome-webfont.svg", | ||
| theme::FONT_AWESOME_SVG, | ||
| )?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/fonts/fontawesome-webfont.ttf", | ||
| theme::FONT_AWESOME_TTF, | ||
| )?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/fonts/fontawesome-webfont.woff", | ||
| theme::FONT_AWESOME_WOFF, | ||
| )?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/fonts/fontawesome-webfont.woff2", | ||
| theme::FONT_AWESOME_WOFF2, | ||
| )?; | ||
| write_file( | ||
| destination, | ||
| "FontAwesome/fonts/FontAwesome.ttf", | ||
| theme::FONT_AWESOME_TTF, | ||
| )?; | ||
|
|
||
| // Don't copy the stock fonts if the user has specified their own fonts to use. | ||
| if html_config.copy_fonts && theme.fonts_css.is_none() { | ||
| write_file(destination, "fonts/fonts.css", theme::fonts::CSS)?; | ||
|
|
@@ -379,6 +346,7 @@ impl HtmlHandlebars { | |
| handlebars.register_helper("next", Box::new(helpers::navigation::next)); | ||
| // TODO: remove theme_option in 0.5, it is not needed. | ||
| handlebars.register_helper("theme_option", Box::new(helpers::theme::theme_option)); | ||
| handlebars.register_helper("fa", Box::new(helpers::fontawesome::fa_helper)); | ||
| } | ||
|
|
||
| /// Copy across any additional CSS and JavaScript files which the book | ||
|
|
@@ -754,9 +722,19 @@ fn make_data( | |
|
|
||
| let git_repository_icon = match html_config.git_repository_icon { | ||
| Some(ref git_repository_icon) => git_repository_icon, | ||
| None => "fa-github", | ||
| None => "fab-github", | ||
| }; | ||
| let git_repository_icon_class = match git_repository_icon.split('-').next() { | ||
| Some("fa") => "regular", | ||
| Some("fas") => "solid", | ||
| Some("fab") => "brands", | ||
| _ => "regular", | ||
| }; | ||
| data.insert("git_repository_icon".to_owned(), json!(git_repository_icon)); | ||
| data.insert( | ||
| "git_repository_icon_class".to_owned(), | ||
| json!(git_repository_icon_class), | ||
| ); | ||
|
|
||
| let mut chapters = vec![]; | ||
|
|
||
|
|
@@ -855,6 +833,56 @@ fn insert_link_into_header( | |
| ) | ||
| } | ||
|
|
||
| // Convert fontawesome `<i>` tags to inline SVG | ||
| fn convert_fontawesome(html: &str) -> String { | ||
| use font_awesome_as_a_crate as fa; | ||
|
|
||
| let regex = Regex::new(r##"<i([^>]+)class="([^"]+)"([^>]*)></i>"##).unwrap(); | ||
| regex | ||
| .replace_all(html, |caps: &Captures<'_>| { | ||
| let text = &caps[0]; | ||
| let before = &caps[1]; | ||
| let classes = &caps[2]; | ||
| let after = &caps[3]; | ||
|
|
||
| let mut icon = String::new(); | ||
| let mut type_ = fa::Type::Regular; | ||
| let mut other_classes = String::new(); | ||
|
|
||
| for class in classes.split(" ") { | ||
| if let Some((prefix, remainder)) = class.split_once('-') { | ||
| if let Some(t) = match prefix { | ||
| "fa" => Some(fa::Type::Regular), | ||
| "fas" => Some(fa::Type::Solid), | ||
| "fab" => Some(fa::Type::Brands), | ||
| _ => None, | ||
| } { | ||
| type_ = t; | ||
| icon = remainder.to_owned(); | ||
| continue; | ||
| } | ||
| } | ||
| other_classes += " "; | ||
| other_classes += class; | ||
| } | ||
|
|
||
| if icon.is_empty() { | ||
| text.to_owned() | ||
| } else if let Ok(svg) = fa::svg(type_, &icon) { | ||
| format!( | ||
| r#"<span{before}class="fa-svg{other_classes}"{after}>{svg}</span>"#, | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Wouldn't it be better instead of generating the SVG in the DOM directly to rely on CSS instead? It brings multiple advantages:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't want to build a giant stylesheet with every icon in it unless we have to. That file would be immense, and most of it wouldn't get used. But mdBook exposes an API that lets the user include any icon they want, so we'd have to? Besides, fontawesome SVGs almost all have a single There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. FontAwesome is a font. Meaning that as long as we have the font, we have easily use their icons without needing to declare them ourselves. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
But then you must include the entirety of the font (which is quite large iirc), unless you want to deal with subsetting? And then that is a whole other ordeal. |
||
| before = before, | ||
| other_classes = other_classes.replace(" fa", ""), | ||
| after = after, | ||
| svg = svg | ||
| ) | ||
| } else { | ||
| text.to_owned() | ||
| } | ||
| }) | ||
| .into_owned() | ||
| } | ||
|
|
||
| // The rust book uses annotations for rustdoc to test code snippets, | ||
| // like the following: | ||
| // ```rust,should_panic | ||
|
|
@@ -1294,4 +1322,29 @@ mod tests { | |
| assert_eq!(json!(TextDirection::RightToLeft), json!("rtl")); | ||
| assert_eq!(json!(TextDirection::LeftToRight), json!("ltr")); | ||
| } | ||
|
|
||
| #[test] | ||
| fn convert_valid_fontawesome_class() { | ||
| assert!(convert_fontawesome("<i class=\"fa fab-github\"></i>").contains("class=\"fa-svg\"")); | ||
| assert!( | ||
| convert_fontawesome("<i class=\"fa fab-github some-class\"></i>") | ||
| .contains("class=\"fa-svg some-class\"") | ||
| ); | ||
| assert!(convert_fontawesome("<i class=\"fa fas-print\"></i>").contains("class=\"fa-svg\"")); | ||
| assert!(convert_fontawesome("<i class=\"fa fa-eye\"></i>").contains("class=\"fa-svg\"")); | ||
| } | ||
|
|
||
| #[test] | ||
| fn convert_invalid_fontawesome_class() { | ||
| let invalid_fontawesome_i_tag = "<i class=\"fa\"></i>"; | ||
| assert_eq!( | ||
| convert_fontawesome(invalid_fontawesome_i_tag), | ||
| invalid_fontawesome_i_tag | ||
| ); | ||
| let non_fontawesome_i_tag = "<i class=\"some-class\"></i>"; | ||
| assert_eq!( | ||
| convert_fontawesome(non_fontawesome_i_tag), | ||
| non_fontawesome_i_tag | ||
| ); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| use font_awesome_as_a_crate as fa; | ||
| use handlebars::{ | ||
| Context, Handlebars, Helper, Output, RenderContext, RenderError, RenderErrorReason, | ||
| }; | ||
| use log::trace; | ||
| use std::str::FromStr; | ||
|
|
||
| pub fn fa_helper( | ||
| h: &Helper<'_>, | ||
| _r: &Handlebars<'_>, | ||
| _ctx: &Context, | ||
| _rc: &mut RenderContext<'_, '_>, | ||
| out: &mut dyn Output, | ||
| ) -> Result<(), RenderError> { | ||
| trace!("fa_helper (handlebars helper)"); | ||
|
|
||
| let type_ = h | ||
| .param(0) | ||
| .and_then(|v| v.value().as_str()) | ||
| .and_then(|v| fa::Type::from_str(v).ok()) | ||
| .ok_or_else(|| { | ||
| RenderErrorReason::Other( | ||
| "Param 0 with String type is required for fontawesome helper.".to_owned(), | ||
| ) | ||
| })?; | ||
|
|
||
| let name = h.param(1).and_then(|v| v.value().as_str()).ok_or_else(|| { | ||
| RenderErrorReason::Other( | ||
| "Param 1 with String type is required for fontawesome helper.".to_owned(), | ||
| ) | ||
| })?; | ||
|
|
||
| trace!("fa_helper: {} {}", type_, name); | ||
|
|
||
| let name = name | ||
| .strip_prefix("fa-") | ||
| .or_else(|| name.strip_prefix("fab-")) | ||
| .or_else(|| name.strip_prefix("fas-")) | ||
| .unwrap_or(name); | ||
|
|
||
| if let Some(id) = h.param(2).and_then(|v| v.value().as_str()) { | ||
| out.write(&format!("<span class=\"fa-svg\" id=\"{}\">", id))?; | ||
| } else { | ||
| out.write("<span class=\"fa-svg\">")?; | ||
| } | ||
| out.write( | ||
| fa::svg(type_, name) | ||
uncenter marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| .map_err(|_| RenderErrorReason::Other(format!("Missing font {}", name)))?, | ||
| )?; | ||
| out.write("</span>")?; | ||
|
|
||
| Ok(()) | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| pub mod fontawesome; | ||
| pub mod navigation; | ||
| pub mod theme; | ||
| pub mod toc; |
This file was deleted.
Uh oh!
There was an error while loading. Please reload this page.