docs: website tweaks (#1785)

* docs: fix builder readme links

* docs: make "package does not exist yet" page use updated yarn commands

* chore: apply lint autofixes to website

* docs: add image to SEO component

* docs: improved SEO description

* docs: fix broken links

* docs: fix gatsby-plugin-clipanion-cli description printing

* docs: add missing description field to query

* docs: don't make package search bar sticky

* chore: versions

* docs: only sticky search bar if viewport is tall enough

* docs: hopefully fix build errors

* docs: fix build errors

* build: fix typecheck

* build: fix TS errors

* docs: fix indent level

* docs: more media query madness

* Revert "docs: more media query madness"

This reverts commit 241c2df.

* Revert "docs: fix build errors"

This reverts commit 81ee3ca.

* Revert "docs: hopefully fix build errors"

This reverts commit 7e942ab.

* Revert "docs: only sticky search bar if viewport is tall enough"

This reverts commit 48a2138.

* chore: unrevert partial change

* Revert "docs: don't make package search bar sticky"

This reverts commit 3de3dd3.

Co-authored-by: Maël Nison <[email protected]>

Author: paul-soporan

.pnp.js

@@ -0,0 +1,2 @@
+declined:
+  - "@yarnpkg/builder"

.yarn/cache/@types-react-helmet-npm-6.1.0-2b66a9e4e0-b7aaa3aa2d.zip

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/architecture
 title: "Architecture"
+description: An overview of Yarn's architecture.
 ---
 
 ```toc

.yarn/versions/71681657.yml

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/contributing
 title: "Contributing"
+description: Yarn's contributing guide.
 ---
 
 Thanks for being here! Yarn gives a lot of importance to being a community project, and we rely on your help as much as you rely on ours. In order to help you help us, we've invested in an infra and documentation that should make contributing to Yarn very easy. If you have any feedback on what we could improve, please open an issue to discuss it!
@@ -103,7 +104,7 @@ Constraints can be checked with `yarn constraints`, and fixed with `yarn constra
 
 ## Preparing your PR to be released
 
-In order to track which packages need to be released, we use the workflow described in the [following document](https://yarnpkg.com/features/release-workflow). To summarize, you must run `yarn version check --interactive` on each PR you make, and select which packages should be released again for your changes to be effective (and to which version), if any.
+In order to track which packages need to be released, we use the workflow described in the [following document](/features/release-workflow). To summarize, you must run `yarn version check --interactive` on each PR you make, and select which packages should be released again for your changes to be effective (and to which version), if any.
 
 You can check if you've set everything correctly with `yarn version check`.
 

packages/gatsby/content/advanced/architecture.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/error-codes
 title: "Error Codes"
+description: A list of Yarn's error codes with detailed explanations.
 ---
 
 <!-- Never remove the entries in this file, as we want to support older releases -->

packages/gatsby/content/advanced/contributing.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/lexicon
 title: "Lexicon"
+description: Definitions of common terms used throughout the documentation.
 ---
 
 ```toc

packages/gatsby/content/advanced/error-codes.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/lifecycle-scripts
 title: "Lifecycle Scripts"
+description: An overview of Yarn's supported lifecycle scripts.
 ---
 
 Packages can define in the `scripts` field of their manifest various actions that should be executed when the package manager executes a particular workflow. Here they are:

packages/gatsby/content/advanced/lexicon.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/plugin-tutorial
 title: "Plugin Tutorial"
+description: A basic plugin tutorial which shows how to work with Yarn's plugin API.
 ---
 
 Starting from the Yarn 2, Yarn now supports plugins. For more information about what they are and in which case you'd want to use them, consult the [dedicated page](/features/plugins). We'll talk here about the exact steps needed to write one. It's quite simple, really!

packages/gatsby/content/advanced/lifecycle-scripts.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/pnpapi
 title: "PnP API"
+description: In-depth documentation of the PnP API.
 ---
 
 ```toc

packages/gatsby/content/advanced/plugin-tutorial.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/pnpify
 title: "PnPify"
+description: An overview of PnPify, one of the PnP compatibility layers which emulates virtual node_modules directories and provides IDE support.
 ---
 
 ```toc

packages/gatsby/content/advanced/pnp-api.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/rulebook
 title: "Rulebook"
+description: An in-depth rulebook of best-practices and recommendations regarding dependencies.
 ---
 
 Writing portable packages is incredibly important, as it ensures that your users will benefit from an optimal experience regardless of their package manager.

packages/gatsby/content/advanced/pnpify.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/sherlock
 title: "Sherlock"
+description: An overview of Yarn's GitHub Actions issue toolkit that helps users provide minimal reproductions.
 hidden: true
 ---
 

packages/gatsby/content/advanced/rulebook.md

@@ -2,6 +2,7 @@
 category: advanced
 path: /advanced/telemetry
 title: "Telemetry"
+description: An overview of Yarn's telemetry collection.
 ---
 
 ## Why does Yarn need some telemetry?

packages/gatsby/content/advanced/sherlock.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/constraints
 title: "Constraints"
+description: An in-depth guide to Yarn's constraints, a feature that provides an easy way to enforce common rules across a project.
 ---
 
 > **Experimental**

packages/gatsby/content/advanced/telemetry.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/offline-cache
 title: "Offline Cache"
+description: An overview of Yarn's offline cache, a feature that allows Yarn to work just fine even should the network go down for any reason.
 ---
 
 The offline cache is a feature that allows Yarn to work just fine even should the network go down for any reason - whether it's because your employer didn't pay the utility bill or because the place where your packages are hosted becomes unavailable. It's also a critical part of [Zero-Installs](/features/zero-installs) and doesn't store more than a single file for each package - making it suitable for being stored within a repository, [as we actually do in the Yarn repository itself](https://github.com/yarnpkg/berry/tree/master/.yarn/cache).

packages/gatsby/content/features/constraints.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/plugins
 title: "Plugins"
+description: An overview of Yarn's plugin capabilities.
 ---
 
 Ever since Yarn was created, our very essence has been about experimenting, evolving, pushing the status quo - rinse and repeat, each time one step further, each time paving the way for our next move.

packages/gatsby/content/features/offline-cache.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/pnp
 title: "Plug'n'Play"
+description: An overview of Plug'n'Play, a powerful and innovative installation strategy for Node.
 ---
 
 > **PnP API**

packages/gatsby/content/features/plugins.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/protocols
 title: "Protocols"
+description: An in-depth guide to Yarn's various protocols.
 ---
 
 ```toc

packages/gatsby/content/features/plugnplay.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/release-workflow
 title: "Release Workflow"
+description: An in-depth guide to Yarn's release workflow which helps with managing versions across a monorepo.
 ---
 
 > **Experimental**

packages/gatsby/content/features/protocols.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/workspaces
 title: "Workspaces"
+description: An in-depth guide to Yarn's workspaces, a feature that provides an easy way to store multiple packages inside the same project.
 ---
 
 The Yarn workspaces aim to make working with [monorepos](/advanced/lexicon#monorepository) easy, solving one of the main use cases for `yarn link` in a more declarative way. In short, they allow multiple of your projects to live together in the same repository AND to cross-reference each others - any modification to one's source code being instantly applied to the others.

packages/gatsby/content/features/release-workflow.md

@@ -2,6 +2,7 @@
 category: features
 path: /features/zero-installs
 title: 'Zero-Installs'
+description: An overview of Yarn's Zero-Installs, a feature provided by PnP which enables storing all dependencies inside the project's repository.
 ---
 
 While not a feature in itself, the term "Zero Install" encompasses a lot of Yarn features tailored around one specific goal - to make your projects as stable and fast as possible by removing the main source of entropy from the equation: Yarn itself.

packages/gatsby/content/features/workspaces.md

@@ -2,6 +2,7 @@
 category: getting-started
 path: /getting-started/editor-sdks
 title: "Editor SDKs"
+description: An overview of the editor SDKs used to bring PnP compatibility to editors.
 ---
 
 Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeScript to work. This page intends to be a collection of settings for each editor we've worked with - please contribute to this list!

packages/gatsby/content/features/zero-installs.md

@@ -2,6 +2,7 @@
 category: getting-started
 path: /getting-started/install
 title: "2 - Installation"
+description: Yarn's in-depth installation guide.
 ---
 
 > **Migrating from Yarn 1**

packages/gatsby/content/getting-started/editor-sdks.md

@@ -2,6 +2,7 @@
 category: getting-started
 path: /getting-started
 title: "1 - Introduction"
+description: An introduction to Yarn, a package manager for your code.
 ---
 
 Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry.

packages/gatsby/content/getting-started/install.md

@@ -2,6 +2,7 @@
 category: getting-started
 path: /getting-started/migration
 title: "Migration"
+description: A step-by-step and in-depth migration guide from Yarn 1 (Classic) to Yarn 2 (Berry).
 ---
 
 Yarn v2 is a very different software from the v1. While one of our goals is to make the transition as easy as possible, some behaviors needed to be tweaked. To make things easier we've documented the most common problems that may arise when porting from one project to the other, along with suggestions to keep moving forward.

packages/gatsby/content/getting-started/intro.md

@@ -2,6 +2,7 @@
 category: getting-started
 path: /getting-started/qa
 title: "Questions & Answers"
+description: A list of answers to commonly asked questions.
 ---
 
 ```toc

packages/gatsby/content/getting-started/migration.md

@@ -2,6 +2,7 @@
 category: getting-started
 path: /getting-started/usage
 title: "3 - Usage"
+description: A short overview of Yarn's most used commands.
 ---
 
 Now that you have Yarn [installed](/getting-started/install), you can start using it! Here are some of the most common commands you'll need.

packages/gatsby/content/getting-started/questions-and-answers.md

@@ -4,4 +4,4 @@
  * See: https://www.gatsbyjs.org/docs/browser-apis/
  */
 
-require("prismjs/themes/prism-tomorrow.css");
+require(`prismjs/themes/prism-tomorrow.css`);

packages/gatsby/content/getting-started/usage.md

@@ -22,11 +22,14 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}, opts) => {
 
       const url = command.path.split(` `).slice(1).join(`/`);
 
+      const description = `${command.description[0].toUpperCase()}${command.description.slice(1, -1)}.`;
+
       sections.push([
         `---\n`,
         `category: ${namespaceTrailingSlash}cli\n`,
         `path: ${namespaceLeadingSlash}/cli/${url}\n`,
         `title: "\`${command.path}\`"\n`,
+        `description: ${JSON.stringify(description)}\n`,
         `---\n`,
       ].join(``));
 
@@ -42,7 +45,7 @@ exports.sourceNodes = ({actions, createNodeId, createContentDigest}, opts) => {
 
       if (command.description) {
         sections.push([
-          `${command.description[0].toUpperCase()}${command.description.slice(1, -1)}.\n`,
+          `${description}\n`,
         ].join(``));
       }
 

packages/gatsby/gatsby-browser.js

@@ -16,6 +16,7 @@
     "@strictsoftware/typedoc-plugin-monorepo": "patch:@strictsoftware/typedoc-plugin-monorepo@^0.2.2#./.patches/@strictsoftware/typedoc-plugin-monorepo.patch",
     "@types/marked": "^1.1.0",
     "@types/react": "^16.8.0",
+    "@types/react-helmet": "^6.1.0",
     "algoliasearch": "^4.2.0",
     "ansi-html": "^0.0.7",
     "buffer": "^5.6.0",
@@ -86,6 +87,7 @@
   "scripts": {
     "build:doc": "rm -rf .cache public static/api && yarn build:api && gatsby build --prefix-paths \"$@\" && rsync -rtuc --delete public/ ../../docs/",
     "build:api": "typedoc",
+    "develop:doc": "run develop",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""

packages/gatsby/gatsby-plugin-clipanion-cli/gatsby-node.js

@@ -1,10 +1,10 @@
 export const algolia = {
-  appId: 'OFCNCOG2CU',
-  apiKey: 'f54e21fa3a2a0160595bb058179bfb1e',
-  indexName: 'npm-search',
+  appId: `OFCNCOG2CU`,
+  apiKey: `f54e21fa3a2a0160595bb058179bfb1e`,
+  indexName: `npm-search`,
 };
 
 export const docsearch = {
-  apiKey: '3949f721e5d8ca1de8928152ff745b28',
-  indexName: 'yarnpkg',
+  apiKey: `3949f721e5d8ca1de8928152ff745b28`,
+  indexName: `yarnpkg`,
 };

packages/gatsby/package.json

@@ -67,7 +67,7 @@ export const Aside = ({
     />
     {repository &&
       isKnownRepositoryHost(repository.host) &&
-      (repository.host === 'github.com' ? (
+      (repository.host === `github.com` ? (
         <GithubActivity data={activity} repository={repository} />
       ) : (
         <Activity {...activity} repository={repository} />

packages/gatsby/src/components/config.js

@@ -85,7 +85,7 @@ const CopyableContent = styled.section`
   }
 `;
 
-export const Copyable = ({tag = 'div', pre, children}) => {
+export const Copyable = ({tag = `div`, pre, children}) => {
   const [statusImage, setImage] = useState(images.default);
 
   const copy = (toCopy, timeout = 2000) => {
@@ -96,13 +96,13 @@ export const Copyable = ({tag = 'div', pre, children}) => {
       }, timeout);
     };
 
-    let range = document.createRange();
+    const range = document.createRange();
     range.selectNode(toCopy);
     window.getSelection().removeAllRanges();
     window.getSelection().addRange(range);
     try {
       // Now that we've selected the anchor text, execute the copy command
-      const copy = document.execCommand('copy');
+      const copy = document.execCommand(`copy`);
       window.getSelection().removeAllRanges();
       if (copy === true) {
         setAndUnset({image: images.success, timeout});
@@ -129,7 +129,7 @@ export const Copyable = ({tag = 'div', pre, children}) => {
         <span ref={copyTextRef}>{children}</span>
       </Content>
       <object type="stop/styling">
-        <Button onClick={(event) => {
+        <Button onClick={event => {
           event.preventDefault();
           copy(copyTextRef.current);
         }}>

packages/gatsby/src/components/details/Aside.js

@@ -191,13 +191,13 @@ const Directory = ({name, path, baseURL, expandedDirs, files, onToggleDir}) => {
         return SORT_ORDER[a.type] - SORT_ORDER[b.type];
 
       // Then sort by filename, case insensitive
-      return a.name.localeCompare(b.name, 'en', {sensitivity: 'base'});
+      return a.name.localeCompare(b.name, `en`, {sensitivity: `base`});
     });
 
     return (
       <FileList>
         {files.map(file => {
-          if (file.type === 'directory') {
+          if (file.type === `directory`) {
             return (
               <Directory
                 baseURL={baseURL}
@@ -226,7 +226,7 @@ const Directory = ({name, path, baseURL, expandedDirs, files, onToggleDir}) => {
   };
 
 
-  if (path === '/') {
+  if (path === `/`) {
     // Special case for root - Only render the contents, not the outer
     // wrapper.
     return renderDirContents();

packages/gatsby/src/components/details/Copyable.js

@@ -28,13 +28,13 @@ const weeksAgoSinceLastCommit = ({weeklyData}) =>
 
 const formatWeeksSinceLastCommit = weeks => {
   if (weeks === -1)
-    return 'over a year ago';
+    return `over a year ago`;
 
   if (weeks < 1)
-    return 'less than a week ago';
+    return `less than a week ago`;
 
   if (weeks === 1)
-    return 'one week ago';
+    return `one week ago`;
 
   return `${weeks} weeks ago`;
 };