feat: add zksync-cli docs (#13)

# What 💻 
* update the docs with Block Explorer page
  * condensed the block explorers pages into one 
* Update the docs with tooling/zksync-cli docs
  * Reformatted the content 
* Shifted the API Reference docs in the navigation 
* Removed `noreferrer` from external link component. 
* primarily for analytics purposes. I don't think it hurts to remove it,
and makes it easier to track incoming for analytics.
* Added vscode snippets file for reusable snippets.   

# Why ✋
* Easier to read and navigate zksync-cli commands via the navigation

.vscode/settings.json

@@ -10,6 +10,13 @@
   "[markdown]": {
     "editor.wordWrap": "on",
     "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "editor.suggest.showWords": false,
+    "editor.quickSuggestions": {
+      "other": "on",
+      "comments": "off",
+      "strings": "off"
+    },
+    "editor.tabCompletion": "onlySnippets"
   }
 }

.vscode/snippets.code-snippets

@@ -0,0 +1,24 @@
+{
+  // Place your zksync-docs workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+  // Placeholders with the same ids are connected.
+  // Example:
+  // "Print to console": {
+  // 	"scope": "javascript,typescript",
+  // 	"prefix": "log",
+  // 	"body": [
+  // 		"console.log('$1');",
+  // 		"$2"
+  // 	],
+  // 	"description": "Log output to console"
+  // }
+  "External Link": {
+    "scope": "markdown",
+    "prefix": "@exlink",
+    "body": [":external-link{text=\"$1\" href=\"$2\"}$0"],
+    "description": "External link component",
+  },
+}

components/content/ExternalLink.vue

@@ -25,6 +25,6 @@ withDefaults(defineProps<Props>(), {
   text: '',
   href: '',
   target: '_blank',
-  rel: 'noopener noreferrer',
+  rel: 'noopener',
 });
 </script>

content/40.tooling/00.zksync-block-explorers.md

@@ -0,0 +1,62 @@
+---
+title: Block Explorers
+description: Learn about the official and 3rd party resources for exploring the zkSync Era network.
+---
+
+The :external-link{text="zkSync Era Block Explorer" href="https://explorer.zksync.io/"}
+details comprehensive data about transactions, blocks, batches, wallets, tokens, and smart contracts on the zkSync Era network.
+
+## Block Explorer API
+
+We’ve developed the zkSync Era Block Explorer API for developers to access zkSync Era Block Explorer data directly via HTTP requests.
+
+- :external-link{text="Mainnet Block Explorer API" href="https://block-explorer-api.mainnet.zksync.io/docs"}
+- :external-link{text="Testnet Block Explorer API" href="https://block-explorer-api.sepolia.zksync.dev/docs"}
+
+The API provides various endpoints for many use cases you might want in your app.
+It is compatible with :external-link{text="Etherscan API" href="https://docs.etherscan.io/"},
+which makes it easy to transition your existing apps to zkSync Era network.
+
+Feel free to contribute and create issues and feature requests in :external-link{text="zkSync Era Block Explorer GitHub repo" href="https://github.com/matter-labs/block-explorer"}.
+
+## Other block explorers
+
+A full list of zkSync block explorers can be found on the zkSync website's :external-link{text="Block Explorers page" href="https://zksync.io/explore#explorers"}.
+
+### Etherscan - zkSync Era Explorer
+
+Etherscan allows you to explore and search the zkSync Era network
+for transactions, addresses, tokens, prices and other activities taking place on the Network.
+
+- :external-link{text="Etherscan Mainnet" href="https://era.zksync.network/"}
+- :external-link{text="Etherscan Testnet" href="https://sepolia-era.zksync.network/"}
+
+### L2Scan
+
+L2Scan is the open source block explorer for zkSync by the Unifra team
+
+- :external-link{text="L2Scan Mainnet" href="https://zksync-era.l2scan.co/"}
+- :external-link{text="L2Scan Testnet" href="https://zksync-era-sepolia.l2scan.co/"}
+
+### Blockscout
+
+Blockscout is a blockchain explorer for inspecting, analyzing, and interacting with zkSync.
+
+- :external-link{text="Blockscout Mainnet" href="https://zksync.blockscout.com/"}
+- :external-link{text="Blockscout Testnet" href="https://zksync-sepolia.blockscout.com/"}
+
+### Hyperscan
+
+Routescan's zkSync Explorer allows you to explore and search for transactions, addresses, tokens, prices and other activities taking place on zkSync.
+
+- :external-link{text="Hyperscan" href="https://hyperscan.xyz/"}
+
+### OKLink
+
+:external-link{text="OKLink" href="https://www.oklink.com/zksync"} provides a familiar UI with data on transactions, blocks, account balances and more.
+
+### NFTScan
+
+:external-link{text="NFT Explorer" href="https://zksync.nftscan.com/"} provides developers and users
+with professional NFT asset data search and query functions, including: NFT Collection, NFT Contract, Wallet Address,
+NFT TxHash and other multi-dimensional data search queries.

