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

Author: 0l1v3rr

README.md

@@ -48,9 +48,6 @@ The easiest way to start using these cards is to visit our website, where you ca
 ## 🔧 Query parameters
 None of the fields are required. Every query parameter has a default value displayed below.  
 
-> **Note**  
-> Not every query parameter is changeable on the Demo Website.
-
 | Parameter | Example | Default value | Description |
 |---------- |---------|---------------|------------ |
 | **title** | `?title=My%20Title` | My Tech Stack | The title of the card. `%20` can be used as a space. |
@@ -74,6 +71,7 @@ None of the fields are required. Every query parameter has a default value displ
 These cards come with several built-in themes you can use. You can find all of them by clicking [here](docs/THEMES.md).  
 If you would like to use other themes, and add one for yourself and others, please check this [issue](https://github.com/0l1v3rr/github-readme-tech-stack/issues/2).  
 
+### 🖌 Customizing a theme
 You can customize a theme using these query parameters.  
 These parameters accept only valid hexadecimal colors, otherwise, they are not applied. Please use `%23` instead of `#`.
 

client/build/asset-manifest.json

@@ -133,24 +133,6 @@ const Options: FC<OptionsProps> = (props) => {
           validate={(val) => validateFontFamily(val)}
         />
 
-        <div className="flex items-start gap-4">
-          <TrueFalseInput
-            label="Border"
-            value={card.showBorder}
-            setValue={(v) =>
-              setCard({ ...card, showBorder: v, lines: card.lines })
-            }
-          />
-
-          <NumberInput
-            label="Lines"
-            value={`${card.lines.length}`}
-            setValue={(v) => updateLineCount(Number(v))}
-            minValue={1}
-            maxValue={5}
-          />
-        </div>
-
         <div className="flex items-start gap-4">
           <NumberInput
             label="Gap"
@@ -170,11 +152,35 @@ const Options: FC<OptionsProps> = (props) => {
             maxValue={30}
           />
         </div>
+
+        <div className="flex items-start gap-4">
+          <TrueFalseInput
+            label="Show Border"
+            value={card.showBorder}
+            setValue={(v) =>
+              setCard({ ...card, showBorder: v, lines: card.lines })
+            }
+          />
+
+          <TrueFalseInput
+            label="Hide Background"
+            value={card.hideBg}
+            setValue={(v) => setCard({ ...card, hideBg: v, lines: card.lines })}
+          />
+        </div>
       </div>
 
       <div className="my-4 flex flex-col gap-4 px-4">
         <div className="w-full h-[.8px] bg-gh-border mx-auto" />
 
+        <NumberInput
+          label="Line Count"
+          value={`${card.lines.length}`}
+          setValue={(v) => updateLineCount(Number(v))}
+          minValue={1}
+          maxValue={5}
+        />
+
         {card.lines.map((line) => (
           <LineInput
             line={line}

client/build/index.html

@@ -20,6 +20,7 @@ export interface Card {
   theme: string;
   align: string;
   showBorder: boolean;
+  hideBg: boolean;
   borderRadius: string;
   fontWeight: string;
   fontSize: string;
@@ -42,5 +43,6 @@ export const newCard = (): Card => {
     title: "My Tech Stack",
     lineHeight: "7",
     gap: "10",
+    hideBg: false,
   };
 };

client/build/static/js/main.ba7571ef.js renamed to client/build/static/js/main.d018c227.js

@@ -36,6 +36,15 @@ class UrlBuilder {
     return this;
   }
 
+  public hideBg(hideBg: boolean): UrlBuilder {
+    if (hideBg === this.defaultCard.hideBg) {
+      return this;
+    }
+
+    this.url += `hideBg=${hideBg}&`;
+    return this;
+  }
+
   public align(align: string): UrlBuilder {
     if (align === this.defaultCard.align) {
       return this;
@@ -126,6 +135,7 @@ export const generateLink = ({
   fontFamily,
   lineHeight,
   gap,
+  hideBg,
 }: Card): string => {
   let res = new UrlBuilder()
     .title(title)
@@ -139,6 +149,7 @@ export const generateLink = ({
     .lineCount(lines.length)
     .theme(theme)
     .gap(gap)
+    .hideBg(hideBg)
     .build();
 
   for (const l of lines) {

client/build/static/js/main.ba7571ef.js.LICENSE.txt renamed to client/build/static/js/main.d018c227.js.LICENSE.txt

@@ -16,8 +16,8 @@ export const validateIconAndLabel = (
   val: string,
   iorl: "icon" | "label"
 ): string => {
-  if (val.length < 3 || val.length > 32) {
-    return `The ${iorl} should be between 2 and 32 characters.`;
+  if (val.length < 2 || val.length > 32) {
+    return `The ${iorl} should be between 1 and 32 characters.`;
   }
 
   return "";