docs: Docusaurus v3.0 blog post (#9433)

Co-authored-by: Joshua Chen <[email protected]>
Co-authored-by: Dmitry Vinnik <[email protected]>

project-words.txt

@@ -200,6 +200,7 @@ metrika
 microdata
 microlink
 middlewares
+mindmap
 minifier
 mkcert
 mkdir

website/blog/2023-09-29-preparing-your-site-for-docusaurus-v3/index.mdx

@@ -49,7 +49,7 @@ MDX v3 is much better, but also comes with changes that probably require you to
 
 Upgrading MDX comes with all the breaking changes documented on the [MDX v2](https://mdxjs.com/blog/v2/) and [MDX v3](https://mdxjs.com/blog/v3/) release blog posts. Most breaking changes come from MDX v2. The [MDX v2 migration guide](https://mdxjs.com/migrating/v2/) has a section on how to [update MDX files](https://mdxjs.com/migrating/v2/#update-mdx-files) that will be particularly relevant to us. Also make sure to read the [Troubleshooting MDX](https://mdxjs.com/docs/troubleshooting-mdx/) page that can help you interpret common MDX error messages.
 
-Make sure to also read our updated [**MDX and React**](/docs/3.0.0/markdown-features/react) documentation page.
+Make sure to also read our updated [**MDX and React**](/docs/markdown-features/react) documentation page.
 
 :::tip Ask for help
 
@@ -214,14 +214,14 @@ http://localhost:3000
 
 #### Lower-case MDXComponent mapping
 
-For users providing a [custom `MDXComponent`mapping](/docs/3.0.0/markdown-features/react#mdx-component-scope), components are now "sandboxed":
+For users providing a [custom `MDXComponent`mapping](/docs/markdown-features/react#mdx-component-scope), components are now "sandboxed":
 
 - a `MDXComponent` mapping for `h1` only gets used for `# hi` but not for `<h1>hi</h1>`
 - a **lower-cased** custom element name will not be substituted by its respective `MDXComponent` component anymore
 
 :::danger visual difference
 
-Your [`MDXComponent` component mapping](/docs/3.0.0/markdown-features/react#mdx-component-scope) might not be applied as before, and your custom components might no longer be used.
+Your [`MDXComponent` component mapping](/docs/markdown-features/react#mdx-component-scope) might not be applied as before, and your custom components might no longer be used.
 
 :::
 

website/docs/guides/markdown-features/markdown-features-intro.mdx

@@ -52,6 +52,12 @@ If you plan to use CommonMark, we recommend the [`siteConfig.markdown.format: 'd
 
 :::
 
+:::danger Experimental CommonMark support
+
+The CommonMark support is **experimental** and currently has a few [limitations](https://github.com/facebook/docusaurus/issues/9092).
+
+:::
+
 ## Standard features {#standard-features}
 
 Markdown is a syntax that enables you to write formatted content in a readable syntax.

website/docs/migration/v3.mdx

@@ -129,7 +129,7 @@ For large sites where a manual review of all pages is complicated, we recommend
 
 :::
 
-Upgrading MDX comes with all the breaking changes documented on the [MDX v2](https://mdxjs.com/blog/v2/) and [MDX v3](https://mdxjs.com/blog/v3/) release blog posts. Most breaking changes come from MDX v2. The [MDX v2 migration guide](https://mdxjs.com/migrating/v2/) has a section on how to [update MDX files](https://mdxjs.com/migrating/v2/#update-mdx-files) that will be particularly relevant to us. Also make sure to read the [Troubleshooting MDX](https://mdxjs.com/docs/troubleshooting-mdx/) page that can help you interpret common MDX error messages.
+Upgrading MDX comes with all the breaking changes documented on the [MDX v2](https://mdxjs.com/blog/v2/) and [MDX v3](https://mdxjs.com/blog/v3/) release blog posts. Most breaking changes come from MDX v2, and MDX v3 is a relatively small release. The [MDX v2 migration guide](https://mdxjs.com/migrating/v2/) has a section on how to [update MDX files](https://mdxjs.com/migrating/v2/#update-mdx-files) that will be particularly relevant to us. Also make sure to read the [Troubleshooting MDX](https://mdxjs.com/docs/troubleshooting-mdx/) page that can help you interpret common MDX error messages.
 
 Make sure to also read our updated [**MDX and React**](../guides/markdown-features/markdown-features-react.mdx) documentation page.
 

website/docusaurus.config.ts

@@ -94,8 +94,10 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
 
 const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
 
+/*
 const TwitterSvg =
   '<svg style="fill: #1DA1F2; vertical-align: middle; margin-left: 3px;" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>';
+*/
 
 const defaultLocale = 'en';
 
@@ -473,13 +475,16 @@ export default async function createConfigAsync() {
         respectPrefersColorScheme: true,
       },
       announcementBar: {
-        id: 'announcementBar-2', // Increment on change
-        content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter ${TwitterSvg}</a>`,
+        id: 'announcementBar-3', // Increment on change
+        // content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter ${TwitterSvg}</a>`,
+        content: `🎉️ <b><a target="_blank" href="https://docusaurus.io/blog/releases/3.0">Docusaurus v3.0</a> it now out!</b> 🥳️`,
       },
       prism: {
         additionalLanguages: [
           'java',
           'latex',
+          'haskell',
+          'matlab',
           'PHp',
           'bash',
           'diff',

website/src/css/custom.css

@@ -154,12 +154,19 @@ html[data-theme='dark'] {
 }
 
 div[class^='announcementBar_'] {
+  font-size: 20px;
+
+  /*
   --site-announcement-bar-stripe-color1: hsl(
     var(--site-primary-hue-saturation) 85%
   );
   --site-announcement-bar-stripe-color2: hsl(
     var(--site-primary-hue-saturation) 95%
   );
+   */
+  --site-announcement-bar-stripe-color1: #e8d7ff;
+  --site-announcement-bar-stripe-color2: #ffe9d1;
+
   background: repeating-linear-gradient(
     35deg,
     var(--site-announcement-bar-stripe-color1),

website/src/pages/index.tsx

@@ -19,12 +19,10 @@ 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 Heading from '@theme/Heading';
 
-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';
-import Heading from '@theme/Heading';
 
 function HeroBanner() {
   return (
@@ -74,32 +72,6 @@ function HeroBanner() {
   );
 }
 
-function MigrationAnnouncement() {
-  return (
-    <div
-      className={clsx(styles.announcement, styles.announcementDark)}
-      data-theme="dark">
-      <div className={styles.announcementInner}>
-        <Translate
-          values={{
-            docusaurusV1Link: (
-              <Link to="https://v1.docusaurus.io/">
-                <Translate>Docusaurus v1</Translate>
-              </Link>
-            ),
-            migrationGuideLink: (
-              <Link to="/docs/migration">
-                <Translate>v1 to v2 migration guide</Translate>
-              </Link>
-            ),
-          }}>
-          {`Coming from {docusaurusV1Link}? Check out our {migrationGuideLink}.`}
-        </Translate>
-      </div>
-    </div>
-  );
-}
-
 function TweetsSection() {
   const tweetColumns: TweetItem[][] = [[], [], []];
   Tweets.filter((tweet) => tweet.showOnHomepage).forEach((tweet, i) =>
@@ -158,7 +130,7 @@ function QuotesSection() {
 
 function VideoContainer() {
   return (
-    <div className="container text--center margin-bottom--xl">
+    <div className="container text--center margin-top--xl">
       <div className="row">
         <div className="col">
           <Heading as="h2">
@@ -212,10 +184,7 @@ function FeaturesContainer() {
 
   return (
     <div className="container text--center">
-      <Heading as="h2">
-        <Translate>Main features</Translate>
-      </Heading>
-      <div className="row margin-bottom--lg">
+      <div className="row margin-top--lg margin-bottom--lg">
         {firstRow.map((feature, idx) => (
           <Feature feature={feature} key={idx} />
         ))}
@@ -253,15 +222,14 @@ function TopBanner() {
     <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!️'}
+        <Link to="/blog/releases/3.0" className={styles.topBannerTitleText}>
+          <Translate id="homepage.banner.launch.3.0">
+            {'Docusaurus\xa03.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}>
@@ -290,6 +258,7 @@ function TopBanner() {
           <HackerNewsIcon />
         </div>
       </div>
+      */}
     </div>
   );
 }
@@ -304,10 +273,9 @@ export default function Home(): JSX.Element {
       <main>
         <TopBanner />
         <HeroBanner />
-        <MigrationAnnouncement />
         <div className={styles.section}>
-          <VideoContainer />
           <FeaturesContainer />
+          <VideoContainer />
         </div>
         <TweetsSection />
         <QuotesSection />

website/src/pages/styles.module.css

@@ -6,7 +6,7 @@
  */
 
 .section {
-  padding: 72px 0;
+  padding: 40px 0;
 }
 
 .sectionAlt {
@@ -51,7 +51,7 @@
 
 .topBanner {
   font-size: 20px;
-  padding: 20px;
+  padding: 30px 20px;
   max-width: 900px;
   margin: 0 auto;
   text-align: center;
@@ -68,22 +68,33 @@
 
 @media only screen and (max-width: 768px) {
   .topBannerTitle {
-    font-size: 34px;
+    font-size: 40px;
   }
 }
 
 .topBannerTitleText {
-  background: linear-gradient(45deg, #399cff, #00c775 80%);
+  background: linear-gradient(
+    90deg,
+    rgb(131 58 180 / 100%) 0%,
+    rgb(253 29 29 / 100%) 50%,
+    rgb(252 176 69 / 100%) 100%
+  );
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 .topBannerTitleText:hover {
   border-bottom: solid 2px;
+  border-color: rgb(152 0 255);
 }
 
 html[data-theme='dark'] .topBannerTitleText {
-  background: linear-gradient(45deg, #399cff, #00ff95 80%);
+  background: linear-gradient(
+    90deg,
+    rgb(152 0 255) 0%,
+    rgb(246 41 41) 50%,
+    rgb(255 169 8) 100%
+  );
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }