Widget:ProjectLabel

<script> function appStart(){

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

var getQRcode = (link)=>{ var logo =""; var data=JSON.stringify({ 'text' :link, 'centerImageUrl':logo, 'size': '300x300', "light": "#ffffff", "dark": "#003069" });

fetch("https://quickchart.io/qr?text="+link+"&centerImageUrl="+logo+"&size=200x200&dark=003069&light=FFFFFF").then(response => response.blob()).then(img=>QRLink.src=URL.createObjectURL(img)); }

console.log("qr"); getQRcode("https://makerspace.cc");

     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 = [];

         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);
         })
         //μ('.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: 100px;

}

1. projectLabel>img{

 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: serif;
 font-size:30px;

}

.badgeBox {

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

}

.badgeBox img {

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

}

1. QRLink {

 left:280px;
 top: 148px;
 height: 200px;
 width: 200px;

} </style>

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

Test

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