added the support of base64 svg logos

0l1v3rr · 0l1v3rr · commit 822e7d7901f6 · 2022-11-27T15:14:14.000+01:00
diff --git a/.editorconfig b/.editorconfig
@@ -1,6 +1,6 @@
 [*]
 charset = utf-8
-insert_final_newline = false
+insert_final_newline = true
 end_of_line = lf
 indent_style = space
 indent_size = 2
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@
   - [📚 Adding a new theme](#-adding-a-new-theme)
 - [🧠 Tips](#-tips)
   - [🪢 Align the card in the markdown](#-align-the-card-in-the-markdown)
+  - [🎭 Adding custom SVG logo](#-adding-custom-svg-logo)
 - [⚒️ Building from source](#️-building-from-source)
 - [📝 License](#-license)
 - [🧑‍🤝‍🧑 Contributing](#-contributing)
@@ -222,6 +223,16 @@ If you're using markdown, you may want to align your cards. There's an easy way
 <img align="center" src="https://github-readme-tech-stack.vercel.app/api/cards" alt="My Tech Stack" />
 ```
 
+### 🎭 Adding custom SVG logo
+Let's assume that you have a [line created](#-how-to-customize-a-line) and want to use your own SVGs. We support that using [Base64](https://en.wikipedia.org/wiki/Base64) format.  
+**[\*](https://stackoverflow.com/questions/38985050/how-do-i-use-the-logo-option-in-shields-io-badges) Here's an easy 3-step guide:**
+1. Download the image and use one of the many online tools, e.g. [http://b64.io/](http://b64.io/), to encode it.
+2. Encode the Base64 string in [percent-encoding](https://en.wikipedia.org/wiki/Percent-encoding). Take the Base64 string and use one of the many online tools, e.g. [http://meyerweb.com/eric/tools/dencoder/](http://meyerweb.com/eric/tools/dencoder/), to encode the string.
+3. Finally, replace the first element of the badge (the `logoName`) with this string. (e.g `<Base64>,typescript,2D79C7;`)
+
+>> **Note**  
+>> Sometimes the encoded string, of either step 2 or 3, may be too long to be used. You should then try to reduce the size (total pixels) of the image and try again.
+
 <hr>
 
 ## ⚒️ Building from source
@@ -262,4 +273,4 @@ I was inspired by dozens of other projects, check 'em out as well!
 - [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)
 - [github-profile-summary-cards](https://github.com/vn7n24fzkq/github-profile-summary-cards)
 - [markdown-badges](https://github.com/Ileriayo/markdown-badges)
-- [shields.io](https://shields.io/)
+- [shields.io](https://shields.io/)
diff --git a/client/package.json b/client/package.json
@@ -3,25 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.6.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.9.3",
-    "web-vitals": "^2.1.4"
+    "typescript": "^4.9.3"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "react-scripts build"
   },
   "eslintConfig": {
     "extends": [
diff --git a/client/public/index.html b/client/public/index.html
@@ -22,9 +22,7 @@
     <meta name="coverage" content="Worldwide" />
     <meta name="distribution" content="Global" />
     <meta name="rating" content="General" />
-    <title>
-      GitHub Readme Tech Stack
-    </title>
+    <title>GitHub Readme Tech Stack</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "github-readme-tech-stack",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "src/app.ts",
   "scripts": {
diff --git a/src/utils/validator.ts b/src/utils/validator.ts
@@ -49,6 +49,9 @@ export const validateAlign = (align: string): BadgeAlign => {
  * @returns {Badge[]} The converted badges
  */
 export const validateLine = (line: string): Badge[] => {
+  // replace the comma and the semicolon if the line contains "base64"
+  line = line.replace(";base64,", "-base64-");
+
   // split the line by semicolon
   // each item in this array is one single badge
   const splitBySemi = line.split(";");
@@ -65,15 +68,19 @@ export const validateLine = (line: string): Badge[] => {
   for (const badgeLine of splitBySemi) {
     // this should have 3 items
     const splitByComma = badgeLine.split(",");
+
     if (splitByComma.length !== 3) {
       continue;
     }
 
+    // add the comma and the semicolon back
+    const logoName = splitByComma[0].replace("-base64-", ";base64,");
+
     const logoColor =
       splitByComma[2] === "auto" ? "" : formatHexColor(splitByComma[2]);
 
     badges.push({
-      logoName: splitByComma[0],
+      logoName: logoName,
       label: splitByComma[1],
       logoColor: logoColor,
     });

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "github-readme-tech-stack",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.1.0",`
`4`	`4`	`"description": "",`
`5`	`5`	`"main": "src/app.ts",`
`6`	`6`	`"scripts": {`