feat: Check octicons library before database (#432)

Author: DenverCoder1

client/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.0.0",
     "react-github-btn": "^1.3.0",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.6.4",
+    "typescript": "^4.7.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
@@ -54,4 +54,4 @@
   "resolutions": {
     "autoprefixer": "10.4.5"
   }
-}
+}

client/yarn.lock

@@ -9296,10 +9296,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.6.4:
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
-  integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
+typescript@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"
+  integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"

package.json

@@ -5,6 +5,7 @@
   "author": "Jonah Lawrence",
   "license": "MIT",
   "dependencies": {
+    "@primer/octicons": "^17.2.0",
     "axios": "^0.27.2",
     "body-parser": "^1.20.0",
     "concurrently": "^7.2.1",
@@ -13,13 +14,14 @@
     "express": "^4.18.1",
     "express-rate-limit": "^6.4.0",
     "monk": "^7.3.4",
-    "typescript": "^4.6.4",
+    "typescript": "^4.7.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@babel/eslint-parser": "^7.17.0",
     "@types/express": "^4.17.3",
+    "@types/primer__octicons": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -53,4 +55,4 @@
   "bugs": {
     "url": "https://github.com/DenverCoder1/custom-icon-badges/issues"
   }
-}
+}

server/controllers/controller.ts

@@ -1,18 +1,29 @@
 import { Request, Response } from 'express';
 import fetchBadge from '../services/fetchBadges';
 import iconDatabase from '../services/iconDatabase';
+import octicons from '../services/octicons';
 
-async function listIconsJSON(req: Request, res: Response): Promise<void> {
+/**
+ * List all icons in the database
+ * @param {Request} _req The request object
+ * @param {Response} res The response object
+ */
+async function listIconsJSON(_req: Request, res: Response): Promise<void> {
   res.status(200).json({
     icons: await iconDatabase.getIcons(),
   });
 }
 
+/**
+ * Display a badge for the given parameters
+ * @param {Request} req The request object
+ * @param {Response} res The response object
+ */
 async function getBadge(req: Request, res: Response): Promise<void> {
   // get logo from query as a string, use nothing if multiple or empty
   const slug = typeof req.query.logo === 'string' ? req.query.logo : '';
   // check if slug exists
-  const item = slug ? await iconDatabase.checkSlugExists(slug) : null;
+  const item = slug ? await octicons.getIcon(slug) || await iconDatabase.getIcon(slug) : null;
   // get badge for item
   const response = await fetchBadge.fetchBadgeFromRequest(req, item);
   // get content type
@@ -21,6 +32,11 @@ async function getBadge(req: Request, res: Response): Promise<void> {
   res.status(response.status).type(contentType).send(response.data);
 }
 
+/**
+ * Add a new icon to the database
+ * @param {Request} req The request object
+ * @param {Response} res The response object
+ */
 async function postIcon(req: Request, res: Response): Promise<void> {
   const { slug, type, data }: { slug: string, type: string, data: string } = req.body;
 
@@ -34,7 +50,7 @@ async function postIcon(req: Request, res: Response): Promise<void> {
     return;
   }
 
-  console.log(`Received icon for ${slug}`);
+  console.info(`Received icon for ${slug}`);
 
   // get the badge for item data
   const logoBadgeResponse = await fetchBadge.fetchBadgeFromRequest(req, { slug, type, data });
@@ -58,15 +74,15 @@ async function postIcon(req: Request, res: Response): Promise<void> {
   }
 
   // check for slug in the database
-  const item = await iconDatabase.checkSlugExists(slug);
+  const item = await octicons.getIcon(slug) || await iconDatabase.getIcon(slug);
 
   // Get default badge with the logo set to the slug
   const defaultBadgeResponse = await fetchBadge.fetchDefaultBadge(slug);
 
   // Check if the slug is reserved
   // Slug is reserved if it is in the database or shields.io has an icon for it
   if (item !== null || defaultBadgeResponse.data.match(/<image[^>]*>/) !== null) {
-    console.log('Slug is already in use');
+    console.info(`The slug ${slug} is already in use`);
     // slug already exists
     res.status(409).json({
       type: 'error',
@@ -77,7 +93,7 @@ async function postIcon(req: Request, res: Response): Promise<void> {
   }
 
   // All checks passed, add the icon to the database
-  console.log(`Creating new icon for ${slug}`);
+  console.info(`Creating new icon for ${slug}`);
   // create item
   const body = await iconDatabase.insertIcon(slug, type, data);
   // return success response

server/services/fetchBadges.ts

@@ -1,10 +1,9 @@
 import axios, { AxiosResponse } from 'axios';
 import { Request } from 'express';
-import setLogoColor from './logoColor';
+import setLogoColor from './setLogoColor';
 
 /**
  * Build query string from ParsedQs
- * TODO: replace parsedQs with new query object
  * @param {QueryString.ParsedQs} parsedQs query string possibly with replacements
  * @returns {string} query string
  */
@@ -52,7 +51,10 @@ function buildQueryStringFromItem(
 }
 
 /**
- * Build a badge query given the slug
+ * Build a badge URL given the slug
+ * @param {Request} req request object
+ * @param {Object} item data about the icon or null if not found
+ * @returns {string} url to badge
  */
 function getBadgeUrl(
   req: Request, item: { slug: string, type: string, data: string } | null,
@@ -65,6 +67,9 @@ function getBadgeUrl(
 
 /**
  * Fetch badge from shields.io for item with same params as request
+ * @param {Request} req request object
+ * @param {Object} item data about the icon or null if not found
+ * @returns {AxiosResponse} response from shields.io
  */
 async function fetchBadgeFromRequest(
   req: Request, item: { slug: string, type: string, data: string } | null,
@@ -77,6 +82,8 @@ async function fetchBadgeFromRequest(
 
 /**
  * Fetch badge from shields.io given just a slug
+ * @param {string} slug slug of the icon
+ * @returns {AxiosResponse} response from shields.io
  */
 async function fetchDefaultBadge(slug: string): Promise<AxiosResponse<any>> {
   // get shields url

server/services/iconDatabase.ts

@@ -6,12 +6,24 @@ const db = monk(DB_URL);
 const icons = db.get('icons');
 icons.createIndex({ slug: 1 }, { unique: true });
 
-async function checkSlugExists(slug: string):
+/**
+ * Check if a slug exists in the database and return the icon if it does
+ * @param {string} slug The slug to look for
+ * @returns {Object} The icon data if it exists, null otherwise
+ */
+async function getIcon(slug: string):
   Promise<{ slug: string, type: string, data: string } | null> {
   // find slug in database, returns null if not found
   return icons.findOne({ slug: slug.toLowerCase() });
 }
 
+/**
+ * Insert a new icon into the database
+ * @param {string} slug The slug to use for the icon
+ * @param {string} type The type of icon to use (eg. 'png', 'svg+xml')
+ * @param {string} data The base64 encoded data for the icon
+ * @returns {Object} The icon data
+ */
 async function insertIcon(slug: string, type: string, data: string):
   Promise<{ slug: string, type: string, data: string }> {
   // create item
@@ -22,15 +34,19 @@ async function insertIcon(slug: string, type: string, data: string):
   return item;
 }
 
+/**
+ * Get all icons from the database
+ * @returns {FindResult} The icons in the database
+ */
 async function getIcons(): Promise<FindResult<{ slug: string, type: string, data: string }>> {
   // return all items
   return icons.find({}, { sort: { _id: -1 } });
 }
 
 const defaultExport = {
-  checkSlugExists,
-  insertIcon,
+  getIcon,
   getIcons,
+  insertIcon,
 };
 
 export default defaultExport;

server/services/octicons.ts

@@ -0,0 +1,28 @@
+import octicons, { IconName } from '@primer/octicons';
+
+/**
+ * Check if a slug exists in Octicons and return the icon if it does
+ * @param {string} slug The slug to look for
+ * @returns {Object} The icon data if it exists, null otherwise
+ */
+async function getIcon(slug: string):
+  Promise<{ slug: string, type: string, data: string } | null> {
+  const normalized = slug.toLowerCase();
+  if (!(normalized in octicons)) {
+    return null;
+  }
+  const icon = octicons[normalized as IconName];
+  // add 'xmlns' attribute to the svg
+  const svg = icon.toSVG().replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+  return {
+    slug: icon.symbol,
+    type: 'svg+xml',
+    data: Buffer.from(svg, 'utf8').toString('base64'),
+  };
+}
+
+const defaultExport = {
+  getIcon,
+};
+
+export default defaultExport;

server/services/logoColor.ts renamed to server/services/setLogoColor.ts

@@ -306,6 +306,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@primer/octicons@^17.2.0":
+  version "17.2.0"
+  resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-17.2.0.tgz#6e9be44484100e069006958f28dc75eaba55b1ed"
+  integrity sha512-A3YetVbJX5J4JGa2AfVrEl1lE3FtT+7HdSzphFRs1QF5OgsUpkNbyjvVxeCxVZaG6zXYbbbPWsPF06PtsIyUWQ==
+  dependencies:
+    object-assign "^4.1.1"
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -375,6 +382,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.34.tgz#3b0b6a50ff797280b8d000c6281d229f9c538cef"
   integrity sha512-XImEz7XwTvDBtzlTnm8YvMqGW/ErMWBsKZ+hMTvnDIjGCKxwK5Xpc+c/oQjOauwq8M4OS11hEkpjX8rrI/eEgA==
 
+"@types/primer__octicons@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/primer__octicons/-/primer__octicons-17.0.0.tgz#b065b6dfb36ad8f1ab27a9f7f59d1ceb448221d5"
+  integrity sha512-o7EF2Zvih38CT02oH+HxawZ/Wr6TS3lngcc0cq/WDVlfuPi08Nk3o3Rv78BUhhZefwMpiln81L9X1S4JEKi3jg==
+
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -2527,10 +2539,10 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@^4.6.4:
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
-  integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
+typescript@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"
+  integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"