added a new query param: showBorder

Author: 0l1v3rr

README.md

@@ -45,6 +45,9 @@ Use [this](https://github-readme-tech-stack.vercel.app) website to customize a c
 > **Note**  
 > These cards use [shields.io](https://shields.io/) badges under the hood.
 
+> **Warning**  
+> If the site doesn't load and displays a full white screen, try it in incognito mode.
+
 <hr>
 
 ## 🔨 Query parameters
@@ -55,8 +58,9 @@ We suggest not editing the query parameters manually, use [our website](https://
 | **title** | `?title=My%20Custom%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](#-themes). |
 | **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`) |
 | **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)`* Learn how to create a line like this [here](#-how-to-customize-a-line). |
+| **line{n}** | `?line1=typescript,typescript,2D79C7` | - | The current line of the badge, where {n} is a number. *`(1 <= n <= lineCount)`* |
 
 <hr>
 

client/src/components/popups/LinePopup.tsx

@@ -152,4 +152,3 @@ const LinePopup: FC<LinePopupProps> = (props) => {
 };
 
 export default LinePopup;
-

src/cards/card.ts

@@ -6,13 +6,15 @@ export default class Card {
   private lineCount: number;
   private theme: Theme;
   private badgeAlign: BadgeAlign;
+  private showBorder: boolean;
 
   private lines: Map<number, Badge[]>;
 
   public constructor() {
     this.title = "My Tech Stack";
     this.theme = getThemeByName("github");
     this.badgeAlign = "left";
+    this.showBorder = true;
 
     this.lineCount = 1;
     this.lines = new Map<number, Badge[]>();
@@ -60,4 +62,10 @@ export default class Card {
   public setBadgeAlign = (badgeAlign: BadgeAlign): void => {
     this.badgeAlign = badgeAlign;
   };
+
+  public getShowBorder = (): boolean => this.showBorder;
+
+  public setShowBorder = (showBorder: boolean): void => {
+    this.showBorder = showBorder;
+  };
 }

src/controllers/cards-controller.ts

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

src/svg/svg-generator.ts

@@ -33,19 +33,19 @@ export default class SvgGenerator {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         role="img"
-        aria-label="My Tech Stack"
+        aria-label="${this.card.getTitle()}"
       >
         <title>${this.card.getTitle()}</title>
 
         <rect
-          x="0.5"
-          y="0.5"
+          x="${this.card.getShowBorder() ? 0.5 : 0}"
+          y="${this.card.getShowBorder() ? 0.5 : 0}"
           rx="4.5"
-          height="${this.height - 1}"
+          height="${this.height - (this.card.getShowBorder() ? 1 : 0)}"
           stroke="${this.card.getTheme().borderColor}"
-          width="${this.width - 1}"
+          width="${this.width - (this.card.getShowBorder() ? 1 : 0)}"
           fill="${this.card.getTheme().backgroundColor}"
-          stroke-opacity="1"
+          stroke-opacity="${this.card.getShowBorder() ? 1 : 0}"
         />
 
         <g transform="translate(25, 35)">