fix(sponsors): respect hide config for the Readme.md sponsor list generator; (#243)

* feat: add sponsor list generator;

* feat: added deploy action;

* fix: fixed layout;

* fix: use utm links inside tooltips;

* fix(CI): set engine version;

* chore: reverted the start button title change;

* fix: add the ability to retry the request to get a list of sponsors;

* chore: change sponsors config & fix sponsor card layout;

* chore: hide 'incognito' sponsor from the list of sponsors;

* chore: add Route4Me sponsor;

* chore: fixed resolution of utm link for manually added sponsors;

* chore: fixed sponsors' tiers resolving;

* chore: draft;

* chore(sponsors): disable utm links generation for `slotozilla-deutschland`;

* chore(draft): Improve sponsors list generator;

* chore(draft): fix origin preset;

* chore(draft): delete generated icon;

* chore(draft): add check to ensure dir exists;

* chore(draft): add check to ensure dir exists;

* chore(draft): activate GitHub data pulling;

* chore(draft): fix crown chevron styling;

* chore(draft): reduce logo min-width;

* chore(draft): add missed `route4me` light logo;

* chore(draft): add a title for readme sponsor block;

* chore(draft): fix description resolving;

* chore(draft): add utm links for sponsors rendered to markdown;

* chore(draft): respect autoUTMLinks for utm links generation;

* chore(draft): set user theme timeout to 24 hours;

* chore(draft): set utm link for markdown output;

* chore(draft): add sponsors' logos;

* chore(draft): fix sponsor.json;

* chore(draft): fix sponsor.json;

* chore(draft): add principal logo;

* chore(draft): add a hotfix for svg logos;

* chore(draft): use image metadata instead of file extension to determine image format;

* chore(draft): add Stytch & Descope links;

* chore(draft): fix utm link generator to respect sponsor's params;

* chore(draft): add page active link rendering;

* chore(draft): notes block refactoring;

* chore(draft): remove graphql packages;

* chore(sponsors): add website link for buzzoid.com;

* chore(sponsors): remove Route4me from the list;

* chore(sponsors): Fixed relative URLs for dark theme logos in the Readme sponsor generator;

* fix(sponsors): add a hotfix for sponsors generator by emulating OpenCollective's isActive property.

* fix(sponsors): fix custom tiers processing;

* fix(sponsors): respect `hide` config for the Readme.md sponsor list generator;

* fix (sponsors): added default credit config to reduce sponsor list updates due to payment delays;

* fix (sponsors): fix sponsor's score calculation;

---------

Co-authored-by: Jay <[email protected]>

Author: DigitalBrainJS

assets/icons/new.svg

@@ -4,6 +4,9 @@
   "disappearCredit": 20,
   "scoreTierPriceFactor": 0.80,
   "scoreTotalAmountFactor": 0.2,
+  "hide": {
+    "incognito": true
+  },
   "tiers": {
     "backer" : {
       "name": "Backer",
@@ -141,6 +144,9 @@
     },
     "stephan9": {
       "website": "https://webogram.net/"
+    },
+    "soleks": {
+      "showCaption": false
     }
   }
 }

data/sponsors.json

@@ -356,6 +356,7 @@ const renderMarkdownSponsors = async (sponsors) => {
   }
 
   const filterSponsors = (fn) => Object.values(sponsors)
+    .filter(({hide}) => !hide)
     .filter(fn)
     .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
 
