yet-another-github-card 1.0.1 → 1.0.3

package/yagc.js

@@ -0,0 +1,867 @@
+import 'https://cdn.skypack.dev/graphql@15.8.0';
+import 'https://cdn.skypack.dev/graphql-request@6.0.0';
+
+// src/constants.ts
+
+/**
+ * The base URL for the GraphQL API.
+ * @constant
+ */
+const API_GQL_URL = 'https://yagc-api.notesoncloudcomputing.com/api/stats';
+
+/**
+ * The base URL for the npm package.
+ * @constant
+ */
+const NPM_URL = 'https://www.npmjs.com/package/yet-another-github-card';
+
+/**
+ * The npm package name.
+ * @constant
+ */
+const NPM_PKG = 'yet-another-github-card';
+
+/**
+ * The npm package version.
+ * @constant
+ */
+const NPM_VER = 'v1.0';
+
+/**
+ * The default user profile data.
+ * @constant
+ */
+const GH_DEF_COLLECTION = [{name: 'name'}, {name: 'bio'}, {name: 'createdAt'}, {name: 'location'}];
+
+/**
+ * Theme Polygon style CSS Background-image code.
+ * @constant
+ */
+const polygon = `
+background-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTMwMCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iLTEyLjc3NCIgY3k9IjU4NS43MzMiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ibWF0cml4KC0uOTAyNzggMCAwIC0xIDAgNTYwKSIgcj0iNC4xNzQiIG1hc2s9InVybCgjYSkiLz48Y2lyY2xlIGN4PSItMTIuNzc0IiBjeT0iNTg1LjczMyIgZmlsbD0iIzhiOWFkOSIgdHJhbnNmb3JtPSJtYXRyaXgoLS45MDI3OCAwIDAgLTEgMCA1NjApIiByPSI0LjE3NCIgbWFzaz0idXJsKCNiKSIvPjxwYXRoIGZpbGw9IiMwZDIwNDUiIGQ9Ik0tLjAwMyAyOTkuOTc1aDEzMDB2LTMwMGgtMTMwMHoiLz48cGF0aCBkPSJtMTA0MC4zODggNDcuNTI4LTkyLjE1MyA0Ni44MThtOTIuMTUzLTQ2LjgxOEwxMDEwLjQzNi02Ni42M000NjcuMzkyIDg3LjM1bDI5LjI1IDk1LjY3M20tMjkuMjUtOTUuNjczIDk4LjU0NC0zMS45MTZNNDY3LjM5MiA4Ny4zNWwtMy4yMS0xMTYuNzAzbTMuMjEgMTE2LjcwM0wzNTYuMzMgNDcuMzI3TTQ2Ny4zOTIgODcuMzUgMzY4LjE0LTMxLjg0MW0tMTAuNzEgMzUxLjg1NEwzMzcuNDY1IDE3MS43Mm0xOS45NjUgMTQ4LjI5NC0xMzAuNjg5LTE0NS40M20xMDU2Ljc2Mi05OS40MDUtMTIuOTI1LTEwOC45MjNtMTIuOTI1IDEwOC45MjMtMTIzLjYyNi0xNDQuNzNtMTEwLjcgMzUuODA3LTExMC43LTM1LjgwNm0xMTAuNyAzNS44MDYtMjMwLjE5IDgxLjI3M20yMzAuMTktODEuMjczLTI2MC4xNC0zMi44ODRtMjYwLjE0IDMyLjg4NEw5MzIuNzAyLTY2LjM4N20zMzcuODc3IDMyLjY0Mkw5NDguMjM1IDk0LjM0NU0xMTU5Ljg3Ny02OS41NWwtMTQ5LjQ0IDIuOTIybTAgMC03Ny43MzYuMjQybTc3LjczNS0uMjQyTDk0OC4yMzUgOTQuMzQ2bTYyLjIwMS0xNjAuOTc1TDgwNy4wMzItMzcuMjE4bTIwMy40MDQtMjkuNDExTDgwMi43OTYgNDcuNDUzbTE0NS40MzkgNDYuODkzTDkzMi43LTY2LjM4N20wIDAtMTI1LjY2OSAyOS4xN20xMjUuNjctMjkuMTcgMTA3LjY4NiAxMTMuOTE1TTkzMi43LTY2LjM4NyA4MDIuNzk2IDQ3LjQ1M20xMjkuOTA1LTExMy44NCAyMjcuMTc2LTMuMTY0TTgwMi43OTcgNDcuNDUzbDQuMjM1LTg0LjY3bS00LjIzNiA4NC42Ny05My4xNyAzNy4zNW05My4xNy0zNy4zNUw2OTIuMTE4LTQwLjExNW0xMTAuNjc4IDg3LjU2NyAxNDUuNDM5IDQ2Ljg5NE04MDcuMDMyLTM3LjIxOGwtMTE0LjkxNC0yLjg5N20tMTAuMSAyMzkuMDM0IDI3LjYwOC0xMTQuMTE1TTY4Mi4wMiAxOTguOTE5bC0xMDYuMDc0IDI2LjkwN20xMDYuMDc0LTI2LjkwN0w1NjUuOTM2IDU1LjQzNE02ODIuMDIgMTk4LjkxOSA4MDIuNzk2IDQ3LjQ1Mk02ODIuMDIgMTk4LjkybC0xODUuMzc2LTE1Ljg5Nm0xODUuMzc2IDE1Ljg5NiAxMC4wOTktMjM5LjAzNG0wIDAgMTcuNTA4IDEyNC45MTlNNjkyLjExOC00MC4xMTVsLTEzMC45NDUtMjEuNzhtMTMwLjk0NSAyMS43OEw1NjUuOTM2IDU1LjQzNG0xMC4wMSAxNzAuMzkyLTc5LjMwMy00Mi44MDNtNzkuMzAyIDQyLjgwM0w1NjUuOTM2IDU1LjQzNG0xMC4wMSAxNzAuMzkyTDQ2Ny4zOTEgODcuMzVtOTguNTQ0LTMxLjkxNi00Ljc2My0xMTcuMzNtMCAwLTk2Ljk5MSAzMi41NDNtOTYuOTkxLTMyLjU0M0w0NjcuMzkzIDg3LjM1bTkzLjc4LTE0OS4yNDZMMzY4LjE0LTMxLjg0bTE5My4wMzMtMzAuMDU1IDE0OC40NTMgMTQ2LjdtLTIxMi45ODMgOTguMjIgNjkuMjkzLTEyNy41OW0tNjkuMjkzIDEyNy41OS0xNTkuMTc4LTExLjMwNU00NjQuMTgyLTI5LjM1M2wtOTYuMDQyLTIuNDg4bTk2LjA0MiAyLjQ4OCAxMDEuNzU0IDg0Ljc4N00zMzcuNDY1IDE3MS43MTlsLTExMC43MjQgMi44NjRtMTEwLjcyNC0yLjg2NEwzNTYuMzMgNDcuMzI3bTAgMCAxMS44MS03OS4xNjhtLTExLjgxIDc5LjE2OEwyNjUuMDU5IDY1LjAxbTkxLjI3LTE3LjY4MiAxMDcuODUzLTc2LjY4TTM1Ni4zMyA0Ny4zMjcgMjM1LjkyOS03MC4zOTRtMTMyLjIxIDM4LjU1My0xMDMuMDggOTYuODVNMjI2Ljc0IDE3NC41ODNsLTc5LjMxNyAzMC4wNTRtNzkuMzE3LTMwLjA1NEwyNjUuMDYgNjUuMDA5bS0yOS4xMy0xMzUuNDA0LTkyLjEyMyAzOC4wMDNtOTIuMTIzLTM4LjAwMiAyOS4xMyAxMzUuNDAzbS0yOS4xMy0xMzUuNDA0IDEzMi4yMSAzOC41NTRNMTQ3LjQyNSAyMDQuNjM3bC0xLjY2Ni0xNDMuMzAxbTAgMC0xLjk1Mi05My43MjhtMS45NTIgOTMuNzI4IDExOS4zIDMuNjczTTg2LjY5MiAxNzguOTIybDU5LjA2Ny0xMTcuNTg2IiBzdHJva2U9IiMxMDI1N2QiIHN0cm9rZS13aWR0aD0iMS4xOSIgY2xpcC1wYXRoPSJ1cmwoI2MpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjcuOTcgLjAwOSkiLz48cGF0aCBkPSJtMTA0MC4zODggNDcuNTI4LTkyLjE1MyA0Ni44MThtOTIuMTUzLTQ2LjgxOEwxMDEwLjQzNi02Ni42M000NjcuMzkyIDg3LjM1bDI5LjI1IDk1LjY3M20tMjkuMjUtOTUuNjczIDk4LjU0NC0zMS45MTZNNDY3LjM5MiA4Ny4zNWwtMy4yMS0xMTYuNzAzbTMuMjEgMTE2LjcwM0wzNTYuMzMgNDcuMzI3TTQ2Ny4zOTIgODcuMzUgMzY4LjE0LTMxLjg0MW0tMTAuNzEgMzUxLjg1NEwzMzcuNDY1IDE3MS43Mm0xOS45NjUgMTQ4LjI5NC0xMzAuNjg5LTE0NS40M00yMi44NTUgMzUzLjUyNGwtMy40LTE3NC41MzNtMy40IDE3NC41MzMgMTI0LjU2OS0xNDguODg3bTExMzYuMDgtMTI5LjQ2LTEyLjkyNi0xMDguOTIybTEyLjkyNSAxMDguOTIzLTEyMy42MjYtMTQ0LjczbTExMC43IDM1LjgwNy0xMTAuNy0zNS44MDZtMTEwLjcgMzUuODA2LTIzMC4xOSA4MS4yNzNtMjMwLjE5LTgxLjI3My0yNjAuMTQtMzIuODg0bTI2MC4xNCAzMi44ODRMOTMyLjcwMi02Ni4zODdtMzM3Ljg3NyAzMi42NDJMOTQ4LjIzNSA5NC4zNDVNMTE1OS44NzctNjkuNTVsLTE0OS40NCAyLjkyMm0wIDAtNzcuNzM2LjI0Mm03Ny43MzUtLjI0Mkw5NDguMjM1IDk0LjM0Nm02Mi4yMDEtMTYwLjk3NUw4MDcuMDMyLTM3LjIxOG0yMDMuNDA0LTI5LjQxMUw4MDIuNzk2IDQ3LjQ1M20xNDUuNDM5IDQ2Ljg5M0w5MzIuNy02Ni4zODdtMCAwLTEyNS42NjkgMjkuMTdtMTI1LjY3LTI5LjE3IDEwNy42ODYgMTEzLjkxNU05MzIuNy02Ni4zODcgODAyLjc5NiA0Ny40NTNtMTI5LjkwNS0xMTMuODQgMjI3LjE3Ni0zLjE2NE04MDIuNzk3IDQ3LjQ1M2w0LjIzNS04NC42N20tNC4yMzYgODQuNjctOTMuMTcgMzcuMzVtOTMuMTctMzcuMzVMNjkyLjExOC00MC4xMTVtMTEwLjY3OCA4Ny41NjcgMTQ1LjQzOSA0Ni44OTRNODA3LjAzMi0zNy4yMThsLTExNC45MTQtMi44OTdtLTEwLjEgMjM5LjAzNCAyNy42MDgtMTE0LjExNU02ODIuMDIgMTk4LjkxOWwtMTA2LjA3NCAyNi45MDdtMTA2LjA3NC0yNi45MDdMNTY1LjkzNiA1NS40MzRNNjgyLjAyIDE5OC45MTkgODAyLjc5NiA0Ny40NTJNNjgyLjAyIDE5OC45MmwtMTg1LjM3Ni0xNS44OTZtMTg1LjM3NiAxNS44OTYgMTAuMDk5LTIzOS4wMzRtMCAwIDE3LjUwOCAxMjQuOTE5TTY5Mi4xMTgtNDAuMTE1bC0xMzAuOTQ1LTIxLjc4bTEzMC45NDUgMjEuNzhMNTY1LjkzNiA1NS40MzRtMTAuMDEgMTcwLjM5Mi03OS4zMDMtNDIuODAzbTc5LjMwMiA0Mi44MDNMNTY1LjkzNiA1NS40MzRtMTAuMDEgMTcwLjM5Mkw0NjcuMzkxIDg3LjM1bTk4LjU0NC0zMS45MTYtNC43NjMtMTE3LjMzbTAgMC05Ni45OTEgMzIuNTQzbTk2Ljk5MS0zMi41NDNMNDY3LjM5MyA4Ny4zNW05My43OC0xNDkuMjQ2TDM2OC4xNC0zMS44NG0xOTMuMDMzLTMwLjA1NSAxNDguNDUzIDE0Ni43bS0yMTIuOTgzIDk4LjIyIDY5LjI5My0xMjcuNTltLTY5LjI5MyAxMjcuNTktMTU5LjE3OC0xMS4zMDVNNDY0LjE4Mi0yOS4zNTNsLTk2LjA0Mi0yLjQ4OG05Ni4wNDIgMi40ODggMTAxLjc1NCA4NC43ODdNMzM3LjQ2NSAxNzEuNzE5bC0xMTAuNzI0IDIuODY0bTExMC43MjQtMi44NjRMMzU2LjMzIDQ3LjMyN20wIDAgMTEuODEtNzkuMTY4bS0xMS44MSA3OS4xNjhMMjY1LjA1OSA2NS4wMW05MS4yNy0xNy42ODIgMTA3Ljg1My03Ni42OE0zNTYuMzMgNDcuMzI3IDIzNS45MjktNzAuMzk0bTEzMi4yMSAzOC41NTMtMTAzLjA4IDk2Ljg1TTIyNi43NCAxNzQuNTgzbC03OS4zMTcgMzAuMDU0bTc5LjMxNy0zMC4wNTRMMjY1LjA2IDY1LjAwOW0tMjkuMTMtMTM1LjQwNC05Mi4xMjMgMzguMDAzbTkyLjEyMy0zOC4wMDIgMjkuMTMgMTM1LjQwM20tMjkuMTMtMTM1LjQwNCAxMzIuMjEgMzguNTU0TTE0Ny40MjUgMjA0LjYzN2wtMS42NjYtMTQzLjMwMW0wIDAtMS45NTItOTMuNzI4bTEuOTUyIDkzLjcyOCAxMTkuMyAzLjY3M00xOS40NTcgMTc4Ljk5MWwyLjg1Ni0xMTIuNDA0bS0yLjg1NiAxMTIuNDA0IDEyNy45NjggMjUuNjQ2TTE5LjQ1NiAxNzguOTkxIDE0NS43NTggNjEuMzM2TTE5LjQ1NiAxNzguOTkxIDExLjU2NS0yNC41MDNtMTAuNzQ3IDkxLjA5LTEwLjc0Ny05MS4wOW0wIDAgMTMyLjI0MS03Ljg5IiBzdHJva2U9IiMyMzQ4ZTMiIHN0cm9rZS13aWR0aD0iMS4xOSIgY2xpcC1wYXRoPSJ1cmwoI2QpIi8+PGVsbGlwc2UgY3g9Ii0xMjgzLjQ3OSIgY3k9Ii03NS43IiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTk0OC4yMSIgY3k9Ii05NC44NjgiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMTAzOS45NjIiIGN5PSItNDYuOTk3IiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTgwMi43NzIiIGN5PSItNDcuOTc0IiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTY4MS45OTUiIGN5PSItMTk5LjQ0MSIgZmlsbD0iIzhiOWFkOSIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii03MDkuNjAyIiBjeT0iLTg1LjMyNSIgZmlsbD0iIzhiOWFkOSIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii01NzUuOTIxIiBjeT0iLTIyNi4zNDgiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItNTY1LjkxMiIgY3k9Ii01NS45NTYiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItNDk2LjYxOSIgY3k9Ii0xODMuNTQ1IiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTMzNy40NDEiIGN5PSItMTcyLjI0MSIgZmlsbD0iIzhiOWFkOSIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii00NjYuOTQ2IiBjeT0iODYuMzE5IiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xIDEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMzU2LjMwNiIgY3k9Ii00Ny44NDkiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMjI2LjcxNyIgY3k9Ii0xNzUuMTA1IiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTI2NS4wMzUiIGN5PSItNjUuNTMxIiBmaWxsPSIjOGI5YWQ5IiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTE0Ny40IiBjeT0iLTIwNS4xNTkiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMTQ1LjczNCIgY3k9Ii02MS44NTgiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMTkuNDMyIiBjeT0iLTE3OS41MTMiIGZpbGw9IiM4YjlhZDkiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMjIuMjg4IiBjeT0iLTY3LjEwOSIgZmlsbD0iIzhiOWFkOSIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii0xMjE1LjU3NiIgY3k9Ii03NC44NzUiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItODgwLjMwOCIgY3k9Ii05NC4wNDMiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItOTcyLjA2IiBjeT0iLTQ2LjE3MyIgZmlsbD0iIzY4NjJjYiIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii03MzQuODciIGN5PSItNDcuMTUiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItNjE0LjA5MiIgY3k9Ii0xOTguNjE2IiBmaWxsPSIjNjg2MmNiIiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTY0MS43IiBjeT0iLTg0LjUwMSIgZmlsbD0iIzY4NjJjYiIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii01MDguMDE5IiBjeT0iLTIyNS41MjQiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItNDk4LjAxIiBjeT0iLTU1LjEzMSIgZmlsbD0iIzY4NjJjYiIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii00MjguNzE2IiBjeT0iLTE4Mi43MjEiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMjY5LjUzOCIgY3k9Ii0xNzEuNDE3IiBmaWxsPSIjNjg2MmNiIiB0cmFuc2Zvcm09InNjYWxlKC0xKSIgcng9IjMuNzY4IiByeT0iNC4xNzQiLz48ZWxsaXBzZSBjeD0iLTM5OS4wNDQiIGN5PSI4NS40OTUiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEgMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii0yODguNDAzIiBjeT0iLTQ3LjAyNSIgZmlsbD0iIzY4NjJjYiIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGVsbGlwc2UgY3g9Ii0xNTguODE1IiBjeT0iLTE3NC4yODEiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItMTk3LjEzMiIgY3k9Ii02NC43MDciIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItNzkuNDk3IiBjeT0iLTIwNC4zMzUiIGZpbGw9IiM2ODYyY2IiIHRyYW5zZm9ybT0ic2NhbGUoLTEpIiByeD0iMy43NjgiIHJ5PSI0LjE3NCIvPjxlbGxpcHNlIGN4PSItNzcuODMxIiBjeT0iLTYxLjAzNCIgZmlsbD0iIzY4NjJjYiIgdHJhbnNmb3JtPSJzY2FsZSgtMSkiIHJ4PSIzLjc2OCIgcnk9IjQuMTc0Ii8+PGRlZnM+PG1hc2sgaWQ9ImYiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTQ0MHY1NjBIMFoiLz48L21hc2s+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDU2MGgxMzAwLjAwM1YwSDBaIiBzdHJva2Utd2lkdGg9Ii45NSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEuMTA3NjkgMCAwIC0xIDAgNTYwKSIvPjwvbWFzaz48bWFzayBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0iYiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgNTYwaDEzMDAuMDAzVjBIMFoiIHN0cm9rZS13aWR0aD0iLjk1IiB0cmFuc2Zvcm09Im1hdHJpeCgtMS4xMDc2OSAwIDAgLTEgMCA1NjApIi8+PC9tYXNrPjxjbGlwUGF0aCBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9ImQiPjxwYXRoIGZpbGw9IiNmZjAiIHN0cm9rZS13aWR0aD0iNC4xNyIgZD0iTS4wMDQtLjAwOWgxMzAwdjMwMEguMDA0eiIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGNsaXBQYXRoVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBpZD0iYyI+PHBhdGggZmlsbD0iI2ZmMCIgc3Ryb2tlLXdpZHRoPSI0LjE3IiBkPSJNLjAwNC0uMDA5aDEzMDB2MzAwSC4wMDR6Ii8+PC9jbGlwUGF0aD48cmFkaWFsR3JhZGllbnQgaWQ9ImUiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iLjEiLz48c3RvcCBzdG9wLWNvbG9yPSIjMTczNWIzIiBvZmZzZXQ9Ii4yIi8+PHN0b3Agc3RvcC1jb2xvcj0icmdiYSgyMywgNTMsIDE3OSwgMCkiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==")
+`;
+
+/**
+ * Theme Cloud style CSS Background-image code.
+ * @constant
+ */
+const cloud = `
+background-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTMwMC4wMDMiIGhlaWdodD0iMzAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiMxZTMyNjYiIGQ9Ik0wIDIwNC4wODVoMTMwMC4wMDNWLTJIMFoiLz48cGF0aCBkPSJNNjE0LjE5MyA0NS4zMDNjLTE2LjEyLS41Ni0zMy4zNjQgNS4zNzUtNTEuNzMyIDE3LjgwNC02NS4yNC02LjU1NC0xMDEuMzUzIDIwLjgxOC0xMDguMzM0IDgyLjExOC0yLjU5NC0zOC4yNzktMjQuMjYtNTYuMi02NS01My43NjItNDAuOTI2LTI5LjQwNS03Ny4wMzgtMjQuODgxLTEwOC4zMzQgMTMuNTcyLTIyLjg3LTQ2LjM3LTU4Ljk4Mi01OC44MTEtMTA4LjMzNC0zNy4zMjItNDQuNjEtMjUuOTQ1LTgwLjcyMS0xNy45NTktMTA4LjMzNCAyMy45NTUtMzYuMjA3LTYuNjk1LTU3Ljg3NCA2Ljk2Ni02NSA0MC45ODZ2MTYxLjkxbDIuMTY2LTcuNDNjMjMuMjc0LTE4Ljg0MiA0NC45NC0xNy4zMyA2NSA0LjUzOCA3LjU0MS0zMy42MyAyOS4yMDgtNDYuOTAyIDY1LTM5LjgxNyAyNy42NS0xNC43MzYgNDkuMzE2LTkuMTE1IDY1IDE2Ljg2NCAyNC40OS00NC44NSA2MC42MDEtNTUuNzcyIDEwOC4zMzQtMzIuNzY4IDQzLjctMjYuNzk4IDc5LjgxMi0xOS42NyAxMDguMzM0IDIxLjM4NSA0My41ODYtMjYuOSA3OS42OTYtMTkuODc0IDEwOC4zMzIgMjEuMDc4IDkuOTI1LTMxLjM5NiAzMS41OTEtNDIuNDMyIDY1LTMzLjEwNyAxNC41ODktMjcuMDA4IDM2LjI1OC0zMy42NTggNjUuMDAyLTE5Ljk1IDM0LjkwMS03LjkyMyA1Ni41NjggNC41MTIgNjUgMzcuMzA1IDQ0LjkwNC0yNS42NjcgODEuMDE0LTE3LjQwNiAxMDguMzMyIDI0Ljc4NSAyNS45NTgtMTYuMzI2IDQ3LjYyNi0xMi4yOTIgNjUuMDAyIDEyLjA5OCA1LjQ0LTM1LjYwMyAyNy4xMDctNTAuODUgNjUtNDUuNzM4IDEzLjk2My0yNy41OSAzNS42My0zNC44MjcgNjUtMjEuNzA3IDMzLjAzLTkuNjgxIDU0LjY5Ni45OTIgNjUgMzIuMDIxIDQ1LjgwNy0yNC44MiA4MS45MTktMTUuNzExIDEwOC4zMzQgMjcuMzIyIDE1LjE3NC01Mi45NjggNTAuODIyLTcyLjUyNyAxMDYuODEyLTU4Ljg5NlYxMDMuNzAzYy0uMjIzLjA2My0uNDIuMDgtLjY0NC4xNDUtMTcuMDItMjQuNzE4LTM4LjY4Ny0yOS4wOC02NS0xMy4wODgtNDUuOTIxLTI0LjcxOC04Mi4wMzMtMTUuNTAzLTEwOC4zMzQgMjcuNjQ0LTIwLjk0NS00OC4xODUtNTcuMDU2LTYyLjQzOS0xMDguMzM0LTQyLjc2LTQ3LjEwNy0yMy41OTctODMuMjE5LTEzLjI2Ni0xMDguMzM0IDMwLjk5NS0xOC40MS0yMy40MTctNDAuMDc3LTI2LjQ3Ni02NS05LjE3OC0zNC4zNzgtOC40MTUtNTYuMDQ0IDMuNTMtNjUgMzUuODMtMTcuMDg3LTUxLjc5OS01My4xOTgtNjkuNjcxLTEwOC4zMzQtNTMuNjE3LTE3LjAwOC0yMi4xOTMtMzUuODc0LTMzLjY1MS01Ni42LTM0LjM3MVoiIGZpbGw9IiMxODJmNWQiLz48cGF0aCBkPSJNNTQ2LjUxNiAxMjAuNTM3Yy04LjUxNC40NDYtMTcuNjExIDMuNzU1LTI3LjI5MSA5LjkyNi0yOS44NjQtMTIuNjUtNTEuNTMtNC45NDYtNjUgMjMuMTEzLTE3LjI0My0yNC41MDgtMzguOTEtMjguNjYyLTY1LTEyLjQ2LTUyLjYwOC0xOC40My04OC43Mi0yLjkyOC0xMDguMzM0IDQ2LjUwMS00MC41OTUtMjkuNzE3LTc2LjcwNy0yNS41MDYtMTA4LjMzNCAxMi42MzctMjIuODc3LTQ2LjM1OS01OC45ODgtNTguNzktMTA4LjMzNC0zNy4yOTUtMTcuNjQtMjQuMTQ3LTM5LjMwNy0yNy45MzQtNjUtMTEuMzZ2MTQyLjIxNUwxLjIgMjg3LjAzYzIzLjI3NC0xOC44NDIgNDQuOTQtMTcuMzI4IDY1IDQuNTQgNy41NDEtMzMuNjMgMjkuMjA4LTQ2LjkwMyA2NS0zOS44MTcgMjcuNjUtMTQuNzM3IDQ5LjMxNi05LjExNSA2NSAxNi44NjMgMjQuNDktNDQuODQ5IDYwLjYwMS01NS43NzEgMTA4LjMzNC0zMi43NjcgNDMuNy0yNi43OTkgNzkuODEtMTkuNjcyIDEwOC4zMzIgMjEuMzgyIDQzLjU4Ni0yNi45IDc5LjY5OC0xOS44NzIgMTA4LjMzNCAyMS4wOCA5LjkyNS0zMS4zOTYgMzEuNTkxLTQyLjQzMiA2NS0zMy4xMDcgMTQuNTktMjcuMDA4IDM2LjI1Ni0zMy42NTcgNjUtMTkuOTUgMzQuOTAyLTcuOTIyIDU2LjU2OCA0LjUxMyA2NSAzNy4zMDYgNDQuOTA0LTI1LjY2OCA4MS4wMTYtMTcuNDA3IDEwOC4zMzQgMjQuNzg1IDI1Ljk1OC0xNi4zMjYgNDcuNjI1LTEyLjI5NSA2NSAxMi4wOTUgNS40NC0zNS42MDMgMjcuMTA4LTUwLjg0OCA2NS00NS43MzYgMTMuOTYzLTI3LjU5IDM1LjYzLTM0LjgyNiA2NS0yMS43MDcgMzMuMDMtOS42OCA1NC42OTguOTkzIDY1LjAwMiAzMi4wMjIgNDUuODA3LTI0LjgyIDgxLjkxNy0xNS43MTQgMTA4LjMzMiAyNy4zMiAxNS4yMDItNTMuMDY0IDUwLjkxMS03Mi42NjYgMTA3LjA3Ni01OC44OXYtNTIuNjljLS4yNDUuMTM3LS40NzMuMjExLS43MTguMzUxLTIyLjE5LTQ3LjAwOS01OC4zMDMtNjAuMDg1LTEwOC4zMzQtMzkuMjMtNTUuMTA2LTE2LjA4My05MS4yMTggMS43Ni0xMDguMzM0IDUzLjUzMS0xNC4yMjItMjcuMzQ3LTM1Ljg4OS0zNC4zNC02NS0yMC45NzYtMjEuMjM0LTQ3LjkwMy01Ny4zNDUtNjEuODc5LTEwOC4zMzQtNDEuOTI4LTI5LjM2NS0xMy4xMi01MS4wMzEtNS44ODUtNjUgMjEuNzA1LTE4LjU2Mi0yMy4yNzYtNDAuMjI4LTI2LjE5NC02NS04Ljc1NC00MC4yMDQtMi45MzUtNjEuODcgMTQuNDg3LTY1IDUyLjI2Mi0xMy4wMTItMjguNDktMzQuNjgtMzYuNjItNjUtMjQuMzg5LTEwLjk2Ni0zMC40MTItMzIuNjMzLTQwLjQ2Ny02NS0zMC4xNy0xMC45NS0xNS4xNTgtMjMuNTItMjIuMzY2LTM3LjcxLTIxLjYyM3oiIGZpbGw9IiMyNTQ2N2QiLz48cGF0aCBkPSJNMTA1Ny4zMTIgMTcyLjczNGMtMjQuMTQ2LjYyNC00NC4zNSAxNC41MDEtNjAuNjExIDQxLjYzLTI5LjUzMy00MC4xMS02NS42NDUtNDYuMjkzLTEwOC4zMzQtMTguNTUtMzQuMzEyLTguNDc2LTU1Ljk3OSAzLjQwNi02NSAzNS42NS0yNy41MjMtMTQuODU1LTQ5LjE5LTkuMzUyLTY1IDE2LjUwOC0yMC41MzUtNDguNTY0LTU2LjY0Ny02My4yMDMtMTA4LjMzNC00My45MTQtMjUuNTU1LTE2LjcwNC00Ny4yMjItMTMuMDUyLTY1IDEwLjk2LTI3LjQ5My0xNC44OS00OS4xNi05LjQxOS02NSAxNi40MTMtNDQuMjc2LTIxLjM4My04MS43OC0xMC4xODMtMTA2LjA4NCAyNi44OTIgNDEuNTY2LTIzLjY4MiA4MC43MzQtMTguMTc1IDEwOC4zNzMgMjEuMzUxIDkuOTI1LTMxLjM5NiAzMi4wMjQtNDIuNjIzIDY1LjQzMy0zMy4yOTggMTQuNTg5LTI3LjAwOCAzNS42NzktMzMuMTkgNjQuNDIzLTE5LjQ4MiAzNC45MDItNy45MjMgNTYuMjYgNC41MjQgNjQuNjkxIDM3LjMxNyA0NC45MDUtMjUuNjY4IDgxLjIwNC0xNy45NyAxMDguNTIyIDI0LjIyMiAyNS45NTgtMTYuMzI2IDQ3Ljc3LTEyLjIxNiA2NS4xNDYgMTIuMTc0IDUuNDQtMzUuNjAzIDI3LjA5My01MC4zNzIgNjQuOTg2LTQ1LjI2IDEzLjk2My0yNy41OSAzNS44MjYtMzQuODAzIDY1LjE5Ny0yMS42ODQgMzMuMDMtOS42ODEgNTQuNTM5LjM0NiA2NC44NDMgMzEuMzc0IDQ1LjgwNy0yNC44MiA4MS45NDYtMTUuMzkgMTA4LjM2MiAyNy42NDMgMTIuOTEtNDUuMDY3IDQwLjU4LTY2LjE1NCA4My4wMzctNjMuMDEtMjYuMTc3LTM5Ljg4NS02Mi40MzYtNDguNjktMTA2LjkyNy0yNC42MS0xNC44NzgtMjYuNzM2LTM2LjU0NS0zMy4xMTUtNjUtMTkuMTM3LTE3LjMyNy05LjE2Ny0zMy4yMzUtMTMuNTY0LTQ3LjcyMy0xMy4xOXptLTkyMC42OCA0LjQyYy04LjY0NC0uMDQ0LTE4LjA2NiAyLjc3NC0yOC4yNjcgOC40NTVDNDYuOTY0IDE3NS40NDIgMTAuODUyIDE5OS4yMDQuMDMgMjU2Ljg5NmwuNDI1IDM3LjE4Mi44OTgtLjc3M2MyNy4xNjUtMTcuMDYzIDQ1Ljg1LTIxLjk2NCA2NS45MS0uMDk2IDcuNTQyLTMzLjYzIDI5LjMxMi00Ny4yNTIgNjUuMTA0LTQwLjE2NiAyNy42NS0xNC43MzcgNDkuNDY1LTguOTgxIDY1LjE1IDE2Ljk5NyAyMi45MDYtNDEuOTUgNTQuNzczLTU0Ljc1MiA5OC4wMTUtMzcuMzM3LTExLjA1Mi0xOC4yNzUtMzAuMDUtMjQuNjA0LTU3LjE2OC0xOC43MjktMTcuMTQ3LTI0LjYxLTM4LjgxNC0yOC44Ni02NS0xMi43NS0xMC4wODEtMTUuOTc1LTIyLjMyNi0yMy45OTctMzYuNzMzLTI0LjA3em0xMTY0LjM0IDM3LjA1NmMtNy4wODkgMi44MjUtMTQuMTQgOC4xNDYtMjAuMzY3IDE1LjY0IDYuMzYuNzM0IDEzLjM3OSAyLjM0NiAyMC4zNjcgNC4xMDV6IiBmaWxsPSIjMzU2Y2IxIi8+PC9zdmc+")
+`;
+
+/**
+ * Default theme Circuit style CSS Background-image code.
+ * @constant
+ */
+const defaultTheme = `
+background-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTMwMCIgaGVpZ2h0PSIzMDAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJtIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJsIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJrIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJqIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJoIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJnIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJmIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJlIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJkIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJjIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNzcyMyAwIDAgLjg3MjkyIDAgNTkuOTUyKSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjxtYXNrIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJiIj48ZyB0cmFuc2Zvcm09InNjYWxlKDEgLjk4MjA0KSI+PHBhdGggZD0iTS0xLjAwMy0xLjA3OGgxMzAydjQxMy4xMjdoLTEzMDJaIiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuMDA5Ii8+PHVzZSB4bGluazpocmVmPSIjYSIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiLz48L2c+PC9tYXNrPjwvZGVmcz48ZGVmcz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDE0NDB2NTYwSDBaIiBpZD0iYSIvPjwvZGVmcz48cGF0aCBtYXNrPSJ1cmwoI2IpIiBkPSJNLS4wMDQtLjA2djI5NC42MTNoNTY0Ljc2NnYtMi4wMDRsMTAuOTY4LTEwLjc3MmgzMDUuMTk4bDMwLjk4OC0zMC40MzNoMTQ4LjQ1M2wyMy4zMi0zOS42NjdzMTYwLjU1OSAxLjMwNyAyMTYuMzA3LjcwOFYtLjA2aC0xMzAweiIgdHJhbnNmb3JtPSJzY2FsZSgxIDEuMDE4MykiIGZpbGw9IiM1MDE2MTYiLz48cGF0aCBkPSJNLTEyLjUgMjg3LjVoNDAwIiBzdHJva2U9IiMzYTdjYzMiIHN0cm9rZS13aWR0aD0iNC4xNyIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yOTQ4MyAwIDAgMS4xNDU1OCAwIC02OC42OCkiIG1hc2s9InVybCgjYykiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMzgxLjI1IDI4Ny41YTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMSAwLTEyLjUgMHoiIGZpbGw9IiMzYTdjYzMiIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2QpIi8+PHBhdGggZD0ibTY5NC4wODcgMjUwLjMxMiAzMC41MS0yOC4zODFNNDMxLjI4IDI2Mi40NjJsMjkuNTkzLTI0LjkyNGg4OC43NzdtLTU5LjE4NiAyNC45MjQgMjkuNTkzIDI0LjkyNW0yMzAuOTc3LTM2LjcxNiA0MS4zNDUtNDMuMjltLTIxMy4xMzYgODAuMDA2aDU5LjE4Nm0tODguNzc5IDAgMjcuNTQ0LTIzLjIgMi4wNDktMS43MjUgMzAuNDU3LTIzLjg5Nm0tMjA4LjAxNCAyMy44OTYgMjkuNTkzLTI0LjkyNCAyOS41OTMtMjQuOTI1aDg4Ljc3OG0tNTYyLjI2NCA0OS44NWg1MzIuNjcxbDI5LjU5MyAyNC45MjRoMjkuNTkzbDI5LjU5My0yNC45MjUgMTUuNjU0LTExLjk0OSAxNjMuMTA4LjI0MSIgc3Ryb2tlPSIjZDEzIiBzdHJva2Utd2lkdGg9IjQuMTciIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2UpIiBmaWxsPSJub25lIi8+PHBhdGggZD0ibTI2Mi41IDIxMi41IDI1IDI1aDUwbS0xMDAtMjUgMjUgMjVtLTc1IDBoMjVtLTIyNSAwaDIwMGwyNS0yNWg3NSIgc3Ryb2tlPSIjM2E3Y2MzIiBzdHJva2Utd2lkdGg9IjQuMTciIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2YpIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTI4MS4yNSAyMTIuNWE2LjI1IDYuMjUgMCAxIDAgMTIuNSAwIDYuMjUgNi4yNSAwIDEgMC0xMi41IDB6bTUwIDI1YTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMSAwLTEyLjUgMHptLTc1IDBhNi4yNSA2LjI1IDAgMSAwIDEyLjUgMCA2LjI1IDYuMjUgMCAxIDAtMTIuNSAwem0tNTAgMGE2LjI1IDYuMjUgMCAxIDAgMTIuNSAwIDYuMjUgNi4yNSAwIDEgMC0xMi41IDB6IiBmaWxsPSIjM2E3Y2MzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjI5NDgzIDAgMCAxLjE0NTU4IDAgLTY4LjY4KSIgbWFzaz0idXJsKCNnKSIvPjxwYXRoIGQ9Im01MTIuNSAxODcuNSAyNSAyNWgxMjVtLTE3NS0yNSAyNS0yNWgxNTBtLTY3NSA1MGgyMDBsMjUtMjVoNDAwIiBzdHJva2U9IiMzYTdjYzMiIHN0cm9rZS13aWR0aD0iNC4xNyIgdHJhbnNmb3JtPSJtYXRyaXgoMS4yOTQ4MyAwIDAgMS4xNDU1OCAwIC02OC42OCkiIG1hc2s9InVybCgjaCkiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNjA2LjI1IDE4Ny41YTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMSAwLTEyLjUgMHptNTAgMjVhNi4yNSA2LjI1IDAgMSAwIDEyLjUgMCA2LjI1IDYuMjUgMCAxIDAtMTIuNSAwem0wLTUwYTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMSAwLTEyLjUgMHoiIGZpbGw9IiMzYTdjYzMiIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2kpIi8+PHBhdGggZD0ibTEzNy41IDE4Ny41IDI1LTI1aDI1bS0xMjUgMjUgMjUtMjVoNTBtMjAwIDAgMjUtMjVoNTBtLTE3NSAyNSAyNS0yNWg3NWwyNS0yNWg3NW0tMjI1IDUwIDI1LTI1bS0yNTAgNTBoMjAwbDI1LTI1aDI1MCIgc3Ryb2tlPSIjZDEzIiBzdHJva2Utd2lkdGg9IjQuMTciIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2opIiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTQ1Ni4yNSAxNjIuNWE2LjI1IDYuMjUgMCAxIDAgMTIuNSAwIDYuMjUgNi4yNSAwIDAgMC0xMi41IDB6bS0yNzUgMGE2LjI1IDYuMjUgMCAxIDAgMTIuNSAwIDYuMjUgNi4yNSAwIDAgMC0xMi41IDB6bS01MCAwYTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMCAwLTEyLjUgMHptMjc1LTI1YTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMCAwLTEyLjUgMHptMjUtMjVhNi4yNSA2LjI1IDAgMSAwIDEyLjUgMCA2LjI1IDYuMjUgMCAwIDAtMTIuNSAwem0tMjAwIDI1YTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMCAwLTEyLjUgMHoiIGZpbGw9IiNkMTMiIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2spIi8+PHBhdGggZD0ibTI2Mi41IDExMi41IDI1LTI1aDEwMG0tMjc1IDUwIDI1LTI1IDI1LTI1bTI1IDI1IDI1LTI1aDI1bS0yNTAgNzVoMjVsMjUtMjVoMTAwbDI1LTI1aDE1MCIgc3Ryb2tlPSIjM2E3Y2MzIiBzdHJva2Utd2lkdGg9IjQuMTciIHRyYW5zZm9ybT0ibWF0cml4KDEuMjk0ODMgMCAwIDEuMTQ1NTggMCAtNjguNjgpIiBtYXNrPSJ1cmwoI2wpIiBmaWxsPSIjNTAxNjE2Ii8+PHBhdGggZD0iTTMwNi4yNSAxMTIuNWE2LjI1IDYuMjUgMCAxIDAgMTIuNSAwIDYuMjUgNi4yNSAwIDEgMC0xMi41IDB6bTc1LTI1YTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMSAwLTEyLjUgMHptLTIyNSAwYTYuMjUgNi4yNSAwIDEgMCAxMi41IDAgNi4yNSA2LjI1IDAgMSAwLTEyLjUgMHptNzUgMGE2LjI1IDYuMjUgMCAxIDAgMTIuNSAwIDYuMjUgNi4yNSAwIDEgMC0xMi41IDB6IiBmaWxsPSIjM2E3Y2MzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjI5NDgzIDAgMCAxLjE0NTU4IDAgLTY4LjY4KSIgbWFzaz0idXJsKCNtKSIvPjxlbGxpcHNlIGN4PSI4MjkuNjU2IiBjeT0iMjU5Ljk3OSIgcng9IjcuMzQ4IiByeT0iNy4zOSIgZmlsbD0iI2QxMyIvPjxlbGxpcHNlIGN4PSIxMDI0LjI0NyIgY3k9IjIxOS4wNyIgcng9IjcuMzQ4IiByeT0iNy4zOSIgZmlsbD0iI2QxMyIvPjxlbGxpcHNlIGN4PSIxMDI3LjAzMSIgY3k9IjE2Ny41NTQiIHJ4PSI3LjM0OCIgcnk9IjcuMzkiIGZpbGw9IiNkMTMiLz48ZWxsaXBzZSBjeD0iOTM2LjAxNyIgY3k9IjE4NS42MTgiIHJ4PSI3LjM0OCIgcnk9IjcuMzkiIGZpbGw9IiNkMTMiLz48ZWxsaXBzZSBjeD0iNzkwLjI4NiIgY3k9IjIwMy42MjUiIHJ4PSI3LjM0OCIgcnk9IjcuMzkiIGZpbGw9IiNkMTMiLz48ZWxsaXBzZSBjeD0iNjczLjU3NiIgY3k9IjI2MC40OTgiIHJ4PSI3LjM0OCIgcnk9IjcuMzkiIGZpbGw9IiNkMTMiLz48ZWxsaXBzZSBjeD0iNzEzLjk3MiIgY3k9IjIwMi45MzUiIHJ4PSI3LjM0OCIgcnk9IjcuMzkiIGZpbGw9IiNkMTMiLz48L3N2Zz4=")
+`;
+
+// src/graphql.js
+
+/**
+ * Description TODO
+ * @constant
+ */
+const USERCARD = `
+query getMyUsercard($login: String!) {
+  user(login: $login) {
+    createdAt
+    id
+    login
+    url
+    name
+    bio
+    avatarUrl
+    location
+    status {
+      message
+    }
+    websiteUrl
+    isGitHubStar
+    isHireable
+    socialAccounts (first: 10) {
+      nodes {
+        displayName
+        provider
+        url
+      }
+    }
+    starredRepositories (first: 10) {
+      totalCount
+    }
+    sponsors (first: 10) {
+      totalCount
+    }
+  }
+}
+`;
+
+/**
+ * Description TODO
+ * @constant
+ */
+const STARS = `
+query getMyStars($login: String!) {
+  user(login: $login) {
+    repositories (first: 50, isFork: false, privacy: PUBLIC) {
+      totalCount
+      nodes {
+        stargazerCount
+      }
+    }
+  }
+}
+`;
+
+/**
+ * Description TODO
+ * @constant
+ */
+const GIST_STARS = `
+query getMyGistsStars() {
+	viewer {
+    gists(first: 100, privacy: PUBLIC, orderBy: {field: CREATED_AT, direction: DESC}) {
+      nodes {
+        stargazerCount
+      }
+    }
+  }
+}
+`;
+
+/**
+ * Description TODO
+ * @constant
+ */
+const FOLLOWERS = `
+query getMyFollowers($login: String!) {
+  user(login: $login) {
+    followers {
+      totalCount
+    }
+  }
+}
+`;
+
+/**
+ * Description TODO
+ * @constant
+ */
+const FOLLOWING = `
+query getMyFollows($login: String!) {
+  user(login: $login) {
+    following {
+      totalCount
+    }
+  }
+}
+`;
+
+
+/**
+ * Description TODO
+ * @constant
+ */
+const COMMITS = `
+query getMyCommits($login: String!) {
+  user(login: $login) {
+    repositories(first: 20, orderBy: {field: NAME, direction: ASC}) {
+      nodes {
+        defaultBranchRef {
+          target {
+            ... on Commit {
+              history(first: 10, author: {id: "MDQ6VXNlcjcxOTc3MzM"}) {
+                totalCount
+              }
+            }
+          }
+        }
+      }
+      pageInfo {
+        endCursor
+        startCursor
+      }
+    }
+  }
+}
+`;
+
+/**
+ * Description TODO.
+ * @constant
+ */
+const CONTRIBUTIONS = `
+query getMyContributions($login: String!) {
+  user(login: $login) {
+    contributionsCollection {
+      contributionCalendar {
+        totalContributions
+      }
+    }
+  }
+}
+`;
+
+/**
+ * Description TODO
+ * @constant
+ */
+const PRS = `
+query getMyPrs($login: String!) {
+  user(login: $login) {
+    pullRequests(first: 100, states: CLOSED) {
+      totalCount
+    }
+  }
+}
+`;
+
+const yagcStyles = `.gh-card {
+  position: relative;
+  display: inline-block;
+  background: var(--body-bg);
+  border-radius: 1rem;
+  box-shadow:  0 12px 13px rgba(0,0,0,.16), 0 12px 13px rgba(0,0,0,.16);
+  font-family: helvetica, arial, 'system-ui';
+  text-align: center;
+  padding: 1em 1em;
+  margin: 1rem 1rem;
+  min-width: 300px;
+  transition: all .5s;
+  div, h1 {
+    margin: 0;
+  }
+  h1 {
+    font-size: 1em;
+  }
+  .location,
+  p {
+    color: var(--body-color);
+    font-size: 0.9em;
+    margin: auto;
+  }
+  a {
+    color: var(--body-color-a);
+    text-decoration: none;
+
+    &:hover {
+      filter: drop-shadow(3px 1px 3px #999)
+    }
+  }
+  a.created_at {
+    position: relative;
+    float: left;
+    z-index: 1;
+
+    img {
+      height: 2.5em;
+      width: auto;
+    }
+
+    img:hover {
+      filter: drop-shadow(3px 1px 3px #999)
+    }
+  }
+  #list-resources {
+    list-style: none;
+    text-align: left;
+    padding: 17px 9px;
+    position: absolute;
+    float: left;
+    z-index: 1;
+
+    li {
+      font-size: 0.8em;
+      color: #ffffff;
+      padding-bottom: 6px;
+      a {
+        color:  #ffffff;
+      }
+      span {
+        margin-left: 5px;
+        vertical-align: super;
+      }
+      img:hover {
+        filter: drop-shadow(3px 1px 3px #999)
+      }  
+    }
+  }
+  .since {
+    color: #FFF;
+    font-size: 0.8em;
+    margin-left: 3em;
+    line-height: 3em;
+    position: absolute;
+    left: 2em;
+  }
+
+  a.info {
+    position: relative;
+    float: right;
+    z-index: 1;
+
+    img {
+      height: 1.2em;
+      width: auto;
+    }
+
+    img:hover {
+      filter: drop-shadow(3px 1px 3px #999)
+    }
+  }
+  .cover {
+    height: 11rem;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-position: bottom;
+    background-repeat: round;
+    border-radius: 1rem 1rem 0 0;
+  }
+  .name {
+    font-size: 1.5em;
+  }
+  .login {
+    color: var(--body-color);
+    margin-bottom: 1rem;
+  }
+  .avatar {
+    position: relative;
+    padding: 4rem 0 0 0;
+
+    img {
+      font-size: 2em;
+      height: auto;
+      width: 5em;
+      border-radius: 50%;
+      border: 3px solid var(--avatar-border-color);
+      filter: drop-shadow(0 0 10px var(--avatar-border-color));
+    }
+  }
+  .stars {
+    top: 10em;
+    position: absolute;
+    width: 4em;
+    height: 4em;
+    right: 15%;
+    display: inline;
+    background: no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve"><defs></defs><g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" ><path d="M 45 2.024 C 45 2.024 45 2.024 45 2.024 c -1.398 0 -2.649 0.778 -3.268 2.031 L 29.959 27.911 c -0.099 0.2 -0.29 0.338 -0.51 0.37 L 3.122 32.107 c -1.383 0.201 -2.509 1.151 -2.941 2.48 c -0.432 1.329 -0.079 2.76 0.922 3.736 l 19.049 18.569 c 0.16 0.156 0.233 0.38 0.195 0.599 L 15.85 83.71 c -0.236 1.377 0.319 2.743 1.449 3.564 c 1.129 0.821 2.6 0.927 3.839 0.279 l 23.547 -12.381 c 0.098 -0.051 0.206 -0.077 0.314 -0.077 C 51.721 53.905 50.301 28.878 45 2.024 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,200,80); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" /><path d="M 45 2.024 C 45 2.024 45 2.024 45 2.024 c 1.398 0 2.649 0.778 3.268 2.031 l 11.773 23.856 c 0.099 0.2 0.29 0.338 0.51 0.37 l 26.326 3.826 c 1.383 0.201 2.509 1.151 2.941 2.48 c 0.432 1.329 0.079 2.76 -0.922 3.736 L 69.847 56.892 c -0.16 0.156 -0.233 0.38 -0.195 0.599 L 74.15 83.71 c 0.236 1.377 -0.319 2.743 -1.449 3.564 c -1.129 0.821 -2.6 0.927 -3.839 0.279 L 45.315 75.172 c -0.098 -0.051 -0.206 -0.077 -0.314 -0.077 C 37.08 54.593 38.849 29.395 45 2.024 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,220,100); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" /></g></svg>');
+    background-size: 4em;
+    filter: drop-shadow(0 0 10px var(--avatar-border-color));
+    z-index: 1;
+
+    span {
+      color: var(--stars-color);
+      font-size: 1.2em;
+      font-weight: bold;
+      line-height: 4em;
+      text-align: center;
+    }
+  }
+  .footer {
+    border-top: 2px solid var(--stats-name-color);
+    padding: 1rem 0 0 0;
+
+    .item {
+      color: var(--body-color);
+    }
+  }
+  .grid-3 {
+    .item {
+      font-size: 1em;
+      width: 33%;
+      .total {
+        font-size: 2.4rem;
+      }
+    }
+  }
+  .grid-4 {
+    .item {
+      font-size: .8em;
+      width: 25%;
+      .total {
+        font-size: 2rem;
+      }
+    }
+  }
+  #list-items,
+  #list-social {
+    display: contents;
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: inline-block;
+      span,
+      a {
+        font-size: 2em;
+      }
+      a:hover {
+        filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 1));
+      }
+      p {
+        font-size: 0.7em!important;
+        color: var(--stats-name-color);
+      }
+    }
+    li:not(:last-child) {
+      margin-right: 2rem;
+    }
+  }
+}
+#list-items {
+  li {
+    span {
+      color: var(--body-color);;
+    }
+  }
+}
+#list-social {
+  li {
+    img {
+      filter: var(--svg-color-a);
+    }
+  }
+}
+@media (min-width:400px) {
+  .gh-card {
+    .stars {
+      right: 25%;
+    }
+  }
+}
+@media (max-width:468px) {
+  .location {
+    display: none;
+  }
+  #list-social {
+    li {
+      margin-top: 10px;
+    }
+  }
+}
+@media (min-width:724px) {
+  .gh-card {
+    max-width: 1200px;
+    width: 90%;
+    .cover {
+      height: 15rem;
+      width: 100%;
+    }
+    .avatar {
+      position: relative;
+      padding: 4rem 0 0 0;
+
+      img {
+        width: 6em;
+      }
+    }
+    .stars {
+      top: 12em;
+      background-size: 4em;
+      right: 35%;
+      z-index: 1;
+    }
+    #list-social {
+      display: block;
+    }  
+  }
+}
+
+@media (min-width:1024px) {
+  .gh-card {
+    .stars {
+      right: 39%;
+    }
+  }
+}`;
+
+/* eslint-disable no-restricted-properties */
+function stringFormat(value) {
+  if (!(value >= 1000)) return value;
+  let newValue = value;
+  const suffixes = ['', 'k', 'm', 'b', 't'];
+  let suffixNum = 0;
+  while (newValue >= 1000) {
+    newValue /= 1000;
+    suffixNum += 1;
+  }
+
+  newValue = newValue.toPrecision(2);
+
+  newValue += suffixes[suffixNum];
+  return newValue;
+}
+
+let apiRequest, dataCollection, datasetLenght, dataName, dataHref, dataValue, responseLenght, shadowRoot, totalStars, userName, yagcTheme;
+
+const template = document.createElement('template');
+
+const queryMap = {
+  commits: COMMITS,
+  contributions: CONTRIBUTIONS,
+  following: FOLLOWING,
+  stars: STARS,
+  gist_stars: GIST_STARS,
+  prs: PRS,
+  usercard: USERCARD
+};
+
+const resourceMap = {
+  repositories: "https://github.com",
+  gists: "https://gist.github.com"
+};
+
+const themeMap = {
+  cloud: cloud,
+  polygon: polygon,
+  default: defaultTheme
+};
+
+const themeColor = {
+  cloud: `filter: invert(41%) sepia(9%) saturate(3861%) hue-rotate(174deg) brightness(92%) contrast(87%)`,
+  polygon: `filter: invert(33%) sepia(100%) saturate(785%) hue-rotate(193deg) brightness(97%) contrast(86%)`,
+  defaultTheme: `filter: invert(20%) sepia(35%) saturate(718%) hue-rotate(314deg) brightness(94%) contrast(95%)`
+};
+
+const faviconMap = {
+  generic: `./images/generic.svg`,
+  github: `./images/github.svg`,
+  helm: `./images/helm.svg`,
+  instagram: `./images/instagram.svg`,
+  linkedin: `./images/linkedin.svg`,
+  npmjs: `./images/npmjs.svg`,
+  nuget: `./images/nuget.svg`,
+  rubygems: `./images/rubygems.svg`,
+  sourceforge: `./images/sourceforge.svg`,
+  twitter: `./images/twitter.svg`,
+  yarnpkg: `./images/yarnpkg.svg`,
+  default: `./images/generic.svg`
+};
+
+
+template.innerHTML = /*html*/ `
+  <!-- 
+    Created using npm package ${NPM_PKG} ${NPM_VER}
+    ${NPM_URL}
+  -->
+  <style>${yagcStyles}</style>
+  <div class="gh-card">
+  <div class="cover" style=""></div>
+    <div class="wrapper">
+      <a href="" target="_blank" class="created_at" rel="noopener"><img src="./images/github-logo.png" border="0" alt="Account since"></a><span class="since">Since <slot name="createdAt">{createdAt}</slot></span>
+      <a href="${NPM_URL}" target="_blank" class="info" rel="noopener"><img src="./images/info-logo.svg" border="0" alt="${NPM_PKG}"></a><br>
+      <ul id="list-resources"></ul>
+      <div class="avatar">
+        <img src=""/></slot>
+        <div class="stars"><span><slot name="stars">{stars}</span></div>
+      </div>
+      <h1><a class="name" href="" target="_blank" rel="noopener"><slot name="name">{name}</slot></a></h1>
+      <div class="location"><slot name="location">{location}</slot></div>
+      <p><slot name="bio">{bio}</slot></p>
+      <div class="grid-4">
+        <ul id="list-social"></ul>
+      </div>
+      <div class="footer grid-4">
+        <ul id="list-items"></ul>
+      </div>
+    </div>
+  </div>
+`;
+
+class githubCard extends HTMLElement {
+  static get observedAttributes() {
+    return ["data-theme", "data-style"];
+  }
+
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template.content.cloneNode(true));
+  }
+
+
+  connectedCallback() {
+    shadowRoot = document.querySelector('github-card').shadowRoot;
+
+    apiRequest = queryMap['usercard'];
+    userName = this.getAttribute('data-user');
+    yagcTheme = this.getAttribute('data-style').toString();
+
+    this.changeStyle(yagcTheme);
+
+    this.main(apiRequest)
+    .then((response) => {
+      responseLenght = Object.keys(response.user).length;
+      datasetLenght = Object.keys(GH_DEF_COLLECTION).length;
+
+      for (let i = 0; i < responseLenght; i++) {
+        if(response.user.hasOwnProperty(Object.values(GH_DEF_COLLECTION[i]|| {}))) {
+          let value = Object.values(GH_DEF_COLLECTION[i]);
+
+          if (Object.values(GH_DEF_COLLECTION[i]) == "createdAt") { 
+            shadowRoot.querySelector(`slot[name=${value}`).textContent = response.user[value].substr(0,4);
+
+          } else {
+            shadowRoot.querySelector(`slot[name=${value}`).textContent = response.user[value];
+          }
+        }
+      }
+
+      shadowRoot.querySelector(".avatar img").setAttribute("src", response.user["avatarUrl"]);
+      shadowRoot.querySelector(".gh-card a.created_at").setAttribute("href", response.user["url"]);
+      shadowRoot.querySelector(".name").setAttribute("href", response.user["url"]);
+
+      if (response.user["websiteUrl"]) { this.createListElements("list-social", response.user["websiteUrl"], "blog", null, "link", 30); }
+
+      if (response.user["socialAccounts"]) {
+        responseLenght = Object.keys(response.user.socialAccounts.nodes).length;
+
+        for (let i = 0; i < responseLenght; i++) {
+          this.createListElements("list-social", response.user.socialAccounts.nodes[i].url, response.user.socialAccounts.nodes[i].provider.toLowerCase(), null, "link", 30);
+        }
+      }
+    })
+
+    .catch((error) => {
+      console.log(error);
+    });
+
+    dataCollection =  this.getAttribute("data-user-stars").toString();
+    if (dataCollection == "true") { 
+
+      this.main(STARS)
+      .then((response) => {
+
+        totalStars = 0;
+
+        Object.keys(response.user).forEach(key => {
+          const childKey = response.user[key];
+          this.createListElements("list-resources", `${resourceMap[key]}/${userName}`, key, childKey["totalCount"] + " " + key, "link", 20);
+           Object.keys(childKey).forEach(key => {
+            const childDescKey = childKey[key];
+            Object.keys(childDescKey).forEach(key => {
+              totalStars = totalStars += childDescKey[key].stargazerCount;
+            });
+          });
+        });
+        shadowRoot.querySelector(`slot[name=stars`).textContent = stringFormat(totalStars);
+      })
+      
+      .catch((error) => {
+        console.log(error);
+      });
+    }
+
+    dataCollection =  this.getAttribute("data-user-stats");
+    const userCollection = JSON.parse(dataCollection);
+    datasetLenght = Object.keys(userCollection).length;
+
+    for (let i = 0; i < datasetLenght; i++) {
+ 
+      apiRequest = queryMap[userCollection[i].name] || FOLLOWERS;
+
+      this.main(apiRequest)
+      .then((response) => {
+        dataHref = '';
+        dataName = userCollection[i].name;
+        dataValue = 0;
+        dataValue = this.getStats(response);
+        this.createListElements("list-items", dataHref, dataName.toUpperCase(), stringFormat(dataValue), "text", 25);
+      })
+
+      .catch((error) => {
+        //console.log(error);
+      });
+    }
+  }
+
+
+  getStats(obj) {
+    const processProperty = (property) => {
+      if (property.totalCount || property.totalContributions) {
+        dataValue += property.totalCount || property.totalContributions;
+      } else if (property instanceof Object) {
+        Object.keys(property).forEach((key) => {
+          processProperty(property[key]);
+        });
+      }
+    };
+
+    processProperty(obj); // Start processing from the top-level object
+    return dataValue;
+  }
+
+
+  getRootDomain(url) {
+    if (url) {
+      const parsedUrl = new URL(url);
+      const hostname = parsedUrl.hostname;
+      const hostnameParts = hostname.split('.');
+
+      if (hostnameParts.length < 2) {
+        return hostname; // Return the whole hostname if no subdomain
+      }
+
+      if (hostnameParts.length === 3 && hostnameParts[0] === 'www') {
+        return hostnameParts[1]; // Root domain is the part before "www"
+      }
+      // Loop through known domains to check for a match
+      for (const domain of Object.keys(faviconMap)) {
+        if (hostnameParts.includes(domain)) {
+          // If a match is found, return the root domain based on its position
+          const rootDomainIndex = hostnameParts.indexOf(domain);
+          return hostnameParts[rootDomainIndex - 1];
+        } else {
+          return hostnameParts[hostnameParts.length - 2];
+        }
+      }
+      return hostnameParts[hostnameParts.length - 2]; // Default root domain (second-to-last element)
+    }
+  }
+
+
+  async createListElements(parentId, href, name, value = 0, type, size = 16) {
+    const shadowRoot = document.querySelector('github-card').shadowRoot;
+    const itemNode = document.createElement('li');
+    itemNode.classList.add('list-item');
+
+    let srcImg, listImg, listEle, listChild;
+    if (['gists', 'repositories'].includes(name)) {
+      srcImg = `./images/${name}.svg`;
+      href = href + '?tab=repositories';
+    } else if (name === 'blog') {
+      const validUrl = await this.urlCheckStatus(`${href}/assets/images/favicon_io/favicon.svg`);
+      if (validUrl) {
+        srcImg = validUrl;
+      } else {
+        srcImg = `./images/generic.svg`; // Fallback if URL check fails
+      }
+    } else {
+      const domain = this.getRootDomain(href);
+      srcImg = faviconMap[domain] || `./images/generic.svg`; // Default to generic if not found
+    }
+
+    switch (parentId) {
+      case 'list-resources':
+      case 'list-social':
+        listEle = document.createElement('a');
+        listEle.textContent = value;
+        listEle.setAttribute('alt', name);
+        listEle.setAttribute('href', href);
+        listEle.setAttribute('target', '_blank');
+        listEle.setAttribute('rel', 'noopener');
+        listEle.setAttribute('title', href);
+        listChild = null;
+      break;
+      default:
+        listEle = document.createElement('span');
+        listEle.textContent = value;
+        listChild = document.createElement('p');
+        listChild.textContent = name;
+        itemNode.appendChild(listChild);
+        srcImg = `./images/${name.toLowerCase()}.svg`;
+    }
+
+    listImg = document.createElement('img');
+    Object.assign(listImg, {
+      src: `${srcImg}`,
+      height: size,
+      width: size,
+      alt: name,
+      class: themeColor[yagcTheme]
+    });
+
+    listEle.prepend(listImg);
+    itemNode.appendChild(listEle);
+    if (listChild != null) { itemNode.appendChild(listChild); }
+
+    const parentElement = shadowRoot.getElementById(parentId);
+    if (parentElement) {
+      parentElement.appendChild(itemNode);
+    } else {
+      console.error(`Parent element with id "${parentId}" not found.`);
+    }
+  }
+
+
+  changeStyle(yagcTheme) {
+    const shadowRoot = document.querySelector('github-card').shadowRoot;
+    const cover = shadowRoot.querySelector(".cover");
+    cover.setAttribute("style", themeMap[yagcTheme] || defaultTheme);
+    this.changeStyleColor(yagcTheme);
+  }
+
+
+  changeStyleColor(yagcTheme) {
+    setTimeout(() => {
+      const wrapper = shadowRoot.querySelector("#list-items").querySelectorAll(".list-item");
+      const elementsArray = Array.from(wrapper);
+
+      elementsArray.forEach(listItem => {
+        const imgElements = listItem.querySelectorAll("img");
+        imgElements.forEach(imgEle => {
+          imgEle.setAttribute("style", themeColor[yagcTheme]);
+        });
+      });
+    }, 2000);
+  }
+
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(`${name}'s value has been changed from ${oldValue} to ${newValue}`);
+    this.changeStyle(newValue);
+  }
+
+
+  urlCheckStatus(url) {
+    return fetch(url)
+    .then((response) => {
+      if (response.status == 200) {
+        return url;
+      } else {
+        return null;
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
+
+  async main(graphQLQuery) {
+
+    const endPoint = API_GQL_URL;
+    const variables = {
+      login: `${userName}`,
+    };
+
+    try {
+      const response = await fetch(endPoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          query: graphQLQuery,
+          variables: variables,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Error en el proxy: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data; 
+
+    } catch (error) {
+      console.error("Error al obtener datos del backend proxy:", error);
+      throw error;
+    }
+  }
+}
+
+customElements.define('github-card', githubCard);