Create initial Gallery View with Emoji Plugin Example

packages/lexical-website/docusaurus.config.js

@@ -239,24 +239,6 @@ const config = {
   onBrokenMarkdownLinks: 'throw',
   organizationName: 'facebook',
   plugins: [
-    process.env.FB_INTERNAL
-      ? null
-      : [
-          './plugins/package-docs',
-          /** @type {import('./plugins/package-docs').PackageDocsPluginOptions} */
-          {
-            baseDir: path.resolve(__dirname, '..'),
-            editUrl: `${GITHUB_REPO_URL}/tree/main/packages/`,
-            packageFrontMatter: {
-              lexical: [
-                'sidebar_position: 1',
-                'sidebar_label: lexical (core)',
-              ].join('\n'),
-            },
-            targetDir: path.resolve(__dirname, 'docs/packages'),
-          },
-        ],
-    './plugins/webpack-buffer',
     ['docusaurus-plugin-typedoc', docusaurusPluginTypedocConfig],
     async function tailwindcss() {
       return {
@@ -281,7 +263,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 +386,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,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>
+  );
+}
+
+export default function GalleryCards() {
+  const {
+    siteConfig: {customFields},
+  } = useDocusaurusContext();
+
+  return (
+    <section className="margin-top--lg margin-bottom--xl">
+      <CardList cards={plugins(customFields)} />
+    </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=1`,
+  },
+];

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/>