[Lexical] Create initial Gallery View with Emoji Plugin Example #44
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "snippets": {}, | ||
| "description": "@generated" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| import Link from '@docusaurus/Link'; | ||
| import Heading from '@theme/Heading'; | ||
| import clsx from 'clsx'; | ||
| import React from 'react'; | ||
|
|
||
| import styles from './styles.module.css'; | ||
|
|
||
| function getCardImage(item) { | ||
| return ( | ||
| item.preview ?? | ||
| `https://slorber-api-screenshot.netlify.app/${encodeURIComponent( | ||
| item.uri, | ||
| )}/showcase` | ||
| ); | ||
| } | ||
|
|
||
| function Card({item}) { | ||
| const image = getCardImage(item); | ||
| return ( | ||
| <li key={item.title} className="card shadow--md"> | ||
| <a href={item.uri} target="_blank"> | ||
|
There was a problem hiding this comment. Add When using <a href={item.uri} target="_blank" rel="noopener noreferrer"> |
||
| <div className={clsx('card__image', styles.showcaseCardImage)}> | ||
| <img src={image} alt={item.title} /> | ||
| </div> | ||
| </a> | ||
| <div className="card__body"> | ||
| <div className={clsx(styles.showcaseCardHeader)}> | ||
| <Heading as="h4" className={styles.showcaseCardTitle}> | ||
| <Link href={item.website} className={styles.showcaseCardLink}> | ||
| {item.title} | ||
| </Link> | ||
| </Heading> | ||
| </div> | ||
| <p className={styles.showcaseCardBody}>{item.description}</p> | ||
| </div> | ||
| </li> | ||
| ); | ||
| } | ||
|
Comment on lines
+25
to
+46
There was a problem hiding this comment. I noticed that the Card component doesn't handle potential missing data in the 'item' prop. This could lead to runtime errors if any of the expected properties (title, uri, website, description) are undefined or null. Consider adding null checks or default values to ensure the component renders gracefully even with incomplete data. For example, you could use the optional chaining operator (?.) or provide fallback values using the nullish coalescing operator (??).
Comment on lines
+25
to
+46
There was a problem hiding this comment. Handle potential missing data in the The function Card({item}) {
const image = getCardImage(item);
return (
<li key={item.title ?? 'default-title'} className="card shadow--md">
<a href={item.uri ?? '#'} target="_blank" rel="noopener noreferrer">
<div className={clsx('card__image', styles.showcaseCardImage)}>
<img src={image} alt={item.title ?? 'No title'} />
</div>
</a>
<div className="card__body">
<div className={clsx(styles.showcaseCardHeader)}>
<Heading as="h4" className={styles.showcaseCardTitle}>
<Link href={item.website ?? '#'} className={styles.showcaseCardLink}>
{item.title ?? 'No title'}
</Link>
</Heading>
</div>
<p className={styles.showcaseCardBody}>{item.description ?? 'No description available.'}</p>
</div>
</li>
);
} |
||
|
|
||
| export default React.memo(Card); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| import Card from './Card'; | ||
| import {plugins} from './pluginList'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| function CardList({cards}) { | ||
| return ( | ||
| <div className="container"> | ||
| <ul className={clsx('clean-list', styles.cardList)}> | ||
| {cards.map((item) => ( | ||
| <Card key={item.title} item={item} /> | ||
| ))} | ||
|
Comment on lines
+20
to
+22
There was a problem hiding this comment. In the CardList component, you're currently using the 'title' property as the key for each Card component. While this might work if all titles are unique, it's generally safer to use a dedicated unique identifier. Consider modifying the data structure in 'pluginList.js' to include a unique 'id' for each item, and then use this 'id' as the key. For example: {cards.map((item) => (
<Card key={item.id} item={item} />
))}This change will ensure that React can efficiently update the list of cards, even if titles are not unique or if they change.
Comment on lines
+20
to
+22
There was a problem hiding this comment. Use a unique identifier for the Using {cards.map((item) => (
<Card key={item.id} item={item} />
))} |
||
| </ul> | ||
| </div> | ||
| ); | ||
| } | ||
|
Comment on lines
+16
to
+26
There was a problem hiding this comment. In the CardList component, it's important to add error handling for the 'cards' prop. Currently, if 'cards' is undefined or not an array, the component will throw an error when trying to map over it. Consider adding a check to ensure 'cards' is defined and is an array before rendering. For example: function CardList({cards}) {
if (!Array.isArray(cards)) {
return <div>No cards to display</div>;
}
return (
<div className="container">
<ul className={clsx('clean-list', styles.cardList)}>
{cards.map((item) => (
<Card key={item.title} item={item} />
))}
</ul>
</div>
);
}This change will improve the robustness of the component and prevent potential runtime errors.
Comment on lines
+16
to
+26
There was a problem hiding this comment. Add error handling for the The function CardList({cards}) {
if (!Array.isArray(cards)) {
return <div>No cards to display</div>;
}
return (
<div className="container">
<ul className={clsx('clean-list', styles.cardList)}>
{cards.map((item) => (
<Card key={item.title} item={item} />
))}
</ul>
</div>
);
} |
||
|
|
||
| export default function GalleryCards() { | ||
| const { | ||
| siteConfig: {customFields}, | ||
| } = useDocusaurusContext(); | ||
|
|
||
| return ( | ||
| <section className="margin-top--lg margin-bottom--xl"> | ||
| <CardList cards={plugins(customFields)} /> | ||
| </section> | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| import GalleryCards from './GalleryCards'; | ||
|
|
||
| export default function GalleryPage() { | ||
| return ( | ||
| <main className="margin-vert--lg"> | ||
| <GalleryCards /> | ||
| </main> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| */ | ||
|
|
||
| export const plugins = (customFields) => [ | ||
| { | ||
| title: 'EmojiPlugin', | ||
| uri: `${customFields.STACKBLITZ_PREFIX}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=1`, | ||
| }, | ||
| ]; | ||
|
Comment on lines
+9
to
+14
There was a problem hiding this comment. The export const plugins = (customFields = {}) => [
{
title: 'EmojiPlugin',
uri: `${customFields.STACKBLITZ_PREFIX || ''}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=1`,
},
];This change would prevent potential runtime errors and make the function more robust.
Comment on lines
+9
to
+14
There was a problem hiding this comment. Add error handling for The export const plugins = (customFields = {}) => [
{
title: 'EmojiPlugin',
uri: `${customFields.STACKBLITZ_PREFIX || ''}examples/vanilla-js-plugin?embed=1&file=src%2Femoji-plugin%2FEmojiPlugin.ts&terminalHeight=0&ctl=1`,
},
]; |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| .cardList { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | ||
| gap: 24px; | ||
| } | ||
|
|
||
| .showcaseFavorite { | ||
| padding-top: 2rem; | ||
| padding-bottom: 2rem; | ||
| background-color: #f6fdfd; | ||
| } | ||
|
|
||
| html[data-theme='dark'] .showcaseFavorite { | ||
| background-color: #232525; | ||
| } | ||
|
|
||
| .headingFavorites { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .showcaseCardImage { | ||
| overflow: hidden; | ||
| height: 150px; | ||
| border-bottom: 2px solid var(--ifm-color-emphasis-200); | ||
| } | ||
|
|
||
| .showcaseCardHeader { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| .showcaseCardTitle { | ||
| margin-bottom: 0; | ||
| flex: 1 1 auto; | ||
| } | ||
|
|
||
| .showcaseCardTitle a { | ||
| text-decoration: none; | ||
| background: linear-gradient( | ||
| var(--ifm-color-primary), | ||
| var(--ifm-color-primary) | ||
| ) | ||
| 0% 100% / 0% 1px no-repeat; | ||
| transition: background-size ease-out 200ms; | ||
| } | ||
|
|
||
| .showcaseCardTitle a:not(:focus):hover { | ||
| background-size: 100% 1px; | ||
| } | ||
|
|
||
| .showcaseCardTitle, | ||
| .showcaseCardHeader { | ||
| margin-right: 0.25rem; | ||
| } | ||
|
|
||
| .showcaseCardBody { | ||
| font-size: smaller; | ||
| line-height: 1.66; | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The anchor tag that opens the link in a new tab is missing the 'rel="noopener noreferrer"' attribute. When using 'target="_blank"', it's important to include this attribute to prevent potential security vulnerabilities. Please update the anchor tag to include this attribute.