client(Options.tsx): add a new input field for the titleAlign query parameter

Author: 0l1v3rr

README.md

@@ -25,7 +25,7 @@
 
 <div align="center">
   <a href="https://github.com/0l1v3rr/github-readme-tech-stack/stargazers" target="_blank">
-    <img src="https://img.shields.io/github/stars/0l1v3rr/github-readme-tech-stack.svg?style=for-the-badge&logo=chart.js&color=FF9E0F&logoColor=D9E0EE&labelColor=343A40" alt="Stars">
+    <img src="https://img.shields.io/github/stars/0l1v3rr/github-readme-tech-stack.svg?style=for-the-badge&logo=chart.js&color=e34c26&logoColor=D9E0EE&labelColor=343A40" alt="Stars">
   </a>
   <a href="https://github.com/0l1v3rr/github-readme-tech-stack/graphs/contributors" target="_blank">
     <img src="https://img.shields.io/github/contributors/0l1v3rr/github-readme-tech-stack.svg?style=for-the-badge&logo=trello&color=008CDD&logoColor=D9E0EE&labelColor=343A40" alt="Contributors">

client/build/asset-manifest.json

@@ -101,8 +101,17 @@ const Options: FC<OptionsProps> = (props) => {
             }
           />
 
+          <SelectInput
+            label="Title Align"
+            options={["left", "center", "right"]}
+            value={card.titleAlign}
+            setValue={(v) =>
+              setCard({ ...card, titleAlign: v, lines: card.lines })
+            }
+          />
+
           <NumberInput
-            label="Font Size"
+            label="Title Size"
             value={card.fontSize}
             setValue={(v) =>
               setCard({ ...card, fontSize: v, lines: card.lines })

client/build/index.html

@@ -19,6 +19,7 @@ export interface Card {
   title: string;
   theme: string;
   align: string;
+  titleAlign: string;
   showBorder: boolean;
   hideBg: boolean;
   borderRadius: string;
@@ -46,5 +47,6 @@ export const newCard = (): Card => {
     gap: "10",
     hideTitle: false,
     hideBg: false,
+    titleAlign: "left",
   };
 };

client/build/static/js/main.5d07f8f6.js renamed to client/build/static/js/main.dce67da4.js

@@ -63,6 +63,15 @@ class UrlBuilder {
     return this;
   }
 
+  public titleAlign(titleAlign: string): UrlBuilder {
+    if (titleAlign === this.defaultCard.titleAlign) {
+      return this;
+    }
+
+    this.url += `titleAlign=${titleAlign}&`;
+    return this;
+  }
+
   public borderRadius(borderRadius: string): UrlBuilder {
     if (borderRadius === this.defaultCard.borderRadius) {
       return this;
@@ -146,10 +155,12 @@ export const generateLink = ({
   gap,
   hideBg,
   hideTitle,
+  titleAlign,
 }: Card): string => {
   let res = new UrlBuilder()
     .title(title)
     .align(align)
+    .titleAlign(titleAlign)
     .borderRadius(borderRadius)
     .fontFamily(fontFamily)
     .fontSize(fontSize)