diff --git a/public/images/cli.svg b/public/images/cli.svg new file mode 100644 index 00000000..3557bce8 --- /dev/null +++ b/public/images/cli.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/images/contract.svg b/public/images/contract.svg new file mode 100644 index 00000000..eb7a9e71 --- /dev/null +++ b/public/images/contract.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/gears.svg b/public/images/gears.svg new file mode 100644 index 00000000..702fe610 --- /dev/null +++ b/public/images/gears.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/images/nodes.svg b/public/images/nodes.svg new file mode 100644 index 00000000..9990c138 --- /dev/null +++ b/public/images/nodes.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/registry.svg b/public/images/registry.svg new file mode 100644 index 00000000..9a2150c2 --- /dev/null +++ b/public/images/registry.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/stacking.svg b/public/images/stacking.svg new file mode 100644 index 00000000..97c8c8b1 --- /dev/null +++ b/public/images/stacking.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/images/transaction-signing.svg b/public/images/transaction-signing.svg new file mode 100644 index 00000000..4b80ed0e --- /dev/null +++ b/public/images/transaction-signing.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/build-apps/guides/data-storage.md b/src/pages/build-apps/guides/data-storage.md index e54d7269..3eddaa35 100644 --- a/src/pages/build-apps/guides/data-storage.md +++ b/src/pages/build-apps/guides/data-storage.md @@ -5,8 +5,8 @@ experience: beginners tags: - tutorial images: - large: /images/pages/write-smart-contracts.svg - sm: /images/pages/write-smart-contracts-sm.svg + large: /images/gears.svg + sm: /images/gears.svg --- ## Introduction diff --git a/src/pages/build-apps/guides/transaction-signing.md b/src/pages/build-apps/guides/transaction-signing.md index dcd81d92..c92f69ae 100644 --- a/src/pages/build-apps/guides/transaction-signing.md +++ b/src/pages/build-apps/guides/transaction-signing.md @@ -5,13 +5,13 @@ experience: beginners tags: - tutorial images: - large: /images/pages/write-smart-contracts.svg - sm: /images/pages/write-smart-contracts-sm.svg + large: /images/transaction-signing.svg + sm: /images/transaction-signing.svg --- ## Introduction -This guide explains how to prompt users to sign transactions and broadcast them to the Stacks blockchain by implementing the `connect` package of [Stacks.js](https://blockstack.github.io/stacks.js/). +This guide explains how to prompt users to sign [transactions](/understand-stacks/transactions) and broadcast them to the Stacks blockchain by implementing the `connect` package of [Stacks.js](https://blockstack.github.io/stacks.js/). Transaction signing provides a way for users execute [Clarity smart contracts](/write-smart-contracts/overview) that are relevant to your app then handle the result immediately. diff --git a/src/pages/build-apps/tutorials/angular.md b/src/pages/build-apps/tutorials/angular.md index cd9a3225..79d5a02f 100644 --- a/src/pages/build-apps/tutorials/angular.md +++ b/src/pages/build-apps/tutorials/angular.md @@ -1,12 +1,13 @@ --- -title: Angular -description: How to integrate authentication within an Angular application +title: Angular app +description: How to integrate authentication into an Angular app experience: beginners duration: 30 minutes tags: - tutorial images: - sm: /images/pages/angular-app-sm.svg + large: /images/pages/hello-world.svg + sm: /images/pages/hello-world-sm.svg --- # Building an with Angular diff --git a/src/pages/build-apps/tutorials/public-registry.md b/src/pages/build-apps/tutorials/public-registry.md index be93f581..96d0e009 100644 --- a/src/pages/build-apps/tutorials/public-registry.md +++ b/src/pages/build-apps/tutorials/public-registry.md @@ -1,13 +1,13 @@ --- -title: Public registry -description: Learn how to read state from the Stacks blockchain. +title: Public registry app +description: Learn how to write and read state from the Stacks blockchain duration: 60 minutes experience: intermediate tags: - tutorial images: - large: /images/pages/todo-app.svg - sm: /images/pages/todo-app-sm.svg + large: /images/registry.svg + sm: /images/registry.svg --- ## Introduction @@ -141,7 +141,7 @@ Now, you should be able to register your public to-do list on the blockchain whe The method `doContractCall` has a callback `finished` that is called after the user confirmed the transaction. This does not mean that the blockchain has accepted and included the transaction on the blockchain. It just means that the transaction was broadcasted to the network. The transaction id is returned in the `finished` callback as `data.txId`. This id can be used to find the transaction and its processing status on the blockchain. The [Stack Blockchain API client library](https://blockstack.github.io/stacks-blockchain-api/client/index.html) provides a convenient method to subscribe to the progress using web sockets. -### Step 1: Add depedency +### Step 1: Add dependency Add the Stacks Blockchain API client library to `package.json` in the root folder of the to-do list app: @@ -149,7 +149,7 @@ Add the Stacks Blockchain API client library to `package.json` in the root folde npm add @stacks/blockchain-api-client ``` -### Step 2: Store the transaction id +### Step 2: Store the transaction ID Create a react state variable in the `PublicUrlRegistrar` component that holds the transaction id. diff --git a/src/pages/ecosystem/contributing.md b/src/pages/ecosystem/contributing.md index 20243691..3401525a 100644 --- a/src/pages/ecosystem/contributing.md +++ b/src/pages/ecosystem/contributing.md @@ -1,6 +1,10 @@ --- title: How to contribute description: Learn how this site is built, and how you could contribute to it. +icon: BlockstackIcon +images: + large: /images/contribute.svg + sm: /images/contribute.svg --- ## Introduction diff --git a/src/pages/ecosystem/overview.md b/src/pages/ecosystem/overview.md index 0df196bd..efcef407 100644 --- a/src/pages/ecosystem/overview.md +++ b/src/pages/ecosystem/overview.md @@ -1,6 +1,9 @@ --- description: Learn about Stacks and decentralization icon: BlockstackIcon +images: + large: /images/pages/ecosystem.svg + sm: /images/pages/ecosystem.svg --- # Overview of Stacks diff --git a/src/pages/ecosystem/stacks-token.md b/src/pages/ecosystem/stacks-token.md index d514c6a0..1b70a303 100644 --- a/src/pages/ecosystem/stacks-token.md +++ b/src/pages/ecosystem/stacks-token.md @@ -2,6 +2,9 @@ title: Stacks token description: Learn about the native token of Stacks icon: StacksIcon +images: + large: /images/stx.svg + sm: /images/stx.svg --- # Learn more about the Stacks token diff --git a/src/pages/index.md b/src/pages/index.md index 81cab013..6d328f4c 100644 --- a/src/pages/index.md +++ b/src/pages/index.md @@ -1,24 +1,29 @@ --- -title: Documentation -description: All you need to build decentralized apps, write smart contracts, and start mining +title: Stacks documentation +description: Write Clarity smart contracts, build apps, and starting mining with the Stacks blockchain --- -## Understand the Stacks blockchain +## Understand Stacks -[@page-reference | inline] -| /understand-stacks/overview +[@page-reference | grid] +| /understand-stacks/overview, /understand-stacks/proof-of-transfer, /understand-stacks/testnet + +## Write smart contracts + +[@page-reference | grid] +| /write-smart-contracts/overview, /write-smart-contracts/hello-world-tutorial -## Get started +## Build apps [@page-reference | grid] -| /write-smart-contracts/overview, /build-apps, /start-mining +| /build-apps/guides/authentication, /build-apps/guides/transaction-signing, /build-apps/guides/data-storage -## Try a tutorial +## Start mining [@page-reference | grid] -| /write-smart-contracts/hello-world-tutorial, /authentication/building-todo-app, /understand-stacks/running-testnet-node +| /start-mining, /understand-stacks/running-testnet-node -## Explore more +## Ecosystem [@page-reference | grid-small] -| /ecosystem/overview, /ecosystem/stacks-token, /understand-stacks/proof-of-transfer +| /ecosystem/overview, /ecosystem/stacks-token, /ecosystem/contributing diff --git a/src/pages/understand-stacks/overview.md b/src/pages/understand-stacks/overview.md index d0c1f1ed..8f07dbf2 100644 --- a/src/pages/understand-stacks/overview.md +++ b/src/pages/understand-stacks/overview.md @@ -3,8 +3,8 @@ title: Overview description: Learn more about the Stacks 2.0 blockchain icon: TestnetIcon images: - large: /images/pages/testnet.svg - sm: /images/pages/testnet-sm.svg + large: /images/nodes.svg + sm: /images/nodes.svg --- ## Introduction diff --git a/src/pages/understand-stacks/proof-of-transfer.md b/src/pages/understand-stacks/proof-of-transfer.md index 63a033f7..9ac1c764 100644 --- a/src/pages/understand-stacks/proof-of-transfer.md +++ b/src/pages/understand-stacks/proof-of-transfer.md @@ -3,8 +3,8 @@ title: Proof of Transfer description: Understand the proof-of-transfer consensus mechanism icon: TestnetIcon images: - large: /images/pages/testnet.svg - sm: /images/pages/testnet-sm.svg + large: /images/stacking.svg + sm: /images/stacking.svg --- ## Overview diff --git a/src/pages/understand-stacks/running-testnet-node.md b/src/pages/understand-stacks/running-testnet-node.md index d5e3460a..eb48b484 100644 --- a/src/pages/understand-stacks/running-testnet-node.md +++ b/src/pages/understand-stacks/running-testnet-node.md @@ -7,8 +7,8 @@ experience: beginners tags: - tutorial images: - large: /images/pages/testnet.svg - sm: /images/pages/testnet-sm.svg + large: /images/cli.svg + sm: /images/cli.svg --- ## Introduction diff --git a/src/pages/understand-stacks/transactions.md b/src/pages/understand-stacks/transactions.md index 0db6921a..43d1388d 100644 --- a/src/pages/understand-stacks/transactions.md +++ b/src/pages/understand-stacks/transactions.md @@ -3,8 +3,8 @@ title: Transactions description: Guide to Stacks 2.0 transactions icon: TestnetIcon images: - large: /images/pages/testnet.svg - sm: /images/pages/testnet-sm.svg + large: /images/transaction-signing.svg + sm: /images/transaction-signing.svg --- ## Introduction diff --git a/src/pages/write-smart-contracts/overview.md b/src/pages/write-smart-contracts/overview.md index 0d1bea19..ad913ae1 100644 --- a/src/pages/write-smart-contracts/overview.md +++ b/src/pages/write-smart-contracts/overview.md @@ -2,8 +2,8 @@ title: Write smart contracts description: Overview and guides for getting started with Clarity images: - large: /images/pages/write-smart-contracts.svg - sm: /images/pages/write-smart-contracts-sm.svg + large: /images/contract.svg + sm: /images/contract.svg --- ## Introduction