Improve the Sponsors page and add 1Password to it

locales/en-US/sponsors.ftl

@@ -6,14 +6,17 @@ sponsors-description = The Rust project receives support through the donation of
 
 sponsors-caveat = Many companies and individuals make significant contributions of time and human resources; we intend to find a way to publicly acknowledge that in the near future.
 
+sponsors-1password-alt = 1Password
+sponsors-1password = 1Password is providing a free 1Password Teams subscription to the Rust Team, used to store and share secrets between team members.
+
 sponsors-microsoft-alt = Microsoft Azure
 sponsors-microsoft = Microsoft Azure is sponsoring builders for Rust’s CI infrastructure, notably the extremely resource intensive rust-lang/rust repository.
 
 sponsors-aws-alt = Amazon Web Services
 sponsors-aws = Amazon Web Services (AWS) is providing hosting for release artifacts (compilers, libraries, tools, and source code), serving those artifacts to users through CloudFront, preventing regressions with Crater on EC2, and managing other Rust-related infrastructure hosted on AWS.
 
 sponsors-mozilla-alt = Mozilla
-sponsors-mozilla = Mozilla is providing the Rust project with Heroku services for crates.io, Zoom.us services for team video calls, Mailgun services for emails, 1password for secret sharing, and Discourse for the Users and Internals forums.
+sponsors-mozilla = Mozilla is providing the Rust project with Heroku services for crates.io, Zoom.us services for team video calls, Mailgun services for emails, and Discourse for the Users and Internals forums.
 
 sponsors-support = Supporting Rust
 sponsors-sponsor = Interested in sponsoring work on Rust? A Rust conference? We’d love to hear from you.

src/data/sponsors.yml

@@ -0,0 +1,21 @@
+---
+
+# Content of the /sponsors page.
+#
+# 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>.svg
+# - The alt of the image is the Fluent translation "sponsors-<id>-alt"
+# - The description paragraph is the Fluent translation "sponsors-<id>"
+
+- id: 1password
+  name: 1Password
+
+- id: aws
+  name: AWS
+
+- id: microsoft
+  name: Microsoft Azure
+
+- id: mozilla
+  name: Mozilla

src/headers.rs

@@ -1,5 +1,5 @@
 use rocket::fairing::{Fairing, Info, Kind};
-use rocket::http::Header;
+use rocket::http::{ContentType, Header};
 use rocket::{Request, Response};
 
 static HEADERS: &[(&str, &str)] = &[
@@ -13,6 +13,8 @@ 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 +31,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/main.rs

@@ -30,6 +30,7 @@ mod i18n;
 mod production;
 mod redirect;
 mod rust_version;
+mod sponsors;
 mod teams;
 
 use production::User;
@@ -228,6 +229,16 @@ fn production_locale(locale: SupportedLocale) -> Template {
     render_production(locale.0)
 }
 
+#[get("/sponsors")]
+fn sponsors() -> Template {
+    render_sponsors(ENGLISH.into())
+}
+
+#[get("/<locale>/sponsors", rank = 10)]
+fn sponsors_locale(locale: SupportedLocale) -> Template {
+    render_sponsors(locale.0)
+}
+
 #[get("/<category>/<subject>", rank = 4)]
 fn subject(category: Category, subject: String) -> Template {
     render_subject(category, subject, ENGLISH.into())
@@ -395,6 +406,20 @@ fn render_production(lang: String) -> Template {
     Template::render(page, &context)
 }
 
+fn render_sponsors(lang: String) -> Template {
+    println!("foo");
+    let page = "sponsors/index".to_string();
+    let context = Context::new(
+        page.clone(),
+        "sponsors-page-title",
+        false,
+        sponsors::render_data(&lang),
+        lang,
+    );
+
+    Template::render(page, &context)
+}
+
 fn render_governance(lang: String) -> Result<Template, Status> {
     match teams::index_data() {
         Ok(data) => {
@@ -468,6 +493,7 @@ fn main() {
                 governance,
                 team,
                 production,
+                sponsors,
                 subject,
                 files,
                 favicon,
@@ -478,6 +504,7 @@ fn main() {
                 governance_locale,
                 team_locale,
                 production_locale,
+                sponsors_locale,
                 subject_locale,
                 components_locale,
                 redirect,

src/sponsors.rs

@@ -0,0 +1,52 @@
+use crate::i18n::I18NHelper;
+use rand::seq::SliceRandom;
+use std::error::Error;
+
+static SPONSORS_YML_PATH: &str = "src/data/sponsors.yml";
+
+lazy_static! {
+    static ref SPONSORS: Vec<Sponsor> = load_sponsors(SPONSORS_YML_PATH).unwrap();
+}
+
+#[derive(Deserialize)]
+struct Sponsor {
+    id: String,
+    name: String,
+}
+
+fn load_sponsors(path: &str) -> Result<Vec<Sponsor>, Box<dyn Error>> {
+    Ok(serde_yaml::from_str(&std::fs::read_to_string(path)?)?)
+}
+
+#[derive(Serialize)]
+pub(crate) struct RenderSponsor {
+    name: &'static str,
+    is_not_first: bool,
+    logo_path: String,
+    logo_alt_i18n: String,
+    description_i18n: String,
+}
+
+pub(crate) fn render_data(lang: &str) -> Vec<RenderSponsor> {
+    let i18n = I18NHelper::new();
+
+    let mut sponsors = SPONSORS
+        .iter()
+        .map(|s| RenderSponsor {
+            name: &s.name,
+            is_not_first: true, // Will be changed later
+            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),
+        })
+        .collect::<Vec<_>>();
+
+    sponsors.shuffle(&mut rand::thread_rng());
+
+    sponsors
+        .iter_mut()
+        .enumerate()
+        .for_each(|(i, s)| s.is_not_first = i != 0);
+
+    sponsors
+}

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;
+}

templates/sponsors/index.hbs

@@ -17,46 +17,22 @@
       {{fluent "sponsors-caveat"}}
     </p>
 
+    {{#each data as |sponsor|}}
+    {{#if sponsor.is_not_first}}
+    <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="{{fluent "sponsors-microsoft-alt"}}" src="/static/images/sponsor-logos/microsoft.png" />
+      <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>Microsoft Azure</h3>
+        <h3>{{sponsor.name}}</h3>
         <p>
-          {{fluent "sponsors-microsoft"}}
+          {{sponsor.description_i18n}}
         </p>
       </div>
     </div>
-
-    <hr noshade size="1"/>
-
-    <div class="flex-none flex-l mt5-l">
-      <div class="w-100 w-30-l tc">
-        <img alt="{{fluent "sponsors-aws-alt"}}" src="/static/images/sponsor-logos/aws.png" />
-      </div>
-      <div class="w-100 w-70-l">
-        <h3>AWS</h3>
-        <p>
-          {{fluent "sponsors-aws"}}
-        </p>
-      </div>
-    </div>
-
-    <hr noshade size="1"/>
-
-    <div class="flex-none flex-l mt5-l">
-      <div class="w-100 w-30-l tc">
-        <img alt="{{fluent "sponsors-mozilla-alt"}}" src="/static/images/sponsor-logos/mozilla.png" />
-      </div>
-      <div class="w-100 w-70-l">
-        <h3>Mozilla</h3>
-        <p>
-          {{fluent "sponsors-mozilla"}}
-        </p>
-      </div>
-    </div>
-
+    {{/each}}
   </div>
 </section>