improve html.jsx

fix: issue-497

src/components/__tests__/__snapshots__/addons.test.js.snap

@@ -368,7 +368,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -385,6 +385,7 @@ exports[`Addons should render Customize Badges 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <XCircleIcon
             className="transform scale-100 md:scale-125"
@@ -515,6 +516,7 @@ exports[`Addons should render Customize Badges 1`] = `
               >
                 Preview: 
                 <img
+                  alt="profile-visitors-count"
                   src="https://komarev.com/ghpvc/?username=undefined&label=Profile%20views&color=0e75b6&style=flat"
                 />
               </span>
@@ -543,7 +545,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -595,7 +597,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -612,6 +614,7 @@ exports[`Addons should render Customize Badges 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -685,7 +688,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -702,6 +705,7 @@ exports[`Addons should render Customize Badges 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -763,7 +767,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -780,6 +784,7 @@ exports[`Addons should render Customize Badges 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -831,7 +836,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -861,7 +866,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -891,7 +896,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -921,7 +926,7 @@ exports[`Addons should render Customize Badges 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1070,7 +1075,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1087,6 +1092,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -1138,7 +1144,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1190,7 +1196,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1207,6 +1213,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <XCircleIcon
             className="transform scale-100 md:scale-125"
@@ -1406,7 +1413,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
                   type="checkbox"
                 />
                 <span
-                  class="checkbox-label__control"
+                  className="checkbox-label__control"
                 />
               </label>
               <label
@@ -1483,7 +1490,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1500,6 +1507,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -1561,7 +1569,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1578,6 +1586,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -1629,7 +1638,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1659,7 +1668,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1689,7 +1698,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1719,7 +1728,7 @@ exports[`Addons should render Customize Github stats card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1868,7 +1877,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1885,6 +1894,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -1936,7 +1946,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -1988,7 +1998,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -2005,6 +2015,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -2078,7 +2089,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -2095,6 +2106,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <XCircleIcon
             className="transform scale-100 md:scale-125"
@@ -2294,7 +2306,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
                   type="checkbox"
                 />
                 <span
-                  class="checkbox-label__control"
+                  className="checkbox-label__control"
                 />
               </label>
               <label
@@ -2359,7 +2371,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -2376,6 +2388,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
               "outline": "none",
             }
           }
+          type="button"
         >
           <ToolsIcon
             className="transform scale-100 md:scale-125"
@@ -2427,7 +2440,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -2457,7 +2470,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -2487,7 +2500,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"
@@ -2517,7 +2530,7 @@ exports[`Addons should render Customize Top Skills Card 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <span
             className="pl-4"

src/components/__tests__/__snapshots__/footer.test.js.snap

@@ -24,8 +24,7 @@ exports[`Footer component renders correctly 1`] = `
           <div
             className="mr-2 sm:mr-0"
           >
-            GitHub Profile
+            GitHub Profile 
-             
             <img
               alt="github profile markdown generator logo"
               className="inline sm:hidden h-12"

src/components/__tests__/__snapshots__/markdown.test.js.snap

@@ -35,6 +35,7 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -51,24 +52,30 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -181,7 +188,13 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -211,7 +224,19 @@ exports[`Markdown renders devDynamicBlogs is true 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -250,6 +275,7 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -266,24 +292,30 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -396,7 +428,13 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -426,7 +464,19 @@ exports[`Markdown renders githubProfileTrophy is true 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -465,6 +515,7 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -481,24 +532,30 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -611,7 +668,13 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -641,7 +704,19 @@ exports[`Markdown renders githubProfileTrophy is true 2`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -680,6 +755,7 @@ exports[`Markdown renders topLanguages is true 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -696,24 +772,30 @@ exports[`Markdown renders topLanguages is true 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -826,7 +908,13 @@ exports[`Markdown renders topLanguages is true 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -856,7 +944,19 @@ exports[`Markdown renders topLanguages is true 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -895,6 +995,7 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -911,24 +1012,30 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -1041,7 +1148,13 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -1071,7 +1184,19 @@ exports[`Markdown renders topLanguages is true and githubStats is true 1`] = `
     }
     show={true}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -1110,6 +1235,7 @@ exports[`Markdown renders twitterBadge is true 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -1126,24 +1252,30 @@ exports[`Markdown renders twitterBadge is true 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -1256,7 +1388,13 @@ exports[`Markdown renders twitterBadge is true 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -1286,7 +1424,19 @@ exports[`Markdown renders twitterBadge is true 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -1325,6 +1475,7 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -1341,24 +1492,30 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -1471,7 +1628,13 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -1501,7 +1664,19 @@ exports[`Markdown renders visitorsBadge is true 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -1540,6 +1715,7 @@ exports[`Markdown renders without link.currentWork 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -1554,23 +1730,32 @@ exports[`Markdown renders without link.currentWork 1`] = `
     project=""
   />
   <DisplayWork
+    link=""
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -1683,7 +1868,13 @@ exports[`Markdown renders without link.currentWork 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -1713,7 +1904,19 @@ exports[`Markdown renders without link.currentWork 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -1752,6 +1955,7 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -1768,24 +1972,30 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -1898,7 +2108,13 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -1928,7 +2144,19 @@ exports[`Markdown renders without prefix.title and data.title 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;
 
@@ -1967,6 +2195,7 @@ exports[`Markdown renders without subtitle 1`] = `
     project="currentWork"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -1983,24 +2212,30 @@ exports[`Markdown renders without subtitle 1`] = `
   <DisplayWork
     link="portfolio"
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link="blog"
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
     link="resume"
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />
@@ -2113,7 +2348,13 @@ exports[`Markdown renders without subtitle 1`] = `
       }
     }
   />
-  <DisplaySupport />
+  <DisplaySupport
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <DisplayTopLanguages
     options={
       Object {
@@ -2143,6 +2384,18 @@ exports[`Markdown renders without subtitle 1`] = `
     }
     show={false}
   />
-  <DisplayStreakStats />
+  <DisplayStreakStats
+    options={
+      Object {
+        "bgColor": "",
+        "cacheSeconds": "",
+        "hideBorder": "",
+        "locale": "",
+        "textColor": "",
+        "theme": "",
+        "titleColor": "",
+      }
+    }
+  />
 </div>
 `;

src/components/__tests__/__snapshots__/markdownPreview.test.js.snap

@@ -7,7 +7,7 @@ exports[`DisplaySocial Preview renders correctly 1`] = `
   target="blank"
 >
   <img
-    alt="props.username"
+    alt="username"
     className="w-6 h-6"
     src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
   />
@@ -219,6 +219,9 @@ exports[`Markdown Preview renders correctly 1`] = `
           "twitter": "",
           "youtube": "",
         },
+        "support": Object {
+          "buyMeACoffee": "",
+        },
       }
     }
   />
@@ -254,7 +257,13 @@ exports[`Markdown Preview renders correctly 1`] = `
   <SkillsPreview
     skills={Object {}}
   />
-  <SupportPreview />
+  <SupportPreview
+    support={
+      Object {
+        "buyMeACoffee": "",
+      }
+    }
+  />
   <div
     className="block sm:flex sm:justify-center sm:items-start"
   >
@@ -290,6 +299,8 @@ exports[`Markdown Preview renders correctly 1`] = `
     />
     <StreakStatsPreview
       github=""
+      options={Object {}}
+      show={false}
     />
   </div>
 </div>
@@ -504,8 +515,9 @@ exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
 >
    
   <a
-    href="https://twitter.com/\${props.twitter}"
+    href="https://twitter.com/"
-    target="blank"
+    rel="noreferrer"
+    target="_blank"
   >
     <img
       alt=""
@@ -541,6 +553,7 @@ exports[`Work Preview renders correctly 1`] = `
     project="readme-generator"
   />
   <DisplayWork
+    link=""
     prefix="🌱 I’m currently learning"
     project=""
   />
@@ -555,26 +568,32 @@ exports[`Work Preview renders correctly 1`] = `
     project=""
   />
   <DisplayWork
+    link=""
     prefix="💬 Ask me about"
     project=""
   />
   <DisplayWork
     link=""
     prefix="👨‍💻 All of my projects are available at"
+    project=""
   />
   <DisplayWork
     link=""
     prefix="📝 I regularly write articles on"
+    project=""
   />
   <DisplayWork
     link=""
     prefix="📄 Know about my experiences"
+    project=""
   />
   <DisplayWork
+    link=""
     prefix="📫 How to reach me"
     project=""
   />
   <DisplayWork
+    link=""
     prefix="⚡ Fun fact"
     project=""
   />

src/components/__tests__/__snapshots__/skills.test.js.snap

@@ -61,7 +61,7 @@ exports[`Skills renders correctly 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <img
             alt="javascript"
@@ -104,7 +104,7 @@ exports[`Skills renders correctly 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <img
             alt="react"
@@ -133,7 +133,7 @@ exports[`Skills renders correctly 1`] = `
             type="checkbox"
           />
           <span
-            class="checkbox-label__control"
+            className="checkbox-label__control"
           />
           <img
             alt="svelte"

src/html.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function HTML(props) {
-  return (
-    <html {...props.htmlAttributes}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        {props.headComponents}
-        <script
-          data-name="BMC-Widget"
-          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
-          data-id="rahuldkjain"
-          data-description="Support me on Buy me a coffee!"
-          data-message="Loved the tool🚀. Buy me a coffee to support the work!"
-          data-color="#FF813F"
-          data-position=""
-          data-x_margin="18"
-          data-y_margin="18"
-        ></script>
-      </head>
-      <body {...props.bodyAttributes}>
-        {props.preBodyComponents}
-        <div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{ __html: props.body }} />
-        {props.postBodyComponents}
-      </body>
-    </html>
-  );
-}
-
-HTML.propTypes = {
-  htmlAttributes: PropTypes.object,
-  headComponents: PropTypes.array,
-  bodyAttributes: PropTypes.object,
-  preBodyComponents: PropTypes.array,
-  body: PropTypes.string,
-  postBodyComponents: PropTypes.array,
-};

src/html.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function HTML(props) {
+  const { htmlAttributes, headComponents, bodyAttributes, preBodyComponents, postBodyComponents, body } = props;
+  return (
+    <html {...htmlAttributes} lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        {headComponents}
+        <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Loved the tool🚀. Buy me a coffee to support the work!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18" />
+      </head>
+      <body {...bodyAttributes}>
+        {preBodyComponents}
+        <div key="body" id="___gatsby" dangerouslySetInnerHTML={{ __html: body }} />
+        {postBodyComponents}
+      </body>
+    </html>
+  );
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object.isRequired,
+  headComponents: PropTypes.array.isRequired,
+  bodyAttributes: PropTypes.object.isRequired,
+  preBodyComponents: PropTypes.array.isRequired,
+  body: PropTypes.string.isRequired,
+  postBodyComponents: PropTypes.array.isRequired,
+};