Added stack exchange site logo

Author: TessavWalstijn

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Added
 
+- Implemented the stack exchange site logo instead of a title
+  Title will be used as fallback
 - Implemented nice name for all stack exchange sites
 
 ### Fixed

scripts/createMaps.js

@@ -14,12 +14,12 @@ fetch(
     console.log(body.items.length)
     const items = body.items
 
-    items.forEach(async ({ api_site_parameter, name, icon_url }) => {
+    items.forEach(async ({ api_site_parameter, name, logo_url }) => {
       names[api_site_parameter] = name
-      icons[api_site_parameter] = icon_url
+      icons[api_site_parameter] = logo_url
     })
   })
   .then(async () => {
-    console.log(names)
+    // console.log(names)
     console.log(icons)
   })

source/components/SiteLogo/SiteLogo.js

@@ -0,0 +1,32 @@
+import { getBase64Image } from '../../utils/getBase64Image.js'
+import { siteLogoMap } from './SiteLogoMap.js'
+
+/**
+ * @param {string} seSite parameter from request
+ * @returns svg string
+ */
+export const siteLogo = async (seSite) => {
+  try {
+    const siteUrl = siteLogoMap(seSite)
+    const base64Image = await getBase64Image(siteUrl)
+  
+    return `
+      <g data-test-id="site-icon-group" transform="translate(25, 5)">
+        <style>
+          .site-logo {
+            filter: invert(.5) brightness(2);
+          }
+        </style>
+        <image
+          data-test-id="site-icon"
+          class="site-logo"
+          xlink:href="${base64Image}"
+          width="158"
+          height="28"
+        />
+      </g>
+    `
+  } catch {
+    return ''
+  }
+}

source/components/SiteLogo/SiteLogoMap.js

@@ -0,0 +1 @@
+export { siteLogo } from './SiteLogo.js'

source/components/SiteLogo/index.js

@@ -13,6 +13,7 @@ import {
 import { SVG } from '../components/SVG/index.js'
 import { errorText } from '../components/ErrorText/index.js'
 import { siteName } from '../components/SiteName/index.js'
+import { siteLogo } from '../components/SiteLogo/index.js'
 
 dotenv.config()
 
@@ -148,16 +149,19 @@ router.get('/', async (req, res) => {
     )
   }
 
+  const siteLogoContent = await siteLogo(seSite)
+
   res.send(
     SVG(
       useImage,
       false,
-      siteName(seSite),
+      siteLogoContent ?? siteName(seSite),
       `${
         useImage
           ? await userImage(user.profile_image)
           : userName(user.display_name, nameSize, nameX)
       }
+      ${siteLogoContent}
       ${reputationContainer(useImage, user.reputation)}
       ${badgeContainer(useImage, user.badge_counts)}`,
     ),

source/routes/stackExchange.route.js

@@ -0,0 +1,14 @@
+export const processObjectOfPromises = async (object) => {
+  const keys = Object.keys(object)
+  const promises = Object.values(object)
+
+  const results = await Promise.allSettled(promises)
+
+  // Reconstruct the object with the resolved values
+  const resultObject = {}
+  keys.forEach((key, index) => {
+    resultObject[key] = results[index]
+  })
+
+  return resultObject
+}