UI improvements

shaperglot-web/src/lib.rs

@@ -1,5 +1,6 @@
 use std::collections::HashMap;
 
+use skrifa::{raw::tables::name::NameId, FontRef, MetadataProvider};
 use wasm_bindgen::prelude::*;
 extern crate console_error_panic_hook;
 use google_fonts_languages::{RegionProto, ScriptProto, REGIONS, SCRIPTS};
@@ -35,6 +36,16 @@ pub fn regions() -> Result<String, JsValue> {
     serde_json::to_string(&region_hash).map_err(|e| e.to_string().into())
 }
 
+#[wasm_bindgen]
+pub fn family_name(font_data: &[u8]) -> Result<String, JsValue> {
+    let font = FontRef::new(font_data).map_err(|e| e.to_string())?;
+    Ok(font
+        .localized_strings(NameId::FAMILY_NAME)
+        .english_or_first()
+        .map(|s| s.chars().collect())
+        .unwrap_or_default())
+}
+
 #[wasm_bindgen]
 pub fn check_font(font_data: &[u8]) -> Result<String, JsValue> {
     let checker = Checker::new(font_data).map_err(|e| e.to_string())?;

shaperglot-web/www/index.js

@@ -72,6 +72,9 @@ class Shaperglot {
       this.regions = message.regions;
     } else if ("results" in message) {
       $("#spinnerModal").hide();
+      if (message.family_name) {
+        $("#filename").text(message.family_name);
+      }
       this.renderResults(message.results);
     }
   }
@@ -230,19 +233,24 @@ class Shaperglot {
       let mark = status == "Pass" ? "✅" : "❌";
 
       problem_html.append(
-        `<dt>${check_name} ${mark} (${Math.round(
-          score * weight * 100
-        ) / 100}/${weight} points)</dt>`
+        `<dt>
+        <details>
+          <summary>${check_name} ${mark} (${Math.round(
+            score * weight * 100
+          ) / 100}/${weight} points)
+          </summary>
+          <blockquote class="bg-light">${check_description}
+          </blockquote>
+        </dt>`
       );
       let dd = $(`<dd>
-        <blockquote class="bg-light">${check_description}
-        </blockquote>
+       
         </dd>`);
       problem_html.append(dd);
       if (problems.length > 0) {
         dd.append(`<p><b>Problems:</b><ul></ul></p>`);
       } else {
-        dd.append(`<ul><li>No problems found!</li></ul>`);
+        problem_html.find("details").last().append(`<ul><li>No problems found!</li></ul>`);
       }
       for (var problem of problems) {
         let { check_name, message, fixes } = problem;

shaperglot-web/www/style.css

@@ -108,4 +108,6 @@ button.nav-link {
   color: #888;
 }
 
-dd { margin: 10px 25px 10px 25px; }
+dd { margin: 10px 25px 10px 25px; }
+
+dt details blockquote { font-weight: 400; margin: 10px 25px 10px 25px; }

shaperglot-web/www/webworker.js

@@ -14,7 +14,7 @@ async function init() {
     const { font } = event.data;
     try {
       const results = JSON.parse(wasm.check_font(font));
-      self.postMessage({ results: results });
+      self.postMessage({ results: results, family_name: wasm.family_name(font) });
     } catch (error) {
       self.postMessage({ error: error.message });
     }