diff --git a/.gitignore b/.gitignore
index 334b8520c8e4..c80f67d0e6f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 
 node_modules
 .yarn
+package-lock.json
 
 .eslintcache
 
diff --git a/admin/scripts/resizeImageBlog.js b/admin/scripts/resizeImageBlog.js
new file mode 100644
index 000000000000..75db68e9518c
--- /dev/null
+++ b/admin/scripts/resizeImageBlog.js
@@ -0,0 +1,53 @@
+/**
+ * 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 fs from 'fs-extra';
+import path from 'path';
+import logger from '@docusaurus/logger';
+import sharp from 'sharp';
+import imageSize from 'image-size';
+import globby from 'globby';
+
+// TODO duplicate temporary script: factorize!
+
+const imgDir = 'website/blog/2022-08-01-announcing-docusaurus-2.0/img';
+
+const imgWidth = 1200;
+
+const allImages = (await globby(`${imgDir}/**`)).filter((file) =>
+  ['.png', 'jpg', '.jpeg'].includes(path.extname(file)),
+);
+
+const [, , ...selectedImages] = process.argv;
+const images = selectedImages.length > 0 ? selectedImages : allImages;
+
+const stats = {
+  skipped: 0,
+  resized: 0,
+};
+
+await Promise.all(
+  images.map(async (imgPath) => {
+    const {width, height} = imageSize(imgPath);
+    if (width === imgWidth && imgPath.endsWith('.png')) {
+      // Do not emit if not resized. Important because we can't guarantee
+      // idempotency during resize -> optimization
+      stats.skipped += 1;
+      return;
+    }
+    logger.info`Resized path=${imgPath}: Before number=${width}×number=${height}`;
+    const data = await sharp(imgPath)
+      .resize(imgWidth)
+      .png({quality: 100})
+      .toBuffer();
+    await fs.writeFile(imgPath.replace(/jpe?g/, 'png'), data);
+    stats.resized += 1;
+  }),
+);
+
+console.log(`Blog images resizing complete.
+${JSON.stringify(stats, null, 2)}`);
diff --git a/project-words.txt b/project-words.txt
index 531bc0041554..6659806d2ff9 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -195,6 +195,7 @@ npmrc
 nprogress
 ntfs
 nuxt
+O’Shannessy
 onboarded
 openapi
 opensearch
@@ -250,6 +251,7 @@ quasis
 quddus
 quddús
 quotify
+rachelnabors
 ramón
 reactjs
 rearchitecture
@@ -364,3 +366,28 @@ yangshun
 yangshunz
 zhou
 zoomable
+zpao
+paularmstrong
+devs
+Viet
+dabit
+Dabit
+alexbdebrie
+Investec
+Quickwit
+Hamel
+Husain
+Outerbounds
+jodyheavener
+Heavener
+maxlynch
+gabrielcsapo
+Csapo
+Hasura
+Solana
+solana
+shiki
+twoslash
+Shiki
+Therox
+plushies
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/ShowcaseCarousel.module.css b/website/blog/2022-08-01-announcing-docusaurus-2.0/ShowcaseCarousel.module.css
new file mode 100644
index 000000000000..91fb796a34eb
--- /dev/null
+++ b/website/blog/2022-08-01-announcing-docusaurus-2.0/ShowcaseCarousel.module.css
@@ -0,0 +1,85 @@
+/**
+ * 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.
+ */
+
+.carousel {
+  position: relative;
+}
+
+.navButton {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 20px;
+  height: 40px;
+  width: 40px;
+
+  background-color: rgb(0 0 0 / 30%);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.navButton:hover {
+  background-color: rgb(0 0 0 / 45%);
+}
+
+.dotGroup {
+  position: absolute;
+  bottom: 5px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.dotGroup > :global(.carousel__dot) {
+  pointer-events: auto;
+  display: inline-block;
+  border: none;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  margin: 2px;
+  background: rgb(0 0 0 / 20%);
+}
+
+.dotGroup > :global(.carousel__dot--selected) {
+  background: rgb(0 0 0 / 45%);
+}
+
+.siteSlide {
+  position: relative;
+}
+
+.siteLink {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  padding: 0 12px;
+  background-color: rgb(0 0 0 / 30%);
+  border-radius: 6px;
+  font-size: 16px;
+  --ifm-link-color: var(--ifm-color-gray-400);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.siteLink:hover {
+  background-color: rgb(0 0 0 / 45%);
+  --ifm-link-color: var(--ifm-color-gray-200);
+  --ifm-link-hover-color: var(--ifm-color-gray-200);
+  --ifm-link-hover-decoration: none;
+}
+
+@media only screen and (max-width: 768px) {
+  .siteLink {
+    font-size: 12px;
+    padding: 0 8px;
+  }
+}
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/ShowcaseCarousel.tsx b/website/blog/2022-08-01-announcing-docusaurus-2.0/ShowcaseCarousel.tsx
new file mode 100644
index 000000000000..a0e51bdddbba
--- /dev/null
+++ b/website/blog/2022-08-01-announcing-docusaurus-2.0/ShowcaseCarousel.tsx
@@ -0,0 +1,228 @@
+/**
+ * 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.
+ */
+
+/**
+ * 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, {type ComponentProps} from 'react';
+import {
+  CarouselProvider,
+  Slider,
+  Slide,
+  ButtonBack,
+  ButtonNext,
+  DotGroup,
+} from 'pure-react-carousel';
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import Link from '@docusaurus/Link';
+import Image from '@theme/IdealImage';
+import styles from './ShowcaseCarousel.module.css';
+
+type Site = {
+  name: string;
+  image: ComponentProps<typeof Image>['img'];
+  url: string;
+};
+
+function SiteSlide({index, site}: {index: number; site: Site}) {
+  return (
+    <Slide index={index} className={styles.siteSlide}>
+      <Image
+        img={site.image}
+        alt={site.name}
+        loading={index === 0 ? 'eager' : 'lazy'}
+      />
+      <Link to={site.url} className={styles.siteLink} target="_blank">
+        🔗 {site.name}
+      </Link>
+    </Slide>
+  );
+}
+
+export default function ShowcaseCarousel({
+  sites,
+  aspectRatio,
+}: {
+  sites: Site[];
+  aspectRatio: number;
+}): JSX.Element {
+  return (
+    <CarouselProvider
+      naturalSlideWidth={1}
+      naturalSlideHeight={1 / aspectRatio}
+      totalSlides={sites.length}
+      infinite
+      className={styles.carousel}>
+      <Slider>
+        {sites.map((site, index) => (
+          <SiteSlide key={index} index={index} site={site} />
+        ))}
+      </Slider>
+      <ButtonNext className={styles.navButton} style={{right: -20}}>
+        {'>'}
+      </ButtonNext>
+      <ButtonBack className={styles.navButton} style={{left: -20}}>
+        {'<'}
+      </ButtonBack>
+      <DotGroup className={styles.dotGroup} />
+    </CarouselProvider>
+  );
+}
+
+export function ShowcaseCarouselV1(): JSX.Element {
+  return (
+    <ShowcaseCarousel
+      aspectRatio={1072 / 584}
+      sites={[
+        {
+          name: 'Prettier',
+          image: require('./img/v1/prettier.png'),
+          url: 'https://prettier.io/',
+        },
+        {
+          name: 'Babel',
+          image: require('./img/v1/babel.png'),
+          url: 'https://babeljs.io/',
+        },
+        {
+          name: 'React-Native',
+          image: require('./img/v1/react-native.png'),
+          url: 'https://archive.reactnative.dev/',
+        },
+        {
+          name: 'Katex',
+          image: require('./img/v1/katex.png'),
+          url: 'https://katex.org/docs/',
+        },
+        {
+          name: 'Docusaurus',
+          image: require('./img/v1/docusaurus.png'),
+          url: 'https://v1.docusaurus.io/',
+        },
+      ]}
+    />
+  );
+}
+
+export function ShowcaseCarouselV2(): JSX.Element {
+  return (
+    <ShowcaseCarousel
+      aspectRatio={2148 / 1194}
+      sites={[
+        {
+          name: 'Tauri',
+          image: require('./img/v2/tauri.png'),
+          url: 'https://tauri.app/',
+        },
+        {
+          name: 'Figma',
+          image: require('./img/v2/figma.png'),
+          url: 'https://www.figma.com/plugin-docs/',
+        },
+        {
+          name: 'Snapchat',
+          image: require('./img/v2/snapchat.png'),
+          url: 'https://docs.snap.com/',
+        },
+        {
+          name: 'Iota',
+          image: require('./img/v2/iota.png'),
+          url: 'https://wiki.iota.org/',
+        },
+        {
+          name: 'SAP Cloud',
+          image: require('./img/v2/sap-cloud.png'),
+          url: 'https://sap.github.io/cloud-sdk/',
+        },
+        {
+          name: 'Supabase',
+          image: require('./img/v2/supabase.png'),
+          url: 'https://supabase.com/docs',
+        },
+        {
+          name: 'StackBlitz',
+          image: require('./img/v2/stackblitz.png'),
+          url: 'https://developer.stackblitz.com/',
+        },
+        {
+          name: 'Lacework',
+          image: require('./img/v2/lacework.png'),
+          url: 'https://docs.lacework.com/',
+        },
+        {
+          name: 'React-Navigation',
+          image: require('./img/v2/react-navigation.png'),
+          url: 'https://reactnavigation.org/',
+        },
+        {
+          name: 'Solana',
+          image: require('./img/v2/solana.png'),
+          url: 'https://docs.solana.com/',
+        },
+        {
+          name: 'Gulp',
+          image: require('./img/v2/gulp.png'),
+          url: 'https://gulpjs.com/',
+        },
+      ]}
+    />
+  );
+}
+
+export function ShowcaseCarouselV2Theming(): JSX.Element {
+  return (
+    <ShowcaseCarousel
+      aspectRatio={2148 / 1194}
+      sites={[
+        {
+          name: 'Ionic',
+          image: require('./img/v2-theming/ionic.png'),
+          url: 'https://ionicframework.com/docs/',
+        },
+        {
+          name: 'Outerbounds',
+          image: require('./img/v2-theming/outerbounds.png'),
+          url: 'https://outerbounds.com/docs/',
+        },
+        {
+          name: 'Courier',
+          image: require('./img/v2-theming/courier.png'),
+          url: 'https://www.courier.com/docs/',
+        },
+        {
+          name: 'Quickwit',
+          image: require('./img/v2-theming/quickwit.png'),
+          url: 'https://quickwit.io/docs/',
+        },
+        {
+          name: 'Dyte',
+          image: require('./img/v2-theming/dyte.png'),
+          url: 'https://docs.dyte.io/',
+        },
+        {
+          name: 'React-Native',
+          image: require('./img/v2-theming/react-native.png'),
+          url: 'https://reactnative.dev/',
+        },
+        {
+          name: 'Hasura',
+          image: require('./img/v2-theming/hasura.png'),
+          url: 'https://hasura.io/docs/',
+        },
+        {
+          name: 'Datagit',
+          image: require('./img/v2-theming/datagit.png'),
+          url: 'https://www.datagit.ir/',
+        },
+      ]}
+    />
+  );
+}
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/npm-downloads.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/npm-downloads.png
new file mode 100644
index 000000000000..1ab76046ff9c
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/npm-downloads.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/redocusaurus.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/redocusaurus.png
new file mode 100644
index 000000000000..b74e35197b9d
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/redocusaurus.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/search.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/search.png
new file mode 100644
index 000000000000..af6732db8a3f
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/search.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/shiki-twoslash.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/shiki-twoslash.png
new file mode 100644
index 000000000000..42f4c456c695
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/plugins/shiki-twoslash.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/slash-plushies.jpg b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/slash-plushies.jpg
new file mode 100644
index 000000000000..b16fa190bee3
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/slash-plushies.jpg differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/social-card.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/social-card.png
new file mode 100644
index 000000000000..88bfbed24217
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/social-card.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/star-history.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/star-history.png
new file mode 100644
index 000000000000..7eadba275400
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/star-history.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/babel.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/babel.png
new file mode 100644
index 000000000000..d5ab96c86c43
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/babel.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/docusaurus.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/docusaurus.png
new file mode 100644
index 000000000000..7f2010bde0c8
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/docusaurus.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/katex.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/katex.png
new file mode 100644
index 000000000000..4e5658d7c8fc
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/katex.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/prettier.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/prettier.png
new file mode 100644
index 000000000000..2309f6cf1e1f
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/prettier.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/react-native.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/react-native.png
new file mode 100644
index 000000000000..d903f10234ea
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v1/react-native.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/courier.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/courier.png
new file mode 100644
index 000000000000..4d5aa7ab9956
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/courier.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/datagit.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/datagit.png
new file mode 100644
index 000000000000..81689cc4df39
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/datagit.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/dyte.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/dyte.png
new file mode 100644
index 000000000000..8a385945d600
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/dyte.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/hasura.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/hasura.png
new file mode 100644
index 000000000000..1e70106d42a3
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/hasura.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/ionic.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/ionic.png
new file mode 100644
index 000000000000..946e0657add4
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/ionic.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/outerbounds.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/outerbounds.png
new file mode 100644
index 000000000000..13ef0380514d
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/outerbounds.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/quickwit.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/quickwit.png
new file mode 100644
index 000000000000..5f7bae001a92
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/quickwit.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/react-native.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/react-native.png
new file mode 100644
index 000000000000..1743cc74fe6a
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2-theming/react-native.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/figma.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/figma.png
new file mode 100644
index 000000000000..0b88b9f6a0e9
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/figma.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/gulp.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/gulp.png
new file mode 100644
index 000000000000..5a98bf95bac0
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/gulp.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/iota.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/iota.png
new file mode 100644
index 000000000000..db52d1ec3fa6
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/iota.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/lacework.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/lacework.png
new file mode 100644
index 000000000000..1938bf606c5d
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/lacework.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/react-navigation.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/react-navigation.png
new file mode 100644
index 000000000000..217b1e2340a0
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/react-navigation.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/sap-cloud.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/sap-cloud.png
new file mode 100644
index 000000000000..5160e4d022c6
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/sap-cloud.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/snapchat.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/snapchat.png
new file mode 100644
index 000000000000..b92846057594
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/snapchat.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/solana.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/solana.png
new file mode 100644
index 000000000000..ecaa75e4cbac
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/solana.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/stackblitz.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/stackblitz.png
new file mode 100644
index 000000000000..8195f9d330cb
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/stackblitz.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/supabase.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/supabase.png
new file mode 100644
index 000000000000..bb81ccc01c28
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/supabase.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/tauri.png b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/tauri.png
new file mode 100644
index 000000000000..1bbaa32faaf3
Binary files /dev/null and b/website/blog/2022-08-01-announcing-docusaurus-2.0/img/v2/tauri.png differ
diff --git a/website/blog/2022-08-01-announcing-docusaurus-2.0/index.mdx b/website/blog/2022-08-01-announcing-docusaurus-2.0/index.mdx
new file mode 100644
index 000000000000..82eb42694e57
--- /dev/null
+++ b/website/blog/2022-08-01-announcing-docusaurus-2.0/index.mdx
@@ -0,0 +1,446 @@
+---
+title: Announcing Docusaurus 2.0
+authors:
+  - slorber
+  - Josh-Cena
+  - yangshun
+  - lex111
+  - zpao
+  - key: JMarcey
+    title: Co-creator of Docusaurus 1
+tags: [release]
+image: ./img/social-card.png
+---
+
+```mdx-code-block
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+import BrowserWindow from '@site/src/components/BrowserWindow';
+import ProductHuntCard from '@site/src/components/ProductHuntCard';
+import HackerNewsIcon from '@site/src/components/HackerNewsIcon';
+import ColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import {ShowcaseCarouselV1, ShowcaseCarouselV2, ShowcaseCarouselV2Theming} from './ShowcaseCarousel';
+```
+
+Today we are extremely happy to finally **announce Docusaurus 2.0**! 🥳️
+
+At [**Meta Open Source**](https://opensource.fb.com/), we believe Docusaurus will help you build the **best documentation websites** with **minimal effort**, letting you **focus on what really matters**: writing the content.
+
+After **4 years of work, [75 alphas](https://github.com/facebook/docusaurus/releases/tag/v2.0.0-alpha.75) and [22 betas](https://github.com/facebook/docusaurus/releases/tag/v2.0.0-beta.22)**, the next generation of Docusaurus is **ready for prime time**. From now on, we now plan to **respect [Semantic Versioning](https://semver.org/)** and will release **major versions more frequently**.
+
+![social-card image](./img/social-card.png)
+
+<!--truncate-->
+
+:::info We are on [ProductHunt](https://www.producthunt.com/) and [Hacker News](https://news.ycombinator.com/)!
+
+**Now** is the best time to show your love for Docusaurus!
+
+<div style={{display: 'flex'}}>
+  <ProductHuntCard />
+  <HackerNewsIcon />
+</div>
+
+:::
+
+:::tip
+
+In a hurry? Check [what's new in Docusaurus 2.0](#whats-new-in-20)!
+
+:::
+
+## What is Docusaurus exactly?
+
+Docusaurus is a **static site generator** that helps you ship **beautiful documentation websites** in **no time**.
+
+Focus on your content: just write **Markdown files**. Docusaurus will generate an optimized **website** for you that's easy to **host anywhere**.
+
+Docusaurus is **full-featured** and very **flexible**: we ship with well-designed docs and blog layout, as well as out-of-the-box versioning, search, and internationalization functionalities, with a call to accessibility and search engine optimizations. Its flexible theming system permits to **adapt the UI to match your branding** so that it integrates nicely with your main website or documentation portal. Its usage of **React** enables a **modern client-side navigation**, and the ability to build an **interactive documentation**.
+
+![Introducing Slash](/img/slash-introducing.svg)
+
+The Docusaurus philosophy is akin to the **Pareto principle**: you can get **80% of the results** for **20% of the effort**. This enables you to compete with top-notch documentation sites with **minimal effort**.
+
+<TweetQuote
+  url="https://twitter.com/rachelnabors/status/1452697991039660038"
+  handle="rachelnabors"
+  name="Rachel Nabors"
+  job="Former ReactJS & React-Native docs manager">
+  Unless you're spinning up a documentation team with engineering resources, you
+  probably want Docusaurus!
+</TweetQuote>
+
+Docusaurus aims to be the **best documentation tool**, but you can use it for **other use-cases** as well: a blog, a knowledge base, a developer portfolio, a second brain, or even to scaffold landing pages!
+
+<TweetQuote
+  url="https://twitter.com/johnny_reilly/status/1551861926334025728"
+  handle="johnny_reilly"
+  name="Johnny Reilly"
+  job="Group Principal Engineer at Investec">
+  Using Docusaurus for my tech blog has been a fantastic choice. It looks
+  tremendous out-of-the-box and the awesome DX means I write way more
+</TweetQuote>
+
+:::tip
+
+Try Docusaurus now with our [online playgrounds](docs/playground) and [5 minutes tutorial](https://tutorial.docusaurus.io/) ⏱️
+
+:::
+
+## The story behind Docusaurus
+
+Docusaurus was created at **Facebook Open Source** in **2017** (now [Meta Open Source](https://opensource.fb.com/)). We had a lot of internal and open source projects to document. It's **complicated enough to write good documentation**, let alone to create the HTML, CSS, and JavaScript for a good-looking website. We wanted project leaders to be able to **focus on the content**, and **Markdown** is great for that.
+
+At that time, our solution was to **copy/paste a Jekyll template** over and over again. This naturally became **hard to maintain**, so we created a tool to **solve our own pain** once for all.
+
+**[Docusaurus v1 was born](/blog/2017/12/14/introducing-docusaurus)!**
+
+![Birth of Slash](/img/slash-birth.png)
+
+It quickly built momentum at Facebook and in the frontend ecosystem, adopted by many popular projects such as [Prettier](https://prettier.io/), [Babel](https://babeljs.io/), [React-Native](https://archive.reactnative.dev/), [KaTeX](https://katex.org/docs/), and of course [Docusaurus v1](http://v1.docusaurus.io/) itself.
+
+<ShowcaseCarouselV1 />
+
+<br />
+
+:::note
+
+Notice that the sample sites above use different colors, but still look quite the same.
+
+:::
+
+## Toward Docusaurus 2.0
+
+[**Docusaurus v1**](http://v1.docusaurus.io/) has been very successful, but we started to **question some architectural choices**:
+
+- React was only used as a **server-side templating language**, and not used on the client
+- **Theming system was pretty limited**, and apart from changing a few colors with CSS, it was difficult to do more advanced customizations
+- The **docs versioning system was confusing**, since it was based on a diff algorithm
+- The codebase was **monolithic**, neither well-tested nor easy to extend
+
+[**Docusaurus v2**](https://docusaurus.io/) was **rebuilt** from the ground up with a new **modular architecture**:
+
+- React is now also used on the client, enabling a **modern Single Page Application navigation**
+- **Plugins** empower the community to contribute useful features as third-party packages
+- **Theming** is more **flexible** than ever
+- Docs versioning is now based on snapshot copies, much easier to understand
+- We kept **everything good from v1**: docs, blog, pages, versioning, i18n...
+- We implemented **several new features**
+
+More details in the [Docusaurus 2 project announcement](/blog/2018/09/11/Towards-Docusaurus-2) and [v1 to v2 migration guide](https://docusaurus.io/docs/migration)
+
+## Who uses Docusaurus 2.0?
+
+Despite being in pre-release, it didn't take long for **Docusaurus v2 to outgrow Docusaurus v1** in terms of NPM downloads:
+
+[![NPM downloads: v2 outgrows v1](./img/npm-downloads.png)](https://npmtrends.com/docusaurus-vs-@docusaurus/core)
+
+Our GitHub star trend is very positive, competing with major frameworks:
+
+[![GitHub stars: Docusaurus is well-positioned](./img/star-history.png)](https://star-history.com/#facebook/docusaurus&vercel/next.js&gatsbyjs/gatsby&hexojs/hexo&nuxt/nuxt.js&vuejs/vuepress&11ty/eleventy&gohugoio/hugo&remix-run/remix&mkdocs/mkdocs&Timeline)
+
+Today, Docusaurus v2 has already been a great success even before its launch:
+
+- We received so many [lovely testimonials](https://twitter.com/sebastienlorber/timelines/1392048416872706049)
+- Companies like [1Password](https://blog.1password.com/docusaurus-documentation-framework/) and [Courier](https://www.courier.com/blog/how-we-built-our-documentation/) are writing down their positive experience
+- Our [site showcase](/showcase) references hundreds of sites, and this is only the tip of the iceberg.
+
+<ShowcaseCarouselV2 />
+
+<br />
+
+:::tip
+
+Please add your site to our [site showcase](/showcase)! It only takes a few seconds: just [post a comment here](https://github.com/facebook/docusaurus/discussions/7826).
+
+:::
+
+<TweetQuote
+  url="https://twitter.com/maxlynch/status/1549415692704825346"
+  handle="maxlynch"
+  name="Max Lynch"
+  job="Ionic co-founder and CEO">
+  We use Docusaurus everywhere now and love it
+</TweetQuote>
+
+<TweetQuote
+  url="https://twitter.com/supabase/status/1328960757149671425"
+  handle="supabase"
+  name="Supabase"
+  job="Open Source Firebase alternative">
+  We've been using V2 since January and it has been great
+</TweetQuote>
+
+<TweetQuote
+  url="https://twitter.com/gabrielcsapo/status/1415061312917233665"
+  handle="gabrielcsapo"
+  name="Gabriel Csapo"
+  job="Staff Software Engineer at LinkedIn">
+  Docusaurus is next level easy for literally everything you would need for
+  documentation in your project.
+</TweetQuote>
+
+<TweetQuote
+  url="https://twitter.com/ItWasMattGregg/status/1526682295075102721"
+  handle="ItWasMattGregg"
+  name="Matt Gregg"
+  job="Senior Front End Developer at Shopify">
+  Docusaurus is awesome. We use it
+</TweetQuote>
+
+## What's New in 2.0?
+
+It would be difficult to describe every single new feature coming with Docusaurus v2. Let's focus on the features we believe are the **most impactful**.
+
+### MDX
+
+[MDX](https://github.com/mdx-js/mdx) allows you to **interleave React components** in Markdown. This enables you to build top-notch **interactive documentation experiences** very easily.
+
+A demo is worth a thousand words:
+
+```md title="docs/my-document.mdx"
+### Give it a try: press that button!
+
+import ColorModeToggle from '@theme/ColorModeToggle';
+
+<ColorModeToggle/>
+```
+
+```mdx-code-block
+<BrowserWindow>
+
+<h3>Give it a try: press that button!</h3>
+
+<ColorModeToggle/>
+
+</BrowserWindow>
+```
+
+:::info
+
+MDX has its own [plugin system](https://mdxjs.com/docs/extending-mdx/). You to customize your Markdown authoring experience, and even create your own Markdown syntax.
+
+:::
+
+<TweetQuote
+  url="https://twitter.com/HamelHusain/status/1551962275250053123"
+  handle="HamelHusain"
+  name="Hamel Husain"
+  job="Head Of Data Science at Outerbounds">
+  Docusaurus + MDX is great: we were able to implement a beautiful two-pane
+  layout and give the author fine-grained control on the placement of code and
+  corresponding prose.
+</TweetQuote>
+
+### File system conventions
+
+Our goal is to make Docusaurus very **intuitive** to use. We added file system conventions, and adding a doc page is as easy as creating one Markdown file.
+
+<LiteYouTubeEmbed
+  id="T3S8GyFIXjo"
+  params="autoplay=1&autohide=1&showinfo=0&rel=0"
+  title="Explain Like I'm 5: Docusaurus"
+  poster="maxresdefault"
+  webp
+/>
+
+<br />
+
+<TweetQuote
+  url="https://twitter.com/paularmstrong/status/1552005085168865281"
+  handle="paularmstrong"
+  name="Paul Armstrong"
+  job="Principal Engineer at Microsoft">
+  Using the auto-generated sidebars makes it so simple to just create a page and
+  not worry about any other configuration.
+</TweetQuote>
+
+### Plugins
+
+Docusaurus now has a **modular architecture** with a plugin system — our **core features** like docs, blog, pages, and search are all powered by individual plugins.
+
+More importantly, it enables our community to **enhance Docusaurus** with additional features.
+
+Let's highlight some examples:
+
+- [redocusaurus](https://github.com/rohit-gohri/redocusaurus): seamless integration with [OpenAPI](https://www.openapis.org/) and [Redoc](https://github.com/Redocly/redoc)
+
+![redocusaurus plugin example](./img/plugins/redocusaurus.png)
+
+- [docusaurus-preset-shiki-twoslash](https://www.npmjs.com/package/docusaurus-preset-shiki-twoslash): use [Shiki](https://github.com/shikijs/shiki) code block syntax highlighting with [TwoSlash](https://shikijs.github.io/twoslash/) TypeScript compiler hints
+
+![shiki-twoslash plugin example](./img/plugins/shiki-twoslash.png)
+
+<TweetQuote
+  url="https://twitter.com/orta"
+  handle="orta"
+  name="Orta Therox"
+  job="Former TypeScript core team at Microsoft">
+  The plugin API was a breeze to use, and powerful enough that I could port the
+  code sample renderer from the TypeScript website site in a couple of hours.
+</TweetQuote>
+
+- [docusaurus-search-local](https://github.com/easyops-cn/docusaurus-search-local): one of the various local search alternatives to the built-in Algolia plugin
+
+![local search plugin example](./img/plugins/search.png)
+
+:::tip
+
+We have a curated list of outstanding plugins in our [community resources](/community/resources) page.
+
+:::
+
+<TweetQuote
+  url="https://twitter.com/jodyheavener/status/1551974535452311552"
+  handle="jodyheavener"
+  name="Jody Heavener"
+  job="Senior Developer at 1Password">
+  The plugin system in Docusaurus v2 has made expanding 1Password's developer
+  portal so easy and fun. Super excited to show you what we've got cooking up.
+</TweetQuote>
+
+### Theming
+
+Theming is one of the most important features of Docusaurus: we believe a professional documentation site should **respect your company's branding** and create a consistent experience.
+
+Docusaurus theming gives a lot of **flexibility** on multiple levels:
+
+- Customize CSS variables to adjust colors, fonts, and more
+- Provide your own CSS stylesheets
+- Implement your own theme from scratch
+- **Override any React component** provided by our default theme: we call this [swizzling](https://docusaurus.io/docs/swizzling)
+
+<TweetQuote
+  url="https://twitter.com/hung_dev/status/1546918275065741312"
+  handle="hung_dev"
+  name="
+Hung Viet Nguyen"
+  job="Creator of JestPreview">
+  I love Docusaurus Swizzling feature. It’s opinionated and flexible at the same
+  time. This is super cool since a framework usually needs to sacrifice one for
+  the other.
+</TweetQuote>
+
+This enables users willing to invest a bit more time on **customizations** to build sites that **look different** from others.
+
+<ShowcaseCarouselV2Theming />
+
+<TweetQuote
+  url="https://twitter.com/dabit3/status/1382855449813389315"
+  handle="dabit3"
+  name="Nader Dabit"
+  job="Web3 developer, Developer DAO founder">
+  So far it’s working out really nicely. It’s been really easy to style up the
+  way that we wanted it to look. No blockers at all.
+</TweetQuote>
+
+### Other features
+
+Docusaurus 2 comes with a very long list of useful features:
+
+- Theme: dark mode, better UI and UX, flexible `themeConfig` options...
+- Docs versioning: flexible plugin options to adapt to your workflow
+- Docs sidebar: collapsible category, category index pages...
+- Blog: multiple authors, authors map, archive page...
+- Markdown: tabs, math equations, live code blocks, linking, flexible front matter...
+- Search: use the new Algolia DocSearch 3 experience
+- Assets: make it easy to incorporate images and other kinds of files
+- Internationalization: config options, default theme translations...
+- Accessibility: aria labels, color contrasts, skip-to-content, keyboard navigation, progressive enhancement...
+- SEO: sensible defaults, easy to customize, canonical url, social card, no-index, sitemap, microdata, hreflang...
+- PWA: add offline support to your site, and make it installable
+- Fail-fast: strict config validation, detect broken links, and prevent bad production deployments
+- TypeScript support for config files, plugins, custom pages and theme authors
+- Playgrounds: assess Docusaurus easily from your browser with [docusaurus.new](https://docusaurus.new)
+- Canary releases: use the @canary npm tag to use the upcoming release before anyone else
+- Tests: Docusaurus is well-tested, we dogfood features and ensure they keep working
+
+<TweetQuote
+  url="https://twitter.com/alexbdebrie/status/1540010328335032320"
+  handle="alexbdebrie"
+  name="Alex DeBrie"
+  job="AWS Data Hero, author of The DynamoDB Book">
+  Recently, I was shocked at how good Docusaurus is out of the box. Super solid,
+  a good bit of configuration without being overwhelming, and the ability to
+  really customize the styling if you're braver than I am.
+</TweetQuote>
+
+## Why 2.0 now?
+
+Many enthusiastic followers of ours have been curious **why it took us 4 years to release Docusaurus 2.0**, considering the beta is already successful and **widely used in production**.
+
+The reason is that we aim to **respect [Semantic Versioning](https://semver.org/)**, which means we will be incrementing the major version number whenever we release a **breaking change**.
+
+It is important for multiple reasons:
+
+- It **guarantees simple minor version upgrades**, as long as you only use the [public API](/community/release-process#public-api-surface)
+- It follows front-end ecosystem conventions
+- A new major version is an opportunity to thoroughly document breaking changes
+- A new major/minor version is an opportunity to communicate new features through a blog post
+
+The problem is that our flexible theming system inherently creates a very **implicit API surface** on which it is **hard to know what is a breaking change** in the first place. Highly customized Docusaurus sites sometimes have a hard time upgrading Docusaurus because they achieve customizations using internal APIs. We dedicated time to extensive theme refactors and clearly defining our [public API](/community/release-process#public-api-surface), so that future code changes can be made more safely. We will continue to expand this public theming API so that the most common site customizations do not need to use any internal API.
+
+:::info
+
+From now on, Docusaurus will **release new major versions more frequently**. In practice, you can expect a **new major version every 2 to 4 months**.
+
+[Major version numbers are not sacred](https://tom.preston-werner.com/2022/05/23/major-version-numbers-are-not-sacred.html), but we still group breaking changes together and avoid releasing major versions too often.
+
+Check our [release process](/community/release-process) documentation for details.
+
+:::
+
+## What's Next?
+
+![Slash Up and Running](/img/slash-up-and-running.png)
+
+The work on Docusaurus 3.0 has started, and this next version will be released only in a few months. We will **backport retro-compatible changes in Docusaurus 2.x** minor versions to make them available as soon as possible to the community on a stable channel.
+
+A sample of the features on our roadmap for the upcoming major versions of Docusaurus:
+
+- [Upgrade to MDX 2.0](https://github.com/facebook/docusaurus/issues/4029)
+- [Improve Markdown infrastructure](https://github.com/facebook/docusaurus/issues/4625)
+- [Improve theming and swizzle](https://github.com/facebook/docusaurus/issues/6114)
+- [TailwindCSS theme](https://github.com/facebook/docusaurus/issues/2961)
+- [Theme; support custom item types for navbar, doc sidebar, blog sidebar, footer](https://github.com/facebook/docusaurus/issues/7227)
+- [Dynamic navbar: navbar item activation strategies](https://github.com/facebook/docusaurus/issues/4389)
+- [Custom Social Cards](https://github.com/facebook/docusaurus/issues/2968)
+- [CSS-in-JS support](https://github.com/facebook/docusaurus/issues/3236)
+- [Use Node.js ES Modules](https://github.com/facebook/docusaurus/issues/6520)
+- [Improve build time performance](https://github.com/facebook/docusaurus/issues/4765)
+- [Extend Docusaurus plugins, CMS integration](https://github.com/facebook/docusaurus/issues/4138)
+
+## Thank You
+
+We'd like to express our gratitude to [all our contributors](https://github.com/facebook/docusaurus/graphs/contributors), including:
+
+- The Docusaurus core team: [Alexey Pyltsyn](https://github.com/lex111), [Joshua Chen](https://github.com/Josh-Cena), [Sébastien Lorber](https://github.com/slorber), [Yangshun Tay](https://github.com/yangshun) and all our [former team members](https://docusaurus.io/community/team)
+- [Joel Marcey](https://github.com/JoelMarcey) for creating Docusaurus 1.0 and supporting the Docusaurus 2.0 project at Meta Open Source
+- [Paul O’Shannessy](https://github.com/zpao) for supporting the development of all the next versions of Docusaurus at Meta Open Source
+- [Eric Nakagawa](https://github.com/ericnakagawa) for creating our cutest mascot Slash
+- [Endilie Yacop Sucipto](https://github.com/endiliey) for his significant [initial work on Docusaurus v2](/blog/2020/01/07/tribute-to-endi)
+- [Clément Vannicatte](https://github.com/shortcuts), [Kevin Granger](https://github.com/Shipow) and the whole Algolia team for their support
+- All the community members for making valuable code contributions, improving our documentation, and answering questions on [Discord](https://discordapp.com/invite/docusaurus)
+
+We'd like to thank in particular all our **Docusaurus 2.0 early adopters** for assessing its alpha, beta and canary releases, providing a ton of **invaluable feedback**. We sincerely hope you had a great experience using it, and that you will continue to provide feedback on the upcoming pre-releases of Docusaurus 3.0.
+
+At [Meta Open Source](https://opensource.fb.com/), Docusaurus is one of our **most successful projects**. We can't wait to see all the outstanding documentation websites that you will create! Don't forget to **submit them to our [site showcase](/showcase)**!
+
+**Now, let your imagination run wild 🤪!**
+
+— Slash
+
+:::info We are on [ProductHunt](https://www.producthunt.com/) and [Hacker News](https://news.ycombinator.com/)!
+
+🙏 Share your experience using Docusaurus with the community!
+
+<div style={{display: 'flex'}}>
+  <ProductHuntCard />
+  <HackerNewsIcon />
+</div>
+
+:::
+
+![Slash plushies](./img/slash-plushies.jpg)
diff --git a/website/blog/authors.yml b/website/blog/authors.yml
index b1beb5f8ec67..c04e86dec4d2 100644
--- a/website/blog/authors.yml
+++ b/website/blog/authors.yml
@@ -1,11 +1,19 @@
 JMarcey:
   name: Joel Marcey
-  title: Technical Lead & Developer Advocate at Facebook
-  url: http://twitter.com/JoelMarcey
+  title: Developer Advocate at Meta
+  url: https://twitter.com/JoelMarcey
   image_url: https://github.com/JoelMarcey.png
   email: jimarcey@gmail.com
   twitter: JoelMarcey
 
+zpao:
+  name: Paul O’Shannessy
+  title: Engineering Manager at Meta
+  url: https://twitter.com/zpao
+  image_url: https://github.com/zpao.png
+  email: jimarcey@gmail.com
+  twitter: zpao
+
 slorber:
   name: Sébastien Lorber
   title: Docusaurus maintainer
@@ -16,7 +24,7 @@ slorber:
 
 yangshun:
   name: Yangshun Tay
-  title: Front End Engineer at Facebook
+  title: Front End Engineer at Meta
   url: https://github.com/yangshun
   image_url: https://github.com/yangshun.png
   twitter: yangshunz
diff --git a/website/community/5-release-process.md b/website/community/5-release-process.md
index c917959fc552..10bb240a18ca 100644
--- a/website/community/5-release-process.md
+++ b/website/community/5-release-process.md
@@ -14,7 +14,7 @@ Docusaurus versioning is based on the `major.minor.patch` scheme and respects [S
 
 Respecting Semantic Versioning is important for multiple reasons:
 
-- It **guarantees simple minor version upgrades**, as long as you only use the [public API](##public-api-surface)
+- It **guarantees simple minor version upgrades**, as long as you only use the [public API](/community/release-process#public-api-surface)
 - It follows front-end ecosystem conventions
 - A new major version is an opportunity to thoroughly document breaking changes
 - A new major/minor version is an opportunity to communicate new features through a blog post
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 5f9f7da058e6..f65f4fdd761d 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -86,7 +86,7 @@ const config = {
   ],
   i18n: {
     defaultLocale: 'en',
-     
+
     locales:
       isDeployPreview || isBranchDeploy
         ? // Deploy preview and branch deploys: keep them fast!
diff --git a/website/package.json b/website/package.json
index 7534ce014d12..44952e97db50 100644
--- a/website/package.json
+++ b/website/package.json
@@ -54,6 +54,7 @@
     "color": "^4.2.3",
     "fs-extra": "^10.1.0",
     "netlify-plugin-cache": "^1.0.3",
+    "pure-react-carousel": "^1.28.1",
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/website/src/components/HackerNewsIcon.tsx b/website/src/components/HackerNewsIcon.tsx
new file mode 100644
index 000000000000..cb7213379b93
--- /dev/null
+++ b/website/src/components/HackerNewsIcon.tsx
@@ -0,0 +1,35 @@
+/**
+ * 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';
+
+export default function HackerNewsIcon({
+  size = 54,
+}: {
+  size?: number;
+}): JSX.Element {
+  return (
+    <a
+      href="https://news.ycombinator.com/"
+      target="_blank"
+      rel="noreferrer"
+      style={{display: 'block', width: size, height: size}}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 48 48"
+        width={size}
+        height={size}>
+        <path fill="#FF6D00" d="M42 42H6V6h36v36z" />
+        <path fill="#FFF" d="M8 8v32h32V8H8zm30 30H10V10h28v28z" />
+        <path
+          fill="#FFF"
+          d="M23 32h2v-6l5.5-10h-2.1L24 24.1 19.6 16h-2.1L23 26z"
+        />
+      </svg>
+    </a>
+  );
+}
diff --git a/website/src/components/ProductHuntCard.tsx b/website/src/components/ProductHuntCard.tsx
new file mode 100644
index 000000000000..abd4b1ed8363
--- /dev/null
+++ b/website/src/components/ProductHuntCard.tsx
@@ -0,0 +1,34 @@
+/**
+ * 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 type {ComponentProps} from 'react';
+import React from 'react';
+
+export default function ProductHuntCard({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: ComponentProps<'a'>['style'];
+}): JSX.Element {
+  return (
+    <a
+      href="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"
+      target="_blank"
+      rel="noreferrer"
+      className={className}
+      style={{display: 'block', width: 250, height: 54, ...style}}>
+      <img
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=353916&theme=light"
+        alt="Docusaurus 2.0 - Build optimized websites quickly, focus on your content. | Product Hunt"
+        style={{width: 250, height: 54, maxWidth: 'initial'}}
+        width={250}
+        height={54}
+      />
+    </a>
+  );
+}
diff --git a/website/src/components/TweetQuote/index.tsx b/website/src/components/TweetQuote/index.tsx
new file mode 100644
index 000000000000..bb96ac1a70dd
--- /dev/null
+++ b/website/src/components/TweetQuote/index.tsx
@@ -0,0 +1,60 @@
+/**
+ * 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, {type ReactNode} from 'react';
+
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
+
+export interface Props {
+  url: string;
+  handle: string;
+  name: string;
+  job: string;
+  children: ReactNode;
+}
+
+export default function TweetQuote({
+  url,
+  handle,
+  name,
+  job,
+  children,
+}: Props): JSX.Element {
+  const avatar = `https://unavatar.io/twitter/${handle}`;
+  const profileUrl = `https://twitter.com/${handle}`;
+  return (
+    <figure className={styles.tweetQuote}>
+      <blockquote>
+        <a href={url} target="_blank" rel="noreferrer nofollow">
+          {children}
+        </a>
+      </blockquote>
+      <figcaption>
+        <a href={profileUrl} target="_blank" rel="noreferrer nofollow">
+          <div className="avatar">
+            <img
+              alt={name}
+              className={clsx('avatar__photo', styles.avatarImg)}
+              src={avatar}
+              // loading="lazy"
+            />
+            <div className={clsx('avatar__intro')}>
+              <strong className="avatar__name">
+                <cite>{name}</cite>
+              </strong>
+              <small className="avatar__subtitle" itemProp="description">
+                {job}
+              </small>
+            </div>
+          </div>
+        </a>
+      </figcaption>
+    </figure>
+  );
+}
diff --git a/website/src/components/TweetQuote/styles.module.css b/website/src/components/TweetQuote/styles.module.css
new file mode 100644
index 000000000000..f31f85b2a601
--- /dev/null
+++ b/website/src/components/TweetQuote/styles.module.css
@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+.tweetQuote {
+  padding: 0;
+  margin: 3rem 1rem;
+  --ifm-link-color: var(--ifm-color-emphasis-900);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-900);
+}
+
+.tweetQuote blockquote {
+  font-weight: 200;
+  font-size: 1.2rem;
+  line-height: 1.4;
+  position: relative;
+  border: none;
+  margin-bottom: 0.6rem;
+  text-align: center;
+}
+
+.tweetQuote :global(.avatar__subtitle) {
+  margin-top: 0;
+}
+
+.tweetQuote blockquote::before,
+.tweetQuote blockquote::after {
+  position: absolute;
+  color: #f1efe6;
+  font-size: 6rem;
+  width: 3rem;
+  height: 3rem;
+  font-family: cursive;
+  line-height: 1;
+}
+
+.tweetQuote blockquote::before {
+  content: '“';
+  left: -2.4rem;
+  top: -1.1rem;
+}
+
+.tweetQuote blockquote::after {
+  content: '”';
+  right: -1.6rem;
+  bottom: -1.1rem;
+}
+
+[data-theme='dark'] .tweetQuote blockquote::before,
+[data-theme='dark'] .tweetQuote blockquote::after {
+  color: #3b3b3b;
+}
+
+.tweetQuote p {
+  display: inline;
+}
+
+.tweetQuote .avatarImg {
+  width: 42px;
+  height: 42px;
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 0c48a4472379..54c3d0b9011e 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -21,6 +21,8 @@ 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 ProductHuntCard from '@site/src/components/ProductHuntCard';
+import HackerNewsIcon from '@site/src/components/HackerNewsIcon';
 import styles from './styles.module.css';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
@@ -171,6 +173,15 @@ function VideoContainer() {
               webp
             />
           </div>
+          <div className="video-container">
+            <LiteYouTubeEmbed
+              id="T3S8GyFIXjo"
+              params="autoplay=1&autohide=1&showinfo=0&rel=0"
+              title="Explain Like I'm 5: Docusaurus"
+              poster="maxresdefault"
+              webp
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -229,6 +240,61 @@ function FeaturesContainer() {
   );
 }
 
+function TopBanner() {
+  /* TODO restore Ukraine banner after launch
+    <Translate
+        id="homepage.banner"
+        values={{
+          link: (
+            <Link to="https://opensource.facebook.com/support-ukraine">
+              <Translate id="homepage.banner.link">
+                Help Provide Humanitarian Aid to Ukraine
+              </Translate>
+            </Link>
+          ),
+        }}>
+        {'Support Ukraine 🇺🇦 {link}.'}
+      </Translate>
+   */
+  return (
+    <div className={styles.topBanner}>
+      <div className={styles.topBannerTitle}>
+        {'🎉\xa0'}
+        <Link
+          to="/blog/2022/08/01/announcing-docusaurus-2.0"
+          className={styles.topBannerTitleText}>
+          <Translate id="homepage.banner.launch.2.0">
+            {'Docusaurus\xa02.0 is\xa0out!️'}
+          </Translate>
+        </Link>
+        {'\xa0🥳'}
+      </div>
+      <div style={{display: 'flex', alignItems: 'center', flexWrap: 'wrap'}}>
+        <div style={{flex: 1, whiteSpace: 'nowrap'}}>
+          <div className={styles.topBannerDescription}>
+            We are on{' '}
+            <b>
+              <Link to="https://www.producthunt.com/">ProductHunt</Link> and{' '}
+              <Link to="https://news.ycombinator.com/">Hacker News</Link> today!
+            </b>
+          </div>
+        </div>
+        <div
+          style={{
+            flexGrow: 1,
+            flexShrink: 0,
+            padding: '0.5rem',
+            display: 'flex',
+            justifyContent: 'center',
+          }}>
+          <ProductHuntCard />
+          <HackerNewsIcon />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function Home(): JSX.Element {
   const {
     siteConfig: {customFields, tagline},
@@ -237,23 +303,7 @@ export default function Home(): JSX.Element {
   return (
     <Layout title={tagline} description={description}>
       <main>
-        <div>
-          <div className={styles.banner}>
-            <Translate
-              id="homepage.banner"
-              values={{
-                link: (
-                  <Link to="https://opensource.facebook.com/support-ukraine">
-                    <Translate id="homepage.banner.link">
-                      Help Provide Humanitarian Aid to Ukraine
-                    </Translate>
-                  </Link>
-                ),
-              }}>
-              {'Support Ukraine 🇺🇦 {link}.'}
-            </Translate>
-          </div>
-        </div>
+        <TopBanner />
         <HeroBanner />
         <MigrationAnnouncement />
         <div className={styles.section}>
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 5291055dbd0e..34da05e9375c 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -49,13 +49,52 @@
   max-width: 768px;
 }
 
-.banner {
-  font-weight: bold;
+.topBanner {
   font-size: 20px;
   padding: 20px;
-  max-width: 768px;
+  max-width: 900px;
   margin: 0 auto;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.topBannerTitle {
+  font-size: 54px;
+  font-weight: bold;
+  margin-bottom: 0.4rem;
+}
+
+@media only screen and (max-width: 768px) {
+  .topBannerTitle {
+    font-size: 34px;
+  }
+}
+
+.topBannerTitleText {
+  background: linear-gradient(45deg, #399cff, #00c775 80%);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.topBannerTitleText:hover {
+  border-bottom: solid 2px;
+}
+
+html[data-theme='dark'] .topBannerTitleText {
+  background: linear-gradient(45deg, #399cff, #00ff95 80%);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.topBannerDescription {
+  font-size: 20px;
+}
+@media only screen and (max-width: 768px) {
+  .topBannerDescription {
+    font-size: 16px;
+  }
 }
 
 .hero {
diff --git a/website/src/theme/MDXComponents.tsx b/website/src/theme/MDXComponents.tsx
index 1005f7b2c77e..079cec7487ec 100644
--- a/website/src/theme/MDXComponents.tsx
+++ b/website/src/theme/MDXComponents.tsx
@@ -7,8 +7,10 @@
 
 import MDXComponents from '@theme-original/MDXComponents';
 import Highlight from '@site/src/components/Highlight';
+import TweetQuote from '@site/src/components/TweetQuote';
 
 export default {
   ...MDXComponents,
   highlight: Highlight,
+  TweetQuote,
 };
diff --git a/yarn.lock b/yarn.lock
index ede99528a614..61b7f665650d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1200,7 +1200,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -6401,11 +6401,21 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
+deep-freeze@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
+  integrity sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==
+
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6825,6 +6835,13 @@ envinfo@^7.7.4:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
+equals@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/equals/-/equals-1.0.5.tgz#212062dde5e1a510d955f13598efcc6a621b6ace"
+  integrity sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==
+  dependencies:
+    jkroso-type "1"
+
 err-code@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
@@ -9714,6 +9731,11 @@ jest@^28.1.3:
     import-local "^3.0.2"
     jest-cli "^28.1.3"
 
+jkroso-type@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/jkroso-type/-/jkroso-type-1.1.1.tgz#bc4ced6d6c45fe0745282bafc86a9f8c4fc9ce61"
+  integrity sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng==
+
 joi@^17.6.0:
   version "17.6.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
@@ -12472,6 +12494,17 @@ pure-color@^1.2.0:
   resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
   integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==
 
+pure-react-carousel@^1.28.1:
+  version "1.28.1"
+  resolved "https://registry.yarnpkg.com/pure-react-carousel/-/pure-react-carousel-1.28.1.tgz#f4ab0a09e9a27ebe8f40bb8311d9c3e3b7aefef7"
+  integrity sha512-adOMhlGLxHiQxHwJvBgFJ6SXTM2UPuMv6tO10wsJzvQCdnCXcN5bRYIem5f55WQpwr9X0Bbb9ORw41KbGpAJWQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    deep-freeze "0.0.1"
+    deepmerge "^2.2.1"
+    equals "^1.0.5"
+    prop-types "^15.6.2"
+
 q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"