backend: add a new fontFamily query param

Author: 0l1v3rr

README.md

@@ -55,6 +55,7 @@ None of the fields are required. Every query parameter has a default value displ
 | **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
 | **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
 | **borderRadius** | `?borderRadius=12.5` | 4.5 | Value between 0 and 50. |
+| **fontFamily** | `?fontFamily=consolas` | Segoe UI | The font family of the title. If the specified family doesn't exist, the default is used. |
 | **fontSize** | `?fontSize=20` | 18 | The size of the title. Accepts a value between 15 and 30. |
 | **fontWeight** | `?fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
 | **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |

src/cards/card-builder.ts

@@ -12,6 +12,7 @@ const fontWeight = z
   .enum(["thin", "normal", "semibold", "bold"])
   .catch("semibold");
 const fontSize = z.number().min(15).max(30).catch(18);
+const fontFamily = z.string().min(3).max(16).catch("Segoe UI");
 
 // const numberThatAcceptsString = z.preprocess((input) => {
 //   const processed = z
@@ -81,6 +82,11 @@ export default class CardBuilder {
     return this;
   }
 
+  public family(_fontFamily = "Segoe UI"): CardBuilder {
+    this.card.setFontFamily(fontFamily.parse(_fontFamily));
+    return this;
+  }
+
   public lines(
     cb: (line: number, addBadge: (b: Badge) => void) => void
   ): CardBuilder {

src/cards/card.ts

@@ -10,6 +10,7 @@ export default class Card {
   private borderRadius: number;
   private fontWeight: FontWeight;
   private fontSize: number;
+  private fontFamily;
 
   private lines: Map<number, Badge[]>;
 
@@ -21,6 +22,7 @@ export default class Card {
     this.borderRadius = 4.5;
     this.fontWeight = FontWeight.SEMIBOLD;
     this.fontSize = 18;
+    this.fontFamily = "Segoe UI";
 
     this.lineCount = 1;
     this.lines = new Map<number, Badge[]>();
@@ -102,4 +104,10 @@ export default class Card {
   public setFontSize = (fontSize: number): void => {
     this.fontSize = fontSize;
   };
+
+  public getFontFamily = (): string => this.fontFamily;
+
+  public setFontFamily = (fontFamily: string): void => {
+    this.fontFamily = fontFamily;
+  };
 }

src/controllers/cards-controller.ts

@@ -12,6 +12,7 @@ export const getCard = async (req: Request, res: Response) => {
     borderRadius,
     fontWeight,
     fontSize,
+    fontFamily,
     theme,
   } = req.query;
 
@@ -23,6 +24,7 @@ export const getCard = async (req: Request, res: Response) => {
     .borderRadius(borderRadius?.toString())
     .fontWeight(fontWeight?.toString())
     .fontSize(fontSize?.toString())
+    .family(fontFamily?.toString())
     .theme(theme?.toString())
     .lines((line, addBadge) => {
       // get the line query param based on the `line` argument (example: line1)

src/svg/svg-generator.ts

@@ -58,7 +58,7 @@ export default class SvgGenerator {
           .header {
             font: ${this.card
               .getFontWeight()
-              .valueOf()} ${this.card.getFontSize()}px 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+              .valueOf()} ${this.card.getFontSize()}px '${this.card.getFontFamily()}', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             fill: ${this.card.getTheme().titleColor};
           }
         </style>