frontend(generate.ts): add a new UriBuilder class that generates the URL more appropriately

Author: 0l1v3rr

client/build/asset-manifest.json

@@ -12,7 +12,7 @@ const App = () => {
     <div className="bg-gh-bg w-full min-h-screen overflow-x-hidden select-none pb-5">
       <Header />
 
-      <main className="flex gap-4 mx-4 md:mx-40 mt-6 flex-col lg:flex-row">
+      <main className="flex gap-4 mx-4 md:mx-32 lg:mx-40 mt-6 flex-col lg:flex-row">
         <Options setLink={(link: string) => setLink(link)} />
         <Preview link={link} />
       </main>

client/build/index.html

@@ -1,4 +1,95 @@
-import { Card } from "../types/card";
+import { Card, newCard } from "../types/card";
+
+class UrlBuilder {
+  private url: string;
+  private defaultCard: Card;
+
+  public constructor() {
+    this.url = "https://github-readme-tech-stack.vercel.app/api/cards?";
+    this.defaultCard = newCard();
+  }
+
+  public title(title: string): UrlBuilder {
+    if (title === this.defaultCard.title) {
+      return this;
+    }
+
+    this.url += `title=${encodeURI(title)}&`;
+    return this;
+  }
+
+  public theme(theme: string): UrlBuilder {
+    if (theme === this.defaultCard.theme) {
+      return this;
+    }
+
+    this.url += `theme=${theme}&`;
+    return this;
+  }
+
+  public showBorder(showBorder: boolean): UrlBuilder {
+    if (showBorder === this.defaultCard.showBorder) {
+      return this;
+    }
+
+    this.url += `showBorder=${showBorder}&`;
+    return this;
+  }
+
+  public align(align: string): UrlBuilder {
+    if (align === this.defaultCard.align) {
+      return this;
+    }
+
+    this.url += `align=${align}&`;
+    return this;
+  }
+
+  public borderRadius(borderRadius: string): UrlBuilder {
+    if (borderRadius === this.defaultCard.borderRadius) {
+      return this;
+    }
+
+    this.url += `borderRadius=${borderRadius}&`;
+    return this;
+  }
+
+  public fontSize(fontSize: string): UrlBuilder {
+    if (fontSize === this.defaultCard.fontSize) {
+      return this;
+    }
+
+    this.url += `fontSize=${fontSize}&`;
+    return this;
+  }
+
+  public fontWeight(fontWeight: string): UrlBuilder {
+    if (fontWeight === this.defaultCard.fontWeight) {
+      return this;
+    }
+
+    this.url += `fontWeight=${fontWeight}&`;
+    return this;
+  }
+
+  public fontFamily(fontFamily: string): UrlBuilder {
+    if (fontFamily === this.defaultCard.fontFamily) {
+      return this;
+    }
+
+    this.url += `fontFamily=${encodeURI(fontFamily)}&`;
+    return this;
+  }
+
+  public build(): string {
+    const lastChar = this.url.at(-1);
+    if (lastChar === "?" || lastChar === "&") {
+      this.url = this.url.slice(0, -1);
+    }
+
+    return this.url;
+  }
+}
 
 export const generateLink = ({
   title,
@@ -11,11 +102,16 @@ export const generateLink = ({
   fontSize,
   fontFamily,
 }: Card): string => {
-  // replace every space with %20
-  title = title.replace(/[ ]/g, "%20");
-  fontFamily = fontFamily.replace(/[ ]/g, "%20");
-
-  let res = `https://github-readme-tech-stack.vercel.app/api/cards?title=${title}&lineCount=${lines.length}&theme=${theme}&align=${align}&showBorder=${showBorder}&borderRadius=${borderRadius}&fontSize=${fontSize}&fontWeight=${fontWeight}&fontFamily=${fontFamily}`;
+  let res = new UrlBuilder()
+    .title(title)
+    .align(align)
+    .borderRadius(borderRadius)
+    .fontFamily(fontFamily)
+    .fontSize(fontSize)
+    .fontWeight(fontWeight)
+    .showBorder(showBorder)
+    .theme(theme)
+    .build();
 
   for (const l of lines) {
     // if the line doesn't contain badges

client/build/static/css/main.2ae52a35.css renamed to client/build/static/css/main.56bc42f2.css

@@ -1,6 +1,6 @@
 {
   "name": "github-readme-tech-stack",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Dynamically generated, customizable technologies cards for your GitHub README.",
   "main": "src/app.ts",
   "scripts": {