feat: updated open graph image to match site with real-time stargazer count

Author: titanism

app/controllers/web/index.js

@@ -8,8 +8,8 @@ const path = require('node:path');
 const { Buffer } = require('node:buffer');
 
 const Boom = require('@hapi/boom');
-const QRCode = require('qrcode');
 const Meta = require('koa-meta');
+const QRCode = require('qrcode');
 const _ = require('lodash');
 const dayjs = require('dayjs-with-plugins');
 const humanize = require('humanize-string');
@@ -21,9 +21,12 @@ const revHash = require('rev-hash');
 const sanitizeHtml = require('sanitize-html');
 const sharp = require('sharp');
 const shortID = require('mongodb-short-id');
+const splitLines = require('split-lines');
 const titleize = require('titleize');
-const { isEmail } = require('validator');
+const wrap = require('word-wrap');
+const { Octokit } = require('@octokit/core');
 const { gzip } = require('node-gzip');
+const { isEmail } = require('validator');
 
 const admin = require('./admin');
 const api = require('./api');
@@ -46,6 +49,7 @@ const Aliases = require('#models/aliases');
 const Domains = require('#models/domains');
 const Users = require('#models/users');
 const config = require('#config');
+const env = require('#config/env');
 // const createWebSocketAsPromised = require('#helpers/create-websocket-as-promised');
 const email = require('#helpers/email');
 const i18n = require('#helpers/i18n');
@@ -56,6 +60,30 @@ const { decrypt } = require('#helpers/encrypt-decrypt');
 
 const meta = new Meta(config.meta, logger);
 
