Widget:ProjectLabel

<script> function appStart(){

 if(pageParams["page"]){
   mw.loader.using(['mediawiki.api', 'jquery']).then(()=>{

var logo = "";

     new mw.Api().get({
         action: 'query',
         prop: 'revisions',
         rvprop: 'content',
         titles: pageParams["page"],
         format: 'json'
     }).done(function (pageData) {
         var pageId = Object.keys(pageData.query.pages)[0];
         var content = pageData.query.pages[pageId].revisions[0]['*'];
         var pageUrl = mw.util.getUrl(pageParams["page"]);
         var badges = [];

         QRLink.src = "https://quickchart.io/qr?text=https://makerspace.cc"+pageUrl+"&centerImageUrl="+logo+"&size=200x200&dark=003069&light=FFFFFF"

         ProjectTitle.textContent = pageParams["page"].split("(")[0].replaceAll('_', ' ');

         const regex = /\[\[Category:(.*?)\]\]/gi;
         let cats = content.match(regex);
         cats = cats.map(match => /\[\[Category:(.*?)\]\]/i.exec(match)[1]);
         console.log(cats);

         cats.forEach(cat=>{
           makerSkills.forEach(skill=>{
             if(cat == skill.name) badges.push(skill.image);
           });
         });

         console.log(badges);
         badges.forEach(el=>{
           let bdg = document.createElement('img');
           bdg.src = el;
           Badges.appendChild(bdg);
         })
         if(badges.length>4) Badges.classList.add("fivePlus");
         //μ('.badgeBox')[0].textContent = "weee";
     });
   });
 }

}

if(!window.widgets) window.widgets = []; window.widgets.push(appStart); </script> <style>

1. projectLabel {

 position: relative;
 width:525px;
 height: 400px;
 --cc-badge-size: 110px;

}

1. labelFrame{

 position: absolute;
 left: 0;
 top: 0;
 width:525px;
 height: 400px;

}

1. ProjectTitle{

 position: absolute;
 left: 18px;
 top: 18px;
 width: calc(525px - 36px);
 height: 78px;
 text-align: center;
 line-height: 78px;
 font-family: sans-serif;
 font-size:36px;
 color: #003069;
 font-weight: bolder;

}

.badgeBox {

 position: absolute; 
 left: 18px;
 top: 148px;
 width: 244px;
 height: 234px;

}

.badgeBox.fivePlus {

 --cc-badge-size: 66px;

}

.badgeBox img {

 display: inline-block;
 height: var(--cc-badge-size);
 width:var(--cc-badge-size);
 margin: 5px;

}

1. QRLink {

 position: absolute;
 left:280px;
 top: 158px;
 height: 200px;
 width: 200px;

} </style>

 <img id="labelFrame" src="images/frames/projectLabelFrame.png"></img>

Test

   <img id="QRLink"></img>