docs: update Docusaurus to v2.2 (#29563)

* build: update docusaurus

* fix: algolia keys

* fix: frontmatter keywords array

* build: clsx version

* fix: card layout and pages

* fix: invalid internal link

docs/.gitignore

@@ -12,6 +12,9 @@
 /static/img/*.png
 vercel.json
 
+# use npm and package-lock.json
+yarn.lock
+
 # Misc
 .DS_Store
 .env

docs/docusaurus.config.js

@@ -45,6 +45,9 @@ module.exports = {
     },
   },
   themeConfig: {
+    prism: {
+      additionalLanguages: ["rust"],
+    },
     navbar: {
       logo: {
         alt: "Solana Logo",
@@ -89,7 +92,6 @@ module.exports = {
             {
               href: "https://spl.solana.com",
               label: "Solana Program Library »",
-              position: "left",
             },
           ],
         },
@@ -115,7 +117,8 @@ module.exports = {
     },
     algolia: {
       // This API key is "search-only" and safe to be published
-      apiKey: "d58e0d68c875346d52645d68b13f3ac0",
+      apiKey: "011e01358301f5023b02da5db6af7f4d",
+      appId: "FQ12ISJR4B",
       indexName: "solana",
       contextualSearch: true,
     },
@@ -199,6 +202,7 @@ module.exports = {
       {
         docs: {
           path: "src",
+          breadcrumbs: false,
           routeBasePath: "/",
           sidebarPath: require.resolve("./sidebars.js"),
           remarkPlugins: [math],

docs/layouts/CardLayout.js

@@ -1,7 +1,8 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import DocSidebar from "@theme/DocSidebar";
-import ThemeClassNames from "@docusaurus/theme-classic/lib/theme/DocPage/styles.module.css";
+import SidebarStyles from "@docusaurus/theme-classic/lib/theme/DocPage/Layout/Sidebar/styles.module.css";
+import DocPageStyles from "@docusaurus/theme-classic/lib/theme/DocPage/Layout/styles.module.css";
 import sidebar from "../sidebars";
 
 function CardLayout({
@@ -20,14 +21,14 @@ function CardLayout({
   // return the page layout, ready to go
   return (
     <Layout title={title} description={description}>
-      <div className={ThemeClassNames.docPage}>
+      <div className={DocPageStyles.docPage}>
         {sidebarItems?.length > 0 && (
-          <aside className={ThemeClassNames.docSidebarContainer}>
+          <aside className={SidebarStyles.docSidebarContainer}>
             <DocSidebar sidebar={sidebarItems} path={path}></DocSidebar>
           </aside>
         )}
 
-        <main className={ThemeClassNames.docPage}>{children}</main>
+        <main className={DocPageStyles.docPage}>{children}</main>
       </div>
     </Layout>
   );

docs/package.json

@@ -21,11 +21,11 @@
   },
   "dependencies": {
     "@crowdin/cli": "^3.6.1",
-    "@docusaurus/core": "2.0.0-beta.0",
-    "@docusaurus/preset-classic": "2.0.0-beta.0",
-    "@docusaurus/theme-search-algolia": "2.0.0-beta.0",
+    "@docusaurus/core": "^2.2.0",
+    "@docusaurus/preset-classic": "^2.2.0",
+    "@docusaurus/theme-search-algolia": "^2.2.0",
     "babel-eslint": "^10.1.0",
-    "clsx": "^1.1.1",
+    "clsx": "^1.2.1",
     "eslint": "^7.3.1",
     "eslint-plugin-react": "^7.20.0",
     "postcss": "^8.2.13",

docs/src/cluster/commitments.md

@@ -1,7 +1,13 @@
 ---
 title: Commitment Status
 description: "Processed, confirmed, and finalized. Learn the differences between the different commitment statuses on the Solana blockchain."
-keywords: processed, confirmed, finalized, stake level, block, blockhash,
+keywords:
+  - processed
+  - confirmed
+  - finalized
+  - stake level
+  - block
+  - blockhash
 ---
 
 The [commitment](./../terminology.md#commitment) metric gives clients a standard measure of the network confirmation for the block. Clients can then use this information to derive their own measures of commitment.

docs/src/developing/intro/programs.md

@@ -1,7 +1,6 @@
 ---
 title: What are Solana Programs?
 description: "A Solana Program, aka smart contract, is the executable code that interprets the instructions on the blockchain. There are two types: Native and on chain."
-keywords: ""
 ---
 
 Solana Programs, often referred to as "_smart contracts_" on other blockchains, are the executable code that interprets the instructions sent inside of each transaction on the blockchain. They can be deployed directly into the core of the network as [Native Programs](#native-programs), or published by anyone as [On Chain Programs](#on-chain-programs). Programs are the core building blocks of the network and handle everything from sending tokens between wallets, to accepting votes of a DAOs, to tracking ownership of NFTs.

docs/src/developing/intro/rent.md

@@ -1,7 +1,6 @@
 ---
 title: What is rent?
 description: "Rent: the small fee Solana accounts incur to store data on the blockchain. Accounts with >2 years of rent are rent exempt and do not pay the periodic fee."
-keywords: ""
 ---
 
 The fee every Solana Account to store data on the blockchain is called "_rent_". This _time and space_ based fee is required to keep an account, and its therefore its data, alive on the blockchain since [clusters](../../cluster/overview.md) must actively maintain this data.

docs/src/developing/intro/transaction_fees.md

@@ -1,10 +1,18 @@
 ---
 title: Transaction Fees
 description: "Transaction fees are the small fees paid to process instructions on the network. These fees are based on computation and an optional prioritization fee."
-keywords: "instruction fee, processing fee, storage fee, low fee blockchain, gas, gwei, cheap network, affordable blockchain"
+keywords:
+  - instruction fee
+  - processing fee
+  - storage fee
+  - low fee blockchain
+  - gas
+  - gwei
+  - cheap network
+  - affordable blockchain
 ---
 
-The small fees paid to process [instructions](./terminology.md#instruction) on the Solana blockchain are known as "_transaction fees_".
+The small fees paid to process [instructions](./../../terminology.md#instruction) on the Solana blockchain are known as "_transaction fees_".
 
 As each transaction (which contains one or more instructions) is sent through the network, it gets processed by the current leader validation-client. Once confirmed as a global state transaction, this _transaction fee_ is paid to the network to help support the economic design of the Solana blockchain.
 

docs/src/developing/lookup-tables.md

@@ -1,7 +1,6 @@
 ---
 title: Address Lookup Tables
 description: ""
-keywords: ""
 ---
 
 Address Lookup Tables, commonly referred to as "_lookup tables_" or "_ALTs_" for short, allow developers to create a collection of related addresses to efficiently load more addresses in a single transaction.

docs/src/developing/versioned-transactions.md

@@ -1,7 +1,6 @@
 ---
 title: Versioned Transactions
 description: ""
-keywords: ""
 ---
 
 [Versioned Transactions](./versioned-transactions.md) are the new transaction format that allow for additional functionality in the Solana runtime, including [Address Lookup Tables](./lookup-tables.md).

docs/src/getstarted/hello-world.md

@@ -1,7 +1,17 @@
 ---
 title: "Hello World Quickstart Guide"
 description: 'This "hello world" quickstart guide will demonstrate how to setup, build, and deploy your first Solana program in your browser with Solana Playground.'
-keywords: "playground, solana pg, on chain, rust, native program, tutorial, intro to solana development, blockchain developer, blockchain tutorial, web3 developer"
+keywords:
+  - playground
+  - solana pg
+  - on chain
+  - rust
+  - native program
+  - tutorial
+  - intro to solana development
+  - blockchain developer
+  - blockchain tutorial
+  - web3 developer
 ---
 
 For this "hello world" quickstart guide, we will use [Solana Playground](https://beta.solpg.io), a browser based IDE to develop and deploy our Solana program. To use it, you do **NOT** have to install any software on your computer. Simply open Solana Playground in your browser of choice, and you are ready to write and deploy Solana programs.
@@ -104,6 +114,7 @@ After each deployment, you will see your Playground Wallet balance change. By de
 
 > Note:
 > If you need more SOL, you can airdrop more by typing airdrop command in the playground terminal:
+
 ```sh
 solana airdrop 2
 ```
@@ -161,7 +172,7 @@ transaction.add(
   new web3.TransactionInstruction({
     keys: [],
     programId: new web3.PublicKey(pg.PROGRAM_ID),
-  })
+  }),
 );
 ```
 
@@ -175,7 +186,7 @@ console.log("Sending transaction...");
 const txHash = await web3.sendAndConfirmTransaction(
   pg.connection,
   transaction,
-  [pg.wallet.keypair]
+  [pg.wallet.keypair],
 );
 console.log("Transaction sent with hash:", txHash);
 ```

docs/src/getstarted/local.md

@@ -1,7 +1,16 @@
 ---
 title: "Local Development Quickstart"
 description: "This quickstart guide will demonstrate how to quickly install and setup your local Solana development environment."
-keywords: "rust, cargo, toml, program, tutorial, intro to solana development, blockchain developer, blockchain tutorial, web3 developer"
+keywords:
+  - rust
+  - cargo
+  - toml
+  - program
+  - tutorial
+  - intro to solana development
+  - blockchain developer
+  - blockchain tutorial
+  - web3 developer
 ---
 
 This quickstart guide will demonstrate how to quickly install and setup your local development environment, getting you ready to start developing and deploying Solana programs to the blockchain.

docs/src/getstarted/rust.md

@@ -1,7 +1,16 @@
 ---
 title: "Rust Program Quickstart"
 description: "This quickstart guide will demonstrate how to quickly setup, build, and deploy your first Rust based Solana program to the blockchain."
-keywords: "rust, cargo, toml, program, tutorial, intro to solana development, blockchain developer, blockchain tutorial, web3 developer"
+keywords:
+  - rust
+  - cargo
+  - toml
+  - program
+  - tutorial
+  - intro to solana development
+  - blockchain developer
+  - blockchain tutorial
+  - web3 developer
 ---
 
 Rust is the most common programming language to write Solana programs with. This quickstart guide will demonstrate how to quickly setup, build, and deploy your first Rust based Solana program to the blockchain.

docs/src/pages/developers.js

@@ -23,8 +23,8 @@ function Developers() {
                 your browser.
               </p>
 
-              <Link to="/getstarted/hello-world">
-                <a className="button">Get Started</a>
+              <Link to="/getstarted/hello-world" className="button">
+                Get Started
               </Link>
             </div>
           </section>

docs/src/pages/getstarted.jsx

@@ -23,8 +23,8 @@ function GetStartedPage() {
                 your browser.
               </p>
 
-              <Link to="/getstarted/hello-world">
-                <a className="button">Get Started</a>
+              <Link to="/getstarted/hello-world" className="button">
+                Get Started
               </Link>
             </div>
           </section>

docs/src/terminology.md

@@ -1,7 +1,12 @@
 ---
 title: Terminology
-description: "Learn the essential terminology used thoughtout the Solana blockchain and development models."
-keywords: "terms, dictionary, definitions, define, programming models"
+description: "Learn the essential terminology used throughout the Solana blockchain and development models."
+keywords:
+  - terms
+  - dictionary
+  - definitions
+  - define
+  - programming models
 ---
 
 The following terms are used throughout the Solana documentation and development ecosystem.

docs/src/transaction_fees.md

@@ -1,7 +1,15 @@
 ---
 title: Transaction Fees
 description: "Transaction fees are the small fees paid to process instructions on the network. These fees are based on computation and an optional prioritization fee."
-keywords: "instruction fee, processing fee, storage fee, low fee blockchain, gas, gwei, cheap network, affordable blockchain"
+keywords:
+  - instruction fee
+  - processing fee
+  - storage fee
+  - low fee blockchain
+  - gas
+  - gwei
+  - cheap network
+  - affordable blockchain
 ---
 
 The small fees paid to process [instructions](./terminology.md#instruction) on the Solana blockchain are known as "_transaction fees_".