Minor fixes while rendering the badge

therealsujitk · Dec 13, 2023 · 1664872 · 1664872
1 parent 4199d05
commit 1664872
Show file tree

Hide file tree

Showing 4 changed files with 249 additions and 19 deletions.
diff --git a/app.ts b/app.ts
@@ -6,16 +6,18 @@ const app = express();
 const cache = new NodeCache();
 
 interface Badge {
-  key: string,
-  value: string,
+  label: string,
+  message: string,
   color: string,
   style: string,
   logo: string,
 }
 
 async function createBadge(badge: Badge) {
-  badge.value = badge.value.replace(/-/g, '--').replace(/_/g, '__');
-  const url = new URL(`http://img.shields.io/badge/${badge.key}-${badge.value}-${badge.color}?style=${badge.style}&logo=${badge.logo}`);
+  const url = new URL(`http://img.shields.io/badge/label-${badge.message}-${badge.color}`);
+  url.searchParams.append('style', badge.style);
+  url.searchParams.append('logo', badge.logo);
+  url.searchParams.append('label', badge.label);
 
   if (cache.has(url.toString())) {
     return cache.get(url.toString()) as string;
@@ -37,26 +39,26 @@ app.get('/*', async (req, res) => {
   const appName = req.query.app;
   const root = req.query.root ?? '';
   const style = req.query.style ?? 'flat';
-  const badgeName = req.query.name ?? 'vercel'
+  const label = req.query.label ?? req.query.name ?? 'vercel'
   const logo = req.query.logo ?? 'vercel';
 
   const url = appName + '.vercel.app/' + root;
   const handleRequest = async (statusCode: number = 404) => {
     const badge: Badge = {
-      key: (badgeName as string).replace(/-/g, '--').replace(/_/g, '__'),
-      value: 'deployed',
+      label: label as string,
+      message: 'deployed',
       color: 'brightgreen',
       style: style as string,
       logo: logo as string,
     };
 
     if (statusCode <= 599 && statusCode >= 500) {
       // 500 - 599 -> Server Errors
-      badge.value = 'failed';
+      badge.message = 'failed';
       badge.color = 'red';
     } else if (statusCode <= 499 && statusCode >= 400) {
       // 400 - 499 -> Client Errors
-      badge.value = 'not-found';
+      badge.message = 'not found';
       badge.color = 'lightgrey';
     } else if (statusCode <= 399 && statusCode >= 300) {
       // 300 - 399 -> Redirects
@@ -75,4 +77,4 @@ app.get('/*', async (req, res) => {
     .catch(_ => handleRequest());
 });
 
-export default app;
+export default app;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -6,8 +6,8 @@ function App() {
   const [appName, setAppName] = useState('therealsujitk');
   const [appPath, setAppPath] = useState('');
   const [badgeStyle, setBadgeStyle] = useState('flat');
-  const [logo, setLogo] = useState('vercel');
-  const [badgeName, setBadgeName] = useState('vercel');
+  const [badgeLogo, setBadgeLogo] = useState('vercel');
+  const [badgeLabel, setBadgeLabel] = useState('vercel');
 
   const badgeStyles: {[x: string]: string} = {
     'flat': 'Flat',
@@ -21,11 +21,11 @@ function App() {
     url.searchParams.append('app', appName);
     if (appPath !== '') url.searchParams.append('root', appPath);
     if (badgeStyle !== 'flat') url.searchParams.append('style', badgeStyle);
-    if (logo !== 'vercel') url.searchParams.append('logo', logo);
-    if (badgeName !== 'vercel') url.searchParams.append('name', badgeName);
+    if (badgeLogo !== 'vercel') url.searchParams.append('logo', badgeLogo);
+    if (badgeLabel !== 'vercel') url.searchParams.append('label', badgeLabel);
 
     return url;
-  }, [appName, appPath, badgeStyle, logo, badgeName]);
+  }, [appName, appPath, badgeStyle, badgeLogo, badgeLabel]);
 
   const [badgePreview, setBadgePreview] = useState<string>(badgeUrl.toString());
 
@@ -37,7 +37,7 @@ function App() {
   const outputs = [
     badgeUrl.toString(),
     `![Vercel Deploy](${badgeUrl})`,
-    `<img src="${badgeUrl}" alt="Vercel Deploy"></img>`,
+    `<img src="${badgeUrl}" alt="Vercel Deploy">`,
   ];
 
   const footerLinks: {[x: string]: string} = {
@@ -67,8 +67,8 @@ function App() {
             <Select variant="soft" value={badgeStyle} sx={{flex: 1}} onChange={(_, v) => setBadgeStyle(v as string)}>
               {Object.keys(badgeStyles).map((key, i) => <Option key={i} value={key}>{badgeStyles[key]}</Option>)}
             </Select>
-            <Input variant="soft" value={logo} sx={{flex: 1}} onChange={(e) => setLogo(e.target.value)} />
-            <Input variant="soft" value={badgeName} sx={{flex: 1}} onChange={(e) => setBadgeName(e.target.value)} />
+            <Input variant="soft" value={badgeLogo} sx={{flex: 1}} placeholder="Badge Logo" onChange={(e) => setBadgeLogo(e.target.value)} />
+            <Input variant="soft" value={badgeLabel} sx={{flex: 1}} placeholder="Badge Label" onChange={(e) => setBadgeLabel(e.target.value)} />
           </Box>
         </section>
 

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "scripts": {
     "preinstall": "cd frontend && yarn",
-    "dev": "ts-node bin/server.ts",
+    "dev": "nodemon bin/server.ts",
     "build": "yarn run build:frontend && rm -rf dist && tsc -p .",
     "build:frontend": "cd frontend && yarn run build",
     "postbuild": "mkdir dist/frontend && cp -r frontend/build dist/frontend/build",
@@ -22,6 +22,7 @@
     "@types/express": "^4.17.21",
     "@types/node": "^20.10.4",
     "@types/node-fetch": "2.x",
+    "nodemon": "^3.0.2",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
   }