done

ArnavK-09 · Oct 31, 2024 · 3f96429 · 3f96429
1 parent e0286fe
commit 3f96429
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <div align="center">
     <img src="https://github.com/github.png" width="130" height="130" style="display: block; margin: 0 auto;"/>
-    <h1>Add Github Badge</h1>
+    <h1>🦡 Add Github Badge 🦡</h1>
     <p><code>addGithubBadge</code> is a simple yet powerful JavaScript library designed to effortlessly add a GitHub badge to any website. With just a script import and a few initialization options, you can display a beautiful badge that showcases your GitHub profile information, enhancing your site's interactivity and providing visitors with quick access to your GitHub profile.</p>
 </div>
 
@@ -17,12 +17,18 @@
 
 To include the `addGithubBadge` library in your website, add the following script tag in your HTML:
 
-###### your website root .html
+###### your website root html
 
 ```html
-<script src="{CDN_URL}/addGithubBadge.js"></script>
+<script
+  src="https://cdn.jsdelivr.net/gh/ArnavK-09/add-github-badge@main/dist/main.js"
+  async
+  defer
+></script>
 ```
 
+- **🍻 CDN URL:- https://cdn.jsdelivr.net/gh/ArnavK-09/add-github-badge@main/dist/main.js**
+
 ## 🚀 Usage
 
 ### 🚄 Quick Setup

