Docs Releases - Search and Migration Guide Updates (#1342)

* Update [...2]onboard.js-migration-guide.md

updated links, punctuation and grammar.

* addressed comments from PR and updated links

* Create [...2]onboard.js-migration-guide.md

* Remove duplicate cmigration guide

* Add changes that were part of duplicate mig guide

* Revert relative path for external

* Update link from expired docs to examples folder

* injected wallets doc fix

* no version bump needed

* Add Search to Docs (#1322)

* Update layout
* Update homepage
* Add algolia packages
* Update index name
* Update search keys
* yarn it

* Remove algolia from layout-homepage

Co-authored-by: laurencedelisle <[email protected]>
Co-authored-by: mhchaudhry3 <[email protected]>

Author: 3 people

docs/package.json

@@ -14,13 +14,17 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@algolia/client-search": "^4.14.2",
+    "@docsearch/css": "^3.2.1",
+    "@docsearch/js": "^3.2.1",
     "@iconify-json/ri": "^1.1.3",
     "@playwright/test": "^1.22.2",
     "@sveltejs/adapter-static": "^1.0.0-next.39",
     "@sveltejs/adapter-vercel": "next",
     "@sveltejs/kit": "1.0.0-next.357",
     "@svelteness/kit-docs": "^0.22.12",
     "@tailwindcss/typography": "^0.5.2",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
@@ -37,6 +41,8 @@
     "postcss": "^8.4.14",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "shiki": "^0.10.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",

docs/src/lib/components/install-code.md

@@ -2,14 +2,14 @@
 <TabPanel value="npm">
 
 ```sh copy
-npm install @web3-onboard/core @web3-onboard/injected
+npm install @web3-onboard/core @web3-onboard/injected-wallets
 ```
 
   </TabPanel>
   <TabPanel value="yarn">
 
 ```sh copy
-yarn add @web3-onboard/core @web3-onboard/injected
+yarn add @web3-onboard/core @web3-onboard/injected-wallets
 ```
 
   </TabPanel>

docs/src/routes/__layout-homepage.svelte

@@ -12,7 +12,7 @@
 
   import { KitDocs, KitDocsLayout, SocialLink } from '@svelteness/kit-docs'
   import IconBN from '$lib/components/icons/blocknative.svelte'
-  import SEO from '$lib/components/SEO/index.svelte';
+  import SEO from '$lib/components/SEO/index.svelte'
 
   /** @type {import('@svelteness/kit-docs').NavbarConfig} */
   const navbar = {
@@ -25,7 +25,8 @@
   }
 
   const title = 'Web3-Onboard | The easy way to connect web3 users to dapps'
-  const metadescription = 'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.'
+  const metadescription =
+    'Open-source, framework-agnostic JavaScript library to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.'
   const url = 'https://onboard.blocknative.com/'
 </script>
 
@@ -38,11 +39,7 @@
   {/if}
 </svelte:head>
 
-<SEO
- {title}
- {metadescription}
- {url}
-/>
+<SEO {title} {metadescription} {url} />
 
 <KitDocs>
   <KitDocsLayout {navbar} --kd-content-max-width={'100%'}>

docs/src/routes/__layout-kit-docs.svelte

@@ -19,6 +19,8 @@
   import '@svelteness/kit-docs/client/styles/theme.css'
   import '$lib/styles/fonts.css'
   import '$lib/styles/kit-docs.css'
+  import '@docsearch/css'
+  import '@svelteness/kit-docs/client/styles/docsearch.css'
 
   import { page } from '$app/stores'
 
@@ -29,6 +31,7 @@
     createKitDocsLoader,
     createSidebarContext
   } from '@svelteness/kit-docs'
+  import { Algolia } from '@svelteness/kit-docs/client/algolia'
 
   import IconBN from '$lib/components/icons/blocknative.svelte'
 
@@ -67,13 +70,20 @@
 </svelte:head>
 
 <KitDocs {meta}>
-  <KitDocsLayout {navbar} {sidebar}>
+  <KitDocsLayout {navbar} {sidebar} search>
     <div slot="navbar-left">
       <a class="text-base flex items-center" href="/">
         <IconBN />
         <span class="ml-4">{'Web3-Onboard'}</span>
       </a>
     </div>
+    <Algolia
+      apiKey="1bce9c4755cea3698e16830544503ee2"
+      appId="02BH13PRRI"
+      indexName="docsearch"
+      placeholder="Search documentation"
+      slot="search"
+    />
     <div slot="navbar-right-alt">
       <div class="flex">
         <SocialLink type="gitHub" href="//github.com/blocknative/web3-onboard" />

docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md

@@ -13,23 +13,23 @@ With Web3-Onboard, we’ve introduced significant architectural changes that pro
 
 If you have bnc-onboard installed, you will need to install web3-onboard instead. The basic steps you need to take to get started are:
 
-1. Install `npm i @web3-onboard/core`. You can then go ahead and install other specific wallet modules you want.
+1. Install `npm i @web3-onboard/core`. You can then go ahead and install other specific wallet modules you want (most likely `npm i @web3-onboard/injected-wallets` for browser wallet support).
 2. Initialize Onboard with the wallets you’ve installed along with the networks you would like to support.
 3. Make use of our API actions like `await onboard.connectWallet()` to allow a user to connect their wallets.
 
 For a full code overview of the upgrade process using the React Hooks package please see [this PR](https://github.com/blocknative/react-demo/pull/160/files) with special attention to the `App.js` and `services.js` files.
-To help you get started quickly on any framework you're using, we’ve put together [a quickstart that includes the above-mentioned steps](https://docs.blocknative.com/onboard#quickstart).
+To help you get started quickly we’ve put together [a set of examples across multiple frameworks that includes the above-mentioned steps](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard-develop/examples).
 
 ### Package Upgrade - Modularization
 
 This is the biggest change you might experience as an onboard.js user. With Web3-Onboard, we’ve separated all supported wallets into their modules, meaning you only need to integrate specific wallet modules you intend to support in your app.
-For example with Onboard, if you wanted to support only Metamask and Coinbase in your app, you had to install Onboard complete with all other wallets: npm install bnc-onboard
+For example with Onboard, if you wanted to support only Metamask and Coinbase in your app, you had to install Onboard complete with all other wallets: `npm install bnc-onboard`.
 With Web3-Onboard, you only need to install core along with the desired wallet modules: `npm i @web3-onboard/core @web3-onboard/injected-wallets @web3-onboard/coinbase`
 This change allows us to support many web3 wallets without affecting the overall library performance.
 
 ### Expansive Initialization Options
 
-We’ve made initialization simpler while introducing more powerful options like [Account Center](https://www.blocknative.com/blog/multichain-and-multiwallet-account-management-on-your-dapp-with-account-center) and Notify in web3-onboard.
+We’ve made initialization simpler while introducing more powerful options like [Account Center](https://www.blocknative.com/blog/multichain-and-multiwallet-account-management-on-your-dapp-with-account-center) and Notify in Web3-Onboard.
 Onboard now requires two compulsory initial setup options: `wallets` (Wallet modules, as shown above, to be initialized and added to wallet selection modal) and `chains` (EVM networks your app should work with). You can also pass multiple wallets and chains.
 
 ```
@@ -46,7 +46,7 @@ const onboard = Onboard({
 })
 ```
 
-You can find the full list of initialization options in our docs here.
+You can find the full list of initialization options in our docs [here](/docs/packages/core#options).
 
 ### API Upgrades
 
@@ -55,15 +55,15 @@ Now, you only need to call the connectWallet API:
 
 `await onboard.connectWallet()`
 
-Learn more about state changes tracked with the Onboard API here and the exposed actions you can use to modify the state here.
+Learn more about state changes tracked with the Onboard API [here](/docs/packages/core#state) and the exposed actions you can use to modify the state [here](/docs/packages/core#actions-to-modify-state).
 
 ### Framework Support
 
 Although Onboard is still framework-agnostic, we’ve introduced a couple of framework-specific modules that are frequently asked for by our users.
 
-`@web3-onboard/react` - React Hooks to connect users to web3 dApps better. You can check out [a comprehensive React Hooks guide](https://www.blocknative.com/blog/react-hooks-ethereum) we've written on that.
+`@web3-onboard/react` - React Hooks to connect users to web3 dApps better. You can check out [a comprehensive React Hooks guide](https://www.blocknative.com/blog/react-hooks-ethereum) we've written on it.
 
-`@web3-onboard/vue` - A set of reusable functions for integrating Web3-Onboard into a Vue 3 project. This is also compatible with a Vue 2 + composition-api dapp.
+`@web3-onboard/vue` - A set of reusable functions for integrating Web3-Onboard into a Vue 3 project. This is also compatible with a Vue 2 + composition-api dApp.
 
 ### CSS Customizations
 
@@ -89,7 +89,7 @@ We've also added more expansive custom CSS properties so you can style every par
 }
 ```
 
-The full list of CSS variables for web3-onboard are available here.
+The full list of CSS variables for web3-onboard are available [here](/docs/packages/core#custom-styling).
 
 ### Other Important Changes
 
@@ -98,4 +98,7 @@ There are also other notable infrastructural changes in Web3-Onboard:
 - Dynamic Imports of dependencies
 - Wallet Provider Standardization
 - Support for Chain ID in decimal format
-- If you have questions or requests, please feel free to drop by the [community-support discord channel](https://discord.com/channels/542403978693050389/542406894677917699) or [create a PR or issue on GitHub](https://github.com/blocknative/web3-onboard/issues/new/choose).
+
+### Questions and Requests
+
+If you have questions or requests, please feel free to drop by the [community-support discord channel](https://discord.com/channels/542403978693050389/542406894677917699) or [create a PR or issue on GitHub](https://github.com/blocknative/web3-onboard/issues/new/choose).

docs/src/routes/docs/[...2]getting-started/[...1]installation.md

@@ -10,14 +10,14 @@ Install the core Onboard library and the injected wallets module to support brow
 <TabPanel value="yarn">
 
 ```sh copy
-yarn add @web3-onboard/core @web3-onboard/injected
+yarn add @web3-onboard/core @web3-onboard/injected-wallets
 ```
 
   </TabPanel>
   <TabPanel value="npm">
 
 ```sh copy
-npm install @web3-onboard/core @web3-onboard/injected
+npm install @web3-onboard/core @web3-onboard/injected-wallets
 ```
 
   </TabPanel>

docs/src/routes/docs/[...4]packages/injected.md

@@ -10,14 +10,14 @@ Note: Make sure to install the core module before installing other modules to w3
 <TabPanel value="yarn">
 
 ```sh copy
-yarn add @web3-onboard/injected
+yarn add @web3-onboard/injected-wallets
 ```
 
   </TabPanel>
   <TabPanel value="npm">
 
 ```sh copy
-npm install @web3-onboard/injected
+npm install @web3-onboard/injected-wallets
 ```
 
   </TabPanel>