frontend(Options.tsx): add an input for the the new fontFamily query param

Author: 0l1v3rr

client/build/asset-manifest.json

@@ -43,14 +43,16 @@ const Input: FC<InputProps> = (props) => {
       />
 
       {!isError && props.helperText && (
-        <div className="flex items-center gap-1 text-sm italic text-gh-text-secondary">
-          <HiOutlineInformationCircle /> {props.helperText}
+        <div className="flex items-center gap-1 text-[.8rem] italic text-gh-text-secondary">
+          <HiOutlineInformationCircle />
+          <span>{props.helperText}</span>
         </div>
       )}
 
       {isError && (
-        <div className="flex items-center gap-1 text-sm italic text-red-500">
-          <BiError /> {props.validate(props.value)}
+        <div className="flex items-center gap-1 text-[.8rem] italic text-red-500">
+          <BiError />
+          <span>{props.validate(props.value)}</span>
         </div>
       )}
     </div>

client/build/index.html

@@ -12,7 +12,7 @@ import NumberInput from "../components/input/NumberInput";
 import TrueFalseInput from "../components/input/TrueFalseInput";
 import Input from "../components/input/Input";
 import SecondaryButton from "../components/buttons/SecondaryButton";
-import { validateBorderRadius } from "../utils/validate";
+import { validateBorderRadius, validateFontFamily } from "../utils/validate";
 
 interface OptionsProps {
   setLink: (link: string) => void;
@@ -122,6 +122,17 @@ const Options: FC<OptionsProps> = (props) => {
           validate={(val) => validateBorderRadius(val)}
         />
 
+        <Input
+          label="Font Family"
+          placeholder="Segoe UI"
+          value={card.fontFamily}
+          setValue={(v) =>
+            setCard({ ...card, fontFamily: v, lines: card.lines })
+          }
+          helperText="If the specified family doesn't exist, the default is used."
+          validate={(val) => validateFontFamily(val)}
+        />
+
         <div className="flex items-start gap-4">
           <TrueFalseInput
             label="Border"
@@ -158,7 +169,12 @@ const Options: FC<OptionsProps> = (props) => {
           <GreenButton
             icon={IoHammerOutline}
             onClick={() => props.setLink(generateLink(card))}
-            disabled={validateBorderRadius(card.borderRadius) !== ""}
+            disabled={
+              !(
+                validateBorderRadius(card.borderRadius) === "" &&
+                validateFontFamily(card.fontFamily) === ""
+              )
+            }
             text="Generate"
           />
 

client/build/static/js/main.742c82d7.js renamed to client/build/static/js/main.1f52111a.js

@@ -23,6 +23,7 @@ export interface Card {
   borderRadius: string;
   fontWeight: string;
   fontSize: string;
+  fontFamily: string;
   lines: Line[];
 }
 
@@ -35,6 +36,7 @@ export const newCard = (): Card => {
     lines: [{ badges: [], lineNumber: "1" }],
     showBorder: true,
     theme: "github",
+    fontFamily: "Segoe UI",
     title: "My Tech Stack",
   };
 };

client/build/static/js/main.742c82d7.js.LICENSE.txt renamed to client/build/static/js/main.1f52111a.js.LICENSE.txt

@@ -9,11 +9,13 @@ export const generateLink = ({
   borderRadius,
   fontWeight,
   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}`;
+  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}`;
 
   for (const l of lines) {
     // if the line doesn't contain badges

client/build/static/js/main.742c82d7.js.map renamed to client/build/static/js/main.1f52111a.js.map

@@ -23,6 +23,14 @@ export const validateIconAndLabel = (
   return "";
 };
 
+export const validateFontFamily = (val: string): string => {
+  if (val.length < 3 || val.length > 16) {
+    return `The font family should be between 2 and 16 characters.`;
+  }
+
+  return "";
+};
+
 export const validateBorderRadius = (val: string): string => {
   const num = parseInt(val);