backend(card): add hideTitle query parameter

Author: 0l1v3rr

README.md

@@ -64,6 +64,7 @@ None of the fields are required. Every query parameter has a default value displ
 | **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`) |
 | **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`) |
 | **borderRadius** | `?borderRadius=12.5` | 4.5 | Number 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. |

src/cards/card-builder.ts

@@ -65,6 +65,11 @@ export default class CardBuilder {
     return this;
   }
 
+  public hideTitle(_hideTitle = "false"): CardBuilder {
+    this.card.setHideTitle(_hideTitle === "true");
+    return this;
+  }
+
   public borderRadius(_borderRadius = "4.5"): CardBuilder {
     this.card.setBorderRadius(borderRadius.parse(Number(_borderRadius)));
     return this;

src/cards/card.ts

@@ -13,6 +13,7 @@ export default class Card {
   private fontFamily: string;
   private gap: number;
   private lineHeight: number;
+  private hideTitle: boolean;
 
   private lines: Map<number, Badge[]>;
 
@@ -27,6 +28,7 @@ export default class Card {
     this.fontFamily = "Segoe UI";
     this.gap = 10;
     this.lineHeight = 7;
+    this.hideTitle = false;
 
     this.lineCount = 1;
     this.lines = new Map<number, Badge[]>();
@@ -126,4 +128,10 @@ export default class Card {
   public setLineHeight = (lineHeight: number): void => {
     this.lineHeight = lineHeight;
   };
+
+  public getHideTitle = (): boolean => this.hideTitle;
+
+  public setHideTitle = (hideTitle: boolean): void => {
+    this.hideTitle = hideTitle;
+  };
 }

src/controllers/cards-controller.ts

@@ -22,13 +22,15 @@ export const getCard = async (req: Request, res: Response) => {
     badge,
     titleColor,
     hideBg,
+    hideTitle,
   } = req.query;
 
   const card = new CardBuilder()
     .title(title?.toString())
     .lineCount(lineCount?.toString())
     .align(align?.toString())
     .border(showBorder?.toString())
+    .hideTitle(hideTitle?.toString())
     .borderRadius(borderRadius?.toString())
     .fontWeight(fontWeight?.toString())
     .fontSize(fontSize?.toString())

src/svg/svg-generator.ts

@@ -20,6 +20,10 @@ export default class SvgGenerator {
     // the base (line == 1) height is 100
     // each additional line increases the height by this.lineHeight
     this.height = 100 + (card.getLineCount() - 1) * this.lineHeight;
+
+    if (this.card.getHideTitle()) {
+      this.height -= this.card.getFontSize() + 5;
+    }
   }
 
   /**
@@ -52,9 +56,13 @@ export default class SvgGenerator {
           stroke-opacity="${this.card.getShowBorder() ? 1 : 0}"
         />
 
-        <g transform="translate(25, 35)">
-          <text x="0" y="0" class="header">${this.card.getTitle()}</text>
-        </g>
+        ${
+          this.card.getHideTitle()
+            ? ""
+            : `<g transform="translate(25, 35)">
+                <text x="0" y="0" class="header">${this.card.getTitle()}</text>
+              </g>`
+        }
 
         ${await this.generateLines()}
 
@@ -89,7 +97,11 @@ export default class SvgGenerator {
   ): Promise<string> => {
     // the first line is this.lineHeight
     // each additional line increases this by this.lineHeight
-    const translateY = 35 + (lineNumber - 1) * this.lineHeight;
+    let translateY = 35 + (lineNumber - 1) * this.lineHeight;
+
+    if (this.card.getHideTitle()) {
+      translateY -= this.card.getFontSize() + this.card.getFontSize() / 3;
+    }
 
     let icons = "";
     let leftPadding = 0;