backend(Card): added a new ontSize query param

Author: 0l1v3rr

README.md

@@ -18,8 +18,8 @@
 <br>
 
 <div align="center">
-  <a href="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,0&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack">
-    <img  src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,0&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack" title="Tech Stack">
+  <a href="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,61DAFB&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack">
+    <img  src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=2&line1=node.js,node.js,0;typescript,typescript,0;express,express,61DAFB&line2=html5,html,0;react,react,0;tailwindcss,tailwind,0&title=This%20Project%27s%20Tech%20Stack" title="Tech Stack">
   </a>
 </div>
 
@@ -58,6 +58,7 @@ With this site, you can customize your card.
 | **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. |
+| **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. |
 | **line{n}** | `?line1=typescript,typescript,2D79C7` | - | The current line of the badge, where {n} is a number. *`(1 <= n <= lineCount)`* |

src/cards/card.ts

@@ -9,6 +9,7 @@ export default class Card {
   private showBorder: boolean;
   private borderRadius: number;
   private fontWeight: FontWeight;
+  private fontSize: number;
 
   private lines: Map<number, Badge[]>;
 
@@ -19,6 +20,7 @@ export default class Card {
     this.showBorder = true;
     this.borderRadius = 4.5;
     this.fontWeight = FontWeight.SEMIBOLD;
+    this.fontSize = 18;
 
     this.lineCount = 1;
     this.lines = new Map<number, Badge[]>();
@@ -94,4 +96,10 @@ export default class Card {
         break;
     }
   };
+
+  public getFontSize = (): number => this.fontSize;
+
+  public setFontSize = (fontSize: number): void => {
+    this.fontSize = fontSize;
+  };
 }

src/controllers/cards-controller.ts

@@ -5,6 +5,7 @@ import SvgGenerator from "../svg/svg-generator";
 import {
   validateAlign,
   validateBorderRadius,
+  validateFontSize,
   validateLine,
   validateLineCount,
 } from "../utils/validator";
@@ -19,6 +20,7 @@ export const getCard = async (req: Request, res: Response) => {
   const showBorder = req.query.showBorder?.toString() || "true";
   const borderRadius = req.query.borderRadius?.toString() || "4.5";
   const fontWeight = req.query.fontWeight?.toString() || "semibold";
+  const fontSize = req.query.fontSize?.toString() || "18";
 
   card.setTitle(title);
   card.setTheme(getThemeByName(theme));
@@ -27,6 +29,7 @@ export const getCard = async (req: Request, res: Response) => {
   card.setShowBorder(showBorder !== "false");
   card.setBorderRadius(validateBorderRadius(borderRadius));
   card.setFontWeight(fontWeight);
+  card.setFontSize(validateFontSize(fontSize));
 
   // run a loop card.getLineCount() times
   for (let i = 1; i <= card.getLineCount(); i++) {

src/svg/svg-generator.ts

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

src/utils/validator.ts

@@ -40,6 +40,23 @@ export const validateBorderRadius = (lineCount: string): number => {
   return num > 50 || num < 0 ? 4.5 : num;
 };
 
+/**
+ * Validates the font size.
+ *
+ * @param {number} fontSize The raw fontSize.
+ * @returns {number} A valid fontSize.
+ */
+export const validateFontSize = (fontSize: string): number => {
+  const num = parseInt(fontSize);
+
+  // it's not a number
+  if (isNaN(num)) {
+    return 18;
+  }
+
+  return num > 30 || num < 15 ? 18 : num;
+};
+
 /**
  * Validates the given align.
  *