Adds a warning on the website about the document being intended for Yarn 4

packages/docusaurus/docusaurus.config.js

@@ -4,6 +4,8 @@
 require(`@yarnpkg/monorepo/scripts/setup-ts-execution`);
 require(`@yarnpkg/monorepo/scripts/setup-local-plugins`);
 
+const fs = require(`fs`);
+
 const lightCodeTheme = require(`prism-react-renderer/themes/github`);
 const darkCodeTheme = require(`prism-react-renderer/themes/dracula`);
 
@@ -96,7 +98,7 @@ const config = {
         title: `Yarn`,
         logo: {
           alt: `Yarn Logo`,
-          src: `img/yarn-white.svg`,
+          src: `data:image/svg+xml;base64,${fs.readFileSync(`${__dirname}/static/img/yarn-white.svg`, `base64`)}`,
         },
         items: [
           {

packages/docusaurus/src/components/HomepageFeatures/index.tsx

@@ -76,7 +76,7 @@ function Feature({icon, title, description}: FeatureItem) {
   return (
     <div className={clsx(`col col--4`, styles.feature)}>
       <div className={`text--center`}>
-        <img className={styles.icon} src={`/img/${icon}.png`} />
+        <img className={styles.icon} width={200} height={180} src={`/img/${icon}.png`} />
       </div>
       <div className={`text--center padding-horiz--md`}>
         <h3>{title}</h3>

packages/docusaurus/src/components/HomepageFeatures/styles.module.css

@@ -13,4 +13,7 @@
   margin-bottom: 40px;
 
   width: 200px;
+
+  object-fit: contain;
+  object-position: center center;
 }

packages/docusaurus/src/css/custom.css

@@ -83,11 +83,11 @@ html {
   filter: invert(100%) invert(15%) sepia(39%) saturate(2287%) hue-rotate(222deg) brightness(92%) contrast(94%);
 }
 
-body:not([x-doc-route="/"]) footer {
+html:not([x-doc-route="/"]) footer {
   display: none;
 }
 
-body:not([x-doc-route="/"]) .main-wrapper > :last-child {
+html:not([x-doc-route="/"]) .main-wrapper > :last-child {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -127,30 +127,11 @@ body:not([x-doc-route="/"]) .main-wrapper > :last-child {
   height: var(--ifm-navbar-height);
 }
 
-.navbar__link--active {
-  position: relative;
-}
-
-.navbar__link--active::before {
-  position: absolute;
-
-  left: var(--ifm-navbar-item-padding-horizontal);
-  right: var(--ifm-navbar-item-padding-horizontal);
-  bottom: -3px;
-
-  height: 3px;
-  background: linear-gradient(to left, #7678ff, #c326ef);
-}
-
-body[x-doc-route="/"] .navbar:not(.navbar--is-fixed) .navbar__link--active::before {
-  content: '';
-}
-
 .menu.thin-scrollbar {
   padding: 0.5rem;
 }
 
-body[x-doc-route^="/configuration/"] .col {
+html[x-doc-route^="/configuration/"] .col {
   max-width: 100% !important;
 }
 

packages/docusaurus/src/pages/index.module.css

@@ -15,23 +15,23 @@
     --index-navbar-margin-top: 40px;
   }
 
-  .html body [class~="navbar"] {
+  .html :global(.navbar) {
     margin-top: var(--index-navbar-margin-top);
   }
 
-  .html body [class~="navbar"]:not([class~="navbar--is-fixed"]) {
+  .html:not(:global(.navbar--is-fixed)) :global(.navbar) {
     --ifm-navbar-link-color: #ffffff;
     --ifm-navbar-link-hover-color: var(--ifm-navbar-link-color);
 
     background: none;
     box-shadow: none;
   }
 
-  .html body [class~="navbar"]:not([class~="navbar--is-fixed"]) svg {
+  .html:not(:global(.navbar--is-fixed)) :global(.navbar) svg {
     opacity: .8;
   }
 
-  .html body [class~="navbar"]:not([class~="navbar--is-fixed"]) [class~="navbar__logo"] {
+  .html:not(:global(.navbar--is-fixed)) :global(.navbar .navbar__logo) {
     filter: none;
   }
 }
@@ -98,16 +98,23 @@
 }
 
 .versions {
-  display: inline-block;
-
-  margin-left: 30px;
+  margin: 30px 0;
 
   font-size: 15px;
   font-weight: normal;
 
   line-height: 1.5;
 }
 
+@media (min-width: 996px) {
+  .versions {
+    display: inline-block;
+
+    margin: 0;
+    margin-left: 30px;
+  }
+}
+
 .versionLine {
   display: flex;
 }
@@ -121,7 +128,7 @@
 .search {
   display: flex;
 
-  margin-top: 60px;
+  margin: 30px 0;
 
   border: 1px solid #9555bb;
   border-radius: 10px;
@@ -138,6 +145,12 @@
   font-style: italic;
 }
 
+@media (min-width: 996px) {
+  .search {
+    margin: 60px 0;
+  }
+}
+
 .search::placeholder {
   color: #ffffff;
 }
@@ -146,3 +159,34 @@
   background: #090b1f;
   color: #ffffff;
 }
+
+.info {
+  border-radius: 8px;
+
+  padding: 1rem;
+
+  border: 1px solid white;
+  background: #000000cc;
+  color: #ffffff;
+
+  --ifm-link-color: #5cb0fa;
+}
+
+@media (min-width: 996px) {
+  .info {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    z-index: 11;
+
+    max-width: 600px;
+
+    opacity: 1;
+
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  :global(html.navbar--is-fixed) .info {
+    opacity: 0;
+  }
+}

packages/docusaurus/src/pages/index.tsx

@@ -70,6 +70,9 @@ export default function Home(): JSX.Element {
               </h1>
               <p>Yarn is a package manager that doubles down as project manager. Whether you work on simple projects or industry monorepos, whether you're an open source developer or an enterprise user, Yarn has your back.</p>
               <input className={styles.search} placeholder={`Search packages (i.e. babel, webpack, react, ...)`} autoFocus={true} onChange={handleChange}/>
+              <div className={styles.info}>
+                This documentation covers Yarn 4, currently available as a Release Candidate. For the previous documentation, please refer to <a href={`https://v3.yarnpkg.com/`}>v3.yarnpkg.com</a>.
+              </div>
             </div>
           </div>
           <div className={styles.followUp}>

packages/docusaurus/src/theme/Root.tsx

@@ -1,10 +1,11 @@
 import '@fontsource/pt-sans';
 import 'github-markdown-css';
 import 'react-loading-skeleton/dist/skeleton.css';
+import Head                               from '@docusaurus/Head';
 import {useLocation}                      from '@docusaurus/router';
 import {QueryClient, QueryClientProvider} from 'react-query';
 import {Tooltip as ReactTooltip}          from 'react-tooltip';
-import React, {useLayoutEffect}           from 'react';
+import React                              from 'react';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,11 +19,10 @@ const queryClient = new QueryClient({
 export default function Root({children}: {children: React.ReactNode}) {
   const route = useLocation();
 
-  useLayoutEffect(() => {
-    document.body.setAttribute(`x-doc-route`, route.pathname);
-  });
-
   return <>
+    <Head>
+      <html x-doc-route={route.pathname}/>
+    </Head>
     <ReactTooltip id={`tooltip`}/>
     <QueryClientProvider client={queryClient}>
       {children}

packages/docusaurus/static/js/custom.js

@@ -1,18 +1,21 @@
 /* global window, document, IntersectionObserver */
 
-const observer = new IntersectionObserver(
-  ([e]) => e.target.classList.toggle(`navbar--is-fixed`, e.intersectionRatio < 1),
+const navbarCheck = document.createElement(`div`);
+navbarCheck.style.cssText = `position: absolute; top: 0; left: 0; right: 0; z-index: 9999; margin-top: var(--index-navbar-margin-top); height: var(--ifm-navbar-height); pointer-events: none;`;
+
+const intersectionObserver = new IntersectionObserver(
+  ([e]) => document.documentElement.classList.toggle(`navbar--is-fixed`, e.intersectionRatio < 1),
   {threshold: [1]},
 );
 
 document.addEventListener(`scroll`, () => {
-  const navbar = document.querySelector(`.navbar.navbar--fixed-top`);
-  if (!navbar)
-    return;
-
-  observer.observe(navbar);
+  if (!navbarCheck.parentNode)
+    document.body.appendChild(navbarCheck);
+  intersectionObserver.observe(navbarCheck);
 });
 
+// ---
+
 (function(h, o, u, n, d) {
   h = h[d] = h[d] || {q: [], onReady(c) {
     h.q.push(c);