mirror of
https://github.com/facebook/lexical.git
synced 2025-05-17 15:18:47 +08:00
Port lexical.dev to Tailwind (#4827)
This commit is contained in:
Awjin
@ -8,4 +8,5 @@ module.exports = {
|
||||
trailingComma: 'all',
|
||||
htmlWhitespaceSensitivity: 'ignore',
|
||||
attributeGroups: ['$DEFAULT', '^data-'],
|
||||
plugins: ['prettier-plugin-tailwindcss'],
|
||||
};
|
||||
|
||||
1024
package-lock.json
generated
1024
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -62,6 +62,16 @@ const config = {
|
||||
watch: process.env.TYPEDOC_WATCH === 'true',
|
||||
},
|
||||
],
|
||||
async function tailwindcss() {
|
||||
return {
|
||||
configurePostCss(postcssOptions) {
|
||||
postcssOptions.plugins.push(require('tailwindcss'));
|
||||
postcssOptions.plugins.push(require('autoprefixer'));
|
||||
return postcssOptions;
|
||||
},
|
||||
name: 'docusaurus-tailwindcss',
|
||||
};
|
||||
},
|
||||
],
|
||||
presets: [
|
||||
[
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
"@mdx-js/react": "^1.6.21",
|
||||
"@radix-ui/react-tabs": "^0.1.5",
|
||||
"@vercel/analytics": "^1.0.1",
|
||||
"clsx": "^1.1.1",
|
||||
"docusaurus-plugin-typedoc": "^0.19.2",
|
||||
"prism-react-renderer": "^1.2.1",
|
||||
"react": "^18.0.0-alpha-64931821a-20210808",
|
||||
@ -30,6 +29,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"buffer": "^6.0.3",
|
||||
"prettier-plugin-tailwindcss": "^0.4.1",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"webpack": "^5.76.0"
|
||||
},
|
||||
"browserslist": {
|
||||
|
||||
@ -67,52 +67,42 @@ export default function CommunityContributors() {
|
||||
Contributors
|
||||
</Translate>
|
||||
</h2>
|
||||
<div className="row">
|
||||
<div className="col col--9">
|
||||
<p>
|
||||
<Translate
|
||||
id="pages.community.contributors.subtext"
|
||||
description="The descriptive text of the header section of the community page">
|
||||
Lexical development is led by small team at Meta. It also receives
|
||||
contributions from people all over the world. Here are just a few
|
||||
members.
|
||||
</Translate>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/facebook/lexical/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<Translate
|
||||
id="pages.community.contributors.gitHubLink"
|
||||
description="Link to GitHub's contribute page for the repository">
|
||||
See the rest of the contributors on Github.
|
||||
</Translate>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
|
||||
<p>
|
||||
<Translate
|
||||
id="pages.community.contributors.subtext"
|
||||
description="The descriptive text of the header section of the community page">
|
||||
Lexical development is led by small team at Meta. It also receives
|
||||
contributions from people all over the world. Here are just a few
|
||||
members.
|
||||
</Translate>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/facebook/lexical/graphs/contributors"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<Translate
|
||||
id="pages.community.contributors.gitHubLink"
|
||||
description="Link to GitHub's contribute page for the repository">
|
||||
See the rest of the contributors on Github.
|
||||
</Translate>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div className="mt-12 flex flex-wrap items-stretch gap-10">
|
||||
{CONTRIBUTORS.map(({name, imageUrl, link}, index) => (
|
||||
<div className="col col--3 margin-top--lg" key={index}>
|
||||
<div className="avatar avatar--vertical text--center">
|
||||
<div>
|
||||
<img
|
||||
class="avatar__photo avatar__photo--xl"
|
||||
alt={name}
|
||||
src={imageUrl}
|
||||
/>
|
||||
</div>
|
||||
<div className="margin-top--xs">
|
||||
<a
|
||||
className="avatar__name"
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
{name}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div key={index} className="flex w-44 flex-col items-center gap-2">
|
||||
<img className="w-24 rounded-full" alt={name} src={imageUrl} />
|
||||
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-center font-bold">
|
||||
{name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -8,15 +8,12 @@
|
||||
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import CommunityHeaderSvg from '@site/static/img/community-header.svg';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function CommunityHeader() {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className={clsx('col col--6', styles.textContainer)}>
|
||||
<div className="grid items-center gap-8 lg:grid-cols-2">
|
||||
<div className="flex flex-col">
|
||||
<h1>
|
||||
<Translate
|
||||
id="pages.community.header.title"
|
||||
@ -24,6 +21,7 @@ export default function CommunityHeader() {
|
||||
We're here to help
|
||||
</Translate>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<Translate
|
||||
id="pages.community.header.subtext"
|
||||
@ -34,9 +32,8 @@ export default function CommunityHeader() {
|
||||
</Translate>
|
||||
</p>
|
||||
</div>
|
||||
<div className="col col--6">
|
||||
<CommunityHeaderSvg />
|
||||
</div>
|
||||
|
||||
<CommunityHeaderSvg />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,71 +12,69 @@ import React from 'react';
|
||||
|
||||
export default function CommunityHowToContribute() {
|
||||
return (
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h2>
|
||||
<div className="flex flex-col">
|
||||
<h2>
|
||||
<Translate
|
||||
id="pages.community.howTo.howToSubHeader"
|
||||
description="Subtitle of section on contribution guidelines">
|
||||
How to contribute
|
||||
</Translate>
|
||||
</h2>
|
||||
<p>
|
||||
<Translate
|
||||
id="pages.community.howTo.beforeParticipating"
|
||||
description="Phrase before paragraph listing documents and policies to read before contributing">
|
||||
Before participating in Lexical's communities, please read our
|
||||
</Translate>{' '}
|
||||
<Link to="https://github.com/facebook/lexical/blob/main/CODE_OF_CONDUCT.md">
|
||||
<Translate
|
||||
id="pages.community.howTo.howToSubHeader"
|
||||
description="Subtitle of section on contribution guidelines">
|
||||
How to contribute
|
||||
id="pages.community.howTo.codeOfConductLink"
|
||||
description="Hyperlink to code of conduct">
|
||||
Code of Conduct
|
||||
</Translate>
|
||||
</h2>
|
||||
<p>
|
||||
</Link>
|
||||
.{' '}
|
||||
<Translate
|
||||
id="pages.community.howTo.covenant"
|
||||
description="Phrase about adoption of the contributor covenant policy">
|
||||
We have adopted the
|
||||
</Translate>{' '}
|
||||
<Link to="https://www.contributor-covenant.org/">
|
||||
<Translate
|
||||
id="pages.community.howTo.beforeParticipating"
|
||||
description="Phrase before paragraph listing documents and policies to read before contributing">
|
||||
Before participating in Lexical's communities, please read our
|
||||
</Translate>{' '}
|
||||
<Link to="https://github.com/facebook/lexical/blob/main/CODE_OF_CONDUCT.md">
|
||||
<Translate
|
||||
id="pages.community.howTo.codeOfConductLink"
|
||||
description="Hyperlink to code of conduct">
|
||||
Code of Conduct
|
||||
</Translate>
|
||||
</Link>
|
||||
.{' '}
|
||||
id="pages.community.howTo.covenantLink"
|
||||
description="Hyperlink to contributor covenant">
|
||||
Contributor Covenant
|
||||
</Translate>
|
||||
</Link>{' '}
|
||||
<Translate
|
||||
id="pages.community.howTo.guidelines"
|
||||
description="Phrase about our expectations that all contributors adhere to all policies listed herein.">
|
||||
and we expect that all community members adhere to the
|
||||
</Translate>{' '}
|
||||
<Link to="https://github.com/facebook/lexical/blob/main/CONTRIBUTING.md">
|
||||
<Translate
|
||||
id="pages.community.howTo.covenant"
|
||||
description="Phrase about adoption of the contributor covenant policy">
|
||||
We have adopted the
|
||||
</Translate>{' '}
|
||||
<Link to="https://www.contributor-covenant.org/">
|
||||
<Translate
|
||||
id="pages.community.howTo.covenantLink"
|
||||
description="Hyperlink to contributor covenant">
|
||||
Contributor Covenant
|
||||
</Translate>
|
||||
</Link>{' '}
|
||||
<Translate
|
||||
id="pages.community.howTo.guidelines"
|
||||
description="Phrase about our expectations that all contributors adhere to all policies listed herein.">
|
||||
and we expect that all community members adhere to the
|
||||
</Translate>{' '}
|
||||
<Link to="https://github.com/facebook/lexical/blob/main/CONTRIBUTING.md">
|
||||
<Translate
|
||||
id="pages.community.howTo.contributingLink"
|
||||
description="Hyperlink to contributing technical instructions">
|
||||
contributing guidelines
|
||||
</Translate>
|
||||
</Link>
|
||||
.{' '}
|
||||
</p>
|
||||
<p>
|
||||
<Translate
|
||||
id="pages.community.howTo.joinUs"
|
||||
description="Phrase inviting users to join us as contributors after agreeing to the guidelines">
|
||||
Once you've read over those, we invite you to join us on the
|
||||
</Translate>{' '}
|
||||
<Link
|
||||
to="https://github.com/facebook/lexical"
|
||||
description="Hyperlink to GitHub repo">
|
||||
<Translate id="pages.community.contributors.joinUsRepoLink">
|
||||
Lexical GitHub repository
|
||||
</Translate>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
id="pages.community.howTo.contributingLink"
|
||||
description="Hyperlink to contributing technical instructions">
|
||||
contributing guidelines
|
||||
</Translate>
|
||||
</Link>
|
||||
.{' '}
|
||||
</p>
|
||||
<p>
|
||||
<Translate
|
||||
id="pages.community.howTo.joinUs"
|
||||
description="Phrase inviting users to join us as contributors after agreeing to the guidelines">
|
||||
Once you've read over those, we invite you to join us on the
|
||||
</Translate>{' '}
|
||||
<Link
|
||||
to="https://github.com/facebook/lexical"
|
||||
description="Hyperlink to GitHub repo">
|
||||
<Translate id="pages.community.contributors.joinUsRepoLink">
|
||||
Lexical GitHub repository
|
||||
</Translate>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +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.
|
||||
*
|
||||
*
|
||||
*/
|
||||
@ -8,11 +8,9 @@
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import ImageSwitcher from '../ImageSwitcher';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const links = [
|
||||
{
|
||||
@ -89,12 +87,16 @@ const links = [
|
||||
|
||||
function CommunityLink({title, url, description, image}) {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className={clsx('col col--4', styles.image)}>{image}</div>
|
||||
<div className="col col--8">
|
||||
<div className="grid gap-4 lg:grid-cols-[min-content_auto] lg:gap-20 lg:pl-20">
|
||||
<div className="flex h-24 w-24 justify-center overflow-hidden">
|
||||
{image}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Link to={url}>
|
||||
<h2>{title}</h2>
|
||||
</Link>
|
||||
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,7 +107,7 @@ export default function CommunityLinks() {
|
||||
return (
|
||||
<div>
|
||||
{links.map((link, index) => (
|
||||
<div key={index} className="margin-vert--md">
|
||||
<div key={index} className="mb-4">
|
||||
<CommunityLink {...link} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -1,19 +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.
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.image svg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@ -8,11 +8,8 @@
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
import * as Tabs from '@radix-ui/react-tabs';
|
||||
import clsx from 'clsx';
|
||||
import React, {useState} from 'react';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const EXAMPLES = [
|
||||
{
|
||||
content: (
|
||||
@ -65,49 +62,49 @@ export default function HomepageExamples() {
|
||||
value={activeItemID}
|
||||
orientation="horizontal"
|
||||
onValueChange={setActiveItemID}>
|
||||
<div className="container">
|
||||
<Tabs.List asChild={true} className="pills" loop={true}>
|
||||
<ul>
|
||||
{EXAMPLES.map(({id, label}) => (
|
||||
<Tabs.Trigger asChild={true} value={id} key={id}>
|
||||
<li
|
||||
className={clsx(
|
||||
'pills__item',
|
||||
activeItemID === id && 'pills__item--active',
|
||||
)}
|
||||
tabIndex={0}
|
||||
role="tab">
|
||||
{label}
|
||||
</li>
|
||||
</Tabs.Trigger>
|
||||
))}
|
||||
</ul>
|
||||
</Tabs.List>
|
||||
{EXAMPLES.map(({id, content, src}) => (
|
||||
<Tabs.Content asChild={true} value={id} key={id}>
|
||||
<div className="row">
|
||||
<div className="col col--4">
|
||||
{content}
|
||||
<div>
|
||||
<Link
|
||||
className="button button--primary margin-top--md"
|
||||
to="/docs/intro">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col--8">
|
||||
<iframe
|
||||
className={styles.codesandbox}
|
||||
src={src}
|
||||
title="lexical-plain-text-example"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
/>
|
||||
<Tabs.List asChild={true} className="flex gap-1 pl-0" loop={true}>
|
||||
<ul>
|
||||
{EXAMPLES.map(({id, label}) => (
|
||||
<Tabs.Trigger asChild={true} value={id} key={id}>
|
||||
<li
|
||||
className={`cursor-pointer list-none rounded-md px-4 py-1 font-bold transition-colors hover:bg-[#f2f2f2] ${
|
||||
activeItemID === id && 'pills__item--active'
|
||||
}`}
|
||||
tabIndex={0}
|
||||
role="tab">
|
||||
{label}
|
||||
</li>
|
||||
</Tabs.Trigger>
|
||||
))}
|
||||
</ul>
|
||||
</Tabs.List>
|
||||
|
||||
{EXAMPLES.map(({id, content, src}) => (
|
||||
<Tabs.Content asChild={true} value={id} key={id}>
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_2fr]">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>{content}</div>
|
||||
|
||||
<div>
|
||||
<Link
|
||||
className="whitespace-nowrap rounded-md bg-blue-500 px-6 py-2 text-sm font-bold text-white transition-opacity hover:text-white hover:no-underline hover:opacity-90"
|
||||
to="/docs/intro">
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<iframe
|
||||
className="h-[500px] w-full overflow-hidden"
|
||||
src={src}
|
||||
title="lexical-plain-text-example"
|
||||
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
))}
|
||||
</Tabs.Root>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,18 +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.
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.tabContent {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.codesandbox {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -7,11 +7,8 @@
|
||||
*/
|
||||
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const FeatureList = [
|
||||
{
|
||||
Svg: require('@site/static/img/feature-reliable.svg').default,
|
||||
@ -56,11 +53,10 @@ const FeatureList = [
|
||||
|
||||
function Feature({Svg, title, description}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} alt={title} />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<div className="text-center">
|
||||
<Svg className="h-[200px] w-[200px]" alt={title} />
|
||||
|
||||
<div>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
@ -70,16 +66,12 @@ function Feature({Svg, title, description}) {
|
||||
|
||||
export default function HomepageFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<div className={clsx('col col--4')} key={idx}>
|
||||
<Feature {...props} />
|
||||
</div>
|
||||
))}
|
||||
<section className="mx-auto grid gap-10 py-8 lg:grid-cols-3">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<div key={idx}>
|
||||
<Feature {...props} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +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.
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
14
packages/lexical-website/src/css/tailwind.css
Normal file
14
packages/lexical-website/src/css/tailwind.css
Normal file
@ -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.
|
||||
*/
|
||||
|
||||
/* TODO: This base reset is commented out because it unstyles many elements on
|
||||
* the home and docs pages. When the full website redesign happens, this should
|
||||
* be reapplied.
|
||||
*/
|
||||
/* @tailwind base; */
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -19,23 +19,14 @@ export default function Community() {
|
||||
return (
|
||||
<Layout description={siteConfig.tagline}>
|
||||
<main>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<section className="margin-vert--xl">
|
||||
<CommunityHeader />
|
||||
</section>
|
||||
<section className="margin-vert--xl">
|
||||
<CommunityLinks />
|
||||
</section>
|
||||
<section className="margin-vert--xl">
|
||||
<CommunityContributors />
|
||||
</section>
|
||||
<section className="margin-vert--xl">
|
||||
<CommunityHowToContribute />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto my-20 flex max-w-[55rem] flex-col gap-16 px-4">
|
||||
<CommunityHeader />
|
||||
|
||||
<CommunityLinks />
|
||||
|
||||
<CommunityContributors />
|
||||
|
||||
<CommunityHowToContribute />
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
@ -12,13 +12,12 @@ import Layout from '@theme/Layout';
|
||||
import React, {useMemo} from 'react';
|
||||
|
||||
import codes from '../../../../../../scripts/error-codes/codes.json';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function ErrorCodePage() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout description={siteConfig.tagline}>
|
||||
<div className="container padding-top--md padding-bottom--lg">
|
||||
<div className="flex flex-col pb-8 pt-4">
|
||||
<h1>Error Code</h1>
|
||||
<p>
|
||||
In the minified production build of Lexical, we avoid sending down
|
||||
@ -61,7 +60,9 @@ function ErrorFinder() {
|
||||
return (
|
||||
<>
|
||||
<h2>Error code #{error.code}</h2>
|
||||
<div className={styles.errorContainer}>{error.description}</div>
|
||||
<div className="bg-[#ffbaba] p-4 text-[#a70000]">
|
||||
{error.description}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
/* todo dark mode */
|
||||
|
||||
.errorContainer {
|
||||
background-color: #ffbaba;
|
||||
color: #a70000;
|
||||
padding: 16px;
|
||||
}
|
||||
@ -6,48 +6,45 @@
|
||||
*
|
||||
*/
|
||||
|
||||
import '../css/tailwind.css';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import HomepageExamples from '@site/src/components/HomepageExamples';
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||||
import Layout from '@theme/Layout';
|
||||
import {inject} from '@vercel/analytics';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
// activate analytics
|
||||
inject();
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<header
|
||||
className={clsx('hero hero--dark hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<h1 className="hero__title">
|
||||
<img
|
||||
className={styles.logo}
|
||||
src="/img/logo-dark.svg"
|
||||
alt="Lexical Logo: containing an icon of a text editor glyph containing a text cursor on the left, with the text of 'Lexical' on the right."
|
||||
/>
|
||||
</h1>
|
||||
<p className={clsx('hero__subtitle', styles.tagline)}>
|
||||
{siteConfig.tagline}
|
||||
</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--secondary margin-right--sm"
|
||||
to="/docs/intro">
|
||||
Get Started
|
||||
</Link>
|
||||
<Link
|
||||
className="button button--outline margin-left--sm"
|
||||
to="https://playground.lexical.dev">
|
||||
Visit Playground
|
||||
</Link>
|
||||
</div>
|
||||
<header className="flex flex-col items-center bg-[#020528] p-8 text-center text-white lg:py-16">
|
||||
<h1 className="text-[300%]">
|
||||
<img
|
||||
className="w-[8em]"
|
||||
src="/img/logo-dark.svg"
|
||||
alt="Lexical Logo: containing an icon of a text editor glyph containing a text cursor on the left, with the text of 'Lexical' on the right."
|
||||
/>
|
||||
</h1>
|
||||
|
||||
<p className="text-2xl">{siteConfig.tagline}</p>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Link
|
||||
className="whitespace-nowrap rounded-md bg-white/90 px-6 py-2 text-sm font-bold text-black transition-opacity hover:text-black hover:no-underline hover:opacity-90"
|
||||
to="/docs/intro">
|
||||
Get Started
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="whitespace-nowrap rounded-md px-6 py-2 text-sm font-bold text-white hover:text-white hover:no-underline"
|
||||
to="https://playground.lexical.dev">
|
||||
Visit Playground
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
@ -58,11 +55,13 @@ export default function Home() {
|
||||
return (
|
||||
<Layout description={siteConfig.tagline}>
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<div className="margin-vert--lg">
|
||||
|
||||
<main className="mx-auto max-w-[82rem] px-4">
|
||||
<div className="my-8">
|
||||
<HomepageFeatures />
|
||||
</div>
|
||||
<div className="margin-vert--lg">
|
||||
|
||||
<div className="my-8">
|
||||
<HomepageExamples />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -1,41 +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.
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
background-color: #020528;
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -4,15 +4,15 @@
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.communityHeader {
|
||||
padding: 2em 0;
|
||||
}
|
||||
/* eslint-disable strict */
|
||||
|
||||
.textContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['src/**/*.{js,jsx,ts,tsx}'],
|
||||
plugins: [],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user