feat: Display app icon and description in embeds

Author: AtkinsSJ

packages/backend/src/routers/_default.js

@@ -265,7 +265,7 @@ router.all('*', async function(req, res, next) {
         // ------------------------
         else{
             let canonical_url = config.origin + path;
-            let app_name, app_title, description;
+            let app_name, app_title, app_description, app_icon;
             let launch_options = {
                 on_initialized: []
             };
@@ -283,7 +283,8 @@ router.all('*', async function(req, res, next) {
                 const app = await get_app({name: app_name});
                 if(app){
                     app_title = app.title;
-                    description = app.description;
+                    app_description = app.description;
+                    app_icon = app.icon;
                 }
                 // 404 - Not found!
                 else if(app_name){
@@ -319,10 +320,11 @@ router.all('*', async function(req, res, next) {
                 const svc_puterHomepage = Context.get('services').get('puter-homepage');
                 return svc_puterHomepage.send({ req, res }, {
                     title: app_title,
-                    description: description || config.short_description,
-                    short_description: config.short_description,
+                    description: app_description || config.short_description,
+                    short_description: app_description || config.short_description,
                     company: 'Puter Technologies Inc.',
                     canonical_url: canonical_url,
+                    icon: app_icon,
                 }, launch_options);
             }
 
@@ -417,4 +419,4 @@ router.all('*', async function(req, res, next) {
     }
 });
 
-module.exports = router
+module.exports = router

packages/backend/src/services/PuterHomepageService.js

@@ -122,6 +122,7 @@ class PuterHomepageService extends BaseService {
             short_description,
             company,
             canonical_url,
+            icon,
         } = meta;
 
         gui_params = {
@@ -141,6 +142,8 @@ class PuterHomepageService extends BaseService {
 
         const bundled = env != 'dev' || use_bundled_gui;
 
+        const icon_url = icon || `${asset_dir}/images/screenshot.png`;
+
         const writeScriptTag = path =>
             `<script type="${
                 Array.isArray(path) ? 'text/javascirpt' : 'module'
@@ -158,19 +161,19 @@ class PuterHomepageService extends BaseService {
         <link rel="canonical" href="${e(canonical_url)}">
 
         <!-- Meta meta tags -->
-        <meta property="og:url" content="${app_origin}">
+        <meta property="og:url" content="${e(canonical_url)}">
         <meta property="og:type" content="website">
         <meta property="og:title" content="${e(title)}">
         <meta property="og:description" content="${e((short_description).replace(/\n/g, " "))}">
-        <meta property="og:image" content="${asset_dir}/images/screenshot.png">
+        <meta property="og:image" content="${e(icon_url)}">
 
         <!-- Twitter meta tags -->
         <meta name="twitter:card" content="summary_large_image">
         <meta property="twitter:domain" content="puter.com">
-        <meta property="twitter:url" content="${app_origin}">
+        <meta property="twitter:url" content="${e(canonical_url)}">
         <meta name="twitter:title" content="${e(title)}">
         <meta name="twitter:description" content="${e((short_description).replace(/\n/g, " "))}">
-        <meta name="twitter:image" content="${asset_dir}/images/screenshot.png">
+        <meta name="twitter:image" content="${e(icon_url)}">
 
         <!-- favicons -->
         <link rel="apple-touch-icon" sizes="57x57" href="${asset_dir}/favicons/apple-icon-57x57.png">