From e3cdcf2a86d49fa59e32ab7b079982f5796d4911 Mon Sep 17 00:00:00 2001 From: sahejkm Date: Thu, 4 Jul 2024 13:05:47 +0800 Subject: [PATCH 1/2] Create initial Gallery View with Emoji Plugin Example --- packages/lexical-website/docusaurus.config.js | 31 ++------- packages/lexical-website/fb/sdoc-cache.json | 4 ++ .../src/components/Gallery/Card.js | 48 +++++++++++++ .../src/components/Gallery/GalleryCards.js | 38 +++++++++++ .../src/components/Gallery/GalleryPage.js | 17 +++++ .../src/components/Gallery/pluginList.js | 14 ++++ .../src/components/Gallery/styles.module.css | 68 +++++++++++++++++++ .../src/components/GalleryPage.js | 29 -------- packages/lexical-website/src/pages/gallery.md | 4 +- 9 files changed, 196 insertions(+), 57 deletions(-) create mode 100644 packages/lexical-website/fb/sdoc-cache.json create mode 100644 packages/lexical-website/src/components/Gallery/Card.js create mode 100644 packages/lexical-website/src/components/Gallery/GalleryCards.js create mode 100644 packages/lexical-website/src/components/Gallery/GalleryPage.js create mode 100644 packages/lexical-website/src/components/Gallery/pluginList.js create mode 100644 packages/lexical-website/src/components/Gallery/styles.module.css delete mode 100644 packages/lexical-website/src/components/GalleryPage.js diff --git a/packages/lexical-website/docusaurus.config.js b/packages/lexical-website/docusaurus.config.js index 0302858e6..b39f4f7b8 100644 --- a/packages/lexical-website/docusaurus.config.js +++ b/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', diff --git a/packages/lexical-website/fb/sdoc-cache.json b/packages/lexical-website/fb/sdoc-cache.json new file mode 100644 index 000000000..e172e37eb --- /dev/null +++ b/packages/lexical-website/fb/sdoc-cache.json @@ -0,0 +1,4 @@ +{ + "snippets": {}, + "description": "@generated" +} \ No newline at end of file diff --git a/packages/lexical-website/src/components/Gallery/Card.js b/packages/lexical-website/src/components/Gallery/Card.js new file mode 100644 index 000000000..0d4ab5307 --- /dev/null +++ b/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 ( +
  • + +
    + {item.title} +
    +     +
    +
    + + + {item.title} + + +
    +

    {item.description}

    +
    +
    • + ); +} + +export default React.memo(Card); diff --git a/packages/lexical-website/src/components/Gallery/GalleryCards.js b/packages/lexical-website/src/components/Gallery/GalleryCards.js new file mode 100644 index 000000000..626530a26 --- /dev/null +++ b/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 ( +
    + +
    + ); +} + +export default function GalleryCards() { + const { + siteConfig: {customFields}, + } = useDocusaurusContext(); + + return ( +
    + +
    + ); +} diff --git a/packages/lexical-website/src/components/Gallery/GalleryPage.js b/packages/lexical-website/src/components/Gallery/GalleryPage.js new file mode 100644 index 000000000..87635f4af --- /dev/null +++ b/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 ( +
    + +
    + ); +} diff --git a/packages/lexical-website/src/components/Gallery/pluginList.js b/packages/lexical-website/src/components/Gallery/pluginList.js new file mode 100644 index 000000000..64688e5c2 --- /dev/null +++ b/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`, + }, +]; diff --git a/packages/lexical-website/src/components/Gallery/styles.module.css b/packages/lexical-website/src/components/Gallery/styles.module.css new file mode 100644 index 000000000..979dfd1ce --- /dev/null +++ b/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; +} diff --git a/packages/lexical-website/src/components/GalleryPage.js b/packages/lexical-website/src/components/GalleryPage.js deleted file mode 100644 index 2d5a45ddf..000000000 --- a/packages/lexical-website/src/components/GalleryPage.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * 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 {useEffect, useState} from 'react'; - -export default function GalleryPage() { - return {() => }; -} - -function GalleryImpl() { - const [internGallery, setInternGallery] = useState(null); - - useEffect(() => { - try { - if (process.env.FB_INTERNAL) { - import('../../../InternGalleryPage').then(setInternGallery); - } - } catch (e) { - throw e; - } - }, []); - return internGallery != null ? internGallery.InternGalleryPage() : <>; -} diff --git a/packages/lexical-website/src/pages/gallery.md b/packages/lexical-website/src/pages/gallery.md index 29f6f5c1d..7fb307f2b 100644 --- a/packages/lexical-website/src/pages/gallery.md +++ b/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 From 8707e68131f45ea8a53c5e480d8a73303f7311e9 Mon Sep 17 00:00:00 2001 From: "local-dev-korbit-ai-mentor[bot]" <130798245+local-dev-korbit-ai-mentor[bot]@users.noreply.github.com> Date: Thu, 15 Aug 2024 17:40:26 +0000 Subject: [PATCH 2/2] [skip ci]