diff --git a/.cspell.json b/.cspell.json index 34213fd304..92f8bf1dfb 100644 --- a/.cspell.json +++ b/.cspell.json @@ -28,7 +28,7 @@ "yarn.lock", "project-words.txt", "website/src/data/users.tsx", - "website/src/data/tweets/index.tsx", + "website/src/data/tweets.tsx", "*.xyz", "*.docx", "versioned_docs", diff --git a/website/src/components/Tweet/index.tsx b/website/src/components/Tweet/index.tsx index 185aa726c8..f6feb496fc 100644 --- a/website/src/components/Tweet/index.tsx +++ b/website/src/components/Tweet/index.tsx @@ -32,7 +32,14 @@ export default function Tweet({
- {name} + {name}
diff --git a/website/src/data/features.tsx b/website/src/data/features.tsx new file mode 100644 index 0000000000..6e154c6342 --- /dev/null +++ b/website/src/data/features.tsx @@ -0,0 +1,112 @@ +/** + * 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. + */ + +import React from 'react'; +import Translate, {translate} from '@docusaurus/Translate'; + +export type FeatureItem = { + title: string; + image: { + src: string; + width: number; + height: number; + }; + text: JSX.Element; +}; + +const FEATURES: FeatureItem[] = [ + { + title: translate({ + message: 'Powered by MDX', + id: 'homepage.features.powered-by-mdx.title', + }), + image: { + src: '/img/undraw_typewriter.svg', + width: 1009.54, + height: 717.96, + }, + text: ( + + Save time and focus on text documents. Simply write docs and blog posts + with MDX, and Docusaurus builds them into static HTML files ready to be + served. You can even embed React components in your Markdown thanks to + MDX. + + ), + }, + { + title: translate({ + message: 'Built Using React', + id: 'homepage.features.built-using-react.title', + }), + image: { + src: '/img/undraw_react.svg', + width: 1108, + height: 731.18, + }, + text: ( + + Extend and customize your project's layout by writing React + components. Leverage the pluggable architecture, and design your own + site while reusing the same data created by Docusaurus plugins. + + ), + }, + { + title: translate({ + message: 'Ready for Translations', + id: 'homepage.features.ready-for-translations.title', + }), + image: { + src: '/img/undraw_around_the_world.svg', + width: 1137, + height: 776.59, + }, + text: ( + + Localization comes out-of-the-box. Use git, Crowdin, or any other + translation manager to translate your docs and deploy them individually. + + ), + }, + { + title: translate({ + message: 'Document Versioning', + id: 'homepage.features.document-versioning.title', + }), + image: { + src: '/img/undraw_version_control.svg', + width: 1038.23, + height: 693.31, + }, + text: ( + + Support users on all versions of your project. Document versioning helps + you keep documentation in sync with project releases. + + ), + }, + { + title: translate({ + message: 'Content Search', + id: 'homepage.features.content-search.title', + }), + image: { + src: '/img/undraw_algolia.svg', + width: 1137.97, + height: 736.21, + }, + text: ( + + Make it easy for your community to find what they need in your + documentation. We proudly support Algolia documentation search. + + ), + }, +]; + +export default FEATURES; diff --git a/website/src/data/quotes.tsx b/website/src/data/quotes.tsx new file mode 100644 index 0000000000..40a35b2e31 --- /dev/null +++ b/website/src/data/quotes.tsx @@ -0,0 +1,73 @@ +/** + * 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. + */ + +/* eslint-disable global-require */ + +import React from 'react'; +import Translate, {translate} from '@docusaurus/Translate'; + +const QUOTES = [ + { + thumbnail: require('./quotes/christopher-chedeau.jpg'), + name: 'Christopher "vjeux" Chedeau', + title: translate({ + id: 'homepage.quotes.christopher-chedeau.title', + message: 'Lead Prettier Developer', + description: 'Title of quote of Christopher Chedeau on the home page', + }), + text: ( + + I've helped open source many projects at Facebook and every one + needed a website. They all had very similar constraints: the + documentation should be written in markdown and be deployed via GitHub + pages. I’m so glad that Docusaurus now exists so that I don’t have to + spend a week each time spinning up a new one. + + ), + }, + { + thumbnail: require('./quotes/hector-ramos.jpg'), + name: 'Hector Ramos', + title: translate({ + id: 'homepage.quotes.hector-ramos.title', + message: 'Lead React Native Advocate', + description: 'Title of quote of Hector Ramos on the home page', + }), + text: ( + + Open source contributions to the React Native docs have skyrocketed + after our move to Docusaurus. The docs are now hosted on a small repo in + plain markdown, with none of the clutter that a typical static site + generator would require. Thanks Slash! + + ), + }, + { + thumbnail: require('./quotes/ricky-vetter.jpg'), + name: 'Ricky Vetter', + title: translate({ + id: 'homepage.quotes.risky-vetter.title', + message: 'ReasonReact Developer', + description: 'Title of quote of Ricky Vetter on the home page', + }), + text: ( + + Docusaurus has been a great choice for the ReasonML family of projects. + It makes our documentation consistent, i18n-friendly, easy to maintain, + and friendly for new contributors. + + ), + }, +]; + +export default QUOTES; diff --git a/website/src/data/tweets/index.tsx b/website/src/data/tweets.tsx similarity index 84% rename from website/src/data/tweets/index.tsx rename to website/src/data/tweets.tsx index 3c6d444a52..d2f12cbcb6 100644 --- a/website/src/data/tweets/index.tsx +++ b/website/src/data/tweets.tsx @@ -7,7 +7,7 @@ import React from 'react'; -import type {Props as Tweet} from '../../components/Tweet'; +import type {Props as Tweet} from '../components/Tweet'; export interface TweetItem extends Tweet { showOnHomepage: boolean; @@ -74,7 +74,7 @@ const TWEETS: TweetItem[] = [ less time building documentation and more time building πŸ›³

- Thanks @docusaurus team πŸ¦– + Thanks @docusaurus team πŸ¦– ), showOnHomepage: true, @@ -102,7 +102,11 @@ const TWEETS: TweetItem[] = [ date: 'Nov 17, 2020', avatar: 'https://pbs.twimg.com/profile_images/1481221429991718913/aNZZgZME_400x400.jpg', - content: <>.@docusaurus ❀️, + content: ( + <> + .@docusaurus ❀️ + + ), showOnHomepage: false, }, { @@ -114,10 +118,10 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg', content: ( <> - Been doing a lot of work with @docusaurus lately and I have to say it is - really fun to work with. A lot of really cool features. I love that you - can easily reuse content by creating a markdown file and importing it as - a component. πŸ”₯ + Been doing a lot of work with @docusaurus lately and I have to + say it is really fun to work with. A lot of really cool features. I love + that you can easily reuse content by creating a markdown file and + importing it as a component. πŸ”₯ ), showOnHomepage: true, @@ -131,10 +135,11 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1280609918022815746/nCWpKbYh_400x400.jpg', content: ( <> - The #IOTA wiki is now part of the @docusaurus showcase. We even have the - honor of being a favorite. We are really happy that we found this - project. It helped us a lot to improve the documentation. And we still - have a lot of plans with things like tutorials, versioning and i8n. + The #IOTA wiki is now part of the @docusaurus showcase. We even + have the honor of being a favorite. We are really happy that we found + this project. It helped us a lot to improve the documentation. And we + still have a lot of plans with things like tutorials, versioning and + i8n. ), showOnHomepage: true, @@ -149,8 +154,8 @@ const TWEETS: TweetItem[] = [ content: ( <> http://testing-library.com just got a nice update! We're now on the - latest version of @docusaurus thanks to @matanbobi, @TensorNo, and - @nickemccurdy πŸ’™ + latest version of @docusaurus thanks to @matanbobi, @TensorNo, + and @nickemccurdy πŸ’™

My favorite new feature: dark mode!! πŸŒ‘/β˜€οΈ @@ -177,8 +182,8 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1456506127961640962/iM2Hf8du_400x400.jpg', content: ( <> - Happy to share Temporal's first open source sponsorship β€” of - @docusaurus! + Happy to share Temporal's first open source sponsorship β€” of{' '} + @docusaurus!

@temporalio uses it for http://docs.temporal.io, and it has been a huge @@ -195,7 +200,11 @@ const TWEETS: TweetItem[] = [ date: 'Jan 5, 2022', avatar: 'https://pbs.twimg.com/profile_images/1316805792893489152/7soY-vhs_400x400.jpg', - content: <>I hear @docusaurus is a good tool for that!, + content: ( + <> + I hear @docusaurus is a good tool for that! + + ), showOnHomepage: false, }, { @@ -222,8 +231,8 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/552803871567790081/rPdTN64o_400x400.jpeg', content: ( <> - I ❀️ @docusaurus - it makes it so easy to spin up docs, blogs and simple - websites. I've used it to: + I ❀️ @docusaurus - it makes it so easy to spin up docs, blogs and + simple websites. I've used it to:

βœ… Replatform my blog with GitHub pages
βœ… Build a website for a local business
βœ… Build internal facing @@ -260,7 +269,8 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/573206276819140608/gKAusMeX_400x400.jpeg', content: ( <> - πŸ₯³πŸŽŠπŸ₯³πŸŽŠπŸ₯³πŸŽŠπŸ₯³πŸŽŠ The @reactnative website just migrated to @docusaurus + πŸ₯³πŸŽŠπŸ₯³πŸŽŠπŸ₯³πŸŽŠπŸ₯³πŸŽŠ The @reactnative website just migrated to{' '} + @docusaurus v2
Some obvious changes:
@@ -287,7 +297,7 @@ const TWEETS: TweetItem[] = [ dark mode! 😎

- Thanks to the @docusaurus team for their help! ❀️ + Thanks to the @docusaurus team for their help! ❀️

https://create-react-app.dev @@ -308,7 +318,7 @@ const TWEETS: TweetItem[] = [

πŸ‘ @cloverich did the awesome job of migrating from ancient gitbook - -> @docusaurus! πŸ‘
+ -> @docusaurus! πŸ‘

No real content updates yet, but contributing and publishing has become way easier @@ -325,10 +335,10 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1423143362232823809/4khdTyVZ_400x400.png', content: ( <> - The new website has landed πŸš€ powered by @docusaurus v2 and made by - @_semoal kudos to him πŸ‘ #verdaccio #nodejs awesome contribution ❀️‍πŸ”₯ - (video made with react remotion @JNYBGR ) all Open Source and hosted on - @Netlify https://verdaccio.org + The new website has landed πŸš€ powered by @docusaurus v2 and made + by @_semoal kudos to him πŸ‘ #verdaccio #nodejs awesome contribution + ❀️‍πŸ”₯ (video made with react remotion @JNYBGR ) all Open Source and + hosted on @Netlify https://verdaccio.org ), showOnHomepage: false, @@ -343,8 +353,8 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1247950572096868352/3kuZJz5j_400x400.jpg', content: ( <> - I made a @docusaurus website for answers to the H5BP Front End Interview - Questions! Hopefully it makes the browsing experience easier - + I made a @docusaurus website for answers to the H5BP Front End + Interview Questions! Hopefully it makes the browsing experience easier - https://frontendinterviewhandbook.com ), @@ -360,7 +370,7 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1302550637197000705/pg5XF8rA_400x400.jpg', content: ( <> - Just upgraded our website to @docusaurus latest with + Just upgraded our website to @docusaurus latest with internationalization support πŸ₯³

@@ -382,8 +392,8 @@ const TWEETS: TweetItem[] = [ 'https://pbs.twimg.com/profile_images/1371525161829208064/UCzm0Zye_400x400.jpg', content: ( <> - Today I tried @docusaurus in a project, I really like the ease and speed - of developing with it \o/ + Today I tried @docusaurus in a project, I really like the ease + and speed of developing with it \o/ ), showOnHomepage: false, diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 18c4f377a9..c8ba8e9f31 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -5,83 +5,98 @@ * LICENSE file in the root directory of this source tree. */ -/* eslint-disable global-require */ - import React from 'react'; import Link from '@docusaurus/Link'; import Translate, {translate} from '@docusaurus/Translate'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; +import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; import Image from '@theme/IdealImage'; import Layout from '@theme/Layout'; import Tweet from '@site/src/components/Tweet'; import Tweets, {type TweetItem} from '@site/src/data/tweets'; +import Quotes from '@site/src/data/quotes'; +import Features, {type FeatureItem} from '@site/src/data/features'; import clsx from 'clsx'; import styles from './styles.module.css'; -const QUOTES = [ - { - thumbnail: require('../data/quotes/christopher-chedeau.jpg'), - name: 'Christopher "vjeux" Chedeau', - title: translate({ - id: 'homepage.quotes.christopher-chedeau.title', - message: 'Lead Prettier Developer', - description: 'Title of quote of Christopher Chedeau on the home page', - }), - text: ( - - I've helped open source many projects at Facebook and every one - needed a website. They all had very similar constraints: the - documentation should be written in markdown and be deployed via GitHub - pages. I’m so glad that Docusaurus now exists so that I don’t have to - spend a week each time spinning up a new one. - - ), - }, - { - thumbnail: require('../data/quotes/hector-ramos.jpg'), - name: 'Hector Ramos', - title: translate({ - id: 'homepage.quotes.hector-ramos.title', - message: 'Lead React Native Advocate', - description: 'Title of quote of Hector Ramos on the home page', - }), - text: ( - - Open source contributions to the React Native docs have skyrocketed - after our move to Docusaurus. The docs are now hosted on a small repo in - plain markdown, with none of the clutter that a typical static site - generator would require. Thanks Slash! - - ), - }, - { - thumbnail: require('../data/quotes/ricky-vetter.jpg'), - name: 'Ricky Vetter', - title: translate({ - id: 'homepage.quotes.risky-vetter.title', - message: 'ReasonReact Developer', - description: 'Title of quote of Ricky Vetter on the home page', - }), - text: ( - - Docusaurus has been a great choice for the ReasonML family of projects. - It makes our documentation consistent, i18n-friendly, easy to maintain, - and friendly for new contributors. - - ), - }, -]; +function HeroBanner() { + return ( +
+
+

+ {translate({message: + optimized websites quickly, focus on your content', + description: + 'Home page hero title, can contain simple html tags', + }), + }} + /> +

+
+ + Get Started + + + Playground + + +