Add font family dropdown list

Krystle Salazar · Krystle Salazar · commit 2ebf7fa3e201 · 2020-10-26T08:26:27.000-04:00
Fixes #11.
diff --git a/api/_lib/parser.ts b/api/_lib/parser.ts
@@ -7,8 +7,11 @@ export function parseRequest(req: IncomingMessage) {
   const { pathname, query } = parse(req.url || '/', true)
   // @todo: Switch to param stuctucture here: https://github.com/spinks/og-image/commit/45439b73b3a5156faf9f6757fc4f208b230f5d9a
   // to bypass facebook issue (facebook strips query params that appear to be urls)
-  const { fontSize, images, widths, heights, theme, md } = query || {}
+  const { fontFamily, fontSize, images, widths, heights, theme, md } = query || {}
 
+  if (Array.isArray(fontFamily)) {
+    throw new Error('Expected a single fontFamily')
+  }
   if (Array.isArray(fontSize)) {
     throw new Error('Expected a single fontSize')
   }
@@ -33,6 +36,7 @@ export function parseRequest(req: IncomingMessage) {
     text: decodeURIComponent(text),
     theme: theme === 'dark' ? 'dark' : 'light',
     md: md === '1' || md === 'true',
+    fontFamily: fontFamily === 'roboto-condensed' ? 'Roboto Condensed' : 'Source Sans Pro',
     fontSize: fontSize || '96px',
     images: getArray(images),
     widths: getArray(widths),
diff --git a/api/_lib/template.ts b/api/_lib/template.ts
@@ -11,7 +11,7 @@ const sourceBold = readFileSync(`${__dirname}/../_fonts/SourceSansPro-Bold.woff2
 const robotoRglr = readFileSync(`${__dirname}/../_fonts/RobotoCondensed-Regular.woff2`).toString('base64');
 const robotoBold = readFileSync(`${__dirname}/../_fonts/RobotoCondensed-Bold.woff2`).toString('base64');
 
-function getCss(theme: string, fontSize: string) {
+function getCss(theme: string, fontFamily: string, fontSize: string) {
   let background = 'white'
   let foreground = 'black'
   let radial = 'lightgray'
@@ -107,7 +107,7 @@ function getCss(theme: string, fontSize: string) {
     }
 
     .heading {
-        font-family: 'Inter', sans-serif;
+        font-family: '${sanitizeHtml(fontFamily)}', sans-serif;
         font-size: ${sanitizeHtml(fontSize)};
         font-style: normal;
         color: ${foreground};
@@ -116,14 +116,14 @@ function getCss(theme: string, fontSize: string) {
 }
 
 export function getHtml(parsedReq: ParsedRequest) {
-  const { text, theme, md, fontSize, images, widths, heights } = parsedReq
+  const { text, theme, md, fontFamily, fontSize, images, widths, heights } = parsedReq
   return `<!DOCTYPE html>
 <html>
     <meta charset="utf-8">
     <title>Generated Image</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
-        ${getCss(theme, fontSize)}
+        ${getCss(theme, fontFamily, fontSize)}
     </style>
     <body>
         <div>
diff --git a/api/_lib/types.ts b/api/_lib/types.ts
@@ -6,6 +6,7 @@ export interface ParsedRequest {
     text: string;
     theme: Theme;
     md: boolean;
+    fontFamily: string;
     fontSize: string;
     images: string[];
     widths: string[];
diff --git a/web/index.ts b/web/index.ts
@@ -159,6 +159,11 @@ const fileTypeOptions: DropdownOption[] = [
   { text: 'JPEG', value: 'jpeg' },
 ]
 
+const fontFamilyOptions: DropdownOption[] = [
+  { text: 'Source Sans Pro', value: 'source-sans-pro'},
+  { text: 'Roboto Condensed', value: 'roboto-condensed'},
+]
+
 const fontSizeOptions: DropdownOption[] = Array.from({ length: 10 })
   .map((_, i) => i * 25)
   .filter((n) => n > 0)
@@ -308,6 +313,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
 
   const {
     fileType = 'png',
+    fontFamily = 'source-sans-pro',
     fontSize = '100px',
     theme = 'light',
     md = true,
@@ -328,6 +334,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
   url.pathname = `${encodeURIComponent(text)}.${fileType}`
   url.searchParams.append('theme', theme)
   url.searchParams.append('md', mdValue)
+  url.searchParams.append('fontFamily', fontFamily)
   url.searchParams.append('fontSize', fontSize)
 
   for (let image of images) {
@@ -369,6 +376,14 @@ const App = (_: any, state: AppState, setState: SetState) => {
             onchange: (val: FileType) => setLoadingState({ fileType: val }),
           }),
         }),
+        H(Field, {
+          label: 'Font Family',
+          input: H(Dropdown, {
+            options: fontFamilyOptions,
+            value: fontFamily,
+            onchange: (val: string) => setLoadingState({ fontFamily: val }),
+          }),
+        }),
         H(Field, {
           label: 'Font Size',
           input: H(Dropdown, {
