Put SVG images into CSS

Author: GuillaumeGomez

Cargo.toml

@@ -54,7 +54,6 @@ once_cell = { version = "1.4.0", features = ["parking_lot"] }
 base64 = "0.22"
 strum = { version = "0.26.1", features = ["derive"] }
 lol_html = "1.0.0"
-font-awesome-as-a-crate = { path = "crates/font-awesome-as-a-crate" }
 dashmap = "6.0.0"
 string_cache = "0.8.0"
 zip = {version = "2.2.0", default-features = false, features = ["bzip2"]}
@@ -136,6 +135,7 @@ anyhow = { version = "1.0.42", features = ["backtrace"] }
 grass = { version = "0.13.1", default-features = false }
 once_cell = { version = "1.4.0", features = ["parking_lot"] }
 syntect = { version = "5.0.0", default-features = false, features = ["parsing", "dump-create", "yaml-load", "regex-onig"] }
+font-awesome-as-a-crate = { path = "crates/font-awesome-as-a-crate" }
 
 [[bench]]
 name = "compression"

build.rs

@@ -1,5 +1,9 @@
 use anyhow::{Context as _, Error, Result};
-use std::{env, path::Path};
+use font_awesome_as_a_crate as f_a;
+use std::{
+    env,
+    path::{Path, PathBuf},
+};
 
 mod tracked {
     use once_cell::sync::Lazy;
@@ -80,11 +84,178 @@ fn main() -> Result<()> {
     write_known_targets(out_dir)?;
     compile_syntax(out_dir).context("could not compile syntax files")?;
 
+    println!("cargo::rustc-check-cfg=cfg(icons_out_dir)");
+    println!("cargo:rustc-cfg=icons_out_dir");
+
+    let package_dir = env::var("CARGO_MANIFEST_DIR").context("missing CARGO_MANIFEST_DIR")?;
+    let package_dir = Path::new(&package_dir);
+    generate_css_icons(package_dir.join("static/icons.css"), out_dir)?;
+
     // trigger recompilation when a new migration is added
     println!("cargo:rerun-if-changed=migrations");
     Ok(())
 }
 
+fn capitalize(s: &str) -> String {
+    let mut c = s.chars();
+    match c.next() {
+        None => String::new(),
+        Some(f) => f.to_uppercase().chain(c).collect(),
+    }
+}
+
+fn render_icon(
+    icon_name: &str,
+    icon_str: &str,
+    type_name: String,
+    code_output: &mut String,
+    css_output: &mut String,
+    icon_kind: &str,
+) {
+    let css_class = format!("f-a_{icon_name}_{icon_kind}");
+    css_output.push_str(&format!(
+        "\
+.{css_class} {{
+    --svg_{icon_name}_{icon_kind}: url('data:image/svg+xml,{icon_str}');
+    -webkit-mask: var(--svg_{icon_name}_{icon_kind}) no-repeat center;
+    mask: var(--svg_{icon_name}_{icon_kind}) no-repeat center;
+}}
+",
+    ));
+    let type_name = format!("{type_name}{}", capitalize(icon_kind));
+    code_output.push_str(&format!(
+        r#"#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct {type_name};
+impl {type_name} {{
+    pub fn render(&self, fw: bool, spin: bool, extra: &str) -> rinja::filters::Safe<String> {{
+        render({css_class:?}, fw, spin, extra)
+    }}
+}}
+"#,
+    ));
+}
+
+fn generate_css_icons(css_path: PathBuf, out_dir: &Path) -> Result<()> {
+    let mut code_output = format!(
+        r#"pub(crate) mod icons {{
+    fn render(
+        css_class: &str,
+        fw: bool,
+        spin: bool,
+        extra: &str,
+    ) -> rinja::filters::Safe<String> {{
+        let mut classes = vec!["fa-svg"];
+        if fw {{
+            classes.push("fa-svg-fw");
+        }}
+        if spin {{
+            classes.push("fa-svg-spin");
+        }}
+        if !extra.is_empty() {{
+            classes.push(extra);
+        }}
+        let icon = format!(
+            "<span class=\"{{css_class}} {{class}}\" aria-hidden=\"true\"></span>",
+            class = classes.join(" "),
+        );
+
+        rinja::filters::Safe(icon)
+    }}"#
+    );
+    let mut css_output = r#".svg-clipboard {
+    /* This icon is copied from crates.io */
+    --svg-clipboard: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard"><path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/><path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/></svg>');
+    -webkit-mask: var(--svg-clipboard) no-repeat center;
+    mask: var(--svg-clipboard) no-repeat center;
+}"#.to_string();
+
+    let brands: &[&dyn f_a::Brands] = &[
+        &f_a::icons::IconFonticons,
+        &f_a::icons::IconRust,
+        &f_a::icons::IconMarkdown,
+        &f_a::icons::IconGitAlt,
+    ];
+    let regular: &[&dyn f_a::Regular] = &[
+        &f_a::icons::IconFileLines,
+        &f_a::icons::IconFolderOpen,
+        &f_a::icons::IconFile,
+        &f_a::icons::IconStar,
+    ];
+    let solid: &[&dyn f_a::Solid] = &[
+        &f_a::icons::IconCircleInfo,
+        &f_a::icons::IconGears,
+        &f_a::icons::IconTable,
+        &f_a::icons::IconRoad,
+        &f_a::icons::IconDownload,
+        &f_a::icons::IconCubes,
+        &f_a::icons::IconSquareRss,
+        &f_a::icons::IconFileLines,
+        &f_a::icons::IconCheck,
+        &f_a::icons::IconTriangleExclamation,
+        &f_a::icons::IconGear,
+        &f_a::icons::IconX,
+        &f_a::icons::IconHouse,
+        &f_a::icons::IconCodeBranch,
+        &f_a::icons::IconStar,
+        &f_a::icons::IconCircleExclamation,
+        &f_a::icons::IconCube,
+        &f_a::icons::IconChevronLeft,
+        &f_a::icons::IconChevronRight,
+        &f_a::icons::IconFolderOpen,
+        &f_a::icons::IconLock,
+        &f_a::icons::IconFlag,
+        &f_a::icons::IconBook,
+        &f_a::icons::IconMagnifyingGlass,
+        &f_a::icons::IconLeaf,
+        &f_a::icons::IconChartLine,
+        &f_a::icons::IconList,
+        &f_a::icons::IconUser,
+        &f_a::icons::IconTrash,
+        &f_a::icons::IconArrowLeft,
+        &f_a::icons::IconArrowRight,
+        &f_a::icons::IconLink,
+        &f_a::icons::IconScaleUnbalancedFlip,
+        &f_a::icons::IconSpinner,
+    ];
+
+    for icon in brands {
+        render_icon(
+            icon.icon_name(),
+            icon.icon_str(),
+            format!("{icon:?}"),
+            &mut code_output,
+            &mut css_output,
+            "brands",
+        );
+    }
+    for icon in regular {
+        render_icon(
+            icon.icon_name(),
+            icon.icon_str(),
+            format!("{icon:?}"),
+            &mut code_output,
+            &mut css_output,
+            "regular",
+        );
+    }
+    for icon in solid {
+        render_icon(
+            icon.icon_name(),
+            icon.icon_str(),
+            format!("{icon:?}"),
+            &mut code_output,
+            &mut css_output,
+            "solid",
+        );
+    }
+
+    std::fs::write(css_path, css_output)?;
+
+    code_output.push('}');
+    std::fs::write(out_dir.join("icons.rs"), code_output)?;
+    Ok(())
+}
+
 fn write_git_version(out_dir: &Path) -> Result<()> {
     let maybe_hash = get_git_hash()?;
     let git_hash = maybe_hash.as_deref().unwrap_or("???????");

crates/font-awesome-as-a-crate/src/lib.rs

@@ -6,7 +6,7 @@ If you have problems, [contact us](https://github.com/rust-lang/docs.rs/issues),
 */
 
 use std::error::Error;
-use std::fmt::{self, Display, Formatter};
+use std::fmt::{self, Debug, Display, Formatter};
 
 #[cfg(font_awesome_out_dir)]
 include!(concat!(env!("OUT_DIR"), "/fontawesome.rs"));
@@ -94,18 +94,18 @@ pub trait IconStr {
     fn icon_str(&self) -> &'static str;
 }
 
-pub trait Brands: IconStr {
-    fn get_type() -> Type {
+pub trait Brands: IconStr + Debug {
+    fn get_type(&self) -> Type {
         Type::Brands
     }
 }
-pub trait Regular: IconStr {
-    fn get_type() -> Type {
+pub trait Regular: IconStr + Debug {
+    fn get_type(&self) -> Type {
         Type::Regular
     }
 }
-pub trait Solid: IconStr {
-    fn get_type() -> Type {
+pub trait Solid: IconStr + Debug {
+    fn get_type(&self) -> Type {
         Type::Solid
     }
 }

src/lib.rs

@@ -13,7 +13,10 @@ pub use self::registry_api::RegistryApi;
 pub use self::storage::{AsyncStorage, Storage};
 pub use self::web::{start_background_metrics_webserver, start_web_server};
 
-pub(crate) use font_awesome_as_a_crate as f_a;
+#[cfg(icons_out_dir)]
+include!(concat!(env!("OUT_DIR"), "/icons.rs"));
+#[cfg(not(icons_out_dir))]
+include!("icons.rs");
 
 mod build_queue;
 pub mod cdn;

src/web/csp.rs

@@ -54,7 +54,7 @@ impl Csp {
         // the MIME type to allow loading favicons.
         //
         // Images from other HTTPS origins are also temporary allowed until issue #66 is fixed.
-        result.push_str("; img-src 'self' https:");
+        result.push_str("; img-src 'self' https: data:");
 
         match content_type {
             ContentType::Html => self.render_html(&mut result),

src/web/page/mod.rs

@@ -8,5 +8,5 @@ pub(crate) struct GlobalAlert {
     pub(crate) url: &'static str,
     pub(crate) text: &'static str,
     pub(crate) css_class: &'static str,
-    pub(crate) fa_icon: crate::f_a::icons::IconTriangleExclamation,
+    pub(crate) fa_icon: crate::icons::IconTriangleExclamationSolid,
 }

src/web/page/templates.rs

@@ -200,33 +200,6 @@ pub mod filters {
         Ok(unindented)
     }
 
-    pub fn fas<T: font_awesome_as_a_crate::Solid>(
-        value: T,
-        fw: bool,
-        spin: bool,
-        extra: &str,
-    ) -> rinja::Result<Safe<String>> {
-        super::render_icon(value.icon_str(), fw, spin, extra)
-    }
-
-    pub fn far<T: font_awesome_as_a_crate::Regular>(
-        value: T,
-        fw: bool,
-        spin: bool,
-        extra: &str,
-    ) -> rinja::Result<Safe<String>> {
-        super::render_icon(value.icon_str(), fw, spin, extra)
-    }
-
-    pub fn fab<T: font_awesome_as_a_crate::Brands>(
-        value: T,
-        fw: bool,
-        spin: bool,
-        extra: &str,
-    ) -> rinja::Result<Safe<String>> {
-        super::render_icon(value.icon_str(), fw, spin, extra)
-    }
-
     pub fn highlight(code: impl std::fmt::Display, lang: &str) -> rinja::Result<Safe<String>> {
         let highlighted_code = crate::web::highlight::with_lang(Some(lang), &code.to_string());
         Ok(Safe(format!(
@@ -254,28 +227,3 @@ pub mod filters {
         ))
     }
 }
-
-fn render_icon(
-    icon_str: &str,
-    fw: bool,
-    spin: bool,
-    extra: &str,
-) -> rinja::Result<rinja::filters::Safe<String>> {
-    let mut classes = vec!["fa-svg"];
-    if fw {
-        classes.push("fa-svg-fw");
-    }
-    if spin {
-        classes.push("fa-svg-spin");
-    }
-    if !extra.is_empty() {
-        classes.push(extra);
-    }
-    let icon = format!(
-        "\
-<span class=\"{class}\" aria-hidden=\"true\">{icon_str}</span>",
-        class = classes.join(" "),
-    );
-
-    Ok(rinja::filters::Safe(icon))
-}

templates/about-base.html

@@ -11,27 +11,27 @@
                 <h1 id="crate-title" class="no-description">Docs.rs documentation</h1>
                 <div class="pure-menu pure-menu-horizontal">
                     <ul class="pure-menu-list">
-                        {% set text = crate::f_a::icons::IconCircleInfo|fas(false, false, "") %}
+                        {% set text = crate::icons::IconCircleInfoSolid.render(false, false, "") %}
                         {% set text = "{} <span class='title'>About</span>"|format(text) %}
                         {% call macros::active_link(expected="index", href="/about", text=text) %}
 
-                        {% set text = crate::f_a::icons::IconFonticons|fab(false, false, "") %}
+                        {% set text = crate::icons::IconFonticonsBrands.render(false, false, "") %}
                         {% set text = "{} <span class='title'>Badges</span>"|format(text) %}
                         {% call macros::active_link(expected="badges", href="/about/badges", text=text) %}
 
-                        {% set text = crate::f_a::icons::IconGears|fas(false, false, "") %}
+                        {% set text = crate::icons::IconGearsSolid.render(false, false, "") %}
                         {% set text = "{} <span class='title'>Builds</span>"|format(text) %}
                         {% call macros::active_link(expected="builds", href="/about/builds", text=text) %}
 
-                        {% set text = crate::f_a::icons::IconTable|fas(false, false, "") %}
+                        {% set text = crate::icons::IconTableSolid.render(false, false, "") %}
                         {% set text = "{} <span class='title'>Metadata</span>"|format(text) %}
                         {% call macros::active_link(expected="metadata", href="/about/metadata", text=text) %}
 
-                        {% set text = crate::f_a::icons::IconRoad|fas(false, false, "") %}
+                        {% set text = crate::icons::IconRoadSolid.render(false, false, "") %}
                         {% set text = "{} <span class='title'>Shorthand URLs</span>"|format(text) %}
                         {% call macros::active_link(expected="redirections", href="/about/redirections", text=text) %}
 
-                        {% set text = crate::f_a::icons::IconDownload|fas(false, false, "") %}
+                        {% set text = crate::icons::IconDownloadSolid.render(false, false, "") %}
                         {% set text = "{} <span class='title'>Download</span>"|format(text) %}
                         {% call macros::active_link(expected="download", href="/about/download", text=text) %}
                     </ul>

templates/base.html

@@ -11,6 +11,7 @@
         {%- set build_slug = slug::slugify(crate::BUILD_VERSION) -%}
         <link rel="stylesheet" href="/-/static/vendored.css?{{ build_slug }}" media="all" />
         <link rel="stylesheet" href="/-/static/style.css?{{ build_slug }}" media="all" />
+        <link rel="stylesheet" href="/-/static/icons.css?{{ build_slug }}" media="all" />
 
         <link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />
 

templates/core/home.html

@@ -12,7 +12,7 @@
 
 {%- block body -%}
     <div class="container landing">
-        <h1 class="brand">{{ crate::f_a::icons::IconCubes|fas(false, false, "") }} Docs.rs</h1>
+        <h1 class="brand">{{ crate::icons::IconCubesSolid.render(false, false, "") }} Docs.rs</h1>
 
         <form action="/releases/search" method="GET" class="landing-search-form">
             <div>
@@ -36,7 +36,7 @@ <h1 class="brand">{{ crate::f_a::icons::IconCubes|fas(false, false, "") }} Docs.
                     <strong>Recent Releases</strong>
                 </a>
                 <a href="/releases/feed" title="Atom feed">
-                    {{ crate::f_a::icons::IconSquareRss|fas(false, false, "") }}
+                    {{ crate::icons::IconSquareRssSolid.render(false, false, "") }}
                 </a>
             </div>