diff --git a/_static/css/pydata-overrides.css b/_static/css/pydata-overrides.css index 6b07da445..2600e17fd 100644 --- a/_static/css/pydata-overrides.css +++ b/_static/css/pydata-overrides.css @@ -151,6 +151,24 @@ tbody tr:nth-child(even) { background-color: var(--table-bg-color-even); } border-color: var(--pst-color-primary) } +/* Zoom example-app screenshots while keeping the preview viewport unchanged. + A 1.4x scale displays roughly half of the source image area. */ +.example-app-card .sd-card-img-top { + height: 18rem; + object-fit: cover; + object-position: left top; + transform: scale(1.4); + transform-origin: left top; + clip-path: inset(0 28.572% 28.572% 0); +} + +@media (max-width: 767.98px) { + .example-app-card .sd-card-img-top { + height: 75vw; + max-height: 28rem; + } +} + /* These are hacks to hide the pydata-theme search popup behind the readthedocs sphinx search extension interface. */ diff --git a/docs/index.md b/docs/index.md index f0a3670d0..8b898e7f4 100644 --- a/docs/index.md +++ b/docs/index.md @@ -179,13 +179,14 @@ protocol-ref/errors :hidden: resources/faq -resources/repository-overview Dash Platform Monorepo -Dash Platform Book +resources/repository-overview Platform Bridge Platform Explorer Testnet Block Explorer Testnet Faucet +Evo SDK Playground +Dash Platform Book Previous Version of Docs ``` diff --git a/docs/resources/repository-overview.md b/docs/resources/repository-overview.md index f0f16279e..2e521384c 100644 --- a/docs/resources/repository-overview.md +++ b/docs/resources/repository-overview.md @@ -23,6 +23,8 @@ layout can change over time, so treat the monorepo as the source of truth. | [rs-sdk-ffi](https://github.com/dashpay/platform/tree/master/packages/rs-sdk-ffi) / [swift-sdk](https://github.com/dashpay/platform/tree/master/packages/swift-sdk) | Shared components used for Swift and other native integrations | | [wasm-sdk](https://github.com/dashpay/platform/tree/master/packages/wasm-sdk) | WebAssembly-oriented bindings for browser and hybrid environments | +The [Evo SDK site](https://evo-sdk.dash.org/) hosts developer-facing tooling for the JavaScript SDK: an interactive [playground](https://evo-sdk.dash.org/playground.html) that runs read-only queries in the browser against testnet, [SDK documentation](https://evo-sdk.dash.org/docs.html), and an AI reference. + ## Platform and Supporting Repositories These run on the network and process data. diff --git a/docs/tutorials/connecting-to-testnet.md b/docs/tutorials/connecting-to-testnet.md index 96cc8d9ee..6074bcf30 100644 --- a/docs/tutorials/connecting-to-testnet.md +++ b/docs/tutorials/connecting-to-testnet.md @@ -24,6 +24,10 @@ The JavaScript SDK package is available from npmjs.com and can be installed by r npm install @dashevo/evo-sdk ``` +:::{tip} +Want to try the SDK before installing anything? The [Evo SDK Playground](https://evo-sdk.dash.org/playground) runs queries adapted from these tutorials directly in your browser. +::: + ### 2. Connect to Dash Platform Create a file named `connect.mjs` with the following contents. Then run it by typing `node connect.mjs` from the command line: @@ -43,7 +47,7 @@ try { } ``` -Once this returns successfully, you're ready to begin developing! See the [Quickstart](../tutorials/introduction.md#quickstart) for recommended next steps. For details on SDK methods, please refer to the [SDK documentation](https://dashpay.github.io/evo-sdk-website/docs.html). +Once this returns successfully, you're ready to begin developing! See the [Quickstart](../tutorials/introduction.md#quickstart) for recommended next steps. For details on SDK methods, please refer to the [SDK documentation](https://evo-sdk.dash.org/docs.html). ## Connect to a Local Devnet diff --git a/docs/tutorials/example-apps.md b/docs/tutorials/example-apps.md index 7de41a5f5..c955ea9e7 100644 --- a/docs/tutorials/example-apps.md +++ b/docs/tutorials/example-apps.md @@ -8,11 +8,50 @@ The tutorials in this section walk through complete, end-to-end applications bui Each app is a stand-alone project in the [`platform-tutorials/example-apps/`](https://github.com/dashpay/platform-tutorials/tree/main/example-apps) directory. The walkthroughs here tour the code alongside the commands needed to run it locally. +::::{grid} 1 1 2 2 +:gutter: 3 + +:::{grid-item-card} DashMint Lab +:img-top: example-apps/img/dashmint-collection.png +:class-card: example-app-card + +Explore a live NFT marketplace that demonstrates minting, transfers, pricing, purchases, burns, +and token-powered document creation. + +```{button-link} https://dashpay.github.io/platform-tutorials/dashmint-lab/ +:color: primary +:shadow: + +Try DashMint Lab live +``` + +[Read the walkthrough →](example-apps/dashmint-lab.md) +::: + +:::{grid-item-card} Dashnote +:img-top: example-apps/img/dashnote.png +:class-card: example-app-card + +Try a complete mutable-document workflow with note creation, queries, editing, deletion, and +read-only browsing. + +```{button-link} https://dashpay.github.io/platform-tutorials/dashnote/ +:color: primary +:shadow: + +Try Dashnote live +``` + +[Read the walkthrough →](example-apps/dashnote.md) +::: +:::: + If you are looking for a focused snippet for one SDK call, the per-operation tutorials under [Identities and names](identities-and-names.md) and [Contracts and documents](contracts-and-documents.md) are a better starting point. ```{toctree} :maxdepth: 2 :titlesonly: +:hidden: example-apps/dashmint-lab example-apps/dashnote diff --git a/docs/tutorials/example-apps/dashmint-lab.md b/docs/tutorials/example-apps/dashmint-lab.md index 5245391bb..c57bcee86 100644 --- a/docs/tutorials/example-apps/dashmint-lab.md +++ b/docs/tutorials/example-apps/dashmint-lab.md @@ -6,6 +6,13 @@ [DashMint Lab](https://dashpay.github.io/platform-tutorials/dashmint-lab/) is a React + TypeScript + Vite single-page app that exercises every Dash Platform NFT operation: mint, transfer, price, purchase, burn, and query. Minting is gated by a fixed-supply DashMint token, so the walkthrough also shows how token balances, token transfers, and token-paid document creation fit into a real UI. +```{button-link} https://dashpay.github.io/platform-tutorials/dashmint-lab/ +:color: primary +:shadow: + +Try DashMint Lab live +``` + ![DashMint Lab - Collection](./img/dashmint-collection.png) ## What this app does diff --git a/docs/tutorials/example-apps/dashnote.md b/docs/tutorials/example-apps/dashnote.md index 52e22a58a..19884fe1c 100644 --- a/docs/tutorials/example-apps/dashnote.md +++ b/docs/tutorials/example-apps/dashnote.md @@ -6,6 +6,13 @@ [Dashnote](https://dashpay.github.io/platform-tutorials/dashnote/) is a React + TypeScript + Vite single-page app that demonstrates full mutable-document CRUD on Dash Platform. Users log in with a BIP-39 mnemonic, create notes with an optional title and required message body, edit and delete their own notes, and browse any identity's notes in read-only mode without credentials. +```{button-link} https://dashpay.github.io/platform-tutorials/dashnote/ +:color: primary +:shadow: + +Try Dashnote live +``` + Where [DashMint Lab](dashmint-lab.md) covers the NFT-shaped operations (mint, transfer, price, purchase, burn), Dashnote covers the everyday document lifecycle: create, query, update, delete — plus the **fetch-then-bump-revision** pattern that every Platform document update has to follow. ![Dashnote](./img/dashnote.png) diff --git a/docs/tutorials/introduction.md b/docs/tutorials/introduction.md index 9b2756950..cb6804ea2 100644 --- a/docs/tutorials/introduction.md +++ b/docs/tutorials/introduction.md @@ -19,7 +19,7 @@ The tutorials in this section are written in JavaScript and use [Node.js](https: ## Quickstart :::{tip} -You can clone a repository containing the code for all tutorials from GitHub or download it as a [zip file](https://github.com/dashpay/platform-readme-tutorials/archive/refs/heads/main.zip). +You can clone a repository containing the code for all tutorials from GitHub or download it as a [zip file](https://github.com/dashpay/platform-readme-tutorials/archive/refs/heads/main.zip). Or, use the [Evo SDK playground](https://evo-sdk.dash.org/playground) to instantly experiment with tutorial queries -- no local setup required. ::: While going through each tutorial is advantageous, the subset of tutorials listed below get you from a start to storing data on Dash Platform most quickly: @@ -30,6 +30,10 @@ While going through each tutorial is advantageous, the subset of tutorials liste - [Registering a Data Contract](../tutorials/contracts-and-documents/register-a-data-contract.md) - [Submitting data](../tutorials/contracts-and-documents/submit-documents.md) +## Try it in the browser + +Visit the [Evo SDK site](https://evo-sdk.dash.org/) to run queries against live networks, experiment with the [code playground](https://evo-sdk.dash.org/playground), or view [SDK documentation](https://evo-sdk.dash.org/docs.html) and an AI reference. + ## Example apps For end-to-end walkthroughs of example apps built on the SDK, see: diff --git a/docs/tutorials/setup-sdk-client.md b/docs/tutorials/setup-sdk-client.md index c8cf004da..b01d38591 100644 --- a/docs/tutorials/setup-sdk-client.md +++ b/docs/tutorials/setup-sdk-client.md @@ -9,10 +9,12 @@ tutorials. ## Code -Save the following two modules side-by-side — setupDashClient-core.mjs and -setupDashClient.mjs — in the same directory. Later Node tutorials import from -`setupDashClient.mjs`; browser apps can import from `setupDashClient-core.mjs` -directly. +Save the following two modules side-by-side — setupDashClient-core.mjs and setupDashClient.mjs — in the same directory. Later Node tutorials import from +`setupDashClient.mjs`; browser apps can import from `setupDashClient-core.mjs` directly. :::{important} After saving, open `setupDashClient.mjs` (the wrapper) and set your mnemonic in