From 0484834afcac3e5b08f8ee0a83fcc12aed12aafe Mon Sep 17 00:00:00 2001
From: sahejkm <sahejk@meta.com>
Date: Thu, 4 Jul 2024 18:56:51 +0800
Subject: [PATCH 1/3] Add open to render preview if image not available

---
 packages/lexical-website/src/components/Gallery/Card.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/lexical-website/src/components/Gallery/Card.js b/packages/lexical-website/src/components/Gallery/Card.js
index 0d4ab530722..019a02f91bd 100644
--- a/packages/lexical-website/src/components/Gallery/Card.js
+++ b/packages/lexical-website/src/components/Gallery/Card.js
@@ -28,7 +28,8 @@ function Card({item}) {
     <li key={item.title} className="card shadow--md">
       <a href={item.uri} target="_blank">
         <div className={clsx('card__image', styles.showcaseCardImage)}>
-          <img src={image} alt={item.title} />
+          {item.renderPreview == null && <img src={image} alt={item.title} />}
+          {item.renderPreview != null && item.renderPreview()}
         </div>
       </a>
       <div className="card__body">

From 0e37c2eaadb42915e9ad28bceceb59a9fc74a864 Mon Sep 17 00:00:00 2001
From: sahejkm <sahejk@meta.com>
Date: Thu, 4 Jul 2024 19:37:39 +0800
Subject: [PATCH 2/3] add option to render preview at run time if img uri not
 available

---
 .../lexical-website/src/components/Gallery/pluginList.js    | 6 ++++++
 .../src/components/Gallery/styles.module.css                | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/lexical-website/src/components/Gallery/pluginList.js b/packages/lexical-website/src/components/Gallery/pluginList.js
index d6ffbae6588..9c6e04e8e38 100644
--- a/packages/lexical-website/src/components/Gallery/pluginList.js
+++ b/packages/lexical-website/src/components/Gallery/pluginList.js
@@ -8,7 +8,13 @@
 
 export const plugins = (customFields) => [
   {
+    description: 'Learn how to create an editor with Emojis',
     title: 'EmojiPlugin',
     uri: `${customFields.STACKBLITZ_PREFIX}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=0`,
   },
+  {
+    description: 'Learn how to create an editor with RichText',
+    title: 'Collab RichText',
+    uri: 'https://stackblitz.com/github/facebook/lexical/tree/fix/collab_example/examples/react-rich-collab?ctl=0&file=src%2Fmain.tsx&terminalHeight=0&embed=1',
+  },
 ];
diff --git a/packages/lexical-website/src/components/Gallery/styles.module.css b/packages/lexical-website/src/components/Gallery/styles.module.css
index 979dfd1cefe..929d9ce3fef 100644
--- a/packages/lexical-website/src/components/Gallery/styles.module.css
+++ b/packages/lexical-website/src/components/Gallery/styles.module.css
@@ -7,7 +7,7 @@
 
 .cardList {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
   gap: 24px;
 }
 
@@ -28,7 +28,7 @@ html[data-theme='dark'] .showcaseFavorite {
 
 .showcaseCardImage {
   overflow: hidden;
-  height: 150px;
+  height: 240px;
   border-bottom: 2px solid var(--ifm-color-emphasis-200);
 }
 

From 485d90bb38e1c24f513fc8e462824aa6424eb08c Mon Sep 17 00:00:00 2001
From: sahejkm <sahejk@meta.com>
Date: Thu, 4 Jul 2024 19:41:20 +0800
Subject: [PATCH 3/3] update desc text

---
 packages/lexical-website/src/components/Gallery/pluginList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lexical-website/src/components/Gallery/pluginList.js b/packages/lexical-website/src/components/Gallery/pluginList.js
index 9c6e04e8e38..48ecfca2d68 100644
--- a/packages/lexical-website/src/components/Gallery/pluginList.js
+++ b/packages/lexical-website/src/components/Gallery/pluginList.js
@@ -13,7 +13,7 @@ export const plugins = (customFields) => [
     uri: `${customFields.STACKBLITZ_PREFIX}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=0`,
   },
   {
-    description: 'Learn how to create an editor with RichText',
+    description: 'Learn how to create an editor with Real Time Collaboration',
     title: 'Collab RichText',
     uri: 'https://stackblitz.com/github/facebook/lexical/tree/fix/collab_example/examples/react-rich-collab?ctl=0&file=src%2Fmain.tsx&terminalHeight=0&embed=1',
   },