TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Recommendations settings design tweaks (#17875)

Browse Source 
refs https://github.com/TryGhost/Product/issues/3791

- Added realistic recommendations placeholders
- Slightly improved Recommendations list design
This commit is contained in:
Djordje Vlaisavljevic 2023-08-30 15:39:36 +01:00 committed by GitHub
parent 310f01da0b
commit feb55ccc00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-settings/src/admin-x-ds/global/Table.tsx
View File

@ -34,7 +34,7 @@ const Table: React.FC<TableProps> = ({children, borderTop, hint, hintSeparator,
</tbody>
</table>
{hint &&
<div className='mt-1'>
<div>
{hintSeparator && <Separator />}
<div className="flex justify-between">
<Hint>{hint}</Hint>

4
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
View File

@ -51,11 +51,11 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
const RecommendationList: React.FC<RecommendationListProps> = ({recommendations}) => {
if (recommendations.length) {
return <Table>
return <Table hint='Readers will see your recommendations in randomized order' hintSeparator>
{recommendations.map(recommendation => <RecommendationItem key={recommendation.id} recommendation={recommendation} />)}
</Table>;
} else {
return <NoValueLabel icon='mail-block'>
return <NoValueLabel icon='thumbs-up'>
No recommendations yet.
</NoValueLabel>;
}

45
ghost/recommendations/src/InMemoryRecommendationRepository.ts
View File

@ -4,21 +4,48 @@ import {RecommendationRepository} from "./RecommendationRepository";
export class InMemoryRecommendationRepository implements RecommendationRepository {
recommendations: Recommendation[] = [
new Recommendation({
title: "Product Marketing Alliance",
reason: "This is a great book for any developer, regardless of their experience level. It's a classic that's stood the test of time.",
title: "She‘s A Beast",
reason: "She helped me get back into the gym after 8 years of chilling",
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
favicon: "https://www.productmarketingalliance.com/favicon.ico",
url: "https://www.productmarketingalliance.com/",
oneClickSubscribe: true
favicon: "https://www.shesabeast.co/content/images/size/w256h256/2022/08/transparent-icon-black-copy-gray-bar.png",
url: "https://www.thepragmaticprogrammer.com/",
oneClickSubscribe: false
}),
new Recommendation({
title: "The Lever",
reason: "This is a great book for any developer, regardless of their experience level. It's a classic that's stood the test of time.",
title: "Lenny‘s Newsletter",
reason: "He knows his stuff about product management and gives away lots of content for free. Highly recommended!",
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
favicon: "https://www.levernews.com/content/images/size/w256h256/2022/03/LEVERFavicon-BorderWhite.png",
url: "https://www.levernews.com",
favicon: "https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fc7cde267-8f9e-47fa-9aef-5be03bad95ed%2Fapple-touch-icon-1024x1024.png",
url: "https://www.thepragmaticprogrammer.com/",
oneClickSubscribe: false
}),
new Recommendation({
title: "Clickhole",
reason: "Funny",
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
favicon: "https://clickhole.com/wp-content/uploads/2020/05/cropped-clickhole-icon-180x180.png",
url: "https://www.thepragmaticprogrammer.com/",
oneClickSubscribe: false
}),
new Recommendation({
title: "The Verge",
reason: "Consistently best tech news, I read it every day!",
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
favicon: "https://www.theverge.com/icons/apple_touch_icon.png",
url: "https://www.thepragmaticprogrammer.com/",
oneClickSubscribe: false
}),
new Recommendation({
title: "The Counteroffensive with Tim Mak",
reason: "On-the-ground war reporting from Ukraine.",
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
favicon: "https://substackcdn.com/image/fetch/w_96,h_96,c_fill,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff3f2b2ad-681f-45e1-9496-db80f45e853d_403x403.png",
url: "https://www.thepragmaticprogrammer.com/",
oneClickSubscribe: true
})
];