_brand.yml - add support for google font forge in typography

quarto-dev · Sep 5, 2024 · 1081ed6 · 1081ed6
1 parent 9ca1d8e
commit 1081ed6
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 1 deletion.
diff --git a/src/core/brand/brand.ts b/src/core/brand/brand.ts
@@ -203,8 +203,12 @@ export class Brand {
           }
           defs.push(value2);
         } else {
+          console.log(
+            "warning: google font forge not supported for non-html formats",
+          );
           console.assert("google" in value);
-          console.log("warning: google font forge not supported yet");
+          const ret = mergeConfigs({ family: name }, ...defs.reverse());
+          return ret;
           // download to (temporary?) directory and populate .files
         }
       } else if (defaultFontNames.includes(name)) {

diff --git a/src/core/sass/brand.ts b/src/core/sass/brand.ts
@@ -14,6 +14,7 @@ import {
   SassBundleLayers,
 } from "../../config/types.ts";
 import { ProjectContext } from "../../project/types.ts";
+import { BrandFontGoogle } from "../../resources/types/schema-types.ts";
 
 const defaultColorNameMap: Record<string, string> = {
   "body-bg": "background",
@@ -91,6 +92,103 @@ export async function brandBootstrapSassBundleLayers(
     sassBundles.push(colorBundle);
   }
 
+  if (brand?.processedData.typography) {
+    const typographyVariables: string[] = [
+      "/* typography variables from _brand.yml */",
+    ];
+    const typographyImports: string[] = [];
+
+    if (brand?.data.typography?.base) {
+      const family = brand.data.typography.base.family;
+      const tWith = brand.data.typography.with;
+      if (!tWith || !family || !tWith[family]) {
+        throw new Error(
+          `Typography base font ${family} description not found in _brand.yml`,
+        );
+      }
+      if (!(tWith[family] as any).google) {
+        console.log(
+          `Only Google fonts are supported in SCSS for now. Skipping base font ${family}`,
+        );
+      } else {
+        const description = (tWith[family] as BrandFontGoogle).google;
+        if (typeof description === "string") {
+          typographyImports.push(
+            `@import url('https://fonts.googleapis.com/css2?family=${
+              description.replace(
+                / /g,
+                "+",
+              )
+            }:ital,wght@400;700&display=swap');`,
+          );
+        } else {
+          const styles = !description.style
+            ? ["normal", "italic"]
+            : typeof description.style === "string"
+            ? [description.style]
+            : description.style;
+          const weightArray = !description.weight
+            ? [400, 700]
+            : typeof description.weight === "number"
+            ? [description.weight]
+            : description.weight;
+          let styleString = "";
+          let weights = "";
+
+          if (styles.includes("italic")) {
+            styleString = "ital,";
+            weights = weightArray.map((w) => `0,${w}`).join(";") +
+              ";" +
+              weightArray.map((w) => `1,${w}`).join(";");
+          } else {
+            weights = !description.weight
+              ? "400;700"
+              : typeof description.weight === "number"
+              ? String(description.weight)
+              : description.weight.join(";");
+          }
+          const display = description.display ?? "swap";
+
+          const googleFamily = description.family;
+          if (!googleFamily) {
+            throw new Error(
+              `Font description requires base font ${family} family information not found in _brand.yml`,
+            );
+          }
+
+          typographyImports.push(
+            `@import url('https://fonts.googleapis.com/css2?family=${
+              googleFamily!.replace(
+                / /g,
+                "+",
+              )
+            }:${styleString}wght@${weights}&display=${display}');`,
+          );
+          typographyVariables.push(
+            `$font-family-base: ${googleFamily} !default;`,
+          );
+          // hack: we add both reveal and bootstrap font names
+          typographyVariables.push(
+            `$mainFont: ${googleFamily} !default;`,
+          );
+        }
+      }
+    }
+
+    const typographyBundle: SassBundleLayers = {
+      key,
+      // dependency: "bootstrap",
+      quarto: {
+        defaults: typographyVariables.join("\n"),
+        uses: typographyImports.join("\n"),
+        functions: "",
+        mixins: "",
+        rules: "",
+      },
+    };
+    sassBundles.push(typographyBundle);
+  }
+
   return sassBundles;
 }