From 2105700fb7a1349e9561099ed7a3951ef8b75a75 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 27 May 2020 15:56:59 +0300
Subject: [PATCH] refactor(v2): various tweaks to website (#2816)

---
 website/docs/team.md                          | 146 +++++++++---------
 website/docusaurus.config.js                  |  18 ++-
 website/src/pages/styles.module.css           |   2 +-
 website/src/pages/versions.js                 |   3 +-
 .../version-2.0.0-alpha.55/team.md            | 146 +++++++++---------
 5 files changed, 159 insertions(+), 156 deletions(-)

diff --git a/website/docs/team.md b/website/docs/team.md
index 9d3ddf177d85..b0ca0e049715 100644
--- a/website/docs/team.md
+++ b/website/docs/team.md
@@ -5,98 +5,98 @@ title: Team
 
 ## Active Team
 
-<div class="row">
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+<div className="row">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/lex111.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Alexey Pyltsyn</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Alexey Pyltsyn</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Obsessed open-source enthusiast 👋 Eternal amateur at everything 🤷‍♂️ Maintainer of Russian docs on PHP, React, Kubernetes and much more 🧐
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/lex111">GitHub</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/lex111">GitHub</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/fanny.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Fanny Vieira</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Fanny Vieira</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Fanny got started with web development in high school, building a project for the school kitchen. In her free time she loves contributing to Open Source, occasionally writing on <a href="https://dev.to/fannyvieira" target="_blank">her blog</a> about her experiences, cooking, and creating <a href="https://open.spotify.com/user/anotherfanny" target="_blank">Spotify playlists</a>.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/fanny">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/fannyvieiira">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/fanny">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/fannyvieiira">Twitter</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/JoelMarcey.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Joel Marcey</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Joel Marcey</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Docusaurus founder and now ever grateful Docusaurus cheerleader to those who actually write code for it.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/JoelMarcey">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/joelmarcey">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/JoelMarcey">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/joelmarcey">Twitter</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/yangshun.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Yangshun Tay</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Yangshun Tay</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Full Front End Stack developer who likes working on the Jamstack. Working on Docusaurus made him Facebook's unofficial part-time Open Source webmaster, which is an awesome role to be in.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/yangshun">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/yangshunz">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/yangshun">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/yangshunz">Twitter</a>
         </div>
       </div>
     </div>
@@ -105,51 +105,51 @@ title: Team
 
 ## Honorary Alumni
 
-<div class="row">
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+<div className="row">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/endiliey.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Endilie Yacop Sucipto</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Endilie Yacop Sucipto</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Maintainer @docusaurus · 🔥🔥🔥
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/endiliey">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/endiliey">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/endiliey">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/endiliey">Twitter</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/wgao19.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Wei Gao</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Wei Gao</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         👩🏻‍🌾 Work in progress React developer, maintains Docusaurus, writes docs and spams this world with many websites.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/wgao19">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/wgao19">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/wgao19">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/wgao19">Twitter</a>
         </div>
       </div>
     </div>
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index ff1d8b53a6e7..faa58f1cbba4 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -95,12 +95,12 @@ module.exports = {
           label: 'Docs',
           to: 'docs/introduction', // "fake" link
           position: 'left',
-          activeBasePath: 'docs',
+          activeBaseRegex: `docs/(?!next/(support|team|resources))`,
           items: [
             {
               label: versions[0],
               to: 'docs/',
-              exact: true,
+              activeBaseRegex: `docs/(?!${versions.join('|')}|next)`,
             },
             ...versions.slice(1).map((version) => ({
               label: version,
@@ -109,12 +109,18 @@ module.exports = {
             {
               label: 'Master/Unreleased',
               to: 'docs/next/',
+              activeBaseRegex: `docs/next/(?!support|team|resources)`,
             },
           ],
         },
         {to: 'blog', label: 'Blog', position: 'left'},
         {to: 'showcase', label: 'Showcase', position: 'left'},
-        {to: 'docs/next/support', label: 'Community', position: 'left'},
+        {
+          to: 'docs/next/support',
+          label: 'Community',
+          position: 'left',
+          activeBaseRegex: `docs/next/(support|team|resources)`,
+        },
         {
           to: 'versions',
           label: `v${versions[0]}`,
@@ -200,21 +206,17 @@ module.exports = {
             {
               label: 'Privacy',
               href: 'https://opensource.facebook.com/legal/privacy/',
-              target: '_blank',
-              rel: 'noreferrer noopener',
             },
             {
               label: 'Terms',
               href: 'https://opensource.facebook.com/legal/terms/',
-              target: '_blank',
-              rel: 'noreferrer noopener',
             },
           ],
         },
       ],
       logo: {
         alt: 'Facebook Open Source Logo',
-        src: 'https://docusaurus.io/img/oss_logo.png',
+        src: 'img/oss_logo.png',
         href: 'https://opensource.facebook.com',
       },
       copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 43830f94f1af..e4e5630b4492 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -93,7 +93,7 @@
   animation-name: jackInTheBox;
   float: right;
   margin-top: 20px;
-  padding: 20px;
+  padding: 0 20px 20px;
 }
 
 .indexCtas {
diff --git a/website/src/pages/versions.js b/website/src/pages/versions.js
index 4773189a98d0..b04737a361e4 100644
--- a/website/src/pages/versions.js
+++ b/website/src/pages/versions.js
@@ -23,9 +23,10 @@ function Version() {
   const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
   return (
     <Layout
+      title="Versions"
       permalink="/versions"
       description="Docusaurus 2 Versions page listing all documented site versions">
-      <div className="container margin-vert--xl">
+      <div className="container margin-vert--lg">
         <h1>Docusaurus documentation versions</h1>
         <div className="margin-bottom--lg">
           <h3 id="latest">Latest version (Stable)</h3>
diff --git a/website/versioned_docs/version-2.0.0-alpha.55/team.md b/website/versioned_docs/version-2.0.0-alpha.55/team.md
index 9d3ddf177d85..b0ca0e049715 100644
--- a/website/versioned_docs/version-2.0.0-alpha.55/team.md
+++ b/website/versioned_docs/version-2.0.0-alpha.55/team.md
@@ -5,98 +5,98 @@ title: Team
 
 ## Active Team
 
-<div class="row">
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+<div className="row">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/lex111.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Alexey Pyltsyn</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Alexey Pyltsyn</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Obsessed open-source enthusiast 👋 Eternal amateur at everything 🤷‍♂️ Maintainer of Russian docs on PHP, React, Kubernetes and much more 🧐
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/lex111">GitHub</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/lex111">GitHub</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/fanny.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Fanny Vieira</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Fanny Vieira</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Fanny got started with web development in high school, building a project for the school kitchen. In her free time she loves contributing to Open Source, occasionally writing on <a href="https://dev.to/fannyvieira" target="_blank">her blog</a> about her experiences, cooking, and creating <a href="https://open.spotify.com/user/anotherfanny" target="_blank">Spotify playlists</a>.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/fanny">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/fannyvieiira">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/fanny">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/fannyvieiira">Twitter</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/JoelMarcey.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Joel Marcey</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Joel Marcey</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Docusaurus founder and now ever grateful Docusaurus cheerleader to those who actually write code for it.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/JoelMarcey">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/joelmarcey">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/JoelMarcey">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/joelmarcey">Twitter</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/yangshun.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Yangshun Tay</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Yangshun Tay</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Full Front End Stack developer who likes working on the Jamstack. Working on Docusaurus made him Facebook's unofficial part-time Open Source webmaster, which is an awesome role to be in.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/yangshun">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/yangshunz">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/yangshun">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/yangshunz">Twitter</a>
         </div>
       </div>
     </div>
@@ -105,51 +105,51 @@ title: Team
 
 ## Honorary Alumni
 
-<div class="row">
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+<div className="row">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/endiliey.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Endilie Yacop Sucipto</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Endilie Yacop Sucipto</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         Maintainer @docusaurus · 🔥🔥🔥
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/endiliey">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/endiliey">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/endiliey">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/endiliey">Twitter</a>
         </div>
       </div>
     </div>
   </div>
-  <div class="col col--6 margin-bottom--lg">
-    <div class="card card--full-height">
-      <div class="card__header">
-        <div class="avatar avatar--vertical">
+  <div className="col col--6 margin-bottom--lg">
+    <div className="card card--full-height">
+      <div className="card__header">
+        <div className="avatar avatar--vertical">
           <img
-            class="avatar__photo avatar__photo--xl"
+            className="avatar__photo avatar__photo--xl"
             src="https://github.com/wgao19.png"
           />
-          <div class="avatar__intro">
-            <h3 class="avatar__name">Wei Gao</h3>
+          <div className="avatar__intro">
+            <h3 className="avatar__name">Wei Gao</h3>
           </div>
         </div>
       </div>
-      <div class="card__body">
+      <div className="card__body">
         👩🏻‍🌾 Work in progress React developer, maintains Docusaurus, writes docs and spams this world with many websites.
       </div>
-      <div class="card__footer">
-        <div class="button-group button-group--block">
-          <a class="button button--secondary" href="https://github.com/wgao19">GitHub</a>
-          <a class="button button--secondary" href="https://twitter.com/wgao19">Twitter</a>
+      <div className="card__footer">
+        <div className="button-group button-group--block">
+          <a className="button button--secondary" href="https://github.com/wgao19">GitHub</a>
+          <a className="button button--secondary" href="https://twitter.com/wgao19">Twitter</a>
         </div>
       </div>
     </div>