backend: add width query param

Author: 0l1v3rr

README.md

@@ -46,10 +46,13 @@ The easiest way to start using these cards is to visit our website, where you ca
 <hr>
 
 ## 🔧 Query parameters
-None of the fields are required. Every query parameter has a default value displayed below.
+None of the fields are required. Every query parameter has a default value displayed below.  
 
-| Parameter | Example | Default value | Description|
-|---------- |---------|---------------|------------|
+> **Note**
+> Not every query parameter is changeable in the Demo Website.
+
+| Parameter | Example | Default value | Description |
+|---------- |---------|---------------|------------ |
 | **title** | `?title=My%20Title` | My Tech Stack | The title of the card. `%20` can be used as a space. |
 | **theme** | `?theme=github_dark` | github | The theme of the card. You can browse between the themes [here](docs/THEMES.md). |
 | **align** | `?align=center` | left | The alignment of the badges. (`left`, `center`, `right`) |
@@ -58,6 +61,7 @@ None of the fields are required. Every query parameter has a default value displ
 | **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 number between 15 and 30. |
 | **fontWeight** | `?fontWeight=normal` | semibold | The thickness of the title. (`thin`, `normal`, `semibold`, `bold`) |
+| **width** | `?width=500` | 495 | The width of the card. Accepts a valid number. |
 | **gap** | `?gap=15` | 10 | The gap between the badges. Accepts a number between 0 and 30. |
 | **lineHeight** | `?lineHeight=10` | 7 | The gap between the lines. Accepts a number between 0 and 30. |
 | **lineCount** | `?lineCount=2` | 1 | The number of lines you want to add to your card. |

src/controllers/cards-controller.ts

@@ -1,7 +1,7 @@
 import { Request, Response } from "express";
 import CardBuilder from "../cards/card-builder";
 import SvgGenerator from "../svg/svg-generator";
-import { validateLine } from "../utils/validator";
+import { parseWidth, validateLine } from "../utils/validator";
 
 export const getCard = async (req: Request, res: Response) => {
   const {
@@ -16,6 +16,7 @@ export const getCard = async (req: Request, res: Response) => {
     theme,
     gap,
     lineHeight,
+    width,
   } = req.query;
 
   const card = new CardBuilder()
@@ -41,5 +42,7 @@ export const getCard = async (req: Request, res: Response) => {
     .build();
 
   res.setHeader("Content-Type", "image/svg+xml");
-  res.send(await new SvgGenerator(card).toString());
+  res.send(
+    await new SvgGenerator(card, parseWidth(width?.toString())).toString()
+  );
 };

src/svg/svg-generator.ts

@@ -10,9 +10,9 @@ export default class SvgGenerator {
   private card: Card;
   private lineHeight: number;
 
-  public constructor(card: Card) {
+  public constructor(card: Card, width = 495) {
     this.card = card;
-    this.width = 495;
+    this.width = width;
 
     // the height of a badge is 28
     this.lineHeight = this.card.getLineHeight() + 28;
@@ -97,19 +97,19 @@ export default class SvgGenerator {
     }
 
     // align: left   ==> x = 25
-    // align: center ==> x = 495/2 - leftPadding/2 + gap/2
-    // align: right  ==> x = 495 - 25 - leftPadding + gap
+    // align: center ==> x = width/2 - leftPadding/2 + gap/2
+    // align: right  ==> x = width - 25 - leftPadding + gap
     let x = 25;
 
     switch (this.card.getBadgeAlign()) {
       case "left":
         x = 25;
         break;
       case "center":
-        x = 495 / 2 - leftPadding / 2 + this.card.getGap() / 2;
+        x = this.width / 2 - leftPadding / 2 + this.card.getGap() / 2;
         break;
       case "right":
-        x = 495 - 25 - leftPadding + this.card.getGap();
+        x = this.width - 25 - leftPadding + this.card.getGap();
         break;
     }
 

src/utils/validator.ts

@@ -1,6 +1,26 @@
 import { Badge } from "../cards/types";
 import { formatHexColor } from "./hex-color";
 
+/**
+ * Parses the width into a valid number.
+ *
+ * @param {string | undefined} width The width.
+ * @returns {number} The parsed width.
+ */
+export const parseWidth = (width = "495"): number => {
+  if (width === "495") {
+    return 495;
+  }
+
+  const num = Number(width);
+
+  if (isNaN(num)) {
+    return 495;
+  }
+
+  return num;
+};
+
 /**
  * Converts the line into a Badge array.
  * If there's any error in the line,