From 8f5ac0620bd7a2b4cea800743625f67956cbf793 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 20 Sep 2023 14:30:09 +0100
Subject: [PATCH] Added Ghost favicon to recommendations with 1-click subscribe

refs https://github.com/TryGhost/Product/issues/3902
---
 .../site/recommendations/RecommendationIcon.tsx     | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx
index 5359a3bcc4..2a89b10c8d 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationIcon.tsx
@@ -1,13 +1,15 @@
 /* eslint-disable camelcase */
+import GhostLogo from '../../../../assets/images/ghost-favicon.png';
 import React, {useState} from 'react';
 
 interface Props {
     title: string,
     favicon?: string | null,
+    showSubscribes?: number | boolean,
     featured_image?: string | null
 }
 
-const RecommendationIcon: React.FC<Props> = ({title, favicon, featured_image}) => {
+const RecommendationIcon: React.FC<Props> = ({title, favicon, showSubscribes, featured_image}) => {
     const [icon, setIcon] = useState(favicon || featured_image || null);
 
     const clearIcon = () => {
@@ -18,7 +20,14 @@ const RecommendationIcon: React.FC<Props> = ({title, favicon, featured_image}) =
         return null;
     }
 
-    return (<img alt={title} className="h-5 w-5 rounded-sm" src={icon} onError={clearIcon} />);
+    const hint = showSubscribes ? 'This is a Ghost site that supports one-click subscribe' : '';
+
+    return (
+        <div className="relative h-5 w-5" title={hint}>
+            <img alt={title} className="h-5 w-5 rounded-sm" src={icon} onError={clearIcon} />
+            {showSubscribes && <img alt='Ghost Logo' className='absolute bottom-[-3px] right-[-3px] h-[14px] w-[14px]' src={GhostLogo} />}
+        </div>
+    );
 };
 
 export default RecommendationIcon;