From 3f964298365461fe51e79b08b8039a8f31b25c14 Mon Sep 17 00:00:00 2001 From: ArnavK-09 Date: Thu, 31 Oct 2024 13:25:25 +0000 Subject: [PATCH] done --- README.md | 12 +++++++++--- dist/main.js | 18 ++++++++---------- docs/index.html | 23 +++++++++++++++++++++-- lib/main.ts | 18 ++++++------------ package.json | 2 +- 5 files changed, 45 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 51493be..f52b77d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
-

Add Github Badge

+

🦡 Add Github Badge 🦡

addGithubBadge 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.

@@ -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 - + ``` +- **🍻 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 index e0eb2f8..05c6a99 100644 --- 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,17 +147,13 @@ 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; @@ -165,7 +161,9 @@ function addGithubBadge(props) { .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 index e530a54..25649ee 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,11 +4,30 @@ addGithubBadge Demo - + -

Hello, World!

+

Hello, world!

+