content/40.tooling/10.zksync-cli/00.overview.md

@@ -0,0 +1,51 @@
+---
+title: Overview
+description: Learn how to use the powerful zkSync CLI tool for local development.
+---
+
+The zkSync Command Line Interface (CLI) is a powerful tool designed to simplify the development and interaction with zkSync from a command shell.
+
+## Usage
+
+You can run commands locally without installation using the following command: `npx zksync-cli`. For example: `npx zksync-cli dev start`.
+
+### Install zksync-cli
+
+You can alternatively install the CLI globally using the npm package manager:
+
+```bash
+npm install -g zksync-cli
+```
+
+::callout{icon="i-heroicons-light-bulb" color="blue"}
+If you go the route of installing the zksync-cli package locally, we recommend using the global option.
+::
+
+### Update zksync-cli
+
+If you installed `zksync-cli` via the npm package manager, you can update with the following:
+
+```bash
+npm update -g zksync-cli
+```
+
+## Available Commands
+
+- [`dev`](./zksync-cli-dev.md): Start a local development environment with zkSync and Ethereum nodes.
+- [`create`](./zksync-cli-create.md): Scaffold new projects using templates for frontend, contracts, and scripting.
+- [`contract`](./zksync-cli-contract.md): Read and write data to zkSync contracts without building UI.
+- [`transaction`](./zksync-cli-transaction.md): Fetch and display detailed information about a specific transaction.
+- [`wallet`](./zksync-cli-wallet.md): Manage zkSync wallet assets, including transfers and balance checks.
+- [`bridge`](./zksync-cli-bridge.md): Perform deposits and withdrawals between Ethereum and zkSync.
+- [`config chains`](./zksync-cli-config-chains.md): Add or edit custom chains for flexible testing and development.
+
+## Further Assistance
+
+Need help? Join our :external-link{text="GitHub Discussions" href="https://github.com/zkSync-Community-Hub/zksync-developers/discussions/"}
+to ask questions, share your experiences, and connect with the zkSync community.
+
+## Source Code
+
+The :external-link{text="zkSync CLI project" href="https://github.com/matter-labs/zksync-cli"}
+is open-source and available on GitHub under the MIT License.
+Feel free to contribute, report issues, or suggest new features to help us improve the tool for everyone.

content/40.tooling/10.zksync-cli/01.troubleshooting.md

