sponsors: use svg logos

Author: pietroalbini

src/data/sponsors.yml

@@ -4,7 +4,7 @@
 #
 # The name of the sponsor is defined here and left untranslated in the page.
 # The other parts of the page are derived from the sponsor's ID:
-# - The logo is located in static/images/sponsor-logos/<id>.png
+# - The logo is located in static/images/sponsor-logos/<id>.svg
 # - The alt of the image is the Fluent translation "sponsors-<id>-alt"
 # - The description paragraph is the Fluent translation "sponsors-<id>"
 

src/headers.rs

@@ -1,5 +1,5 @@
 use rocket::fairing::{Fairing, Info, Kind};
-use rocket::http::Header;
+use rocket::http::{Header, ContentType};
 use rocket::{Request, Response};
 
 static HEADERS: &[(&str, &str)] = &[
@@ -13,6 +13,7 @@ static HEADERS: &[(&str, &str)] = &[
 ];
 
 static HEADER_CSP_NORMAL: &str = "default-src 'self'; frame-ancestors 'self'; img-src 'self' avatars.githubusercontent.com; frame-src 'self' player.vimeo.com";
+static HEADER_CSP_SVG: &str = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'none'";
 static HEADER_CSP_PONTOON: &str = "default-src 'self' pontoon.rust-lang.org pontoon.mozilla.org; frame-ancestors 'self' pontoon.rust-lang.org; img-src 'self' avatars.githubusercontent.com pontoon.rust-lang.org pontoon.mozilla.org; frame-src 'self' pontoon.rust-lang.org player.vimeo.com";
 
 pub(crate) struct InjectHeaders;
@@ -29,7 +30,11 @@ impl Fairing for InjectHeaders {
         for (key, value) in HEADERS {
             response.set_header(Header::new(*key, *value));
         }
-        let csp = if *super::PONTOON_ENABLED {
+        let csp = if response.content_type() == Some(ContentType::SVG) {
+            // SVGs adhere to Content Security Policy, and they often include inline styles.
+            // This uses a custom CSP when the Content-Type is SVG.
+            HEADER_CSP_SVG
+        } else if *super::PONTOON_ENABLED {
             HEADER_CSP_PONTOON
         } else {
             HEADER_CSP_NORMAL

src/sponsors.rs

@@ -35,7 +35,7 @@ pub(crate) fn render_data(lang: &str) -> Vec<RenderSponsor> {
         .map(|s| RenderSponsor {
             name: &s.name,
             is_not_first: true, // Will be changed later
-            logo_path: format!("/static/images/sponsor-logos/{}.png", s.id),
+            logo_path: format!("/static/images/sponsor-logos/{}.svg", s.id),
             logo_alt_i18n: i18n.lookup(lang, &format!("sponsors-{}-alt", s.id), None),
             description_i18n: i18n.lookup(lang, &format!("sponsors-{}", s.id), None),
         })

src/styles/app.scss

@@ -746,3 +746,8 @@ blockquote::before {
 #pb4 {
     padding-bottom: 3.8em;
 }
+
+.max-height-5rem {
+    /* Tachyons is missing this class */
+    max-height: 5rem;
+}

static/images/sponsor-logos/aws.png

@@ -19,11 +19,11 @@
 
     {{#each data as |sponsor|}}
     {{#if sponsor.is_not_first}}
-    <hr size="1" noshade>
+    <hr size="1" noshade class="mv4">
     {{/if}}
     <div class="flex-none flex-l mt5-l">
-      <div class="w-100 w-30-l tc">
-        <img alt="{{sponsor.logo_alt_i18n}}" src="{{sponsor.logo_path}}" />
+      <div class="mv3 mv0-ns w-100 w-30-l tc flex items-center justify-center">
+        <img class="ph5 max-height-5rem" alt="{{sponsor.logo_alt_i18n}}" src="{{sponsor.logo_path}}" />
       </div>
       <div class="w-100 w-70-l">
         <h3>{{sponsor.name}}</h3>