New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-linkedinbadge

Package Overview
Dependencies
Maintainers
1
Versions
52
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-linkedinbadge - npm Package Compare versions

Comparing version 5.1.2027 to 5.6.2024

2

lib/linkedinbadge.bundle.js
/* react-linkedinbadge */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactScriptTag={},e.React)}(this,(function(e,t){"use strict";const n=e=>{const[n,i]=t.useState(e.scripts||[]),[o,r]=t.useState(e.badgeDidRender||!1),[d,s]=t.useState(e.responsesReceived||0),[c,l]=t.useState(e.expectedResponses||0),u=e.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",p=e.CALLBACK_NAME||"LIBadgeCallback",[g,f]=t.useState(e.badges||null),m=e.trackingParam||"trk=profile-badge",b=e.childScripts||{},h=(t,n,a)=>{if(e.debug){const e=(new Date).toLocaleTimeString();console.log(`[${e}] ${n} - ${a}: ${t}`)}},y=t.useCallback(((e,t)=>{let o,r;h(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),s(d+1);for(const n of g||[])if(h(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),r=n.getAttribute("data-iscreate"),o=parseInt(n.getAttribute("data-uid")||"0",10),o===t){var l=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{h(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let a,i,o;for(a=0,i=n.length;a<i;a++)if(o=n[a],I(o,t)){var r=C(o);e.appendChild(r),e.removeChild(o)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(h(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),t.contentWindow.document.open(),t.contentWindow.document.write(l),t.contentWindow.document.close()),a(n,r)}a(d,c,g,n,p,i)}),[g,d,a]),A=t.useCallback((e=>{var t=document.createElement("script");t.src=e;const a=n;a.push(t),t.id=`${p}-${a.length+1}`,h(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),i(a),document.body.appendChild(t)}),[n]),R=t.useCallback((t=>{const n=e.size||t.getAttribute("data-size")||"medium",a=e.locale||t.getAttribute("data-locale")||"en_US",i=e.type||t.getAttribute("data-type")||"VERTICAL",o=e.theme||t.getAttribute("data-theme")||"dark",r=e.vanity||t.getAttribute("data-vanity")||"☯liu",d=e.version||t.getAttribute("data-version")||"v1",s=t.hasAttribute("data-ei")||!1,c=t.getAttribute("data-entity")||"PROFILE",l=t.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let p,g=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),f=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(i),"badgetheme="+encodeURIComponent(o),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(d)];if("v2"===d){g+="view",f.push("badgesize="+encodeURIComponent(n||"medium")),f.push("entity="+encodeURIComponent(c||"PROFILE"));const e=(e=>{const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));return h(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(t);f=f.concat(e)}else g+="profile",f.push("maxsize="+encodeURIComponent(n)),f.push("trk="+encodeURIComponent(m)),f.push("vanityname="+encodeURIComponent(r));l&&f.push("fromCreate=true"),p=g+"?"+f.join("&"),t.setAttribute("data-uid",`${u}`),A(p)}),[e.size,e.locale,e.type,e.theme,e.vanity,e.version,e.trackingParam,A]),I=(e,t)=>v(e)&&!b[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),v=e=>"SCRIPT"===e.tagName,C=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};return t.useEffect((()=>{if(null===g&&(h(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(u))}`,"info","at useEffect in LIRenderAll"),f(Array.prototype.slice.call(document.querySelectorAll(u)))),g&&!1===o&&g.length>0){h(`Rendering badges: ${g}`,"info","at useEffect in LIRenderAll where componentDidUpdate: false, thus requiring rendering to initiate");for(const t of g||[]){t.getAttribute("data-rendered")||(l(c+1),t.setAttribute("data-rendered","true"),R(t),r(!0),e.setBadgeDidRender&&e.setBadgeDidRender(!0),h(`Badge rendered: ${t}`,"info",`at useEffect in LIRenderAll, setting ${p} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${e.vanity||t.getAttribute("data-vanity")}`),window[p]=y)}}}),[g,u,R,y,c,r,e,o]),t.createElement(t.Fragment,null)};function a(e,t,n,a,i,o){if(e>=t&&t>0||e>=(n?.length||0)){delete window[i];a.map((function(e){document.body.removeChild(e)})),o([])}}e.default=function(e){const a=e.locale||"en_US",i=e.size||"medium",o=e.theme||"light",r=e.type||"VERTICAL",d=e.vanity||"☯liu",s=e.version||"v1",c=encodeURIComponent(d),l=e.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,p=t.useRef(null),[g,f]=t.useState(!1),[m,b]=t.useState(!1);return t.useEffect((()=>{const t=(t,n,a)=>{if(e.debug){const e=(new Date).toLocaleTimeString();console.log(`[${e}] ${n} - ${a}: ${t}`)}};g||(t("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),p.current?(t("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),f(!0)):t("div not rendered yet","info","at LinkedInBadge Component"))}),[g,p,e.debug]),t.createElement(t.Fragment,null,t.createElement("div",{ref:p,className:"badge-base LI-profile-badge"+(e.className?` ${e.className}`:""),style:e.style,"data-locale":a,"data-size":i,"data-theme":o,"data-type":r,"data-vanity":d,"data-version":s,id:e.id},t.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},l)),p.current&&!1===m&&g&&t.createElement(n,{badgeDidRender:m,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:e.script_src,debug:e.debug}))},Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactScriptTag={},e.React)}(this,(function(e,t){"use strict";const n=e=>{const[n,o]=t.useState(e.scripts||[]),[a,i]=t.useState(e.badgeDidRender||!1);let d=e.responsesReceived||0,r=e.expectedResponses||0;const s=t.useCallback((e=>{r=e}),[]),c=e.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",l=e.CALLBACK_NAME||"LIBadgeCallback",[u,g]=t.useState(e.badges||null),p=e.trackingParam||"trk=profile-badge",f=t.useMemo((()=>e.childScripts||{}),[e.childScripts]),m=t.useCallback(((e,t="false")=>R(e)&&!f[e.src]&&(!("true"===t)||"true"===t&&!e.getAttribute("data-isartdeco"))),[f]),b=t.useCallback(((t,n,o)=>{if(e.debug){const e=(new Date).toLocaleTimeString(),a=`%c${o}`,i=`%c${t}`,d=`%c${n}`;console.log(`[${e}] ${d} - ${a}: ${i}`,"color:skyblue","font-weight: bold","color: green")}}),[e.debug]),h=t.useCallback(((e,t)=>{const a=e=>{const t=document.createElement("script");for(let n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};b(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),d+=1;for(const n of u||[]){b(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const o=n.getAttribute("data-iscreate");if(parseInt(n.getAttribute("data-uid")||"0",10)===t){const t=`<body>${e}</body>`,i=document.createElement("iframe");i.onload=function(){const e=i.contentWindow?.document.body;i.setAttribute("height",`${(e?.scrollHeight||300)+5}`),i.setAttribute("width",`${e?.scrollWidth||335}`)};const d=(e,t="false")=>{b(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let o,i,d;for(o=0,i=n.length;o<i;o++)if(d=n[o],m(d,t)){const t=a(d);e.appendChild(t),e.removeChild(d)}};i.setAttribute("frameBorder","0"),i.style.display="block",n.appendChild(i),i.contentWindow&&(b(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),i.contentWindow.document.open(),i.contentWindow.document.write(t),i.contentWindow.document.close()),d(n,o||"false")}}((e,t,n,o,a,i)=>{if(e>=t&&t>0||e>=(n?.length||0)){delete window[a];o.map((function(e){document.body.removeChild(e)})),i([])}})(d,r,u,n,l,o)}),[u,d,l,n,r,b,m]),y=t.useCallback((e=>{const t=document.createElement("script");t.src=e;const a=n;a.push(t),t.id=`${l}-${a.length+1}`,b(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),o(a),document.body.appendChild(t)}),[n,l,b]),A=t.useCallback((t=>{const n=e.size||t.getAttribute("data-size")||"medium",o=e.locale||t.getAttribute("data-locale")||"en_US",a=e.type||t.getAttribute("data-type")||"VERTICAL",i=e.theme||t.getAttribute("data-theme")||"dark",d=e.vanity||t.getAttribute("data-vanity")||"☯liu",r=e.version||t.getAttribute("data-version")||"v1",s=t.hasAttribute("data-ei")||!1,c=t.getAttribute("data-entity")||"PROFILE",l=t.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g=function(e){const t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),f=["locale="+encodeURIComponent(o),"badgetype="+encodeURIComponent(a),"badgetheme="+encodeURIComponent(i),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(r)];if("v2"===r){g+="view",f.push("badgesize="+encodeURIComponent(n||"medium")),f.push("entity="+encodeURIComponent(c||"PROFILE"));const e=(e=>{const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));return b(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(t);f=f.concat(e)}else g+="profile",f.push("maxsize="+encodeURIComponent(n)),f.push("trk="+encodeURIComponent(p)),f.push("vanityname="+encodeURIComponent(d));l&&f.push("fromCreate=true");const m=g+"?"+f.join("&");t.setAttribute("data-uid",`${u}`),y(m)}),[e.size,e.locale,e.type,e.theme,e.vanity,e.version,y,b,p]),R=e=>"SCRIPT"===e.tagName;return t.useEffect((()=>{const e=u||Array.from(document.querySelectorAll(c));return()=>{b("Cleaning up","info","at useEffect in LIRenderAll, Expected responses: "+r+", Responses received: "+d+", Badges length: "+e.length),(d>=r&&r>0||d>=e.length)&&(b("Cleaning up","info","Deleting callback in window"),delete window[l],n.forEach((e=>document.body.removeChild(e))))}}),[u,c,r,d,n,b,l]),t.useEffect((()=>{let t=Array.from(document.querySelectorAll(c));null===u&&(t=Array.from(document.querySelectorAll(c)),b(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(c))}`,"info","at useEffect in LIRenderAll"),g(t));for(const n of t){const t=n.getAttribute("data-rendered");t||(b(`"Badge not rendered yet" - badgeid: ${n.id}, "componentDidUpdate", ${a}`,"info",`at second useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${e.vanity||n.getAttribute("data-vanity")}`),n.setAttribute("data-rendered","true"),A(n),i(!0),e.setBadgeDidRender&&e.setBadgeDidRender(!0),b(`Badge rendered: ${n}`,"info",`at useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${e.vanity||n.getAttribute("data-vanity")}`),s(r+1)),b(`Looping through badges, ${a}, "rendered", ${t}, "expectedResponses", ${r}, "responsesReceived", ${d}`,"info","at second useEffect in LIRenderAll")}window[l]=h}),[u,c,a,A,h,r,d,b,s,l,e]),t.createElement(t.Fragment,null)};e.default=function(e){const o=e.locale||"en_US",a=e.size||"medium",i=e.theme||"light",d=e.type||"VERTICAL",r=e.vanity||"☯liu",s=e.version||"v1",c=encodeURIComponent(r),l=e.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,g=t.useRef(null),[p,f]=t.useState(!1),[m,b]=t.useState(!1);return t.useEffect((()=>{const t=(t,n,o)=>{if(e.debug){const e=(new Date).toLocaleTimeString();console.log(`[${e}] ${n} - ${o}: ${t}`)}};p||(t("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(t("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),f(!0)):t("div not rendered yet","info","at LinkedInBadge Component"))}),[p,g,e.debug]),t.createElement(t.Fragment,null,t.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(e.className?` ${e.className}`:""),style:e.style,"data-locale":o,"data-size":a,"data-theme":i,"data-type":d,"data-vanity":r,"data-version":s,id:e.id},t.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},l)),g.current&&!1===m&&p&&t.createElement(n,{badgeDidRender:m,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:e.script_src,debug:e.debug}))},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5idW5kbGUuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

2

lib/linkedinbadge.cjs.js
/* react-linkedinbadge */
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=t=>{const[a,i]=e.useState(t.scripts||[]),[r,o]=e.useState(t.badgeDidRender||!1),[d,s]=e.useState(t.responsesReceived||0),[l,c]=e.useState(t.expectedResponses||0),u=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",g=t.CALLBACK_NAME||"LIBadgeCallback",[p,m]=e.useState(t.badges||null),f=t.trackingParam||"trk=profile-badge",b=t.childScripts||{},h=(e,n,a)=>{if(t.debug){const t=(new Date).toLocaleTimeString();console.log(`[${t}] ${n} - ${a}: ${e}`)}},A=e.useCallback(((e,t)=>{let r,o;h(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),s(d+1);for(const n of p||[])if(h(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),o=n.getAttribute("data-iscreate"),r=parseInt(n.getAttribute("data-uid")||"0",10),r===t){var c=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{h(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let a,i,r;for(a=0,i=n.length;a<i;a++)if(r=n[a],v(r,t)){var o=C(r);e.appendChild(o),e.removeChild(r)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(h(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),t.contentWindow.document.open(),t.contentWindow.document.write(c),t.contentWindow.document.close()),a(n,o)}n(d,l,p,a,g,i)}),[p,d,n]),y=e.useCallback((e=>{var t=document.createElement("script");t.src=e;const n=a;n.push(t),t.id=`${g}-${n.length+1}`,h(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),i(n),document.body.appendChild(t)}),[a]),R=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",i=t.type||e.getAttribute("data-type")||"VERTICAL",r=t.theme||e.getAttribute("data-theme")||"dark",o=t.vanity||e.getAttribute("data-vanity")||"☯liu",d=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,l=e.getAttribute("data-entity")||"PROFILE",c=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g,p=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),m=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(i),"badgetheme="+encodeURIComponent(r),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(d)];if("v2"===d){p+="view",m.push("badgesize="+encodeURIComponent(n||"medium")),m.push("entity="+encodeURIComponent(l||"PROFILE"));const t=(e=>{const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));return h(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(e);m=m.concat(t)}else p+="profile",m.push("maxsize="+encodeURIComponent(n)),m.push("trk="+encodeURIComponent(f)),m.push("vanityname="+encodeURIComponent(o));c&&m.push("fromCreate=true"),g=p+"?"+m.join("&"),e.setAttribute("data-uid",`${u}`),y(g)}),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,t.trackingParam,y]),v=(e,t)=>I(e)&&!b[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),I=e=>"SCRIPT"===e.tagName,C=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};return e.useEffect((()=>{if(null===p&&(h(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(u))}`,"info","at useEffect in LIRenderAll"),m(Array.prototype.slice.call(document.querySelectorAll(u)))),p&&!1===r&&p.length>0){h(`Rendering badges: ${p}`,"info","at useEffect in LIRenderAll where componentDidUpdate: false, thus requiring rendering to initiate");for(const e of p||[]){e.getAttribute("data-rendered")||(c(l+1),e.setAttribute("data-rendered","true"),R(e),o(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),h(`Badge rendered: ${e}`,"info",`at useEffect in LIRenderAll, setting ${g} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||e.getAttribute("data-vanity")}`),window[g]=A)}}}),[p,u,R,A,l,o,t,r]),e.createElement(e.Fragment,null)};function n(e,t,n,a,i,r){if(e>=t&&t>0||e>=(n?.length||0)){delete window[i];a.map((function(e){document.body.removeChild(e)})),r([])}}exports.default=function(n){const a=n.locale||"en_US",i=n.size||"medium",r=n.theme||"light",o=n.type||"VERTICAL",d=n.vanity||"☯liu",s=n.version||"v1",l=encodeURIComponent(d),c=n.name||"",u=`https://www.linkedin.com/in/${l}?trk=profile-badge`,g=e.useRef(null),[p,m]=e.useState(!1),[f,b]=e.useState(!1);return e.useEffect((()=>{const e=(e,t,a)=>{if(n.debug){const n=(new Date).toLocaleTimeString();console.log(`[${n}] ${t} - ${a}: ${e}`)}};p||(e("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(e("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),m(!0)):e("div not rendered yet","info","at LinkedInBadge Component"))}),[p,g,n.debug]),e.createElement(e.Fragment,null,e.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":i,"data-theme":r,"data-type":o,"data-vanity":d,"data-version":s,id:n.id},e.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},c)),g.current&&!1===f&&p&&e.createElement(t,{badgeDidRender:f,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:n.script_src,debug:n.debug}))};
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=t=>{const[n,a]=e.useState(t.scripts||[]),[o,i]=e.useState(t.badgeDidRender||!1);let r=t.responsesReceived||0,d=t.expectedResponses||0;const s=e.useCallback((e=>{d=e}),[]),c=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",l=t.CALLBACK_NAME||"LIBadgeCallback",[u,g]=e.useState(t.badges||null),p=t.trackingParam||"trk=profile-badge",m=e.useMemo((()=>t.childScripts||{}),[t.childScripts]),f=e.useCallback(((e,t="false")=>R(e)&&!m[e.src]&&(!("true"===t)||"true"===t&&!e.getAttribute("data-isartdeco"))),[m]),b=e.useCallback(((e,n,a)=>{if(t.debug){const t=(new Date).toLocaleTimeString(),o=`%c${a}`,i=`%c${e}`,r=`%c${n}`;console.log(`[${t}] ${r} - ${o}: ${i}`,"color:skyblue","font-weight: bold","color: green")}}),[t.debug]),h=e.useCallback(((e,t)=>{const o=e=>{const t=document.createElement("script");for(let n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};b(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),r+=1;for(const n of u||[]){b(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const a=n.getAttribute("data-iscreate");if(parseInt(n.getAttribute("data-uid")||"0",10)===t){const t=`<body>${e}</body>`,i=document.createElement("iframe");i.onload=function(){const e=i.contentWindow?.document.body;i.setAttribute("height",`${(e?.scrollHeight||300)+5}`),i.setAttribute("width",`${e?.scrollWidth||335}`)};const r=(e,t="false")=>{b(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let a,i,r;for(a=0,i=n.length;a<i;a++)if(r=n[a],f(r,t)){const t=o(r);e.appendChild(t),e.removeChild(r)}};i.setAttribute("frameBorder","0"),i.style.display="block",n.appendChild(i),i.contentWindow&&(b(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),i.contentWindow.document.open(),i.contentWindow.document.write(t),i.contentWindow.document.close()),r(n,a||"false")}}((e,t,n,a,o,i)=>{if(e>=t&&t>0||e>=(n?.length||0)){delete window[o];a.map((function(e){document.body.removeChild(e)})),i([])}})(r,d,u,n,l,a)}),[u,r,l,n,d,b,f]),A=e.useCallback((e=>{const t=document.createElement("script");t.src=e;const o=n;o.push(t),t.id=`${l}-${o.length+1}`,b(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),a(o),document.body.appendChild(t)}),[n,l,b]),y=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",o=t.type||e.getAttribute("data-type")||"VERTICAL",i=t.theme||e.getAttribute("data-theme")||"dark",r=t.vanity||e.getAttribute("data-vanity")||"☯liu",d=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g=function(e){const t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),m=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(o),"badgetheme="+encodeURIComponent(i),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(d)];if("v2"===d){g+="view",m.push("badgesize="+encodeURIComponent(n||"medium")),m.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>{const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));return b(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(e);m=m.concat(t)}else g+="profile",m.push("maxsize="+encodeURIComponent(n)),m.push("trk="+encodeURIComponent(p)),m.push("vanityname="+encodeURIComponent(r));l&&m.push("fromCreate=true");const f=g+"?"+m.join("&");e.setAttribute("data-uid",`${u}`),A(f)}),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,A,b,p]),R=e=>"SCRIPT"===e.tagName;return e.useEffect((()=>{const e=u||Array.from(document.querySelectorAll(c));return()=>{b("Cleaning up","info","at useEffect in LIRenderAll, Expected responses: "+d+", Responses received: "+r+", Badges length: "+e.length),(r>=d&&d>0||r>=e.length)&&(b("Cleaning up","info","Deleting callback in window"),delete window[l],n.forEach((e=>document.body.removeChild(e))))}}),[u,c,d,r,n,b,l]),e.useEffect((()=>{let e=Array.from(document.querySelectorAll(c));null===u&&(e=Array.from(document.querySelectorAll(c)),b(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(c))}`,"info","at useEffect in LIRenderAll"),g(e));for(const n of e){const e=n.getAttribute("data-rendered");e||(b(`"Badge not rendered yet" - badgeid: ${n.id}, "componentDidUpdate", ${o}`,"info",`at second useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||n.getAttribute("data-vanity")}`),n.setAttribute("data-rendered","true"),y(n),i(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),b(`Badge rendered: ${n}`,"info",`at useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||n.getAttribute("data-vanity")}`),s(d+1)),b(`Looping through badges, ${o}, "rendered", ${e}, "expectedResponses", ${d}, "responsesReceived", ${r}`,"info","at second useEffect in LIRenderAll")}window[l]=h}),[u,c,o,y,h,d,r,b,s,l,t]),e.createElement(e.Fragment,null)};exports.default=function(n){const a=n.locale||"en_US",o=n.size||"medium",i=n.theme||"light",r=n.type||"VERTICAL",d=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(d),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,g=e.useRef(null),[p,m]=e.useState(!1),[f,b]=e.useState(!1);return e.useEffect((()=>{const e=(e,t,a)=>{if(n.debug){const n=(new Date).toLocaleTimeString();console.log(`[${n}] ${t} - ${a}: ${e}`)}};p||(e("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(e("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),m(!0)):e("div not rendered yet","info","at LinkedInBadge Component"))}),[p,g,n.debug]),e.createElement(e.Fragment,null,e.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":o,"data-theme":i,"data-type":r,"data-vanity":d,"data-version":s,id:n.id},e.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},l)),g.current&&!1===f&&p&&e.createElement(t,{badgeDidRender:f,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:n.script_src,debug:n.debug}))};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5janMuanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

2

lib/linkedinbadge.esm.js
/* react-linkedinbadge */
import e from"react";const t=t=>{const[a,i]=e.useState(t.scripts||[]),[r,o]=e.useState(t.badgeDidRender||!1),[d,s]=e.useState(t.responsesReceived||0),[l,c]=e.useState(t.expectedResponses||0),u=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",g=t.CALLBACK_NAME||"LIBadgeCallback",[m,p]=e.useState(t.badges||null),f=t.trackingParam||"trk=profile-badge",b=t.childScripts||{},h=(e,n,a)=>{if(t.debug){const t=(new Date).toLocaleTimeString();console.log(`[${t}] ${n} - ${a}: ${e}`)}},A=e.useCallback(((e,t)=>{let r,o;h(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),s(d+1);for(const n of m||[])if(h(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),o=n.getAttribute("data-iscreate"),r=parseInt(n.getAttribute("data-uid")||"0",10),r===t){var c=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{h(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let a,i,r;for(a=0,i=n.length;a<i;a++)if(r=n[a],I(r,t)){var o=C(r);e.appendChild(o),e.removeChild(r)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(h(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),t.contentWindow.document.open(),t.contentWindow.document.write(c),t.contentWindow.document.close()),a(n,o)}n(d,l,m,a,g,i)}),[m,d,n]),y=e.useCallback((e=>{var t=document.createElement("script");t.src=e;const n=a;n.push(t),t.id=`${g}-${n.length+1}`,h(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),i(n),document.body.appendChild(t)}),[a]),R=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",i=t.type||e.getAttribute("data-type")||"VERTICAL",r=t.theme||e.getAttribute("data-theme")||"dark",o=t.vanity||e.getAttribute("data-vanity")||"☯liu",d=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,l=e.getAttribute("data-entity")||"PROFILE",c=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g,m=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),p=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(i),"badgetheme="+encodeURIComponent(r),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(d)];if("v2"===d){m+="view",p.push("badgesize="+encodeURIComponent(n||"medium")),p.push("entity="+encodeURIComponent(l||"PROFILE"));const t=(e=>{const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));return h(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(e);p=p.concat(t)}else m+="profile",p.push("maxsize="+encodeURIComponent(n)),p.push("trk="+encodeURIComponent(f)),p.push("vanityname="+encodeURIComponent(o));c&&p.push("fromCreate=true"),g=m+"?"+p.join("&"),e.setAttribute("data-uid",`${u}`),y(g)}),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,t.trackingParam,y]),I=(e,t)=>v(e)&&!b[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),v=e=>"SCRIPT"===e.tagName,C=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};return e.useEffect((()=>{if(null===m&&(h(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(u))}`,"info","at useEffect in LIRenderAll"),p(Array.prototype.slice.call(document.querySelectorAll(u)))),m&&!1===r&&m.length>0){h(`Rendering badges: ${m}`,"info","at useEffect in LIRenderAll where componentDidUpdate: false, thus requiring rendering to initiate");for(const e of m||[]){e.getAttribute("data-rendered")||(c(l+1),e.setAttribute("data-rendered","true"),R(e),o(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),h(`Badge rendered: ${e}`,"info",`at useEffect in LIRenderAll, setting ${g} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||e.getAttribute("data-vanity")}`),window[g]=A)}}}),[m,u,R,A,l,o,t,r]),e.createElement(e.Fragment,null)};function n(e,t,n,a,i,r){if(e>=t&&t>0||e>=(n?.length||0)){delete window[i];a.map((function(e){document.body.removeChild(e)})),r([])}}function a(n){const a=n.locale||"en_US",i=n.size||"medium",r=n.theme||"light",o=n.type||"VERTICAL",d=n.vanity||"☯liu",s=n.version||"v1",l=encodeURIComponent(d),c=n.name||"",u=`https://www.linkedin.com/in/${l}?trk=profile-badge`,g=e.useRef(null),[m,p]=e.useState(!1),[f,b]=e.useState(!1);return e.useEffect((()=>{const e=(e,t,a)=>{if(n.debug){const n=(new Date).toLocaleTimeString();console.log(`[${n}] ${t} - ${a}: ${e}`)}};m||(e("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(e("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),p(!0)):e("div not rendered yet","info","at LinkedInBadge Component"))}),[m,g,n.debug]),e.createElement(e.Fragment,null,e.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":i,"data-theme":r,"data-type":o,"data-vanity":d,"data-version":s,id:n.id},e.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},c)),g.current&&!1===f&&m&&e.createElement(t,{badgeDidRender:f,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:n.script_src,debug:n.debug}))}export{a as default};
import e from"react";const t=t=>{const[n,a]=e.useState(t.scripts||[]),[o,i]=e.useState(t.badgeDidRender||!1);let d=t.responsesReceived||0,r=t.expectedResponses||0;const s=e.useCallback((e=>{r=e}),[]),c=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",l=t.CALLBACK_NAME||"LIBadgeCallback",[u,g]=e.useState(t.badges||null),p=t.trackingParam||"trk=profile-badge",m=e.useMemo((()=>t.childScripts||{}),[t.childScripts]),f=e.useCallback(((e,t="false")=>R(e)&&!m[e.src]&&(!("true"===t)||"true"===t&&!e.getAttribute("data-isartdeco"))),[m]),b=e.useCallback(((e,n,a)=>{if(t.debug){const t=(new Date).toLocaleTimeString(),o=`%c${a}`,i=`%c${e}`,d=`%c${n}`;console.log(`[${t}] ${d} - ${o}: ${i}`,"color:skyblue","font-weight: bold","color: green")}}),[t.debug]),h=e.useCallback(((e,t)=>{const o=e=>{const t=document.createElement("script");for(let n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};b(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),d+=1;for(const n of u||[]){b(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const a=n.getAttribute("data-iscreate");if(parseInt(n.getAttribute("data-uid")||"0",10)===t){const t=`<body>${e}</body>`,i=document.createElement("iframe");i.onload=function(){const e=i.contentWindow?.document.body;i.setAttribute("height",`${(e?.scrollHeight||300)+5}`),i.setAttribute("width",`${e?.scrollWidth||335}`)};const d=(e,t="false")=>{b(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let a,i,d;for(a=0,i=n.length;a<i;a++)if(d=n[a],f(d,t)){const t=o(d);e.appendChild(t),e.removeChild(d)}};i.setAttribute("frameBorder","0"),i.style.display="block",n.appendChild(i),i.contentWindow&&(b(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),i.contentWindow.document.open(),i.contentWindow.document.write(t),i.contentWindow.document.close()),d(n,a||"false")}}((e,t,n,a,o,i)=>{if(e>=t&&t>0||e>=(n?.length||0)){delete window[o];a.map((function(e){document.body.removeChild(e)})),i([])}})(d,r,u,n,l,a)}),[u,d,l,n,r,b,f]),A=e.useCallback((e=>{const t=document.createElement("script");t.src=e;const o=n;o.push(t),t.id=`${l}-${o.length+1}`,b(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),a(o),document.body.appendChild(t)}),[n,l,b]),y=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",o=t.type||e.getAttribute("data-type")||"VERTICAL",i=t.theme||e.getAttribute("data-theme")||"dark",d=t.vanity||e.getAttribute("data-vanity")||"☯liu",r=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g=function(e){const t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}(s),m=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(o),"badgetheme="+encodeURIComponent(i),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(r)];if("v2"===r){g+="view",m.push("badgesize="+encodeURIComponent(n||"medium")),m.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>{const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));return b(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(e);m=m.concat(t)}else g+="profile",m.push("maxsize="+encodeURIComponent(n)),m.push("trk="+encodeURIComponent(p)),m.push("vanityname="+encodeURIComponent(d));l&&m.push("fromCreate=true");const f=g+"?"+m.join("&");e.setAttribute("data-uid",`${u}`),A(f)}),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,A,b,p]),R=e=>"SCRIPT"===e.tagName;return e.useEffect((()=>{const e=u||Array.from(document.querySelectorAll(c));return()=>{b("Cleaning up","info","at useEffect in LIRenderAll, Expected responses: "+r+", Responses received: "+d+", Badges length: "+e.length),(d>=r&&r>0||d>=e.length)&&(b("Cleaning up","info","Deleting callback in window"),delete window[l],n.forEach((e=>document.body.removeChild(e))))}}),[u,c,r,d,n,b,l]),e.useEffect((()=>{let e=Array.from(document.querySelectorAll(c));null===u&&(e=Array.from(document.querySelectorAll(c)),b(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(c))}`,"info","at useEffect in LIRenderAll"),g(e));for(const n of e){const e=n.getAttribute("data-rendered");e||(b(`"Badge not rendered yet" - badgeid: ${n.id}, "componentDidUpdate", ${o}`,"info",`at second useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||n.getAttribute("data-vanity")}`),n.setAttribute("data-rendered","true"),y(n),i(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),b(`Badge rendered: ${n}`,"info",`at useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||n.getAttribute("data-vanity")}`),s(r+1)),b(`Looping through badges, ${o}, "rendered", ${e}, "expectedResponses", ${r}, "responsesReceived", ${d}`,"info","at second useEffect in LIRenderAll")}window[l]=h}),[u,c,o,y,h,r,d,b,s,l,t]),e.createElement(e.Fragment,null)};function n(n){const a=n.locale||"en_US",o=n.size||"medium",i=n.theme||"light",d=n.type||"VERTICAL",r=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(r),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,g=e.useRef(null),[p,m]=e.useState(!1),[f,b]=e.useState(!1);return e.useEffect((()=>{const e=(e,t,a)=>{if(n.debug){const n=(new Date).toLocaleTimeString();console.log(`[${n}] ${t} - ${a}: ${e}`)}};p||(e("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(e("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),m(!0)):e("div not rendered yet","info","at LinkedInBadge Component"))}),[p,g,n.debug]),e.createElement(e.Fragment,null,e.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":o,"data-theme":i,"data-type":d,"data-vanity":r,"data-version":s,id:n.id},e.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},l)),g.current&&!1===f&&p&&e.createElement(t,{badgeDidRender:f,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:n.script_src,debug:n.debug}))}export{n as default};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5lc20uanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOyJ9

66

lib/linkedinbadge.js
/* LinkedInBadge */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).React)}(this,(function(e){"use strict";
/**
* Renders all LinkedIn badges on the page,
* By default is called when document is at readyState 'complete'
*/
/**
* React child component responsible for rendering and managing the LinkedIn badge.
*
* React child component responsible for rendering and managing the LinkedIn badge. Renders all LinkedIn badges on the page, as well as handling deletion of rendering helper functions when all badges have been rendered.
* @param {Object} props - Component props.

@@ -24,23 +19,26 @@ * @param {HTMLScriptElement[]} [props.scripts=[]] - Array of script elements to include for the badge.

* @note The LinkedInBadge component, on the other hand, is responsible for rendering the container element with the appropriate props and attributes, as well as passing down the necessary props to the LIRenderAll child component. It also manages its own state related to component mounting and badge rendering. This separation of concerns allows for a more modular and maintainable codebase, where the responsibilities of rendering the badge container and managing the dynamic badge content are clearly separated.
*/const t=t=>{const[a,i]=e.useState(t.scripts||[]),[o,d]=e.useState(t.badgeDidRender||!1),[r,s]=e.useState(t.responsesReceived||0),[c,l]=e.useState(t.expectedResponses||0),u=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",g=t.CALLBACK_NAME||"LIBadgeCallback",[p,f]=e.useState(t.badges||null),m=t.trackingParam||"trk=profile-badge",b=t.childScripts||{},h=(e,n,a)=>{if(t.debug){const t=(new Date).toLocaleTimeString();console.log(`[${t}] ${n} - ${a}: ${e}`)}},y=e.useCallback(((e,t)=>{let o,d;h(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),s(r+1);// max possible height
for(const n of p||[])if(h(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),
*/const t=t=>{const[n,o]=e.useState(t.scripts||[]),[i,a]=e.useState(t.badgeDidRender||!1);
/**
* State variables are not used because these values are updated in the responseHandler function,
* which is a callback function that is not updated on re-renders. Thus,
* these values will not need to be kept per each re-render, but rather per each badge rendering process that
* is handled by an outside API call by responseHandler.
*/
let d=t.responsesReceived||0,r=t.expectedResponses||0;const s=e.useCallback((e=>{
// eslint-disable-next-line react-hooks/exhaustive-deps
r=e}),[]),c=t.BADGE_NAMES||".LI-profile-badge, .LI-entity-badge",l=t.CALLBACK_NAME||"LIBadgeCallback",[u,g]=e.useState(t.badges||null),f=t.trackingParam||"trk=profile-badge",p=e.useMemo((()=>t.childScripts||{}),[t.childScripts]),m=e.useCallback(((e,t="false")=>R(e)&&!p[e.src]&&(!("true"===t)||"true"===t&&!e.getAttribute("data-isartdeco"))),[p]),b=e.useCallback(((e,n,o)=>{if(t.debug){const t=(new Date).toLocaleTimeString(),i=`%c${o}`,a=`%c${e}`,d=`%c${n}`;console.log(`[${t}] ${d} - ${i}: ${a}`,"color:skyblue","font-weight: bold","color: green")}}),[t.debug]),h=e.useCallback(((e,t)=>{
/**
* Tries to clean added tags
**/
const i=e=>{const t=document.createElement("script");for(let n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};b(`Response received for badgeUid: ${t}`,"info","at responseHandler in LIRenderAll"),
// eslint-disable-next-line react-hooks/exhaustive-deps
d+=1;// max possible height
for(const n of u||[]){b(`Checking badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");
// isCreate needed to prevent reloading artdeco script tag
d=n.getAttribute("data-iscreate"),o=parseInt(n.getAttribute("data-uid")||"0",10),o===t){var l=`<body>${e}</body>`;const t=document.createElement("iframe");t.onload=function(){var e=t.contentWindow?.document.body;
const o=n.getAttribute("data-iscreate");if(parseInt(n.getAttribute("data-uid")||"0",10)===t){const t=`<body>${e}</body>`,a=document.createElement("iframe");a.onload=function(){const e=a.contentWindow?.document.body;
// 5 px buffer to avoid the badge border being cut off.
t.setAttribute("height",`${(e?.scrollHeight||300)+5}`),t.setAttribute("width",`${e?.scrollWidth||335}`)};const a=(e,t)=>{h(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let a,i,o;for(a=0,i=n.length;a<i;a++)if(o=n[a],I(o,t)){var d=v(o);e.appendChild(d),e.removeChild(o)}};t.setAttribute("frameBorder","0"),t.style.display="block",n.appendChild(t),t.contentWindow&&(h(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),t.contentWindow.document.open(),t.contentWindow.document.write(l),t.contentWindow.document.close()),a(n,d)}n(r,c,p,a,g,i)}),[p,r,n]),A=e.useCallback((e=>{var t=document.createElement("script");t.src=e;const n=a;n.push(t),t.id=`${g}-${n.length+1}`,h(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),i(n),document.body.appendChild(t)}),[a]),R=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",a=t.locale||e.getAttribute("data-locale")||"en_US",i=t.type||e.getAttribute("data-type")||"VERTICAL",o=t.theme||e.getAttribute("data-theme")||"dark",d=t.vanity||e.getAttribute("data-vanity")||"☯liu",r=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g,p=function(e){var t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}
a.setAttribute("height",`${(e?.scrollHeight||300)+5}`),a.setAttribute("width",`${e?.scrollWidth||335}`)};const d=(e,t="false")=>{b(`Replacing script tags for badge with uid: ${e.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll");const n=e.querySelectorAll("script");let o,a,d;for(o=0,a=n.length;o<a;o++)if(d=n[o],m(d,t)){const t=i(d);e.appendChild(t),e.removeChild(d)}};a.setAttribute("frameBorder","0"),a.style.display="block",n.appendChild(a),a.contentWindow&&(b(`Writing badge markup for badge with uid: ${n.getAttribute("data-uid")}`,"info","at responseHandler in LIRenderAll"),a.contentWindow.document.open(),a.contentWindow.document.write(t),a.contentWindow.document.close()),d(n,o||"false")}}((e,t,n,o,i,a)=>{if(e>=t&&t>0||e>=(n?.length||0)){
// eslint-disable-next-line @typescript-eslint/no-explicit-any
delete window[i];o.map((function(e){document.body.removeChild(e)})),a([])}})(d,r,u,n,l,o)}),[u,d,l,n,r,b,m]),y=e.useCallback((e=>{const t=document.createElement("script");t.src=e;const i=n;i.push(t),t.id=`${l}-${i.length+1}`,b(`Adding script tag with id: ${t.id}`,"info","at jsonp in LIRenderAll"),o(i),document.body.appendChild(t)}),[n,l,b]),A=e.useCallback((e=>{const n=t.size||e.getAttribute("data-size")||"medium",o=t.locale||e.getAttribute("data-locale")||"en_US",i=t.type||e.getAttribute("data-type")||"VERTICAL",a=t.theme||e.getAttribute("data-theme")||"dark",d=t.vanity||e.getAttribute("data-vanity")||"☯liu",r=t.version||e.getAttribute("data-version")||"v1",s=e.hasAttribute("data-ei")||!1,c=e.getAttribute("data-entity")||"PROFILE",l=e.hasAttribute("data-iscreate")||!1,u=Math.round(1e6*Math.random());let g=function(e){const t=e?"https://badges.linkedin-ei":"https://badges.linkedin";if(function(){if("undefined"!=typeof window){const e=window.location&&window.location.hostname||"";return/linkedin(-ei)?.cn$/.test(e)}return!1}())return t+".cn/";return t+".com/"}
/**
* Tries to clean added tags
**/(s),f=["locale="+encodeURIComponent(a),"badgetype="+encodeURIComponent(i),"badgetheme="+encodeURIComponent(o),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(r)];if("v2"===r){p+="view",f.push("badgesize="+encodeURIComponent(n||"medium")),f.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>{
// Convert the badge's attributes to an array
const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));
// Filter the attributes to include only those starting with 'data-key-'
return h(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(e);f=f.concat(t)}else p+="profile",f.push("maxsize="+encodeURIComponent(n)),f.push("trk="+encodeURIComponent(m)),f.push("vanityname="+encodeURIComponent(d));l&&f.push("fromCreate=true"),g=p+"?"+f.join("&"),e.setAttribute("data-uid",`${u}`),A(g)}//Calls responseHandler when done
),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,t.trackingParam,A]),I=(e,t)=>w(e)&&!b[e.src]&&(!t||t&&!e.getAttribute("data-isartdeco")),w=e=>"SCRIPT"===e.tagName,v=e=>{for(var t=document.createElement("script"),n=e.attributes.length-1;n>=0;n--)t.setAttribute(e.attributes[n].name,e.attributes[n].value);return t};
// Gets all incoming responses
/**
* Effect hook to render badges when the component mounts, where renderBadge calls
* are made and state status for the updated badges is set
*/
return e.useEffect((()=>{if(null===p&&(h(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(u))}`,"info","at useEffect in LIRenderAll"),f(Array.prototype.slice.call(document.querySelectorAll(u)))),p&&!1===o&&p.length>0){h(`Rendering badges: ${p}`,"info","at useEffect in LIRenderAll where componentDidUpdate: false, thus requiring rendering to initiate");for(const e of p||[]){e.getAttribute("data-rendered")||(l(c+1),e.setAttribute("data-rendered","true"),R(e),d(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),h(`Badge rendered: ${e}`,"info",`at useEffect in LIRenderAll, setting ${g} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||e.getAttribute("data-vanity")}`),window[g]=y)}}}),[p,u,R,y,c,d,t,o]),e.createElement(e.Fragment,null)};function n(e,t,n,a,i,o){if(e>=t&&t>0||e>=(n?.length||0)){delete window[i];a.map((function(e){document.body.removeChild(e)})),o([])}}
/**
* React component that renders a LinkedIn badge on a website.

@@ -67,5 +65,19 @@ *

* @argument The reason for this separation is that the badge content needs to be loaded asynchronously from a server, and the LIRenderAll component is responsible for making the necessary requests and handling the responses. By separating the concerns, the parent component can render the initial structure, and the child component can take care of the dynamic badge content.
*/function a(n){const a=n.locale||"en_US",i=n.size||"medium",o=n.theme||"light",d=n.type||"VERTICAL",r=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(r),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,g=e.useRef(null),[p,f]=e.useState(!1),[m,b]=e.useState(!1);return e.useEffect((()=>{const e=(e,t,a)=>{if(n.debug){const n=(new Date).toLocaleTimeString();console.log(`[${n}] ${t} - ${a}: ${e}`)}};
*/(s),p=["locale="+encodeURIComponent(o),"badgetype="+encodeURIComponent(i),"badgetheme="+encodeURIComponent(a),"uid="+encodeURIComponent(u),"version="+encodeURIComponent(r)];if("v2"===r){g+="view",p.push("badgesize="+encodeURIComponent(n||"medium")),p.push("entity="+encodeURIComponent(c||"PROFILE"));const t=(e=>{
// Convert the badge's attributes to an array
const t=Array.from(e.attributes).filter((e=>e.name.startsWith("data-key-"))).map((e=>{const t=e.name.replace("data-","").toLowerCase(),n=e.value;return`${encodeURIComponent(t)}=${encodeURIComponent(n)}`}));
// Filter the attributes to include only those starting with 'data-key-'
return b(`Badge key query params: ${t}`,"info","at renderBadge in LIRenderAll"),t})(e);p=p.concat(t)}else g+="profile",p.push("maxsize="+encodeURIComponent(n)),p.push("trk="+encodeURIComponent(f)),p.push("vanityname="+encodeURIComponent(d));l&&p.push("fromCreate=true");const m=g+"?"+p.join("&");e.setAttribute("data-uid",`${u}`),y(m)}//Calls responseHandler when done
),[t.size,t.locale,t.type,t.theme,t.vanity,t.version,y,b,f]),R=e=>"SCRIPT"===e.tagName;return e.useEffect((()=>{const e=u||Array.from(document.querySelectorAll(c));return()=>{b("Cleaning up","info","at useEffect in LIRenderAll, Expected responses: "+r+", Responses received: "+d+", Badges length: "+e.length),(d>=r&&r>0||d>=e.length)&&(b("Cleaning up","info","Deleting callback in window"),
// eslint-disable-next-line @typescript-eslint/no-explicit-any
delete window[l],n.forEach((e=>document.body.removeChild(e))))}}),[u,c,r,d,n,b,l]),
/**
* Effect hook to render badges when the component mounts, where renderBadge calls
* are made and state status for the updated badges is set
*/
e.useEffect((()=>{let e=Array.from(document.querySelectorAll(c));null===u&&(e=Array.from(document.querySelectorAll(c)),b(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(c))}`,"info","at useEffect in LIRenderAll"),g(e));for(const n of e){const e=n.getAttribute("data-rendered");e||(b(`"Badge not rendered yet" - badgeid: ${n.id}, "componentDidUpdate", ${i}`,"info",`at second useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||n.getAttribute("data-vanity")}`),n.setAttribute("data-rendered","true"),A(n),a(!0),t.setBadgeDidRender&&t.setBadgeDidRender(!0),b(`Badge rendered: ${n}`,"info",`at useEffect in LIRenderAll, setting ${l} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${t.vanity||n.getAttribute("data-vanity")}`),s(r+1)),b(`Looping through badges, ${i}, "rendered", ${e}, "expectedResponses", ${r}, "responsesReceived", ${d}`,"info","at second useEffect in LIRenderAll")}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
window[l]=h}),[u,c,i,A,h,r,d,b,s,l,t]),e.createElement(e.Fragment,null)};function n(n){const o=n.locale||"en_US",i=n.size||"medium",a=n.theme||"light",d=n.type||"VERTICAL",r=n.vanity||"☯liu",s=n.version||"v1",c=encodeURIComponent(r),l=n.name||"",u=`https://www.linkedin.com/in/${c}?trk=profile-badge`,g=e.useRef(null),[f,p]=e.useState(!1),[m,b]=e.useState(!1);return e.useEffect((()=>{const e=(e,t,o)=>{if(n.debug){const n=(new Date).toLocaleTimeString();console.log(`[${n}] ${t} - ${o}: ${e}`)}};
// check if div is rendered via ref
p||(e("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(e("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),f(!0)):e("div not rendered yet","info","at LinkedInBadge Component"))}),[p,g,n.debug]),e.createElement(e.Fragment,null,e.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":a,"data-size":i,"data-theme":o,"data-type":d,"data-vanity":r,"data-version":s,id:n.id},e.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},l)),g.current&&!1===m&&p&&e.createElement(t,{badgeDidRender:m,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:n.script_src,debug:n.debug}))}"undefined"!=typeof window&&void 0===window.LinkedInBadge&&(window.LinkedInBadge=a)}));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=
f||(e("checking if div is rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),g.current?(e("div rendered","info","at LinkedInBadge Component React.useEffect with componentDidMount: false"),p(!0)):e("div not rendered yet","info","at LinkedInBadge Component"))}),[f,g,n.debug]),e.createElement(e.Fragment,null,e.createElement("div",{ref:g,className:"badge-base LI-profile-badge"+(n.className?` ${n.className}`:""),style:n.style,"data-locale":o,"data-size":i,"data-theme":a,"data-type":d,"data-vanity":r,"data-version":s,id:n.id},e.createElement("a",{className:"badge-base__link LI-simple-link",target:"_blank",rel:"noopener noreferrer",href:u},l)),g.current&&!1===m&&f&&e.createElement(t,{badgeDidRender:m,setBadgeDidRender:b,badges:Array.from(document.getElementsByClassName("badge-base LI-profile-badge")),script_src:n.script_src,debug:n.debug}))}"undefined"!=typeof window&&void 0===window.LinkedInBadge&&(window.LinkedInBadge=n)}));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlua2VkaW5iYWRnZS5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=

18

lib/LIRenderAll/index.d.ts

@@ -1,14 +0,11 @@

/**
* Renders all LinkedIn badges on the page,
* By default is called when document is at readyState 'complete'
*/
import React from "react";
import { LinkedInBadgeProps } from "../index";
type LIRenderAllProps = {
export type ChildScripts = {
[x: number | string]: unknown;
};
export type LIRenderAllProps = {
scripts: HTMLScriptElement[];
responsesReceived: number;
expectedResponses: number;
childScripts: {
[x: number | string]: any;
};
childScripts: ChildScripts;
BADGE_NAMES: string;

@@ -22,4 +19,3 @@ badges: Element[] | null;

/**
* React child component responsible for rendering and managing the LinkedIn badge.
*
* React child component responsible for rendering and managing the LinkedIn badge. Renders all LinkedIn badges on the page, as well as handling deletion of rendering helper functions when all badges have been rendered.
* @param {Object} props - Component props.

@@ -41,5 +37,3 @@ * @param {HTMLScriptElement[]} [props.scripts=[]] - Array of script elements to include for the badge.

export declare const LIRenderAll: (props: Partial<LIRenderAllProps>) => React.JSX.Element;
export declare function isCNDomain(): boolean;
export declare function generateUrl(isEI: boolean): string;
export default LIRenderAll;
//# sourceMappingURL=index.d.ts.map

198

lib/LIRenderAll/index.js

@@ -1,9 +0,4 @@

/**
* Renders all LinkedIn badges on the page,
* By default is called when document is at readyState 'complete'
*/
import React from "react";
/**
* React child component responsible for rendering and managing the LinkedIn badge.
*
* React child component responsible for rendering and managing the LinkedIn badge. Renders all LinkedIn badges on the page, as well as handling deletion of rendering helper functions when all badges have been rendered.
* @param {Object} props - Component props.

@@ -27,4 +22,14 @@ * @param {HTMLScriptElement[]} [props.scripts=[]] - Array of script elements to include for the badge.

const [componentDidUpdate, setComponentDidUpdate] = React.useState(props.badgeDidRender || false);
const [responsesReceived, setResponsesReceived] = React.useState(props.responsesReceived || 0);
const [expectedResponses, setExpectedResponses] = React.useState(props.expectedResponses || 0);
/**
* State variables are not used because these values are updated in the responseHandler function,
* which is a callback function that is not updated on re-renders. Thus,
* these values will not need to be kept per each re-render, but rather per each badge rendering process that
* is handled by an outside API call by responseHandler.
*/
let responsesReceived = props.responsesReceived || 0;
let expectedResponses = props.expectedResponses || 0;
const setExpectedResponses = React.useCallback((arg0) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
expectedResponses = arg0;
}, []);
const BADGE_NAMES = props.BADGE_NAMES || ".LI-profile-badge, .LI-entity-badge";

@@ -34,9 +39,19 @@ const CALLBACK_NAME = props.CALLBACK_NAME || "LIBadgeCallback";

const TRACKING_PARAM = props.trackingParam || "trk=profile-badge";
const childScripts = props.childScripts || {};
const logDegug = (message, type, componentName) => {
const childScripts = React.useMemo(() => props.childScripts || {}, [props.childScripts]);
// These functions are needed because badge markup is added via innerHtml property which does not run script tags
const shouldReplaceNode = React.useCallback((node, isCreate = 'false') => {
return (isScriptNode(node) &&
!childScripts[node.src] &&
(!(isCreate === 'true')
|| ((isCreate === 'true') && !node.getAttribute("data-isartdeco"))));
}, [childScripts]);
const logDegug = React.useCallback((message, type, componentName) => {
if (props.debug) {
const currentTime = new Date().toLocaleTimeString();
console.log(`[${currentTime}] ${type} - ${componentName}: ${message}`);
const componentNameBoldedOnly = `%c${componentName}`;
const messageNormal = `%c${message}`;
const typeColored = `%c${type}`;
console.log(`[${currentTime}] ${typeColored} - ${componentNameBoldedOnly}: ${messageNormal}`, "color:skyblue", "font-weight: bold", "color: green");
}
};
}, [props.debug]);
/**

@@ -48,17 +63,41 @@ * Handles a response from the server. Finds badge matching badgeUid and inserts badgeHtml there

const responseHandler = React.useCallback((badgeHtml, badgeUid) => {
/**
* Tries to clean added tags
**/
const tryClean = (responsesReceived, expectedResponses, badges, scripts, CALLBACK_NAME, setScripts) => {
const isDone = (responsesReceived >= expectedResponses && expectedResponses > 0) ||
responsesReceived >= (badges?.length || 0);
if (isDone) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
delete window[CALLBACK_NAME];
// remove all script tags
const scriptsTemp = scripts;
scriptsTemp.map(function (script) {
document.body.removeChild(script);
});
setScripts([]);
}
};
const cloneScriptNode = (node) => {
const script = document.createElement("script");
for (let i = node.attributes.length - 1; i >= 0; i--) {
script.setAttribute(node.attributes[i].name, node.attributes[i].value);
}
return script;
};
logDegug(`Response received for badgeUid: ${badgeUid}`, "info", "at responseHandler in LIRenderAll");
setResponsesReceived(responsesReceived + 1);
let uid, isCreate;
var defaultWidth = 330; // max possible width
var defaultHeight = 300; // max possible height
// eslint-disable-next-line react-hooks/exhaustive-deps
responsesReceived += 1;
const defaultWidth = 330; // max possible width
const defaultHeight = 300; // max possible height
for (const badge of badges || []) {
logDegug(`Checking badge with uid: ${badge.getAttribute("data-uid")}`, "info", "at responseHandler in LIRenderAll");
// isCreate needed to prevent reloading artdeco script tag
isCreate = badge.getAttribute("data-iscreate");
uid = parseInt(badge.getAttribute("data-uid") || "0", 10);
const isCreate = badge.getAttribute("data-iscreate");
const uid = parseInt(badge.getAttribute("data-uid") || "0", 10);
if (uid === badgeUid) {
var badgeMarkup = `<body>${badgeHtml}</body>`;
const badgeMarkup = `<body>${badgeHtml}</body>`;
const iframe = document.createElement("iframe");
iframe.onload = function () {
var iframeBody = iframe.contentWindow?.document.body;
const iframeBody = iframe.contentWindow?.document.body;
// 5 px buffer to avoid the badge border being cut off.

@@ -68,3 +107,3 @@ iframe.setAttribute("height", `${(iframeBody?.scrollHeight || defaultHeight) + 5}`);

};
const replaceScriptTags = (badge, isCreate) => {
const replaceScriptTags = (badge, isCreate = 'false') => {
logDegug(`Replacing script tags for badge with uid: ${badge.getAttribute("data-uid")}`, "info", "at responseHandler in LIRenderAll");

@@ -76,3 +115,3 @@ const scriptsFoundNow = badge.querySelectorAll("script");

if (shouldReplaceNode(script, isCreate)) {
var newScript = cloneScriptNode(script);
const newScript = cloneScriptNode(script);
badge.appendChild(newScript);

@@ -92,9 +131,9 @@ badge.removeChild(script);

}
replaceScriptTags(badge, isCreate);
replaceScriptTags(badge, isCreate || 'false');
}
}
tryClean(responsesReceived, expectedResponses, badges, scripts, CALLBACK_NAME, setScripts);
}, [badges, responsesReceived, tryClean]);
}, [badges, responsesReceived, CALLBACK_NAME, scripts, expectedResponses, logDegug, shouldReplaceNode]);
const jsonp = React.useCallback((url) => {
var script = document.createElement("script");
const script = document.createElement("script");
script.src = url;

@@ -107,3 +146,3 @@ const scriptsState = scripts;

document.body.appendChild(script);
}, [scripts]);
}, [scripts, CALLBACK_NAME, logDegug]);
const renderBadge = React.useCallback((badge) => {

@@ -142,3 +181,2 @@ const getBadgeKeyQueryParams = (badge) => {

];
let url;
if (version === "v2") {

@@ -160,3 +198,3 @@ baseUrl += "view";

}
url = baseUrl + "?" + queryParams.join("&");
const url = baseUrl + "?" + queryParams.join("&");
badge.setAttribute("data-uid", `${uid}`);

@@ -171,21 +209,33 @@ jsonp(url); //Calls responseHandler when done

props.version,
props.trackingParam,
jsonp,
logDegug,
TRACKING_PARAM,
]);
// These functions are needed because badge markup is added via innerHtml property which does not run script tags
const shouldReplaceNode = (node, isCreate) => {
return (isScriptNode(node) &&
!childScripts[node.src] &&
(!isCreate || (isCreate && !node.getAttribute("data-isartdeco"))));
};
const isScriptNode = (node) => {
return node.tagName === "SCRIPT";
};
const cloneScriptNode = (node) => {
var script = document.createElement("script");
for (var i = node.attributes.length - 1; i >= 0; i--) {
script.setAttribute(node.attributes[i].name, node.attributes[i].value);
}
return script;
};
React.useEffect(() => {
const badgesArray = badges || Array.from(document.querySelectorAll(BADGE_NAMES));
const tryClean = () => {
logDegug("Cleaning up", "info", "at useEffect in LIRenderAll" + ", Expected responses: " + expectedResponses + ", Responses received: " + responsesReceived + ", Badges length: " + badgesArray.length);
if (responsesReceived >= expectedResponses && expectedResponses > 0 ||
(responsesReceived >= badgesArray.length)) {
logDegug("Cleaning up", "info", "Deleting callback in window");
// eslint-disable-next-line @typescript-eslint/no-explicit-any
delete window[CALLBACK_NAME];
scripts.forEach((script) => document.body.removeChild(script));
}
};
return () => {
tryClean();
};
}, [
badges,
BADGE_NAMES,
expectedResponses,
responsesReceived,
scripts,
logDegug,
CALLBACK_NAME
]);
/**

@@ -196,37 +246,41 @@ * Effect hook to render badges when the component mounts, where renderBadge calls

React.useEffect(() => {
let queriedBadges = Array.from(document.querySelectorAll(BADGE_NAMES));
if (badges === null) {
queriedBadges = Array.from(document.querySelectorAll(BADGE_NAMES));
logDegug(`Setting badges to: ${Array.prototype.slice.call(document.querySelectorAll(BADGE_NAMES))}`, "info", "at useEffect in LIRenderAll");
setBadges(Array.prototype.slice.call(document.querySelectorAll(BADGE_NAMES)));
setBadges(queriedBadges);
}
if (badges && componentDidUpdate === false && badges.length > 0) {
logDegug(`Rendering badges: ${badges}`, "info", "at useEffect in LIRenderAll where componentDidUpdate: false, thus requiring rendering to initiate");
for (const badge of badges || []) {
const rendered = badge.getAttribute("data-rendered");
if (!rendered) {
setExpectedResponses(expectedResponses + 1);
badge.setAttribute("data-rendered", `${true}`);
renderBadge(badge);
setComponentDidUpdate(true);
if (props.setBadgeDidRender) {
props.setBadgeDidRender(true);
}
logDegug(`Badge rendered: ${badge}`, "info", "at useEffect in LIRenderAll, setting " + `${CALLBACK_NAME} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${props.vanity || badge.getAttribute("data-vanity")}`);
window[CALLBACK_NAME] = responseHandler;
for (const badge of queriedBadges) {
const rendered = badge.getAttribute("data-rendered");
if (!rendered) {
logDegug(`"Badge not rendered yet" - badgeid: ${badge.id}, "componentDidUpdate", ${componentDidUpdate}`, "info", "at second useEffect in LIRenderAll, setting " + `${CALLBACK_NAME} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${props.vanity || badge.getAttribute("data-vanity")}`);
badge.setAttribute("data-rendered", `${true}`);
renderBadge(badge);
setComponentDidUpdate(true);
if (props.setBadgeDidRender) {
props.setBadgeDidRender(true);
}
logDegug(`Badge rendered: ${badge}`, "info", "at useEffect in LIRenderAll, setting " + `${CALLBACK_NAME} global as part of linkedin's rendering process to trigger and coupled specific to this current badge, vanity: ${props.vanity || badge.getAttribute("data-vanity")}`);
setExpectedResponses(expectedResponses + 1);
}
logDegug(`Looping through badges, ${componentDidUpdate}, "rendered", ${rendered}, "expectedResponses", ${expectedResponses}, "responsesReceived", ${responsesReceived}`, "info", "at second useEffect in LIRenderAll");
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
window[CALLBACK_NAME] = responseHandler;
}, [
badges,
BADGE_NAMES,
componentDidUpdate,
renderBadge,
responseHandler,
expectedResponses,
setComponentDidUpdate,
props,
componentDidUpdate,
responsesReceived,
logDegug,
setExpectedResponses,
CALLBACK_NAME,
props
]);
// Gets all incoming responses
return React.createElement(React.Fragment, null);
};
export function isCNDomain() {
function isCNDomain() {
if (typeof window !== "undefined") {

@@ -238,4 +292,4 @@ const hostName = (window.location && window.location.hostname) || "";

}
export function generateUrl(isEI) {
var domainPrefix = isEI
function generateUrl(isEI) {
const domainPrefix = isEI
? "https://badges.linkedin-ei"

@@ -249,17 +303,1 @@ : "https://badges.linkedin";

export default LIRenderAll;
/**
* Tries to clean added tags
**/
function tryClean(responsesReceived, expectedResponses, badges, scripts, CALLBACK_NAME, setScripts) {
const isDone = (responsesReceived >= expectedResponses && expectedResponses > 0) ||
responsesReceived >= (badges?.length || 0);
if (isDone) {
delete window[CALLBACK_NAME];
// remove all script tags
const scriptsTemp = scripts;
scriptsTemp.map(function (script) {
document.body.removeChild(script);
});
setScripts([]);
}
}

