backend(Card): added a new ontWeight query param

Author: 0l1v3rr

.prettierrc.json

@@ -3,5 +3,5 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,
-  "endOfLine": "crlf"
+  "endOfLine": "lf"
 }

README.md

@@ -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. |
+| **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)`* |
 

client/src/App.tsx

@@ -21,4 +21,3 @@ const App = () => {
 };
 
 export default App;
-

client/src/components/input/NumberInput.tsx

@@ -69,4 +69,3 @@ const NumberInput: FC<InputProps> = (props) => {
 };
 
 export default NumberInput;
-

client/src/components/input/SelectInput.tsx

@@ -44,4 +44,3 @@ const SelectInput: FC<SelectInputProps> = (props) => {
 };
 
 export default SelectInput;
-

client/src/components/input/TrueFalseInput.tsx

@@ -46,4 +46,3 @@ const TrueFalseInput: FC<TrueFalseInputProps> = (props) => {
 };
 
 export default TrueFalseInput;
-

client/src/sections/Options.tsx

@@ -174,4 +174,3 @@ const Options: FC<OptionsProps> = (props) => {
 };
 
 export default Options;
-

src/cards/card.ts

@@ -1,5 +1,5 @@
 import { getThemeByName } from "./themes";
-import { Badge, BadgeAlign, Theme } from "./types";
+import { Badge, BadgeAlign, FontWeight, Theme } from "./types";
 
 export default class Card {
   private title: string;
@@ -8,6 +8,7 @@ export default class Card {
   private badgeAlign: BadgeAlign;
   private showBorder: boolean;
   private borderRadius: number;
+  private fontWeight: FontWeight;
 
   private lines: Map<number, Badge[]>;
 
@@ -17,6 +18,7 @@ export default class Card {
     this.badgeAlign = "left";
     this.showBorder = true;
     this.borderRadius = 4.5;
+    this.fontWeight = FontWeight.SEMIBOLD;
 
     this.lineCount = 1;
     this.lines = new Map<number, Badge[]>();
@@ -76,4 +78,20 @@ export default class Card {
   public setBorderRadius = (borderRadius: number): void => {
     this.borderRadius = borderRadius;
   };
+
+  public getFontWeight = (): FontWeight => this.fontWeight;
+
+  public setFontWeight = (weight: string): void => {
+    switch (weight.toLowerCase().trim()) {
+      case "thin":
+        this.fontWeight = FontWeight.THIN;
+        break;
+      case "bold":
+        this.fontWeight = FontWeight.BOLD;
+        break;
+      case "normal":
+        this.fontWeight = FontWeight.NORMAL;
+        break;
+    }
+  };
 }

src/cards/types.ts

@@ -12,3 +12,10 @@ export interface Badge {
 }
 
 export type BadgeAlign = "left" | "center" | "right";
+
+export const enum FontWeight {
+  THIN = 200,
+  NORMAL = 400,
+  SEMIBOLD = 600,
+  BOLD = 800,
+}

src/controllers/cards-controller.ts

@@ -18,13 +18,15 @@ export const getCard = async (req: Request, res: Response) => {
   const align = req.query.align?.toString() || "left";
   const showBorder = req.query.showBorder?.toString() || "true";
   const borderRadius = req.query.borderRadius?.toString() || "4.5";
+  const fontWeight = req.query.fontWeight?.toString() || "semibold";
 
   card.setTitle(title);
   card.setTheme(getThemeByName(theme));
   card.setLineCount(validateLineCount(lineCount));
   card.setBadgeAlign(validateAlign(align));
   card.setShowBorder(showBorder !== "false");
   card.setBorderRadius(validateBorderRadius(borderRadius));
+  card.setFontWeight(fontWeight);
 
   // run a loop card.getLineCount() times
   for (let i = 1; i <= card.getLineCount(); i++) {