Transferred sponsors SVG to separate repository
This commit is contained in:
DJj123dj
@@ -1,130 +0,0 @@
|
||||
/// <reference types="node"/>
|
||||
import fs from "fs"
|
||||
import path from "path"
|
||||
import crypto from "crypto"
|
||||
|
||||
const contributorData: {contributors:Contributor[],sections:Section[]} = JSON.parse(fs.readFileSync(path.join(process.cwd(),"./.github/CONTRIBUTORS.json")).toString())
|
||||
|
||||
//CONSTANTS
|
||||
const CORNER_RADIUS = 10
|
||||
const SPACE_MULTIPLIER = 1.2
|
||||
const SVG_WIDTH = 1000
|
||||
|
||||
//TYPES
|
||||
interface Contributor {
|
||||
name:string,
|
||||
pictureUrl:string,
|
||||
profileUrl:string,
|
||||
sectionId:string
|
||||
}
|
||||
interface Section {
|
||||
name:string,
|
||||
id:string,
|
||||
pfpSize:number,
|
||||
pfpColumns:number,
|
||||
withNames:boolean
|
||||
}
|
||||
|
||||
|
||||
//FUNCTIONS
|
||||
async function downloadPfpToBase64URL(url:string){
|
||||
const res = await fetch(url,{method:"GET"})
|
||||
if (!res.ok) return null
|
||||
const buffer = Buffer.from(await res.arrayBuffer())
|
||||
console.log("Downloaded picture URL:",url)
|
||||
return "data:image/png;base64,"+buffer.toString("base64")
|
||||
}
|
||||
|
||||
function createTitle(yPos:number,name:string){
|
||||
return `<text x="${20}" y="${yPos+20}" text-anchor="start" class="contributor-tier-title">${name}</text>`
|
||||
}
|
||||
|
||||
async function createPfp(yPos:number,xPos:number,size:number,contributor:Contributor,withNames:boolean){
|
||||
const randomId = crypto.randomBytes(8).toString("hex")
|
||||
const nameElement = (withNames) ? `<text x="${Math.round(xPos+(size/2))}" y="${yPos+size+20}" text-anchor="middle" fill="currentColor">${contributor.name}</text>` : ""
|
||||
|
||||
return (`<a href="${contributor.profileUrl}" class="contributor-link" target="_blank">
|
||||
<clipPath id="clipPath-${randomId}">
|
||||
<rect x="${xPos}" y="${yPos}" width="${size}" height="${size}" rx="${CORNER_RADIUS}" ry="${CORNER_RADIUS}"/>
|
||||
</clipPath>
|
||||
<image x="${xPos}" y="${yPos}" width="${size}" height="${size}" href="${await downloadPfpToBase64URL(contributor.pictureUrl)}" clip-path="url(#clipPath-${randomId})"/>
|
||||
${nameElement}
|
||||
</a>`)
|
||||
}
|
||||
|
||||
async function generateSection(yPos:number,section:Section,contributors:Contributor[]){
|
||||
let sectionHtml: string = ""
|
||||
sectionHtml += createTitle(yPos,section.name)
|
||||
const nameOffset = (section.withNames) ? 20 : 0
|
||||
|
||||
//divide contributors in rows
|
||||
const groupedContributors: Contributor[][] = []
|
||||
let currentGroup: Contributor[] = []
|
||||
for (const contributor of contributors){
|
||||
currentGroup.push(contributor)
|
||||
if (currentGroup.length == section.pfpColumns){
|
||||
groupedContributors.push(currentGroup)
|
||||
currentGroup = []
|
||||
}
|
||||
}
|
||||
if (currentGroup.length > 0) groupedContributors.push(currentGroup)
|
||||
|
||||
let y = 0
|
||||
for (const contributorGroup of groupedContributors){
|
||||
let x = 0
|
||||
for (const contributor of contributorGroup){
|
||||
const pfpYPos = 40 + yPos + (y * ((section.pfpSize * SPACE_MULTIPLIER) + nameOffset))
|
||||
const pfpXPos = 20 + (x * section.pfpSize * SPACE_MULTIPLIER)
|
||||
sectionHtml += await createPfp(pfpYPos,pfpXPos,section.pfpSize,contributor,section.withNames)
|
||||
x++
|
||||
}
|
||||
y++
|
||||
}
|
||||
|
||||
let sectionHeight: number = 40 + (y * ((section.pfpSize * SPACE_MULTIPLIER) + nameOffset))
|
||||
return {sectionHtml,sectionHeight}
|
||||
}
|
||||
|
||||
async function generateSections(sections:Section[],contributors:Contributor[]){
|
||||
let finalHeight: number = 10
|
||||
let finalHtml: string = ""
|
||||
for (const section of sections){
|
||||
const sectionContributors = contributors.filter((s) => s.sectionId === section.id)
|
||||
if (sectionContributors.length < 1) continue
|
||||
const {sectionHtml,sectionHeight} = await generateSection(finalHeight,section,sectionContributors)
|
||||
|
||||
finalHeight += sectionHeight
|
||||
finalHtml += sectionHtml
|
||||
}
|
||||
|
||||
finalHeight += 10
|
||||
return {finalHeight,finalHtml}
|
||||
}
|
||||
|
||||
function generateFinalHtml(sectionsHtml:string,sectionHeight:number){
|
||||
return (`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${SVG_WIDTH} ${sectionHeight}" width="${SVG_WIDTH}" height="${sectionHeight}">
|
||||
<style>
|
||||
text {
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
fill: #777777;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
.contributor-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.contributor-tier-title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
${sectionsHtml}
|
||||
</svg>`)
|
||||
}
|
||||
|
||||
//GENERATE CONTRIBUTORS SVG
|
||||
async function main(){
|
||||
const {finalHeight,finalHtml} = await generateSections(contributorData.sections,contributorData.contributors)
|
||||
fs.writeFileSync(path.join(process.cwd(),"./.github/CONTRIBUTORS.svg"),generateFinalHtml(finalHtml,finalHeight))
|
||||
}
|
||||
main()
|
||||
@@ -1,132 +0,0 @@
|
||||
/// <reference types="node"/>
|
||||
import fs from "fs"
|
||||
import path from "path"
|
||||
import crypto from "crypto"
|
||||
|
||||
const sponsorData: {sponsors:Sponsor[],sections:Section[]} = JSON.parse(fs.readFileSync(path.join(process.cwd(),"./.github/SPONSORS.json")).toString())
|
||||
|
||||
//CONSTANTS
|
||||
const CORNER_RADIUS = 10
|
||||
const SPACE_MULTIPLIER = 1.2
|
||||
const SVG_WIDTH = 1000
|
||||
|
||||
//TYPES
|
||||
interface Sponsor {
|
||||
name:string,
|
||||
pictureUrl:string,
|
||||
profileUrl:string,
|
||||
sectionId:string
|
||||
}
|
||||
interface Section {
|
||||
name:string,
|
||||
id:string,
|
||||
pfpSize:number,
|
||||
pfpColumns:number,
|
||||
withNames:boolean
|
||||
}
|
||||
|
||||
|
||||
//FUNCTIONS
|
||||
async function downloadPfpToBase64URL(url:string){
|
||||
const res = await fetch(url,{method:"GET"})
|
||||
if (!res.ok) return null
|
||||
const buffer = Buffer.from(await res.arrayBuffer())
|
||||
console.log("Downloaded picture URL:",url)
|
||||
return "data:image/png;base64,"+buffer.toString("base64")
|
||||
}
|
||||
|
||||
function createTitle(yPos:number,name:string){
|
||||
return `<text x="${Math.round(SVG_WIDTH/2)}" y="${yPos+20}" text-anchor="middle" class="sponsor-tier-title">${name}</text>`
|
||||
}
|
||||
|
||||
async function createPfp(yPos:number,xPos:number,size:number,sponsor:Sponsor,withNames:boolean){
|
||||
const randomId = crypto.randomBytes(8).toString("hex")
|
||||
const nameElement = (withNames) ? `<text x="${Math.round(xPos+(size/2))}" y="${yPos+size+20}" text-anchor="middle" fill="currentColor">${sponsor.name}</text>` : ""
|
||||
|
||||
return (`<a href="${sponsor.profileUrl}" class="sponsor-link" target="_blank">
|
||||
<clipPath id="clipPath-${randomId}">
|
||||
<rect x="${xPos}" y="${yPos}" width="${size}" height="${size}" rx="${CORNER_RADIUS}" ry="${CORNER_RADIUS}"/>
|
||||
</clipPath>
|
||||
<image x="${xPos}" y="${yPos}" width="${size}" height="${size}" href="${await downloadPfpToBase64URL(sponsor.pictureUrl)}" clip-path="url(#clipPath-${randomId})"/>
|
||||
${nameElement}
|
||||
</a>`)
|
||||
}
|
||||
|
||||
async function generateSection(yPos:number,section:Section,sponsors:Sponsor[]){
|
||||
let sectionHtml: string = ""
|
||||
sectionHtml += createTitle(yPos,section.name)
|
||||
const nameOffset = (section.withNames) ? 20 : 0
|
||||
|
||||
//divide sponsors in rows
|
||||
const groupedSponsors: Sponsor[][] = []
|
||||
let currentGroup: Sponsor[] = []
|
||||
for (const sponsor of sponsors){
|
||||
currentGroup.push(sponsor)
|
||||
if (currentGroup.length == section.pfpColumns){
|
||||
groupedSponsors.push(currentGroup)
|
||||
currentGroup = []
|
||||
}
|
||||
}
|
||||
if (currentGroup.length > 0) groupedSponsors.push(currentGroup)
|
||||
|
||||
let y = 0
|
||||
for (const sponsorGroup of groupedSponsors){
|
||||
const xOffset = Math.round((SVG_WIDTH - (sponsorGroup.length * section.pfpSize * SPACE_MULTIPLIER))/2)
|
||||
let x = 0
|
||||
for (const sponsor of sponsorGroup){
|
||||
const pfpYPos = 40 + yPos + (y * ((section.pfpSize * SPACE_MULTIPLIER) + nameOffset))
|
||||
const pfpXPos = xOffset + (x * section.pfpSize * SPACE_MULTIPLIER)
|
||||
sectionHtml += await createPfp(pfpYPos,pfpXPos,section.pfpSize,sponsor,section.withNames)
|
||||
x++
|
||||
}
|
||||
y++
|
||||
}
|
||||
|
||||
let sectionHeight: number = 40 + (y * ((section.pfpSize * SPACE_MULTIPLIER) + nameOffset))
|
||||
return {sectionHtml,sectionHeight}
|
||||
}
|
||||
|
||||
async function generateSections(sections:Section[],sponsors:Sponsor[]){
|
||||
let finalHeight: number = 10
|
||||
let finalHtml: string = ""
|
||||
for (const section of sections){
|
||||
const sectionSponsors = sponsors.filter((s) => s.sectionId === section.id)
|
||||
if (sectionSponsors.length < 1) continue
|
||||
const {sectionHtml,sectionHeight} = await generateSection(finalHeight,section,sectionSponsors)
|
||||
|
||||
finalHeight += sectionHeight
|
||||
finalHtml += sectionHtml
|
||||
}
|
||||
|
||||
finalHeight += 10
|
||||
return {finalHeight,finalHtml}
|
||||
}
|
||||
|
||||
function generateFinalHtml(sectionsHtml:string,sectionHeight:number){
|
||||
return (`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${SVG_WIDTH} ${sectionHeight}" width="${SVG_WIDTH}" height="${sectionHeight}">
|
||||
<style>
|
||||
text {
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
fill: #777777;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
.sponsor-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sponsor-tier-title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
<rect x="2" y="2" width="${SVG_WIDTH-4}" height="${sectionHeight-4}" rx="20" ry="20" style="fill:transparent;stroke:#f8ba00;stroke-width:3"></rect>
|
||||
${sectionsHtml}
|
||||
</svg>`)
|
||||
}
|
||||
|
||||
//GENERATE SPONSORS SVG
|
||||
async function main(){
|
||||
const {finalHeight,finalHtml} = await generateSections(sponsorData.sections,sponsorData.sponsors)
|
||||
fs.writeFileSync(path.join(process.cwd(),"./.github/SPONSORS.svg"),generateFinalHtml(finalHtml,finalHeight))
|
||||
}
|
||||
main()
|
||||
Reference in New Issue
Block a user