11

LICENSE.md

@@ -10,10 +10,4 @@ ### Revised Legal Terms and Conditions

- However, there exists a means for LinkedIn to acquire authorization to utilize this Software. To gain permission, the creator and author of the code must be contacted via the [email](mailto:Ziping%20Liu<ziping@linkedinliu.com>?subject=Permission%20Request%20for%20Software%20Usage&body=Respectuflly%20requesting%20permission%20to%20use%20the%20Software%20for%20commercial%20purposes%20on%20LinkedIn.%20Please%20provide%20approval%20for%20legitimate%20use%20of%20the%20Software%20within%20LinkedIn%20DEV%20platform%20as%20outlined%20in%20the%20terms%20and%20conditions%20of%20the%20license.) address provided in the project's `package.json` file. Upon receiving explicit approval, LinkedIn may then engage in legitimate usage of the Software. Failure to secure prior consent results in an infringement of the rights reserved exclusively to the author under copyright law.
) address provided in the project's `package.json` file. Upon receiving explicit approval, LinkedIn may then engage in legitimate usage of the Software. Failure to secure prior consent results in an infringement of the rights reserved exclusively to the author under copyright law.
address provided in the project's package.json file. Upon receiving explicit approval, LinkedIn may then engage in legitimate usage of the Software. Failure to secure prior consent results in an infringement of the rights reserved exclusively to the author under copyright law.
) address provided in the project's package.json file. Upon receiving explicit approval, LinkedIn may then engage in legitimate usage of the Software. Failure to secure prior consent results in an infringement of the rights reserved exclusively to the author under copyright law.
Again to re-emphasize with as full clarity and standing, LinkedIn is expressly forbidden from using the Software, either directly or indirectly, for internal or external purposes, due to its commercial nature. Any attempt to bypass this restriction will be deemed a violation of these terms and will be subject to legal proceedings.
As resemphasis with for sake of clarity and standing, LinkedIn and/or its affilations are expressly forbidden from using the software wherein, by powers directly or indirectly, for internal or external purposes. Any and/or all attempts to bypass this restriction will be deemed a violation of these terms and will be subject to legal proceedings.