@@ -0,0 +1,60 @@
+---
+title: Troubleshooting
+description: Get help with issues related to zksync-cli.
+---
+
+Encountering issues with zkSync CLI? Here are some common problems and step-by-step recommendations for resolving them:
+
+## `command not found: zksync-cli`
+
+If you try to use the `zksync-cli` command and receive the `command not found` message, double check if you
+have the package installed locally or were using the `npx zksync-cli` command.
+
+## `unknown command` Error
+
+If you encounter an `unknown command` error, follow these steps:
+
+a. **Check the zkSync CLI Version**
+
+- Run `zksync-cli --version` to check your current version.
+- Compare it with the latest version available on :external-link{text="npm" href="https://www.npmjs.com/package/zksync-cli"}.
+- If your version is lower than the one on npm, follow the steps below.
+If your version is up-to-date, it's possible that the command was moved or renamed.
+Use `zksync-cli help` for a list of current commands or refer to the documentation.
+
+b. **Verify Local Installation**
+
+- Use `npm list zksync-cli` to check if `zksync-cli` is installed in the current directory or any parent directories from where you are running your terminal.
+- If it is indeed installed, make sure to uninstall it by running `npm uninstall zksync-cli` in its installation location.
+Remove all instances of `zksync-cli` until none are found by `npm list zksync-cli`.
+
+c. **Verify Global Installation**
+
+- Use `npm list -g zksync-cli` to check if `zksync-cli` is installed globally.
+- If it is installed globally, uninstall it using `npm uninstall -g zksync-cli`.
+
+d. **Clean npm Cache**
+
+- Run `npm cache clean --force`.
+
+e. **Use the Latest Version**
+
+- As a quick fix, or if the above steps don't resolve the issue, use `npx zksync-cli@latest [command]`, for example, `npx zksync-cli@latest dev start`.
+
+## My version is outdated
+
+If `zksync-cli` is not running the latest version:
+
+- Refer to the [instructions for `unknown command` Error](/tooling/zksync-cli/troubleshooting#unknown-command-error)
+above to check and update your zkSync CLI version.
+
+## `command not found: npx` Error
+
+If you receive a `command not found: npx` error, it means Node.js is not installed or not correctly set up on your system:
+
+- Install Node.js from :external-link{text="the official website" href="https://nodejs.org/"}. This will also install `npm` and `npx`.
+- After installation, restart your terminal and try running `npx zksync-cli` again.
+
+## Other issues
+
+For all other issues, we encourage you to seek help or report them in our :external-link{text="GitHub Discussions" href="https://github.com/zkSync-Community-Hub/zksync-developers/discussions/new?category=general&title=[zksync-cli]%20<Title>"}.

content/40.tooling/10.zksync-cli/10.zksync-cli-dev.md

@@ -0,0 +1,52 @@
+---
+title: zksync-cli dev
+description: Manage a local node with zksync-cli.
+---
+
+Utilize `zksync-cli` to effortlessly initiate a local development environment.
+Using the command, `zksync-cli dev start`, you can spin up local zkSync and Ethereum nodes, along with Block Explorer, Wallet, and Bridge
+for a seamless development experience.
+
+## Prerequisites
+
+Before beginning, ensure you have installed:
+
+- :external-link{text="Node.js" href="https://nodejs.org"} v18+
+- :external-link{text="Git" href="https://git-scm.com/downloads"}
+- :external-link{text="Docker" href="https://www.docker.com/get-started/"}
+
+## Starting and Stopping Nodes
+
+- **Start**: `zksync-cli dev start` initiates your local environment. On the first run, it prompts to select a node and additional modules.
+- **Stop**: `zksync-cli dev stop` terminates the local environment. Use `zksync-cli dev stop [module name]` to stop specific modules.
+- **Restart**: `zksync-cli dev restart` or `zksync-cli dev restart [module name]` restarts your environment or specific modules.
+
+## Configuring Your Environment
+
+- `zksync-cli dev config` allows the selection of nodes and additional modules like block explorer and bridge.
+Run modules such as Block Explorer against an already running node by adding a new chain.
+
+## Managing Modules
+
+- `zksync-cli dev modules` lists all installed modules, providing a clear overview of your environment's components.
+
+## Viewing Logs
+
+- `zksync-cli dev logs` displays logs for all active modules, essential for monitoring and debugging.
+
+## Cleaning Modules
+
+- `zksync-cli dev clean` removes all module data from your computer. For specific modules, use `zksync-cli dev clean [module name]`.
+
+## Updating Modules
+
+- `zksync-cli dev update [module name]` updates individual modules, ensuring you're running the latest versions.
+
+## Troubleshooting
+
+If modules malfunction, e.g., failing to start:
+
+1. Use `zksync-cli dev stop` to cease all operations.
+2. Reinstall the problematic module with `zksync-cli dev clean [module name]`.
+3. Restart with `zksync-cli dev start`. Check Docker container logs for detailed errors, accessible through Docker Desktop.
+4. Persisting issues? Please report them in our :external-link{text="GitHub discussions" href="https://github.com/zkSync-Community-Hub/zksync-developers/discussions/new?category=general&title=[zksync-cli]%20<Title>"}.

content/40.tooling/10.zksync-cli/20.zksync-cli-create.md

@@ -0,0 +1,48 @@
+---
+title: zksync-cli create
+description: Use the zksync-cli create command to streamline project setup.
+---
+
+The `zksync-cli create` command streamlines project setup by offering templates for frontend development, smart contracts,
+and scripting for zkSync, enabling rapid deployment and development.
+
+### Prerequisites
+
+Ensure you have the following installed before you start:
+
+- :external-link{text="Node.js" href="https://nodejs.org"} v18+
+- :external-link{text="Git" href="https://git-scm.com/downloads"}
+
+## Available Templates
+
+`zksync-cli create` simplifies the initial project setup by providing templates in three main categories:
+
+### Frontend
+
+Fast-track your UI development with our frontend templates, supporting popular frameworks like Vue, React, Next.js, Nuxt, and Vite.
+Options include viem, ethers, web3modal, rainbowkit, and more, equipping you with the necessary tools for dApp development.
+
+:external-link{text="zksync-frontend-templates repo" href="https://github.com/matter-labs/zksync-frontend-templates#readme"}
+
+### Contracts
+
+For smart contract development, choose from templates designed for quick deployment and testing, compatible with Solidity or Vyper.
+Utilize tools like Hardhat to streamline your workflow.
+
+:external-link{text="zksync-contract-templates repo" href="https://github.com/matter-labs/zksync-contract-templates#readme"}
+
+### Scripting
+
+Enhance your project with Node.js scripting templates for automated interactions and advanced zkSync operations.
+Includes examples of wallet or contract interactions using viem, ethers, or web3.js.
+
+:external-link{text="zksync-scripting-templates repo" href="https://github.com/matter-labs/zksync-scripting-templates#readme"}
+
+## Using Templates
+
+To create a project using a template, run the following command and follow the prompts to select your desired template category
+and specific framework or tool:
+
+```bash
+zksync-cli create
+```