Update: prerequisite format/content (#3900)

* Update prereq format * Apply suggestions from code review * Update sidebars.js * Update sidebars.js * fix conflicts * Update docs/developer-docs/defi/wallets/self-custody/hardware-wallet-cli.mdx * Update docs/developer-docs/defi/wallets/self-custody/hardware-wallet-cli.mdx
dfinity · Dec 19, 2024 · b718fd1 · b718fd1
1 parent 4e1114b
commit b718fd1
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 188 deletions.
diff --git a/docs/developer-docs/ai/ai-on-chain.mdx b/docs/developer-docs/ai/ai-on-chain.mdx
@@ -5,13 +5,13 @@ keywords: [intermediate, tutorial, machine learning, ml, mnist, rust]
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import '/src/components/CenterImages/center.scss';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Image classification sample
 
 <MarkdownChipRow labels={["Advanced", "Tutorial", "Rust" ]} />
 
-
-
 ICP's unique ability to run compute at scale allows AI and neural networks to run directly onchain within a canister smart contract.
 
 To showcase this capability, this demo example displays how an AI that identifies an image can be deployed as a smart contract with a frontend and backend, both running onchain.
@@ -72,19 +72,24 @@ Currently, Wasm execution is not optimized for this workload. A single call exec
 
 ## Deploying the demo
 
-### Prerequisites
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
+
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
+
+<input type="checkbox"/> Download and install <a href="https://doc.rust-lang.org/book/ch01-01-installation.html">Rust.</a>
 
-- [x] Download and install the Rust programming language and Cargo as described in the [Rust installation instructions](https://doc.rust-lang.org/book/ch01-01-installation.html) for your operating system.
+<input type="checkbox"/> Download and install <a href="https://git-scm.com/downloads">git.</a>
 
-- [x] Download and install the IC SDK package as described in the [installing the IC SDK](/docs/current/developer-docs/getting-started/install) page.
+<input type="checkbox"/> Download and install <a href="https://github.com/WebAssembly/wasi-sdk/releases/tag/wasi-sdk-21"><code>wasi-skd-21.0</code>.</a>
 
-- [x] Download and install [git](https://git-scm.com/downloads).
+<input type="checkbox"/> Export `CC_wasm32_wasi` in your shell such that it points to WASI clang and sysroot: <code>export CC_wasm32_wasi="/path/to/wasi-sdk-21.0/bin/clang --sysroot=/path/to/wasi-sdk-21.0/share/wasi-sysroot"</code>
 
-- [x] Install [`wasi-skd-21.0`](https://github.com/WebAssembly/wasi-sdk/releases/tag/wasi-sdk-21).
+<input type="checkbox"/> Download and install <a href="https://github.com/wasm-forge/wasi2ic"><code>wasi2ic</code> and make sure that `wasi2ic` binary is in your <code>$PATH</code>.</a>
 
-- [x] Export `CC_wasm32_wasi` in your shell such that it points to WASI clang and sysroot: `export CC_wasm32_wasi="/path/to/wasi-sdk-21.0/bin/clang --sysroot=/path/to/wasi-sdk-21.0/share/wasi-sysroot"`
+</TabItem>
+</Tabs>
 
-- [x] Install [`wasi2ic`](https://github.com/wasm-forge/wasi2ic) and make sure that `wasi2ic` binary is in your `$PATH`.
 
 ### Downloading the example
 
@@ -120,17 +125,11 @@ rustup target add wasm32-wasi
 
 ### Deploying the code
 
-To deploy the example, first start `dfx`:
+To deploy the example, first start `dfx`, then deploy the project:
 
 ```
 dfx start --clean --background
-```
-
-Then to deploy the canisters, run the command:
-
-```
-dfx deploy // Deploy locally
-dfx deploy --network ic // Deploy to the mainnet
+dfx deploy
 ```
 
 ## Using the demo

diff --git a/docs/developer-docs/ai/machine-learning-sample.mdx b/docs/developer-docs/ai/machine-learning-sample.mdx
@@ -5,14 +5,13 @@ keywords: [intermediate, tutorial, machine learning, ml, mnist, rust]
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import '/src/components/CenterImages/center.scss';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Machine learning sample
 
 <MarkdownChipRow labels={["Advanced", "Tutorial", "Rust" ]} />
 
-
-
-
 Machine learning is a form of artificial intelligence (AI) that observes statistical algorithms and their data to learn patterns and generalizations. By analyzing these data patterns, machine learning algorithms can execute tasks by predicting the correct result with high accuracy.
 
 One common machine learning model that is used to train data sets is the Modified National Institute of Standards and Technology (MNIST) database which contains a collection of handwritten numbers. This database is commonly used for training different image processing systems and testing different machine learning platforms.
@@ -23,14 +22,15 @@ For example, if the user draws the digit `5`, the machine learning model will so
 
 This project is based off of one [found within the Rust Burn examples](https://github.com/tracel-ai/burn/tree/main/examples/mnist-inference-web).
 
-### Prerequisites
-
-- [x] [Download and install Rust](https://www.rust-lang.org/tools/install).
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
 
-- [x] [Download and install Node.js](https://nodejs.org/en/download) `16.0.0` or newer.
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
 
-- [x] [Download and install the IC SDK](/docs/current/developer-docs/getting-started/install).
+<input type="checkbox"/> Download and install <a href="https://doc.rust-lang.org/book/ch01-01-installation.html">Rust.</a>
 
+</TabItem>
+</Tabs>
 
 ## Creating a new project
 
@@ -43,40 +43,7 @@ dfx start --clean --background
 dfx new machine_learning_sample
 ```
 
-You will be prompted to select the language that your backend canister will use. Select 'Rust':
-
-```
-? Select a backend language: ›
-  Motoko
-❯ Rust
-  TypeScript (Azle)
-  Python (Kybra)
-```
-
-:::info
-`dfx` versions `v0.17.0` and newer support this `dfx new` interactive prompt. [Learn more about `dfx v0.17.0`](/blog/2024/02/14/news-and-updates/update#dfx-v0170).
-:::
-
-Then, select a frontend framework for your frontend canister. Select 'Vanilla JS':
-
-```
-  ? Select a frontend framework: ›
-  SvelteKit
-  React
-  Vue
-❯ Vanilla JS
-  No JS template
-  No frontend canister
-```
-
-Lastly, you can include extra features to be added to your project:
-
-```
-  ? Add extra features (space to select, enter to confirm) ›
-⬚ Internet Identity
-⬚ Bitcoin (Regtest)
-⬚ Frontend tests
-```
+You will be prompted to select the language that your backend canister will use. Select 'Rust'. For the frontend, select 'Vanilla JS.'
 
 Then, navigate into the new project directory:
 

diff --git a/docs/developer-docs/defi/cycles/cycles-wallet.mdx b/docs/developer-docs/defi/cycles/cycles-wallet.mdx
@@ -4,13 +4,13 @@ keywords: [beginner, tutorial, cycles, cycles wallet]
 
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Using a cycles wallet
 
 <MarkdownChipRow labels={["Beginner", "Tutorial"]} />
 
-
-
 As discussed in [tokens and cycles](/docs/current/developer-docs/getting-started/tokens-and-cycles), ICP tokens can be converted into **cycles** to power <GlossaryTooltip>canister</GlossaryTooltip> operations. Cycles reflect the operational cost of communication, computation, and storage that dapps consume.
 
 Unlike ICP tokens, cycles are only associated with canisters and not with user or developer <GlossaryTooltip>principals</GlossaryTooltip>. Because only canisters require cycles to perform operations and pay for the resources they use, users and developers can manage the distribution and ownership of cycles through a special type of canister called a **cycles wallet**.
@@ -78,9 +78,13 @@ Authorizing a principal as a custodian does not automatically grant the principa
 
 ## Creating a cycles wallet
 
-### Prerequisites
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
+
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
 
-- [x] Install the [IC SDK](/docs/current/developer-docs/getting-started/install).
+</TabItem>
+</Tabs>
 
 If you are **deploying locally**, your local cycles wallet is created in the background when you register a new canister principal using `dfx canister create` or when you register, build, and deploy a canister with `dfx deploy`.
 

diff --git a/docs/developer-docs/defi/exchange-rate-canister.mdx b/docs/developer-docs/defi/exchange-rate-canister.mdx
@@ -4,13 +4,13 @@ keywords: [intermediate, tutorial, exchange rate canister]
 
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Exchange rate canister
 
 <MarkdownChipRow labels={["Intermediate" , "Tutorial"]} />
 
-
-
 The exchange rate canister, referred to as the XRC, is a canister that runs on the **uzr34 system subnet**. The XRC uses [HTTPS outcalls](https://internetcomputer.org/https-outcalls/) to fetch data from major cryptocurrency exchanges by using the exchange's public API to retrieve real time or historical cryptocurrency pricing information. The XRC also queries the public APIs for foreign exchange data providers around the world periodically in order to get forex rates.
 
 The XRC canister can be used by dapps such as decentralized exchanges (DEXs) to provide functionality such as comparing exchange rates against market rates to determine the value of assets that are held in a canister smart contract. For example, the cycle minting canister of the <GlossaryTooltip>NNS</GlossaryTooltip> uses the XRC to obtain the current ICP/XDR exchange rates, which it requires for the conversion of ICP to cycles.
@@ -93,13 +93,16 @@ Alternatively, you can run a local XRC demo application to test the functionalit
 It is worth noting that this sample dapp is very simple. If there is an error, it always returns `0` because the return value is simply a float.
 :::
 
-### Prerequisites
-
--   [x] Download and install the IC SDK package as described in the [download and install](/docs/current/developer-docs/getting-started/install) page.
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
 
--   [x] Download and install [Nodejs and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
+<div>
+</div>
+<input type="checkbox"/> Download and install <a href="https://git-scm.com/downloads">git.</a>
 
--   [x] Download and install [git](https://git-scm.com/downloads).
+</TabItem>
+</Tabs>
 
 Then, clone the sample repository, install the dependencies, and build the canisters with the following commands:
 

diff --git a/docs/developer-docs/defi/nfts/nft-collections.mdx b/docs/developer-docs/defi/nfts/nft-collections.mdx
@@ -4,13 +4,13 @@ keywords: [intermediate, tutorial, nft collection, create an nft, icrc-7, icrc-3
 
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Creating an NFT collection
 
 <MarkdownChipRow labels={["Intermediate", "NFTs", "Tutorial"]} />
 
-
-
 An NFT collection is a series of non-fungible tokens that each have a unique identifier value. Each token's metadata may be the same, such as the name, image, and description, or each token's data can be unique and associated with a 'rarity' value, where some metadata values are less common than others. Rarity metadata attributes are common in generative NFT collections, often referring to an NFT collection where the artwork for each image has been randomly generated and some components only appear in a select few of the generated images.
 
 For this basic NFT example, you will create a collection where each token has the same metadata values, with the only difference between each NFT being their unique token identifier value.
@@ -27,11 +27,16 @@ This example combines three standards: ICRC-3, ICRC-7, and ICRC-37:
 
 ## Creating an NFT collection
 
-### Prerequisites
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
 
-- Download and install the [IC SDK](/docs/current/developer-docs/getting-started/install).
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
+<div>
+</div>
+<input type="checkbox"/> Download and install <a href="https://git-scm.com/downloads">git.</a>
 
-- Download and install [git](https://git-scm.com/downloads).
+</TabItem>
+</Tabs>
 
 ### Step 1: Download the NFT example project.
 

diff --git a/docs/developer-docs/defi/tokens/indexes.mdx b/docs/developer-docs/defi/tokens/indexes.mdx
@@ -6,14 +6,12 @@ import TabItem from "@theme/TabItem";
 import { AdornedTabs } from "/src/components/Tabs/AdornedTabs";
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
 import { GlossaryTooltip } from "/src/components/Tooltip/GlossaryTooltip";
-
+import Tabs from "@theme/Tabs";
 
 # Index canisters
 
 <MarkdownChipRow labels={["Intermediate" , "Tutorial"]} />
 
-
-
 On ICP, an index <GlossaryTooltip>canister</GlossaryTooltip> is used in conjunction with a <GlossaryTooltip>ledger</GlossaryTooltip> canister to provide the ability for transactions to be queried for a specific account. Without an index canister, a ledger's transaction history cannot easily be parsed and used by applications, as the entire transaction history of a ledger would need to be processed.
 
 An index canister can be used to:
@@ -28,9 +26,14 @@ If you are working in a local development environment, you can't access the main
 
 This guide displays how to deploy an index canister locally and use it in conjunction with a ledger canister. Instructions for both an ICP index and an ICRC index are included.
 
-### Prerequisites
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
+
+<input type="checkbox"/> Read the guide on deploying a local ledger, then continue with this guide. This guide will assume that you have setup up a local ledger pertaining to your intended token type (ICP or ICRC), and that all prerequisites are fulfilled.
+
+</TabItem>
+</Tabs>
 
-- Read the guide on deploying a local ledger, then continue with this guide. This guide will assume that you have setup up a local ledger pertaining to your intended token type (ICP or ICRC), and that all prerequisites are fulfilled.
 
 ## Wasm and Candid files
 

diff --git a/docs/developer-docs/defi/wallets/self-custody/hardware-wallet-cli.mdx b/docs/developer-docs/defi/wallets/self-custody/hardware-wallet-cli.mdx
@@ -3,22 +3,28 @@ keywords: [beginner, concept, asset custody, hardware wallets, cli tool]
 ---
 
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Using a hardware wallet
 
 <MarkdownChipRow labels={["Beginner" , "Tutorial"]} />
 
-
-
 A hardware wallet is a physical ledger device that is used to store assets. Hardware wallets are protected by a seed phase, similar to software wallets, but they can be disconnected from the internet whenever they are ejected from your computer.
 
 The DFINITY `hardware-wallet-cli` tool is designed to integrate with [Ledger Nano USB devices](https://shop.ledger.com/products/ledger-nano-x).
 
-### Prerequisites
-
-- Have a Ledger Nano device.
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
+<div>
+</div>
+<input type="checkbox"/> Have a Ledger Nano device.
+<div>
+</div>
+<input type="checkbox"/><a href="https://nodejs.org/en/download/">Install Node.js</a>
 
-- Download and install [`Node.js`](https://nodejs.org/en/download/).
+</TabItem>
+</Tabs>
 
 ## Ledger Nano device setup
 

diff --git a/docs/developer-docs/defi/wallets/self-custody/self-custody-quickstart.mdx b/docs/developer-docs/defi/wallets/self-custody/self-custody-quickstart.mdx
@@ -3,6 +3,8 @@ keywords: [beginner, tutorial, custody, self-custody]
 ---
 
 import { MarkdownChipRow } from "/src/components/Chip/MarkdownChipRow";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 # Using self-custody wallets
 
@@ -37,23 +39,28 @@ If you are a **developer** or **entrepreneur**, ICP tokens can be converted to *
 
 If you are a member of the community interested in **participating in governance** and influencing the direction of the Internet Computer, you can lock up ICP tokens in a stake—called a neuron—so that you can submit and vote on proposals.
 
-### Prerequisites
-
-To get started, verify the following:
--   [x] You have an internet connection and access to a shell terminal on your local **Intel-based macOS** or **Linux** computer.
--   [x] You know how to open a new terminal shell on your local computer and how to run basic command-line programs in the terminal.
--   [x] You hold ICP tokens in a self-custody wallet.
--   [x] You have downloaded and installed the SDK by running the following command in a terminal on your local computer:
-
-    ``` bash
-    sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"
-    ```
-
--   [x] You have created a backup copy of the public/private key for the identity you are using for self-custody.
-
-    For example, if you are using the default developer identity created using the SDK `dfx` command-line interface, you should have a backup of the `~/.config/dfx/identity/default/identity.pem` file stored in a secure location.
-
--   [x] You have a secure environment in which to perform operations involving ICP tokens.
+<Tabs>
+<TabItem value="prereq" label="Prerequisites" default>
+
+<input type="checkbox"/> <a href="/docs/current/developer-docs/getting-started/install">Install the IC SDK.</a>
+<div>
+</div>
+<input type="checkbox"/> You have an internet connection and access to a shell terminal on your local computer.
+<div>
+</div>
+<input type="checkbox"/> You know how to open a new terminal shell on your local computer and how to run basic command-line programs in the terminal.
+<div>
+</div>
+<input type="checkbox"/> You hold ICP tokens in a self-custody wallet.
+<div>
+</div>
+<input type="checkbox"/> You have created a backup copy of the public/private key for the identity you are using for self-custody.
+<div>
+</div>
+<input type="checkbox"/> You have a secure environment in which to perform operations involving ICP tokens.
+
+</TabItem>
+</Tabs>
 
 As a security best practice, any operations that involve the transfer of ICP tokens would require both an air-gapped computer with minimal hardware and software and a computer connected to the network. In practice, this requires moving files between two computers and taking other precautions to minimize risks.