@@ -44,1 +38,4 @@

</details>
Ziping Liu does not have a legal team, or scribe and thus any type of action taken against Ziping Liu with a legally empowered authority private or public will be deemed as fully retaliable through court proceedings and all other means or channels outside of court proceedings where applicable.

2

package.json
{
"name": "react-linkedinbadge",
"version": "5.1.2027",
"version": "5.6.2024",
"description": "The LinkedIn Badge Rendering React Component is a powerful tool for displaying LinkedIn badges on websites. With customizable options and support for both profile and entity badges, this component offers improved features over LinkedIn's basic implementation. It enhances code organization by separating badge container rendering from dynamic content rendering and efficiently handles asynchronous loading of content from LinkedIn servers. This component also allows for easy management of multiple badges on a page and provides a callback function for tracking badge rendering completion. Make sure to review the licensing information for proper usage.",

@@ -5,0 +5,0 @@ "repository": {

32

README.md
# LinkedIn Badge Rendering React Component
This is a React component that renders a LinkedIn badge on a website, allowing users to display their LinkedIn profile information or company details. It is an improved implementation of LinkedIn's provided code for embedding profile badges to any [website](https://linkedinliu.com/).
This is a React component that renders a LinkedIn badge on a website, allowing users to display their LinkedIn profile information or company details. It is an improved implementation of LinkedIn's provided code for embedding profile badges to any [website](https://badge.ziping.org/).
> [!TIP] FEATURES
- Renders LinkedIn badges with customizable options (locale, size, theme, type, vanity, version), as well as now further parameteres that were not exposed due to limitations of not having yet implemented such forms of customizable optoins via LinkedIn's official badge rendering method which can clearly be specifiec now as part of the component's props.
## FEATURES
- Renders LinkedIn badges with customizable options (locale, size, theme, type, vanity, version), _**but now with even more options**_ that were not exposed due to limitations of not having yet implemented such forms of customizable optoins via LinkedIn's official badge rendering method which can clearly be specifiec now as part of the component's props.
- Supports both profile badges and entity badges (e.g., company badges), as well as badges that can be configured beyond the current options provided from LinkedIn's implemenation.
- Separates badge container rendering from dynamic badge content rendering for better code organization, and allows for aynconous and non-blocking rendering of multiple badges due to the nature of Linkedin"s own method having utilized a global param in handling the rendering of mulitple badges, that does not take into count how some badges may not appear on the page the same time as others (thus such badges would then miss the global train for rending).
- The usage of this component by LinkedIn employees is not allowed. It should not be referenced or used as inspiration without the author's contractual agreement.
*For complete details, do review the [license](/LINKEDINLIU.LICENSE.md) which explicilty provides detailed terms regarding the disallowance of usage with this component by any means in any assocations from commercial and/or for-profit entities.*
> [!IMPORTANT] The usage of this component by LinkedIn employees is not allowed. It should not be referenced or used as inspiration without the author's contractual agreement.
> *For complete details, do review the [license](/LINKEDINLIU.LICENSE.md) which explicilty provides detailed terms regarding the disallowance of usage with this component by any means in any assocations from commercial and/or for-profit entities.*
## DEMO
> [!CAUTION] Don't just take my word for it regarding the descriped improvements made. See the demo of this in action, viewable <a href="https://liu.ziping.org/r/linkedinliu">&nbsp;here</a>.
- Clearly see the measurable difference in the now more robost and controllable rendering of the LinkedIn Badge compared to LinkedIn's method based on its official [instructions](https://www.linkedin.com/badges/profile/create?vanityname=%E2%98%AFliu&preferredlocale=en_US&trk=public_profile_badge&source=ziping.org).
Don't just take my word for it regarding the descriped improvements made. See the demo of this in action, viewable <a href="https://liu.ziping.org/r/linkedinliu">&nbsp;here</a>.
- See a measurable difference in the now more robost, efficient, and controlled rendering of the LinkedIn Badge compared to LinkedIn's method based on its official [instructions](https://www.linkedin.com/badges/profile/create?vanityname=%E2%98%AFliu&preferredlocale=en_US&trk=public_profile_badge&source=ziping.org).
## Utilizling Linkedin's methods instead with this Com ponent
Version 4.0 or lower utilizes LinkedIn's [script](https://platform.linkedin.com/badges/js/profile.js) to render the badge. I recommend using version 4 or lower in case you require rendering via LinkedIn's method in any means. Version 4 by the means is a version that has issues or functionality flaws, and is a stable legacy version of the component. Version 5.0 given that it fully integrates rendering within the component and thus utilizes fully adherence toward React's lifecycle methods and state management system, provides even fuller abilities in allowing the badge to properly render and animate utilizing any other React component's or libraries within your project.
## Utilizing Linkedin's methods instead with this Component
Version *4.0* or lower utilizes LinkedIn's [script](https://platform.linkedin.com/badges/js/profile.js) to render the badge. I recommend using version 4 or lower in case you require rendering via LinkedIn's method in any means. Version 4 by the means is a version that has issues or functionality flaws, and is a stable legacy version of the component. Version 5.0 given that it fully integrates rendering within the component and thus utilizes fully adherence toward React's lifecycle methods and state management system, provides even fuller abilities in allowing the badge to properly render and animate utilizing any other React component's or libraries within your project.
## Installation
> [!IMPORTANT] To use this component in your React application, you can install it as a&nbsp; <a href="https://www.npmjs.com/package/react-linkedinbadge">NPM</a>,
> or <a href="https://yarnpkg.com/package/react-linkedinbadge">yarn</a> package or simply copy the source files into your project.
To use this component in your React application, you can install it as a&nbsp;<a href="https://www.npmjs.com/package/react-linkedinbadge">NPM</a>, or <a href="https://yarnpkg.com/package/react-linkedinbadge">yarn</a> package.
```pwsh
```bash
npm install react-linkedinbadge
```
```powershell
```sql
yarn add react-linkedinbadge

@@ -58,3 +56,3 @@ ```

```html
<script src="https://cdn.jsdelivr.net/npm/react-linkedinbadge@4/lib/linkedinbadge.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-linkedinbadge/lib/linkedinbadge.min.js"></script>
```

@@ -71,3 +69,3 @@

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-linkedinbadge@4/lib/linkedinbadge.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-linkedinbadge/lib/linkedinbadge.min.js"></script>
</head>

@@ -145,3 +143,3 @@

## License
See license in [LINKEDINLIU.LICENSE.md](LINKEDINLIU.LICENSE.md)
See license in [LICENSE.md](LICENSE.md)

@@ -148,0 +146,0 @@ ### Links

18

types/LIRenderAll/index.d.ts

@@ -1,14 +0,11 @@

/**
* Renders all LinkedIn badges on the page,
* By default is called when document is at readyState 'complete'
*/
import React from "react";
import { LinkedInBadgeProps } from "../index";
type LIRenderAllProps = {
export type ChildScripts = {
[x: number | string]: unknown;
};
export type LIRenderAllProps = {
scripts: HTMLScriptElement[];
responsesReceived: number;
expectedResponses: number;
childScripts: {
[x: number | string]: any;
};
childScripts: ChildScripts;
BADGE_NAMES: string;

@@ -22,4 +19,3 @@ badges: Element[] | null;

/**
* React child component responsible for rendering and managing the LinkedIn badge.
*
* React child component responsible for rendering and managing the LinkedIn badge. Renders all LinkedIn badges on the page, as well as handling deletion of rendering helper functions when all badges have been rendered.
* @param {Object} props - Component props.

@@ -41,5 +37,3 @@ * @param {HTMLScriptElement[]} [props.scripts=[]] - Array of script elements to include for the badge.

export declare const LIRenderAll: (props: Partial<LIRenderAllProps>) => React.JSX.Element;
export declare function isCNDomain(): boolean;
export declare function generateUrl(isEI: boolean): string;
export default LIRenderAll;
//# sourceMappingURL=index.d.ts.map
.gitignore

Sorry, the diff of this file is not supported yet

lib/LIRenderAll/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/LIRenderAll/index.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc