backend: add a new titleAlign query parameter

Author: 0l1v3rr

README.md

@@ -63,6 +63,7 @@ None of the fields are required. Every query parameter has a default value displ
 | **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`) |
+| **titleAlign** | `?align=center` | left | The alignment of the title. (`left`, `center`, `right`) |
 | **showBorder** | `?showBorder=false` | true | Display the border around the card or not. (`true`, `false`) |
 | **hideTitle** | `?hideTitle=true` | false | Display the title of the card or not. (`true`, `false`) |
 | **hideBg** | `?hideBg=true` | false | If true, sets the background to transparent. (`true`, `false`) |

src/cards/card-builder.ts

@@ -58,6 +58,11 @@ export default class CardBuilder {
     return this;
   }
 
+  public titleAlign(_titleAlign = "left"): CardBuilder {
+    this.card.setTitleAlign(align.parse(_titleAlign));
+    return this;
+  }
+
   public border(_showBorder = "true"): CardBuilder {
     this.card.setShowBorder(
       showBorder.parse(_showBorder === "false" ? false : true)

src/cards/card.ts

@@ -1,11 +1,12 @@
 import { getThemeByName } from "./themes";
-import { Badge, BadgeAlign, FontWeight, Theme } from "./types";
+import { Badge, Align, FontWeight, Theme } from "./types";
 
 export default class Card {
   private title: string;
   private lineCount: number;
   private theme: Theme;
-  private badgeAlign: BadgeAlign;
+  private badgeAlign: Align;
+  private titleAlign: Align;
   private showBorder: boolean;
   private borderRadius: number;
   private fontWeight: FontWeight;
@@ -21,6 +22,7 @@ export default class Card {
     this.title = "My Tech Stack";
     this.theme = getThemeByName("github");
     this.badgeAlign = "left";
+    this.titleAlign = "left";
     this.showBorder = true;
     this.borderRadius = 4.5;
     this.fontWeight = FontWeight.SEMIBOLD;
@@ -71,12 +73,18 @@ export default class Card {
     this.lines.set(lineCount, lineValue);
   };
 
-  public getBadgeAlign = (): BadgeAlign => this.badgeAlign;
+  public getBadgeAlign = (): Align => this.badgeAlign;
 
-  public setBadgeAlign = (badgeAlign: BadgeAlign): void => {
+  public setBadgeAlign = (badgeAlign: Align): void => {
     this.badgeAlign = badgeAlign;
   };
 
+  public getTitleAlign = (): Align => this.titleAlign;
+
+  public setTitleAlign = (titleAlign: Align): void => {
+    this.titleAlign = titleAlign;
+  };
+
   public getShowBorder = (): boolean => this.showBorder;
 
   public setShowBorder = (showBorder: boolean): void => {

src/cards/types.ts

@@ -11,7 +11,8 @@ export interface Badge {
   logoColor: string;
 }
 
-export type BadgeAlign = "left" | "center" | "right";
+export type Align = "left" | "center" | "right";
+export type TextAnchor = "start" | "middle" | "end";
 
 export const enum FontWeight {
   THIN = 200,

src/controllers/cards-controller.ts

@@ -23,12 +23,14 @@ export const getCard = async (req: Request, res: Response) => {
     titleColor,
     hideBg,
     hideTitle,
+    titleAlign,
   } = req.query;
 
   const card = new CardBuilder()
     .title(title?.toString())
     .lineCount(lineCount?.toString())
     .align(align?.toString())
+    .titleAlign(titleAlign?.toString())
     .border(showBorder?.toString())
     .hideTitle(hideTitle?.toString())
     .borderRadius(borderRadius?.toString())

src/svg/svg-generator.ts

@@ -1,5 +1,5 @@
 import Card from "../cards/card";
-import { Badge } from "../cards/types";
+import { Badge, TextAnchor } from "../cards/types";
 import { badgeWidth } from "../utils/badge-width";
 import { fetchBadge } from "../utils/fetch-badge";
 import { formatHexColor } from "../utils/hex-color";
@@ -34,6 +34,24 @@ export default class SvgGenerator {
    * @returns {string} The generated raw SVG.
    */
   public toString = async (): Promise<string> => {
+    // default values: left title align
+    let textTranslateX = 25;
+    let textXPercent = 0;
+    let textAnchor: TextAnchor = "start";
+
+    switch (this.card.getTitleAlign()) {
+      case "center":
+        textTranslateX = 0;
+        textXPercent = 50;
+        textAnchor = "middle";
+        break;
+      case "right":
+        textTranslateX = -25;
+        textXPercent = 100;
+        textAnchor = "end";
+        break;
+    }
+
     return `
       <svg
         width="${this.width}"
@@ -60,9 +78,13 @@ export default class SvgGenerator {
         ${
           this.card.getHideTitle()
             ? ""
-            : `<g transform="translate(25, ${17 + this.card.getFontSize()})">
-                <text x="0" y="0" class="header">${this.card.getTitle()}</text>
-              </g>`
+            : `<g transform="translate(${textTranslateX}, ${
+                17 + this.card.getFontSize()
+              })">
+                <text x="${textXPercent}%" y="0" text-anchor="${textAnchor}" class="header">
+                  ${this.card.getTitle()}
+                </text>
+               </g>`
         }
 
         ${await this.generateLines()}