[Lexical] Create initial Gallery View with Emoji Plugin Example #28
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. The external link in the Card component is missing important attributes for security and accessibility. When opening links in a new tab (target="_blank"), it's recommended to add rel="noopener noreferrer" to prevent potential security vulnerabilities. Additionally, consider adding an aria-label to the link for better accessibility, especially since it only contains an image.
|
||
| <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
+45
There was a problem hiding this comment. I noticed that the
|
||
| } | ||
|
|
||
| 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} /> | ||
| ))} | ||
| </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 mapping, and provide a fallback UI if it's not. This will improve the robustness of the component and prevent potential runtime errors.
|
||
|
|
||
| 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> | ||
| ); | ||
| } | ||
|
Comment on lines
+11
to
+17
There was a problem hiding this comment. The GalleryPage component currently lacks a title or heading. Consider adding an
|
||
| 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 will prevent potential runtime errors if
|
||
| 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.
Ensure
item.uriis defined before use.Consider adding a check to ensure
item.uriis defined before using it to construct the URL. This will prevent potential errors ifitem.uriis undefined.Use this diff to add a check:
return ( item.preview ?? + (item.uri && `https://slorber-api-screenshot.netlify.app/${encodeURIComponent( item.uri, )}/showcase`) );Committable suggestion