Updating to the new discord invite UI

package.json

@@ -9,7 +9,7 @@
  "dd-trace": "^1.4.1",
  "express": "^4.17.1",
  "morgan": "^1.10.0",
- "node-fetch": "^2.6.0",
+ "node-fetch": "^3.2.10",
  "sharp": "^0.29.1",
  "svgdom": "^0.1.8",
  "text-to-svg": "^3.1.5",

src/Discord.js

@@ -1,4 +1,5 @@
 const fetch = require('node-fetch')
+const axios = require('axios')
 
 const API_BASE_URL = 'https://discord.com/api/v10'
 const CDN_BASE_URL = 'https://cdn.discordapp.com'
@@ -12,11 +13,15 @@ module.exports = class Discord {
  return fetch(`${API_BASE_URL}/invites/${inviteCode}?with_counts=true`).then(res => res.json())
  }
 
- static fetchIcon (iconUrl) {
+ static fetchBase64Image (iconUrl) {
  return fetch(iconUrl).then(res => res.buffer()).then(buffer => buffer.toString('base64'))
  }
 
  static getIconUrl (guildId, iconId) {
  return `${CDN_BASE_URL}/icons/${guildId}/${iconId}${iconId.startsWith('a_') ? '.gif' : '.jpg'}`
  }
+
+ static getSplashUrl (guildId, splashId) {
+ return `${CDN_BASE_URL}/splashes/${guildId}/${splashId}.jpg?size=480`
+ }
 }

src/InviteRenderer.js

@@ -14,7 +14,6 @@ SVG.extend([SVG.Path, SVG.Circle], {
 
 const whitneyBold = TextToSVG.loadSync('./src/fonts/WhitneyBoldRegular.ttf')
 const whitneySemibold = TextToSVG.loadSync('./src/fonts/WhitneySemiboldRegular.ttf')
-const whitneyMedium = TextToSVG.loadSync('./src/fonts/WhitneyMediumRegular.ttf')
 
 const strings = require('./strings.json')
 
@@ -23,7 +22,7 @@ const ICON_SIZE = 50
 
 const HEADER_FONT_SIZE = 12
 const HEADER_LINE_HEIGHT = 16
-const HEADER_MARGIN_BOTTOM = 12
+const HEADER_MARGIN_BOTTOM = 75
 
 const SERVER_NAME_SIZE = 16
 const SERVER_NAME_LINE_HEIGHT = 20
@@ -37,14 +36,17 @@ const PRESENCE_DOT_SIZE = 8
 const PRESENCE_DOT_MARGIN_RIGHT = 4
 
 const INVITE_WIDTH = 430
-const INVITE_HEIGHT = 110
+const INVITE_HEIGHT = 174
 
-const BUTTON_WIDTH = 94.75
+const BUTTON_WIDTH = 63
 const BUTTON_HEIGHT = 40
 const BUTTON_MARGIN_LEFT = 10
 
 const BADGE_MARGIN_RIGHT = 8
 
+const SPLASH_WIDTH = 0
+const SPLASH_HEIGHT = 100
+
 const Constants = require('./constants.js')
 const BADGES = {
  VERIFIED: Constants.VERIFIED_ICON,
@@ -55,13 +57,13 @@ const BADGES = {
 // Old green color: #43b581
 
 const COMMON_COLORS = {
- joinButtonBackground: '#3ba55c',
+ joinButtonBackground: '#2d7d46',
  joinButtonText: '#ffffff',
  online: '#3ba55c',
  members: '#747f8d',
  badges: {
  PARTNERED: {
- flowerStar: '#7289da',
+ flowerStar: '#4f545c',
  icon: '#ffffff'
  },
  VERIFIED: {
@@ -115,7 +117,7 @@ module.exports = class InviteRenderer {
  const mainContainer = canvas.nested()
  .width(INVITE_WIDTH - 2 * PADDING)
  .height(INVITE_HEIGHT - 2 * PADDING)
- .move(PADDING, PADDING)
+ .move(PADDING, 80)
 
  // Header
  const headerContainer = mainContainer.nested().width(mainContainer.width()).height(HEADER_LINE_HEIGHT)
@@ -125,12 +127,12 @@ module.exports = class InviteRenderer {
  const contentContainer = mainContainer.nested()
  .width(mainContainer.width())
  .height(mainContainer.height() - headerContainer.height() - HEADER_MARGIN_BOTTOM)
- .move(0, headerContainer.height() + HEADER_MARGIN_BOTTOM)
+ .move(0, headerContainer.height() + HEADER_MARGIN_BOTTOM - 64)
 
  // Server Icon
  const squircle = contentContainer.rect(ICON_SIZE, ICON_SIZE).radius(16).fill(themeColors.serverIcon)
  if (invite.guild.icon) {
- const iconBase64 = await Discord.fetchIcon(Discord.getIconUrl(invite.guild.id, invite.guild.icon))
+ const iconBase64 = await Discord.fetchBase64Image(Discord.getIconUrl(invite.guild.id, invite.guild.icon))
  const iconImage = contentContainer.image(`data:image/${invite.guild.icon.startsWith('a_') ? 'gif' : 'jpg'};base64,${iconBase64}`).size(ICON_SIZE, ICON_SIZE)
  iconImage.clipWith(squircle)
  }
@@ -146,7 +148,7 @@ module.exports = class InviteRenderer {
  buttonContainer.rect(BUTTON_WIDTH, BUTTON_HEIGHT)
  .radius(3)
  .fill(themeColors.joinButtonBackground)
- const joinButtonText = buttonContainer.path(whitneyMedium.getD(locale.button, { fontSize: 14 }))
+ const joinButtonText = buttonContainer.path(whitneySemibold.getD(locale.button, { fontSize: 14 }))
  .fill(themeColors.joinButtonText)
  joinButtonText.move((BUTTON_WIDTH - joinButtonText.width()) / 2, (BUTTON_HEIGHT - joinButtonText.height()) / 2)
 
@@ -185,6 +187,13 @@ module.exports = class InviteRenderer {
  EXTRA_SERVER_NAME_PADDING = flowerStar.width() + BADGE_MARGIN_RIGHT
  }
 
+ const splashcircle = contentContainer.rect(SPLASH_HEIGHT, SPLASH_WIDTH).radius(16).fill(themeColors.serverIcon)
+ if (invite.guild.splash) {
+ const iconBase64 = await Discord.fetchBase64Image(Discord.getSplashUrl(invite.guild.id, invite.guild.splash))
+ const iconImage = contentContainer.image(`data:image/jpg;base64,${iconBase64}`).size(SPLASH_WIDTH, SPLASH_HEIGHT)
+ iconImage.clipWith(splashcircle)
+ }
+
  // Server Name
  const serverNameText = innerContainer.path(whitneySemibold.getD(invite.guild.name, { anchor: 'top left', fontSize: SERVER_NAME_SIZE }))
  .fill(themeColors.serverName)