diff --git a/dist/main.js b/dist/main.js
@@ -95,7 +95,7 @@ var __addGithubBadge_Popup = function (user, props) {
  *
  */
 var __addGithubBadge_Styles = function () {
-    return "\n  /* Popup styles */\n  #__addGithubBadge_popup {\n    font-family: \"Lucida Console\", \"Courier New\", monospace;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n    overflow-x: hidden;\n    padding: 1rem;\n    width: 16rem;\n    overflow-wrap: break-word;\n    border-radius: 0.7rem 0.7rem 0 0;\n    margin-left: 0.2rem;\n    background-color: #000000;\n    position: fixed;\n    bottom: 0rem;\n    z-index: 60;\n    color: white;\n    transform: translateY(130%);\n    transition-timing-function: ease-in;\n    transition: 0.4s;\n  }\n  \n  .__addGithubBadge_popup_open {\n    transition: 0.4s !important;\n    transition-timing-function: ease-out !important;\n    transform: translateY(0) !important;\n  }\n  \n  #__addGithubBadge_cross_btn {\n    cursor: pointer;\n    margin-top: -0.25rem;\n    font-weight: 700;\n    text-align: right;\n  }\n  \n  /* Popup trigger btn */\n  #__addGithubBadge_popup_trigger_btn {\n    font-family: \"Lucida Console\", \"Courier New\", monospace;\n    display: inline-flex;\n    position: fixed;\n    bottom: 0rem;\n    z-index: 50;\n    padding: 0.3rem 0.55rem;\n    left: 1rem;\n    border-radius: 10px 10px 0 0;\n    color: #ffffff;\n    background-color: #000000;\n    cursor: pointer;\n    user-select: none;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n    transition-property: background-color, border-color, color, fill, stroke,\n      opacity, box-shadow, transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    p {\n      font-size: 12px; \n      font-weight: 700; \n      letter-spacing: 0.025em;\n      line-height: 0px;\n      text-overflow: ellipsis;\n    }\n    img {\n      aspect-ratio: 1 / 1;\n      border-radius: 9999px;\n      height: 24px;\n      margin-right: 0.5rem;\n    }\n  }\n  \n  #__addGithubBadge_popup_trigger_btn:hover {\n    border-bottom-right-radius: 0.2rem;\n    border-bottom-left-radius: 0.2rem;\n  }\n  \n  \n  .__addGithubBadge_popup_details > summary {\n    cursor: pointer;\n    user-select: none;\n    font-size: 0.975rem;\n    opacity: 0.9;\n    font-weight: 500;\n    margin-top: 1rem;\n    margin-bottom: 0.5rem;\n    text-align: left;\n    text-decoration: underline;\n    text-underline-offset: 4px;\n  }\n  \n  .__addGithubBadge_popup_desc {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n  \n  .__addGithubBadge_popup_avatar {\n    margin-bottom: 0.3rem;\n    aspect-ratio: 1 / 1;\n    border-radius: 9999px;\n    height: fit-content;\n    margin-right: 0.5rem;\n  }\n  \n  .__addGithubBadge_popup_txt_w_icon {\n    opacity: 0.8;\n    display: flex;\n    justify-content: center;\n    margin-bottom: 0.8em;\n    align-items: center;\n    font-size: 0.75rem;\n    height: fit-content;\n    text-align: center;\n    vertical-align: middle;\n    svg {\n      width: 0.9rem;\n      height: 0.9rem;\n      margin-right: 0.1rem;\n    }\n  }\n  \n  .__addGithubBadge_bio {\n    margin-top: 0.5rem;\n  }\n  \n  .__addGithubBadge_bio > details > p {\n    user-select: none;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    margin-top: 0.55rem;\n    font-weight: 400;\n    letter-spacing: 0.005em;\n    overflow-wrap: break-word;\n    opacity: 0.9;\n    text-decoration: none;\n  }\n  \n  #__addGithubBadge_links {\n    ul {\n      user-select: none;\n      width: 100%;\n      margin-top: 1rem;\n    }\n    li {\n      display: flex;\n      align-items: left;\n      text-align: left;\n      height: fit-content;\n    }\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n    a {\n      font-weight: 425;\n      font-size: 0.9rem;\n      line-height: 1.25rem;\n      color: white;\n      filter: brightness(125);\n      text-decoration: none;\n    }\n    span {\n      margin-right: 0.25rem;\n    }\n  }\n  \n  #__addGithubBadge_projects {\n    border-radius: 0.6rem;\n    margin-right: -0.67rem;\n    margin-top: 0.67rem;\n    display: flex;\n    overflow-x: scroll;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    height: fit-content;\n  }\n  \n  #__addGithubBadge_popup_img {\n    height: 7em;\n    width: auto;\n    aspect-rato: 1 / 1;\n  }\n  \n  .__addGithubBadge_overview_upper {\n    padding-bottom: 0.3rem;\n    display: grid;\n    place-items: center;\n    p {\n      margin-top: 1rem;\n      font-weight: 550;\n      font-size: 0.75rem;\n      letter-spacing: 0.025em;\n      color: #d1d5db;\n      line-height: 0;\n    }\n    h3 {\n      font-weight: 700;\n      font-size: 1.125rem;\n      margin-top: 10px;\n      line-height: 0;\n    }\n  }\n  \n  /* Hide scrollbar for Chrome, Safari and Opera */\n  .__addGithubBadge_noscrollbar::-webkit-scrollbar {\n    display: none;\n  }\n  \n  /* Hide scrollbar for IE, Edge and Firefox */\n  .__addGithubBadge_noscrollbar {\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n  \n  /* Misc addGithubBadge */\n  .__addGithubBadge_hr {\n    margin-top: 0.3rem;\n    border-width: 0;\n    height: 1px;\n    background-color: #e5e7eb;\n    opacity: 0.3;\n  }\n  .__addGithubBadge_select_none {\n    user-select: none;\n  }  \n  ";
+    return "\n  /* Popup styles */\n  #__addGithubBadge_popup {\n    font-family: \"Lucida Console\", \"Courier New\", monospace;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n    overflow-x: hidden;\n    padding: 1rem;\n    width: 16rem;\n    overflow-wrap: break-word;\n    border-radius: 0.7rem 0.7rem 0 0;\n    background-color: #000000;\n    position: fixed;\n    left: 0.9rem;\n    bottom: 0rem;\n    z-index: 60;\n    color: white;\n    transform: translateY(130%);\n    transition-timing-function: ease-in;\n    transition: 0.4s;\n  }\n  \n  .__addGithubBadge_popup_open {\n    transition: 0.4s !important;\n    transition-timing-function: ease-out !important;\n    transform: translateY(0) !important;\n  }\n  \n  #__addGithubBadge_cross_btn {\n    cursor: pointer;\n    margin-top: -0.25rem;\n    font-weight: 700;\n    text-align: right;\n  }\n  \n  /* Popup trigger btn */\n  #__addGithubBadge_popup_trigger_btn {\n    font-family: \"Lucida Console\", \"Courier New\", monospace;\n    display: inline-flex;\n    position: fixed;\n    bottom: 0rem;\n    z-index: 50;\n    padding: 0.3rem 0.55rem;\n    left: 1rem;\n    border-radius: 10px 10px 0 0;\n    color: #ffffff;\n    background-color: #000000;\n    cursor: pointer;\n    user-select: none;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n    transition-property: background-color, border-color, color, fill, stroke,\n      opacity, box-shadow, transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 500ms;\n    p {\n      font-size: 12px; \n      font-weight: 700; \n      letter-spacing: 0.025em;\n      line-height: 0px;\n      text-overflow: ellipsis;\n    }\n    img {\n      aspect-ratio: 1 / 1;\n      border-radius: 9999px;\n      height: 24px;\n      margin-right: 0.5rem;\n    }\n  }\n  \n  #__addGithubBadge_popup_trigger_btn:hover {\n    border-bottom-right-radius: 0.2rem;\n    border-bottom-left-radius: 0.2rem;\n  }\n  \n  \n  .__addGithubBadge_popup_details > summary {\n    cursor: pointer;\n    user-select: none;\n    font-size: 0.975rem;\n    opacity: 0.9;\n    font-weight: 500;\n    margin-top: 1rem;\n    margin-bottom: 0.5rem;\n    text-align: left;\n    text-decoration: underline;\n    text-underline-offset: 4px;\n  }\n  \n  .__addGithubBadge_popup_desc {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n  \n  .__addGithubBadge_popup_avatar {\n    margin-bottom: 0.3rem;\n    aspect-ratio: 1 / 1;\n    border-radius: 9999px;\n    height: fit-content;\n    margin-right: 0.5rem;\n  }\n  \n  .__addGithubBadge_popup_txt_w_icon {\n    opacity: 0.8;\n    display: flex;\n    justify-content: center;\n    margin-bottom: 0.8em;\n    align-items: center;\n    font-size: 0.75rem;\n    height: fit-content;\n    text-align: center;\n    vertical-align: middle;\n    svg {\n      width: 0.9rem;\n      height: 0.9rem;\n      margin-right: 0.1rem;\n    }\n  }\n  \n  .__addGithubBadge_bio {\n    margin-top: 0.5rem;\n  }\n  \n  .__addGithubBadge_bio > details > p {\n    user-select: none;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    margin-top: 0.55rem;\n    font-weight: 400;\n    letter-spacing: 0.005em;\n    overflow-wrap: break-word;\n    opacity: 0.9;\n    text-decoration: none;\n  }\n  \n  #__addGithubBadge_links {\n    ul {\n      user-select: none;\n      width: 100%;\n      margin-top: 1rem;\n    }\n    li {\n      display: flex;\n      align-items: left;\n      text-align: left;\n      height: fit-content;\n    }\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n    a {\n      font-weight: 425;\n      font-size: 0.9rem;\n      line-height: 1.25rem;\n      color: white;\n      filter: brightness(125);\n      text-decoration: none;\n    }\n    span {\n      margin-right: 0.25rem;\n    }\n  }\n  \n  #__addGithubBadge_projects {\n    border-radius: 0.6rem;\n    margin-right: -0.67rem;\n    margin-top: 0.67rem;\n    display: flex;\n    overflow-x: scroll;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    height: fit-content;\n  }\n  \n  #__addGithubBadge_popup_img {\n    height: 7em;\n    width: auto;\n    aspect-rato: 1 / 1;\n  }\n  \n  .__addGithubBadge_overview_upper {\n    padding-bottom: 0.3rem;\n    display: grid;\n    place-items: center;\n    p {\n      margin-top: 1rem;\n      font-weight: 550;\n      font-size: 0.75rem;\n      letter-spacing: 0.025em;\n      color: #d1d5db;\n      line-height: 0;\n    }\n    h3 {\n      font-weight: 700;\n      font-size: 1.125rem;\n      margin-top: 10px;\n      line-height: 0;\n    }\n  }\n  \n  /* Hide scrollbar for Chrome, Safari and Opera */\n  .__addGithubBadge_noscrollbar::-webkit-scrollbar {\n    display: none;\n  }\n  \n  /* Hide scrollbar for IE, Edge and Firefox */\n  .__addGithubBadge_noscrollbar {\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n  \n  /* Misc addGithubBadge */\n  .__addGithubBadge_hr {\n    margin-top: 0.3rem;\n    border-width: 0;\n    height: 1px;\n    background-color: #e5e7eb;\n    opacity: 0.3;\n  }\n  .__addGithubBadge_select_none {\n    user-select: none;\n  }  \n  ";
 };
 /**
  *
@@ -104,7 +104,7 @@ var __addGithubBadge_Styles = function () {
  */
 function addGithubBadge(props) {
     return __awaiter(this, void 0, void 0, function () {
-        var UTILS, addGithubBadge_GH_REQ, addGithubBadge_GH_USER, addGithubBadge_STYLES, addGithubBadge_TRIGGER_BTN, addGithubBadge_TRIGGER_BTN_TXT, addGithubBadge_POPUP, addGithubBadgePopupHandler;
+        var UTILS, addGithubBadge_GH_REQ, addGithubBadge_GH_USER, addGithubBadge_STYLES, addGithubBadge_TRIGGER_BTN_TXT, addGithubBadgePopupHandler;
         var _a, _b, _c;
         return __generator(this, function (_d) {
             switch (_d.label) {
@@ -147,25 +147,23 @@ function addGithubBadge(props) {
                     addGithubBadge_STYLES.innerHTML = __addGithubBadge_Styles();
                     document.body.appendChild(addGithubBadge_STYLES);
                     UTILS.log("Appended addGithubBadge_STYLES to document body!");
-                    addGithubBadge_TRIGGER_BTN = document.createElement("div");
                     addGithubBadge_TRIGGER_BTN_TXT = ((_a = props.trigger_options) === null || _a === void 0 ? void 0 : _a.text)
                         ? (_b = props.trigger_options) === null || _b === void 0 ? void 0 : _b.text.replace("{{username}}", props.github_username).trim()
                         : "Made by @".concat(props.github_username);
-                    addGithubBadge_TRIGGER_BTN.innerHTML = __addGithubBadge_PopupTriggerBtn(addGithubBadge_TRIGGER_BTN_TXT, addGithubBadge_GH_USER.login);
-                    document.body.appendChild(addGithubBadge_TRIGGER_BTN);
+                    document.documentElement.innerHTML += __addGithubBadge_PopupTriggerBtn(addGithubBadge_TRIGGER_BTN_TXT, addGithubBadge_GH_USER.login);
                     UTILS.log("Appended addGithubBadge_TRIGGER_BTN to document body with content :- ".concat(addGithubBadge_TRIGGER_BTN_TXT));
-                    addGithubBadge_POPUP = document.createElement("div");
-                    addGithubBadge_POPUP.innerHTML = __addGithubBadge_Popup(addGithubBadge_GH_USER, props);
-                    addGithubBadge_POPUP.style.fontFamily = "Lucida Console\", \"Courier New\", monospace";
-                    document.body.appendChild(addGithubBadge_POPUP);
+                    // appending popup
+                    document.documentElement.innerHTML += __addGithubBadge_Popup(addGithubBadge_GH_USER, props);
                     UTILS.log("Appended addGithubBadge_POPUP to document body!");
                     addGithubBadgePopupHandler = function () {
                         var _a;
                         return (_a = document
                             .getElementById("__addGithubBadge_popup")) === null || _a === void 0 ? void 0 : _a.classList.toggle("__addGithubBadge_popup_open");
                     };
                     // configuring handlers
-                    addGithubBadge_TRIGGER_BTN.addEventListener("click", addGithubBadgePopupHandler);
+                    document
+                        .getElementById("__addGithubBadge_popup_trigger_btn")
+                        .addEventListener("click", addGithubBadgePopupHandler);
                     (_c = document
                         .getElementById("__addGithubBadge_cross_btn")) === null || _c === void 0 ? void 0 : _c.addEventListener("click", addGithubBadgePopupHandler);
                     UTILS.log("Configured addGithubBadge Event Handlers!");

diff --git a/docs/index.html b/docs/index.html
@@ -4,11 +4,30 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>addGithubBadge Demo</title>
-    <script src="../dist/main.js"></script>
+    <script
+      async
+      defer
+      src="https://cdn.jsdelivr.net/gh/ArnavK-09/add-github-badge@main/dist/main.js"
+    ></script>
   </head>
   <body>
-    <h1>Hello, World!</h1>
+    <h1>Hello, world!</h1>
   </body>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f0f0f0;
+      color: #0c0c0c;
+      text-align: center;
+      display: grid;
+      min-height: 100vh;
+      overflow-x: hidden;
+      font-weight: 900;
+      place-items: center;
+    }
+  </style>
   <script>
     addGithubBadge("ArnavK-09");
     // addGithubBadge({

diff --git a/lib/main.ts b/lib/main.ts
@@ -176,9 +176,9 @@ const __addGithubBadge_Styles = () => {
     width: 16rem;
     overflow-wrap: break-word;
     border-radius: 0.7rem 0.7rem 0 0;
-    margin-left: 0.2rem;
     background-color: #000000;
     position: fixed;
+    left: 0.9rem;
     bottom: 0rem;
     z-index: 60;
     color: white;
@@ -438,29 +438,24 @@ async function addGithubBadge(props: addGithubBadgeInitProps | string) {
   UTILS.log(`Appended addGithubBadge_STYLES to document body!`);
 
   // creating trigger
-  const addGithubBadge_TRIGGER_BTN = document.createElement("div");
   const addGithubBadge_TRIGGER_BTN_TXT = props.trigger_options?.text
     ? props.trigger_options?.text
         .replace("{{username}}", props.github_username)
         .trim()
     : `Made by @${props.github_username}`;
-  addGithubBadge_TRIGGER_BTN.innerHTML = __addGithubBadge_PopupTriggerBtn(
+  document.documentElement.innerHTML += __addGithubBadge_PopupTriggerBtn(
     addGithubBadge_TRIGGER_BTN_TXT,
     addGithubBadge_GH_USER.login,
   );
-  document.body.appendChild(addGithubBadge_TRIGGER_BTN);
   UTILS.log(
     `Appended addGithubBadge_TRIGGER_BTN to document body with content :- ${addGithubBadge_TRIGGER_BTN_TXT}`,
   );
 
   // appending popup
-  const addGithubBadge_POPUP = document.createElement("div");
-  addGithubBadge_POPUP.innerHTML = __addGithubBadge_Popup(
+  document.documentElement.innerHTML += __addGithubBadge_Popup(
     addGithubBadge_GH_USER,
     props,
   );
-  addGithubBadge_POPUP.style.fontFamily = `Lucida Console", "Courier New", monospace`;
-  document.body.appendChild(addGithubBadge_POPUP);
   UTILS.log(`Appended addGithubBadge_POPUP to document body!`);
 
   // Handlers
@@ -470,10 +465,9 @@ async function addGithubBadge(props: addGithubBadgeInitProps | string) {
       ?.classList.toggle("__addGithubBadge_popup_open");
 
   // configuring handlers
-  addGithubBadge_TRIGGER_BTN.addEventListener(
-    "click",
-    addGithubBadgePopupHandler,
-  );
+  document
+    .getElementById("__addGithubBadge_popup_trigger_btn")
+    .addEventListener("click", addGithubBadgePopupHandler);
   document
     .getElementById("__addGithubBadge_cross_btn")
     ?.addEventListener("click", addGithubBadgePopupHandler);

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "github-badge",
+  "name": "add-github-badge",
   "version": "0.0.1",
   "description": "🦡 Add a customizable GitHub badge to your website...",
   "author": "Arnav K <arnavkaushal09@gmail.com>",