[Lexical] Create initial Gallery View with Emoji Plugin Example

packages/lexical-website/docusaurus.config.js

@@ -281,7 +281,6 @@ const config = {
         docs: {
           beforeDefaultRemarkPlugins: [slugifyPlugin],
           editUrl: `${GITHUB_REPO_URL}/tree/main/packages/lexical-website/`,
-          exclude: process.env.FB_INTERNAL ? ['docs/error/**'] : [],
           path: 'docs',
           sidebarItemsGenerator,
           sidebarPath: require.resolve('./sidebars.js'),
@@ -405,13 +404,11 @@ const config = {
             label: 'iOS',
             position: 'left',
           },
-          process.env.FB_INTERNAL
-            ? {
-                label: 'Gallery',
-                position: 'left',
-                to: '/gallery',
-              }
-            : null,
+          {
+            label: 'Gallery',
+            position: 'left',
+            to: '/gallery',
+          },
           {
             href: GITHUB_REPO_URL,
             label: 'GitHub',

packages/lexical-website/fb/sdoc-cache.json

@@ -0,0 +1,4 @@
+{
+  "snippets": {},
+  "description": "@generated"
+}

packages/lexical-website/src/components/Gallery/Card.js

@@ -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">
+        <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>
+  );
+}
+
+export default React.memo(Card);

packages/lexical-website/src/components/Gallery/GalleryCards.js

@@ -0,0 +1,62 @@
+/**
+ * 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 BrowserOnly from '@docusaurus/BrowserOnly';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
+import {useEffect, useState} from 'react';
+
+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>
+  );
+}
+
+export default function GalleryCards() {
+  return <BrowserOnly>{() => <GalleryCardsImpl />}</BrowserOnly>;
+}
+
+function GalleryCardsImpl() {
+  const {
+    siteConfig: {customFields},
+  } = useDocusaurusContext();
+
+  const [internGalleryCards, setInternGalleryCards] = useState(null);
+
+  useEffect(() => {
+    try {
+      if (process.env.FB_INTERNAL) {
+        import('../../../../InternGalleryCards').then(setInternGalleryCards);
+      }
+    } catch (e) {
+      throw e;
+    }
+  }, []);
+
+  return (
+    <section className="margin-top--lg margin-bottom--xl">
+      <CardList
+        cards={plugins(customFields).concat(
+          internGalleryCards != null
+            ? internGalleryCards.InternGalleryCards()
+            : [],
+        )}
+      />
+    </section>
+  );
+}

packages/lexical-website/src/components/Gallery/GalleryPage.js

@@ -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>
+  );
+}

packages/lexical-website/src/components/Gallery/pluginList.js

@@ -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=0`,
+  },
+];

packages/lexical-website/src/components/Gallery/styles.module.css

@@ -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;
+}

packages/lexical-website/src/pages/gallery.md

@@ -3,7 +3,7 @@ id: gallery
 title: Gallery
 ---
 import { FBInternOnly } from 'docusaurus-plugin-internaldocs-fb/internal';
-import GalleryPage from '@site/src/components/GalleryPage';
+import GalleryPage from '@site/src/components/Gallery/GalleryPage';
 
-# Gallery (WIP)
+# Gallery
 <GalleryPage/>