+const octokit = new Octokit({
+  auth: env.GITHUB_OCTOKIT_TOKEN
+});
+
+// every 6 hours update github star count
+let STARS = 1000;
+async function checkGitHubStars() {
+  const response = await octokit.request('GET /repos/{owner}/{repo}', {
+    owner: 'forwardemail',
+    repo: 'forwardemail.net',
+    headers: {
+      'X-GitHub-Api-Version': '2022-11-28'
+    }
+  });
+  if (Number.isFinite(response?.data?.stargazers_count))
+    STARS = response.data.stargazers_count;
+  if (STARS <= 0) STARS = 1000;
+}
+
+if (config.env !== 'test') {
+  checkGitHubStars();
+  setInterval(checkGitHubStars, ms('6h'));
+}
+
 const SVG_STR = fs.readFileSync(
   config.env === 'development'
     ? path.join(__dirname, '..', '..', '..', 'assets', 'img', 'template.svg')
@@ -205,14 +233,10 @@ async function generateOpenGraphImage(ctx, next) {
 
     // load seo metadata
     let data = {};
-    let match = `/${ctx.locale}`;
     let found = false;
     try {
       data = meta.getByPath(url, ctx.request.t);
       found = true;
-      match = `/${ctx.locale}${url}`;
-      if (match.length > 40)
-        match = _.escape(_.unescape(match).slice(0, 40) + '...');
     } catch (err) {
       if (!keys.has(url)) logger.error(err);
       data = meta.getByPath('/', ctx.request.t);
@@ -223,8 +247,6 @@ async function generateOpenGraphImage(ctx, next) {
       for (const alternative of config.alternatives) {
         const slug = `/blog/best-${alternative.slug}-alternative`;
         if (url === slug) {
-          match = `/${ctx.locale}${slug}`;
-
           const title = ctx.state.t(
             '<span class="notranslate">%d</span> Best <span class="notranslate">%s</span> Alternatives in <span class="notranslate">%s</span>',
             config.alternatives.length - 1,
@@ -254,8 +276,6 @@ async function generateOpenGraphImage(ctx, next) {
           if (a.name === alternative.name) continue;
           const slug = `/blog/${alternative.slug}-vs-${a.slug}-email-service-comparison`;
           if (url === slug) {
-            match = `/${ctx.locale}${slug}`;
-
             const title = ctx.state.t(
               `<span class="notranslate">%s</span> vs <span class="notranslate">%s</span> Comparison (<span class="notranslate">%s</span>)`,
               alternative.name,
@@ -284,17 +304,13 @@ async function generateOpenGraphImage(ctx, next) {
       }
     }
 
-    if (match === '/') match = `/${ctx.locale}`;
-    else if (match.endsWith('/')) match = match.slice(0, -1);
-    if (match === `/${i18n.config.defaultLocale}`) match = '';
-
     ctx.type = ctx.path.endsWith('.svg')
       ? 'image/svg+xml'
       : ctx.path.endsWith('.jpeg')
       ? 'image/jpeg'
       : 'image/png';
 
-    let [str] = data.title
+    let [title] = data.title
       .replace(config.views.locals.striptags(config.metaTitleAffix), '')
       .replace(
         config.views.locals
@@ -303,17 +319,16 @@ async function generateOpenGraphImage(ctx, next) {
         ''
       )
       .split(' - ');
-    str = str.trim();
-    if (url.startsWith('/guides') && str.includes(' for '))
-      str = str.split(' for ')[1].trim();
-    if (str.length > 50) str = _.escape(_.unescape(str).slice(0, 50) + '...');
-    let freeEmail = ctx.translate('FREE_EMAIL');
-    if (url.startsWith('/guides') || url.startsWith('/how-to'))
-      freeEmail = ctx.translate('TUTORIAL');
+    title = title.trim();
+    if (url.startsWith('/guides') && title.includes(' for '))
+      title = title.split(' for ')[1].trim();
+    else if (title.includes(' for ')) title = title.split(' for ')[0].trim();
+    if (title.length > 40)
+      title = _.escape(_.unescape(title.trim()).slice(0, 40).trim() + '...');
 
     // if it was a developer doc then parse the title
     const doc = config.views.locals.developerDocs.find((d) => d.slug === url);
-    if (doc && isSANB(doc.ogBtnText)) freeEmail = doc.ogBtnText;
+    if (doc && isSANB(doc.ogBtnText)) title = doc.ogBtnText.trim();
 
     // if it was a open source guide then parse the title
     const platform = config.views.locals.platforms.find(
@@ -323,32 +338,28 @@ async function generateOpenGraphImage(ctx, next) {
         `/blog/open-source/${config.views.locals.dashify(p)}-email-clients` ===
           url
     );
-    if (platform) freeEmail = platform;
+    if (platform) title = platform.trim();
 
-    // fallback safeguard
-    if (freeEmail.length > 20) freeEmail = i18n.translate('FREE_EMAIL', 'en');
+    // remove year
+    title = title.replace(`in ${dayjs().format('YYYY')}`, ' ').trim();
+    title = title.replace(`for ${dayjs().format('YYYY')}`, ' ').trim();
+    title = title.replace(dayjs().format('YYYY'), ' ').trim();
+    title = title.replace('( )', '').trim();
 
-    let noCreditCard = ctx.translate('NO_CREDIT_CARD');
-    if (noCreditCard.length > 60)
-      noCreditCard = i18n.translate('NO_CREDIT_CARD', 'en');
+    // fallback safeguard
+    if (title.length > 24)
+      title = i18n.translate('PRIVATE_BUSINESS', 'en').trim();
 
-    let urlBar = match;
-    if (urlBar.length > 40) {
-      urlBar = urlBar.slice(0, 40);
-      urlBar += '...';
-    }
+    // LINE1, LINE2, LINE3
+    const [line1, line2, line3] = splitLines(
+      wrap(data.description.trim(), { width: 60 })
+    );
 
-    const svgReplaced = SVG_STR.replace('NO_CREDIT_CARD', noCreditCard)
-      .replaceAll('MONOSPACE_NAME', 'Inconsolata-dz for Powerline')
-      .replaceAll('FONT_NAME', 'VC Honey')
-      .replace('PRIVATE_BUSINESS', str.trim())
-      .replace('FREE_EMAIL', freeEmail)
-      .replace(
-        'font-size="85"',
-        `font-size="${freeEmail.length >= 14 ? 65 : 85}"`
-      )
-      .replace('forwardemail.net', `forwardemail.net${urlBar}`)
-      .replace('font-size="56"', `font-size="${str.length >= 40 ? 40 : 56}"`);
+    const svgReplaced = SVG_STR.replace('TITLE', title.trim())
+      .replace('LINE1', line1 || '')
+      .replace('LINE2', line2 || '')
+      .replace('LINE3', line3 || '')
+      .replace('COUNT', STARS);
 
     const svg = Buffer.from(svgReplaced, 'utf8');
     const hash = revHash(ctx.type + ':' + svgReplaced);

assets/img/template.sketch

@@ -10323,5 +10323,15 @@
   "Calendar already exists.": "التقويم موجود بالفعل.",
   "Canonical": "قانوني",
   "Kubuntu": "كوبونتو",
-  "Lubuntu": "لوبونتو"
+  "Lubuntu": "لوبونتو",
+  "export format already supported).": "(تنسيق التصدير مدعوم بالفعل).",
+  "Webhook signature support": "دعم توقيع Webhook",
+  "header was added.": "تمت إضافة الرأس.",
+  "Bounce webhook support was added": "تمت إضافة دعم Bounce webhook",
+  "and we now allow users to send newsletters, announcements, and email marketing through our outbound SMTP service.  We also added the ability to set domain-wide and alias-specific storage quotas for IMAP/POP3/CalDAV.": "والآن نسمح للمستخدمين بإرسال النشرات الإخبارية والإعلانات والتسويق عبر البريد الإلكتروني من خلال خدمة SMTP الصادرة. كما أضفنا القدرة على تعيين حصص تخزين على مستوى النطاق واسم مستعار محدد لـ IMAP/POP3/CalDAV.",
+  "Our service was founded in 2017 and powers email for over 500,000 domains – including notable users such as Canonical, Netflix, The Linux Foundation, several universities and governments, and more.": "تأسست خدمتنا في عام 2017 وهي تدعم البريد الإلكتروني لأكثر من 500000 نطاق - بما في ذلك مستخدمين بارزين مثل Canonical وNetflix وLinux Foundation والعديد من الجامعات والحكومات والمزيد.",
+  "Storage maximum quota for aliases on this domain name.  Enter a value such as \"1 GB\" that will be parsed by": "الحد الأقصى لحصة التخزين للأسماء المستعارة على اسم المجال هذا. أدخل قيمة مثل \"1 جيجابايت\" التي سيتم تحليلها بواسطة",
+  "bytes": "بايتات",
+  "Storage maximum quota for this alias. Leave blank to reset to domain current maximum quota or enter a value such as \"1 GB\" that will be parsed by": "الحد الأقصى لحصة التخزين لهذا الاسم المستعار. اتركه فارغًا لإعادة تعيين الحد الأقصى لحصة المجال الحالية أو أدخل قيمة مثل \"1 جيجابايت\" التي سيتم تحليلها بواسطة",
+  ".  This value can only be adjusted by domain admins.": "لا يمكن تعديل هذه القيمة إلا بواسطة مسؤولي المجال."
 }

assets/img/template.svg

@@ -10323,5 +10323,15 @@
   "Calendar already exists.": "Kalendář již existuje.",
   "Canonical": "Kanonický",
   "Kubuntu": "Kubuntu",
-  "Lubuntu": "Lubuntu"
+  "Lubuntu": "Lubuntu",
+  "export format already supported).": "exportní formát již podporován).",
+  "Webhook signature support": "Podpora podpisu webhooku",
+  "header was added.": "byla přidána hlavička.",
+  "Bounce webhook support was added": "Byla přidána podpora Bounce webhooku",
+  "and we now allow users to send newsletters, announcements, and email marketing through our outbound SMTP service.  We also added the ability to set domain-wide and alias-specific storage quotas for IMAP/POP3/CalDAV.": "a nyní umožňujeme uživatelům zasílat informační bulletiny, oznámení a e-mailový marketing prostřednictvím naší odchozí služby SMTP.  Také jsme přidali možnost nastavit kvóty úložiště pro celou doménu a pro alias pro IMAP/POP3/CalDAV.",
+  "Our service was founded in 2017 and powers email for over 500,000 domains – including notable users such as Canonical, Netflix, The Linux Foundation, several universities and governments, and more.": "Naše služba byla založena v roce 2017 a poskytuje e-mail pro více než 500 000 domén – včetně významných uživatelů, jako jsou Canonical, Netflix, The Linux Foundation, několik univerzit a vlád a další.",
+  "Storage maximum quota for aliases on this domain name.  Enter a value such as \"1 GB\" that will be parsed by": "Maximální kvóta úložiště pro aliasy na tomto názvu domény.  Zadejte hodnotu, například „1 GB“, podle které bude analyzován",
+  "bytes": "bajtů",
+  "Storage maximum quota for this alias. Leave blank to reset to domain current maximum quota or enter a value such as \"1 GB\" that will be parsed by": "Maximální kvóta úložiště pro tento alias. Ponechte prázdné, chcete-li obnovit aktuální maximální kvótu domény, nebo zadejte hodnotu, například „1 GB“, podle které bude analyzován",
+  ".  This value can only be adjusted by domain admins.": ".  Tuto hodnotu mohou upravit pouze správci domény."
 }

locales/ar.json

@@ -7311,5 +7311,15 @@
   "Calendar already exists.": "Kalenderen findes allerede.",
   "Canonical": "Kanonisk",
   "Kubuntu": "Kubuntu",
-  "Lubuntu": "Lubuntu"
+  "Lubuntu": "Lubuntu",
+  "export format already supported).": "eksportformat allerede understøttet).",
+  "Webhook signature support": "Webhook signatur support",
+  "header was added.": "header blev tilføjet.",
+  "Bounce webhook support was added": "Bounce webhook-understøttelse blev tilføjet",
+  "and we now allow users to send newsletters, announcements, and email marketing through our outbound SMTP service.  We also added the ability to set domain-wide and alias-specific storage quotas for IMAP/POP3/CalDAV.": "og vi tillader nu brugere at sende nyhedsbreve, meddelelser og e-mail-marketing gennem vores udgående SMTP-tjeneste.  Vi tilføjede også muligheden for at indstille domænedækkende og aliasspecifikke lagerkvoter for IMAP/POP3/CalDAV.",
+  "Our service was founded in 2017 and powers email for over 500,000 domains – including notable users such as Canonical, Netflix, The Linux Foundation, several universities and governments, and more.": "Vores tjeneste blev grundlagt i 2017 og driver e-mail til over 500.000 domæner – herunder bemærkelsesværdige brugere som Canonical, Netflix, The Linux Foundation, adskillige universiteter og regeringer og mere.",
+  "Storage maximum quota for aliases on this domain name.  Enter a value such as \"1 GB\" that will be parsed by": "Maksimal lagringskvote for aliaser på dette domænenavn.  Indtast en værdi såsom \"1 GB\", som vil blive parset af",
+  "bytes": "bytes",
+  "Storage maximum quota for this alias. Leave blank to reset to domain current maximum quota or enter a value such as \"1 GB\" that will be parsed by": "Maksimal lagringskvote for dette alias. Lad stå tomt for at nulstille til domænets nuværende maksimale kvote, eller indtast en værdi såsom \"1 GB\", der vil blive parset af",
+  ".  This value can only be adjusted by domain admins.": ".  Denne værdi kan kun justeres af domæneadministratorer."
 }

locales/cs.json

@@ -9362,5 +9362,15 @@
   "Calendar already exists.": "Kalender existiert bereits.",
   "Canonical": "Kanonisch",
   "Kubuntu": "Kubuntu",
-  "Lubuntu": "Lubuntu"
+  "Lubuntu": "Lubuntu",
+  "export format already supported).": "Exportformat wird bereits unterstützt).",
+  "Webhook signature support": "Unterstützung für Webhook-Signaturen",
+  "header was added.": "Kopfzeile wurde hinzugefügt.",
+  "Bounce webhook support was added": "Bounce-Webhook-Unterstützung wurde hinzugefügt",
+  "and we now allow users to send newsletters, announcements, and email marketing through our outbound SMTP service.  We also added the ability to set domain-wide and alias-specific storage quotas for IMAP/POP3/CalDAV.": "und wir ermöglichen Benutzern jetzt, Newsletter, Ankündigungen und E-Mail-Marketing über unseren ausgehenden SMTP-Dienst zu versenden. Wir haben auch die Möglichkeit hinzugefügt, domänenweite und aliasspezifische Speicherkontingente für IMAP/POP3/CalDAV festzulegen.",
+  "Our service was founded in 2017 and powers email for over 500,000 domains – including notable users such as Canonical, Netflix, The Linux Foundation, several universities and governments, and more.": "Unser Dienst wurde 2017 gegründet und unterstützt den E-Mail-Verkehr von über 500.000 Domänen – darunter namhafte Benutzer wie Canonical, Netflix, The Linux Foundation, mehrere Universitäten und Regierungen und mehr.",
+  "Storage maximum quota for aliases on this domain name.  Enter a value such as \"1 GB\" that will be parsed by": "Maximales Speicherkontingent für Aliase für diesen Domänennamen. Geben Sie einen Wert wie „1 GB“ ein, der analysiert wird von",
+  "bytes": "Bytes",
+  "Storage maximum quota for this alias. Leave blank to reset to domain current maximum quota or enter a value such as \"1 GB\" that will be parsed by": "Maximales Speicherkontingent für diesen Alias. Lassen Sie das Feld leer, um das aktuelle maximale Kontingent der Domäne zurückzusetzen, oder geben Sie einen Wert wie „1 GB“ ein, der von",
+  ".  This value can only be adjusted by domain admins.": ". Dieser Wert kann nur von Domänenadministratoren angepasst werden."
 }

locales/da.json

@@ -6703,5 +6703,16 @@
   "Calendar": "Calendar",
   "Canonical": "Canonical",
   "Kubuntu": "Kubuntu",
-  "Lubuntu": "Lubuntu"
+  "Lubuntu": "Lubuntu",
+  "export format already supported).": "export format already supported).",
+  "Webhook signature support": "Webhook signature support",
+  "header was added.": "header was added.",
+  "Bounce webhook support was added": "Bounce webhook support was added",
+  "and we now allow users to send newsletters, announcements, and email marketing through our outbound SMTP service.  We also added the ability to set domain-wide and alias-specific storage quotas for IMAP/POP3/CalDAV.": "and we now allow users to send newsletters, announcements, and email marketing through our outbound SMTP service.  We also added the ability to set domain-wide and alias-specific storage quotas for IMAP/POP3/CalDAV.",
+  "Our service was founded in 2017 and powers email for over 500,000 domains – including notable users such as Canonical, Netflix, The Linux Foundation, several universities and governments, and more.": "Our service was founded in 2017 and powers email for over 500,000 domains – including notable users such as Canonical, Netflix, The Linux Foundation, several universities and governments, and more.",
+  "Storage maximum quota for aliases on this domain name.  Enter a value such as \"1 GB\" that will be parsed by": "Storage maximum quota for aliases on this domain name.  Enter a value such as \"1 GB\" that will be parsed by",
+  "bytes": "bytes",
+  "Storage maximum quota for this alias. Leave blank to reset to domain current maximum quota or enter a value such as \"1 GB\" that will be parsed by": "Storage maximum quota for this alias. Leave blank to reset to domain current maximum quota or enter a value such as \"1 GB\" that will be parsed by",
+  ".  This value can only be adjusted by domain admins.": ".  This value can only be adjusted by domain admins.",
+  "Private Business Email Service": "Private Business Email Service"
 }