@@ -517,14 +518,15 @@ const processSponsors = async (collectiveSponsors, sponsorsConfig = './data/spon
     tiers,
     scoreTierPriceFactor = 0.5,
     scoreTotalAmountFactor = 0.2,
-    creditDays = 0
+    creditDays = 0,
+    hide = {}
   } = await readJSON(sponsorsConfig) || {};
 
   const mergedSponsors = {};
 
   // merge Open Collective sponsors
   collectiveSponsors.forEach(sponsor => {
-    if (sponsor.role !== 'BACKER' && sponsor.role) {
+    if ((sponsor.role !== 'BACKER' && sponsor.role) || hide[sponsor.login?.toLowerCase()] || hide[sponsor.name?.toLowerCase()]) {
       return;
     }
 
@@ -572,6 +574,12 @@ const processSponsors = async (collectiveSponsors, sponsorsConfig = './data/spon
 
     if (lastTransactionAmount) {
       sponsor.tier = findTier(lastTransactionAmount, sponsorTiers);
+
+      let partiallyPaid = findTier(lastTransactionAmount * 1.1, sponsorTiers);
+
+      if (sponsor.tier !== partiallyPaid) {
+        sponsor.tier = partiallyPaid;
+      }
     }
 
     const tierId = sponsor.tier ? sponsor.tier?.toLowerCase() : null;
@@ -581,7 +589,17 @@ const processSponsors = async (collectiveSponsors, sponsorsConfig = './data/spon
       console.log(`Unknown tier [${sponsor.tier}]`);
     }
 
-    const {price, benefits, period = PERIOD} = tierData || {};
+    let {price, benefits, period = PERIOD, credit = 3} = tierData || {};
+
+    let shortageFactor = price && lastTransactionAmount < price ? lastTransactionAmount / price * 0.9 : 1;
+
+    period = period * shortageFactor;
+
+    sponsor.isNew = !!(sponsor.createdAt && days(sponsor.createdAt) < 7);
+
+    sponsor.credit ??= credit || 0;
+
+    period += sponsor.credit;
 
     if (sponsor.isActive == null) {
       sponsor.isActive = tierData && days(lastTransactionAt) <= period && sponsor.lastTransactionAmount >= price;
@@ -593,8 +611,8 @@ const processSponsors = async (collectiveSponsors, sponsorsConfig = './data/spon
 
     const isCustomTier = !!(tierData && price !== originalTierPrice);
     sponsor.tierId = tierId;
-    sponsor.tier = sponsor.tier + (lastTransactionAmount > originalTierPrice ? '+' : '')
-    sponsor.tierPrice = price;
+    sponsor.tier = sponsor.tier ? sponsor.tier + (lastTransactionAmount > originalTierPrice ? '+' : '') : null;
+    sponsor.tierPrice = price || 0;
     sponsor.originalTierPrice = originalTierPrice;
     sponsor.isCustomTier = isCustomTier;
     sponsor.totalAmountDonated = sponsor.totalAmountDonated || lastTransactionAmount || 0;
@@ -677,10 +695,19 @@ const processSponsors = async (collectiveSponsors, sponsorsConfig = './data/spon
       opacity: timeLeft == null || timeLeft > 0 ? 1 :(sponsor.timeLeft / (creditDays * DAY))
     }
 
+    const score = Math.round(
+      sponsor.totalAmountDonated * scoreTotalAmountFactor +
+      averageMonthlyContribution +
+      tierPrice * scoreTierPriceFactor
+    );
+
     console.log(
       `Add sponsor badge [${sponsor.displayName}]
-        - tier: ${tier ? tier + '(' + tierPrice + '$)' : '< none >'}
+        - score : ${score}
+        - tier: ${tier || '< null >'}
+        - tier price: ${tierPrice}
         - total amount donated: ${sponsor.totalAmountDonated}$
+        - averageMonthlyContribution: ${averageMonthlyContribution}
         - last donation date: ${sponsor.lastTransactionAt}
         - created: ${sponsor.createdAt}
         - target link: ${sponsor.targetLink}
@@ -693,7 +720,7 @@ const processSponsors = async (collectiveSponsors, sponsorsConfig = './data/spon
     return {
       ...sponsor,
       averageMonthlyContribution,
-      score: Math.round(sponsor.totalAmountDonated * scoreTotalAmountFactor + averageMonthlyContribution + tierPrice * scoreTierPriceFactor)
+      score
     };
   })
     .sort((a, b) => b.score - a.score)

scripts/updateData.js

@@ -317,6 +317,21 @@ li.sponsor-card {
   animation: tilt-move-shaking 0.8s infinite ease-in-out;
 }
 
+.sponsor_chevron_new{
+  width: 2.5rem;
+  height:2.5rem;
+  background-image: url(/assets/icons/new.svg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: absolute;
+  left: -1.5rem;
+  top: -1rem;
+  transform: rotateZ(-45deg);
+  z-index: 1;
+  /*  animation: tilt-shaking 0.5s infinite;*/
+  animation: tilt-move-shaking 0.8s infinite ease-in-out;
+}
+
 
 .become_sponsor{
   display: flex;

scss/sponsors.scss

@@ -107,7 +107,8 @@
                       <a href="<%= sponsor.targetLink || '#' %>" target="_blank" >
                         <% if(sponsor.image){ %>
                           <div>
-                            <% if(sponsor.benefits.crown) { %><div class="chevron"><span class="sponsor_chevron_crown"></span></div><% } %>
+                            <% if(sponsor.benefits.crown) { %><div class="chevron"><span class="sponsor_chevron_crown"></span></div><% } else if (sponsor.isNew) { %>
+                            <div class="chevron"><span class="sponsor_chevron_new"></span></div><% } %>
                             <img src="<%= sponsor.image %>" alt="<%= sponsor.alt %>"/>
                           </div><% } %>
                         <% if(sponsor.showCaption !== false){ %><span class="caption"><%= sponsor.displayName %></span><% } %>
@@ -235,7 +236,7 @@
       document.addEventListener('DOMContentLoaded', () => {
         setTimeout(() => {
           splide.Components.AutoScroll.play();
-        }, 3000);
+        }, 5000);
       });
 
       splide.mount(window.splide.Extensions);

templates/home.ejs

@@ -357,7 +357,7 @@
 
           setTimeout(() => {
             splide.Components.AutoScroll.play();
-          }, 3000);
+          }, 5000);
         }
       }