ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 19:55:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use filter for interactive tutorial steps

Browse Source
This commit is contained in:
mDuo13
2019-05-06 13:08:23 -07:00
parent 77a7093249
commit b2bfac86f1
5 changed files with 165 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal.css
View File

@@ -1009,7 +1009,7 @@ a.current {
margin: 5px; margin: 5px;
} }
.interactive-block-inner > button { .interactive-block-ui > button {
margin: 10px 0; margin: 10px 0;
} }

60
content/tutorials/use-simple-xrp-payments/monitor-incoming-payments-with-websocket.md
View File

@@ -57,37 +57,31 @@ const socket = new WebSocket('ws://localhost:6006')
Example: Example:
<div class="interactive-block" id="interactive-connect"> {{ start_step("Connect") }}
<div class="interactive-block-inner"> <button id="connect-button" class="btn btn-primary">Connect</button>
<div class="breadcrumbs-wrap"> <strong>Connection status:</strong>
<ul class="breadcrumb prereqs"> <span id="connection-status">Not connected</span>
<li class="breadcrumb-item disabled current bc-connect"><a href="#interactive-connect">Connect</a></li> <div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<!-- TODO: breadcrumb items for each step --> <h5>Console:</h5>
</ul><!--/.breadcrumb.prereqs--> <div class="ws-console" id="monitor-console-connect"><span class="placeholder">(Log is empty)</span></div>
</div><!--/.breadcrumbs-wrap--> {{ end_step() }}
<button id="connect-button" class="btn btn-primary">Connect</button>
<div>
<strong>Connection status:</strong>
<span id="connection-status">Not connected</span>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<h5>Console:</h5>
<div class="ws-console" id="monitor-console-connect"><span class="placeholder">(Log is empty)</span></div>
</div>
</div>
</div>
<script type="application/javascript"> <script type="application/javascript">
const socket = new WebSocket('wss://s1.ripple.com'); let socket;
socket.addEventListener('open', (event) => { $("#connect-button").click((event) => {
// This callback runs when the connection is open socket = new WebSocket('wss://s1.ripple.com')
writeToConsole("#monitor-console-connect", "Connected!") socket.addEventListener('open', (event) => {
const command = { // This callback runs when the connection is open
"id": "on_open_ping_1", writeToConsole("#monitor-console-connect", "Connected!")
"command": "ping" const command = {
} "id": "on_open_ping_1",
socket.send(JSON.stringify(command)) "command": "ping"
}) }
socket.addEventListener('message', (event) => { socket.send(JSON.stringify(command))
writeToConsole("#monitor-console-connect", "Got message from server: "+JSON.stringify(event.data)) })
socket.addEventListener('message', (event) => {
writeToConsole("#monitor-console-connect", "Got message from server: "+JSON.stringify(event.data))
})
}) })
</script> </script>
@@ -99,10 +93,14 @@ Since WebSocket connections can have several messages going each way and there i
- For any message that is a direct response to a request from the client side, the `type` is the string `response`. In this case, the server also provides an `id` field that matches the `id` provided in the request this is a response for. (This is important because responses may arrive out of order.) - For any message that is a direct response to a request from the client side, the `type` is the string `response`. In this case, the server also provides an `id` field that matches the `id` provided in the request this is a response for. (This is important because responses may arrive out of order.)
- For follow-up messages from [subscriptions](subscribe.html), the `type` indicates the type of follow-up message it is, such as the notification of an new transaction, ledger, or validation; or a follow-up to an ongoing [pathfinding request](path_find.html). Your client only receives these messages if it subscribes to them. - For follow-up messages from [subscriptions](subscribe.html), the `type` indicates the type of follow-up message it is, such as the notification of an new transaction, ledger, or validation; or a follow-up to an ongoing [pathfinding request](path_find.html). Your client only receives these messages if it subscribes to them.
{{ start_step("Handle Incoming Messages") }}
<h5>Handle Incoming Placeholder</h5>
{{ end_step() }}
## Footnotes ## Footnotes
1. <a id="footnote-1"></a> In practice, when calling an HTTP-based API multiple times, the client and server may reuse the same connection for several requests and responses. This practice is called [HTTP persistent connection, or keep-alive](https://en.wikipedia.org/wiki/HTTP_persistent_connection). From a development standpoint, the code to use an HTTP-based API is the same regardless of whether the underlying connection is new or reused. [1.](#from-footnote-1) <a id="footnote-1"></a> In practice, when calling an HTTP-based API multiple times, the client and server may reuse the same connection for several requests and responses. This practice is called [HTTP persistent connection, or keep-alive](https://en.wikipedia.org/wiki/HTTP_persistent_connection). From a development standpoint, the code to use an HTTP-based API is the same regardless of whether the underlying connection is new or reused.

186
content/tutorials/use-simple-xrp-payments/send-xrp.md
View File

@@ -12,27 +12,15 @@ This tutorial explains how to send a simple XRP Payment using RippleAPI for Java
- To send transactions in the XRP Ledger, you first need an address and secret key, and some XRP. You can get an address in the XRP Test Net with a supply of Test Net XRP using the following interface: - To send transactions in the XRP Ledger, you first need an address and secret key, and some XRP. You can get an address in the XRP Test Net with a supply of Test Net XRP using the following interface:
<div class="interactive-block test-net-inset" id="interactive-generate"> {{ start_step("Generate") }}
<div class="interactive-block-inner"> <button id="generate-creds-button" class="btn btn-primary">Generate credentials</button>
<div class="breadcrumbs-wrap"> <div id='loader-0' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<ul class="breadcrumb prereqs"> <div id='address'></div>
<li class="breadcrumb-item active current bc-generate"><a href="#interactive-generate">Generate</a></li> <div id='secret'></div>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li> <div id='balance'></div>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li> <div id="populate-creds-status"></div>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li> {{ end_step() }}
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="generate-creds-button" class="btn btn-primary">Generate credentials</button>
<div id='loader-0' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<div id='address'></div>
<div id='secret'></div>
<div id='balance'></div>
<div id="populate-creds-status"></div>
</div>
</div>
<script type="application/javascript"> <script type="application/javascript">
$(document).ready( () => { $(document).ready( () => {
@@ -122,27 +110,15 @@ api.connect()
For this tutorial, you can connect directly from your browser by pressing the following button: For this tutorial, you can connect directly from your browser by pressing the following button:
<div class="interactive-block" id="interactive-connect"> {{ start_step("Connect") }}
<div class="interactive-block-inner"> <button id="connect-button" class="btn btn-primary">Connect to TestNet</button>
<div class="breadcrumbs-wrap"> <div>
<ul class="breadcrumb prereqs"> <strong>Connection status:</strong>
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li> <span id="connection-status">Not connected</span>
<li class="breadcrumb-item disabled current bc-connect"><a href="#interactive-connect">Connect</a></li> <div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="connect-button" class="btn btn-primary">Connect to TestNet</button>
<div>
<strong>Connection status:</strong>
<span id="connection-status">Not connected</span>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
</div>
</div>
</div> </div>
{{ end_step() }}
<script type="application/javascript"> <script type="application/javascript">
api = new ripple.RippleAPI({server: 'wss://s.altnet.rippletest.net:51233'}) api = new ripple.RippleAPI({server: 'wss://s.altnet.rippletest.net:51233'})
api.on('connected', () => { api.on('connected', () => {
@@ -216,25 +192,13 @@ async function doPrepare() {
txJSON = doPrepare() txJSON = doPrepare()
``` ```
<div class="interactive-block" id="interactive-prepare"> {{ start_step("Prepare") }}
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled current bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="prepare-button" class="btn btn-primary connection-required" <button id="prepare-button" class="btn btn-primary connection-required"
title="Connect to Test Net first" disabled>Prepare title="Connect to Test Net first" disabled>Prepare
example transaction</button> example transaction</button>
<div id="prepare-output"></div> <div id="prepare-output"></div>
</div> {{ end_step() }}
</div>
<script type="application/javascript"> <script type="application/javascript">
$("#prepare-button").click( async function() { $("#prepare-button").click( async function() {
// Wipe existing results // Wipe existing results
@@ -290,25 +254,13 @@ The result of the signing operation is a transaction object containing a signatu
The signing API also returns the transaction's ID, or identifying hash, which you can use to look up the transaction later. This is a 64-character hexadecimal string that is unique to this transaction. The signing API also returns the transaction's ID, or identifying hash, which you can use to look up the transaction later. This is a 64-character hexadecimal string that is unique to this transaction.
<div class="interactive-block" id="interactive-sign"> {{ start_step("Sign") }}
<div class="interactive-block-inner"> <button id="sign-button" class="btn btn-primary connection-required"
<div class="breadcrumbs-wrap"> title="Complete all previous steps first" disabled>Sign
<ul class="breadcrumb prereqs"> example transaction</button>
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li> <div id="sign-output"></div>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li> {{ end_step() }}
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled current bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="sign-button" class="btn btn-primary connection-required"
title="Complete all previous steps first" disabled>Sign
example transaction</button>
<div id="sign-output"></div>
</div>
</div>
<script type="application/javascript"> <script type="application/javascript">
$("#sign-button").click( function() { $("#sign-button").click( function() {
// Wipe previous output // Wipe previous output
@@ -377,26 +329,14 @@ If you see any other result, you should check the following:
See the full list of [transaction results](transaction-results.html) for more possibilities. See the full list of [transaction results](transaction-results.html) for more possibilities.
<div class="interactive-block" id="interactive-submit"> {{ start_step("Submit") }}
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb prereqs">
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled current bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="submit-button" class="btn btn-primary connection-required" <button id="submit-button" class="btn btn-primary connection-required"
title="Connection to Test Net required" disabled>Submit title="Connection to Test Net required" disabled>Submit
example transaction</button> example transaction</button>
<div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div> <div id='loader-{{n.current}}' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"></div>
<div id="submit-output"></div> <div id="submit-output"></div>
</div> {{ end_step() }}
</div>
<script type="application/javascript"> <script type="application/javascript">
$("#submit-button").click( async function() { $("#submit-button").click( async function() {
$("#submit-output").html("") // Wipe previous output $("#submit-output").html("") // Wipe previous output
@@ -445,35 +385,23 @@ api.on('ledger', ledger => {
}) })
``` ```
<div class="interactive-block" id="interactive-wait"> {{ start_step("Wait") }}
<div class="interactive-block-inner"> <table>
<div class="breadcrumbs-wrap"> <tr>
<ul class="breadcrumb prereqs"> <th>Latest Validated Ledger Version:</th>
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li> <td id="current-ledger-version">(Not connected)</td>
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li> </tr>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled current bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<table>
<tr> <tr>
<th>Latest Validated Ledger Version:</th> <th>Ledger Version at Time of Submission:</th>
<td id="current-ledger-version">(Not connected)</td> <td id="earliest-ledger-version">(Not submitted)</td>
</tr> </tr>
<tr> <tr>
<th>Ledger Version at Time of Submission:</th> <th>Transaction LastLedgerSequence:</th>
<td id="earliest-ledger-version">(Not submitted)</td> <td id="tx-lls"></td>
</tr> </tr>
<tr> </table>
<th>Transaction LastLedgerSequence:</th> {{ end_step() }}
<td id="tx-lls"></td>
</tr>
</table>
</div>
</div>
<script type="application/javascript"> <script type="application/javascript">
api.on('ledger', ledger => { api.on('ledger', ledger => {
$("#current-ledger-version").text(ledger.ledgerVersion) $("#current-ledger-version").text(ledger.ledgerVersion)
@@ -512,24 +440,12 @@ The RippleAPI `getTransaction()` method only returns success if the transaction
**Caution:** Other APIs may return tentative results from ledger versions that have not yet been validated. For example, if you use the `rippled` APIs' [tx method][], be sure to look for `"validated": true` in the response to confirm that the data comes from a validated ledger version. Transaction results that are not from a validated ledger version are subject to change. For more information, see [Finality of Results](finality-of-results.html). **Caution:** Other APIs may return tentative results from ledger versions that have not yet been validated. For example, if you use the `rippled` APIs' [tx method][], be sure to look for `"validated": true` in the response to confirm that the data comes from a validated ledger version. Transaction results that are not from a validated ledger version are subject to change. For more information, see [Finality of Results](finality-of-results.html).
<div class="interactive-block" id="interactive-check"> {{ start_step("Check") }}
<div class="interactive-block-inner"> <button id="get-tx-button" class="btn btn-primary connection-required"
<div class="breadcrumbs-wrap"> title="Connection to Test Net required" disabled>Check transaction status</button>
<ul class="breadcrumb prereqs"> <div id="get-tx-output"></div>
<li class="breadcrumb-item active bc-generate"><a href="#interactive-generate">Generate</a></li> {{ end_step() }}
<li class="breadcrumb-item disabled bc-connect"><a href="#interactive-connect">Connect</a></li>
<li class="breadcrumb-item disabled bc-prepare"><a href="#interactive-prepare">Prepare</a></li>
<li class="breadcrumb-item disabled bc-sign"><a href="#interactive-sign">Sign</a></li>
<li class="breadcrumb-item disabled bc-submit"><a href="#interactive-submit">Submit</a></li>
<li class="breadcrumb-item disabled bc-wait"><a href="#interactive-wait">Wait</a></li>
<li class="breadcrumb-item disabled current bc-check"><a href="#interactive-check">Check</a></li>
</ul><!--/.breadcrumb.prereqs-->
</div><!--/.breadcrumbs-wrap-->
<button id="get-tx-button" class="btn btn-primary connection-required"
title="Connection to Test Net required" disabled>Check transaction status</button>
<div id="get-tx-output"></div>
</div>
</div>
<script type="application/javascript"> <script type="application/javascript">
$("#get-tx-button").click( async function() { $("#get-tx-button").click( async function() {
// Wipe previous output // Wipe previous output

4
dactyl-config.yml
View File

@@ -679,6 +679,8 @@ pages:
doc_type: Tutorials doc_type: Tutorials
category: Use Simple XRP Payments category: Use Simple XRP Payments
blurb: Test out sending XRP using the XRP Test Net. blurb: Test out sending XRP using the XRP Test Net.
filters:
- interactive_steps
targets: targets:
- local - local
@@ -688,6 +690,8 @@ pages:
doc_type: Tutorials doc_type: Tutorials
category: Use Simple XRP Payments category: Use Simple XRP Payments
blurb: See how to actively monitor for new XRP payments (and transaction of other types). blurb: See how to actively monitor for new XRP payments (and transaction of other types).
filters:
- interactive_steps
targets: targets:
- local - local

80
tool/filter_interactive_steps.py Normal file
View File

@@ -0,0 +1,80 @@
################################################
## Interactive Steps Helper
## Author: Rome Reginelli
## Copyright: Ripple Labs, 2019
##
## Automates the process of building wrappers and breadcrumbs for interactive
## blocks in tutorials that have several interactive steps in order.
################################################
import re
def slugify(s):
unacceptable_chars = re.compile(r"[^A-Za-z0-9._ ]+")
whitespace_regex = re.compile(r"\s+")
s = re.sub(unacceptable_chars, "", s)
s = re.sub(whitespace_regex, "_", s)
s = s.lower()
if not s:
s = "_"
return s
def start_step(step_label):
"""Generates the HTML for the start of a step, including breadcrumbs"""
if '"' in step_label:
raise ValueError("step_label must not contain \" characters")
step_id = slugify(step_label)
out_html = """
<div class="interactive-block" id="interactive-{step_id}">
<div class="interactive-block-inner">
<div class="breadcrumbs-wrap">
<ul class="breadcrumb tutorial-step-crumbs" id="bc-ul-{step_id}" data-steplabel="{step_label}" data-stepid="{step_id}">
</ul><!--/.breadcrumb.tutorial-step-crumbs-->
</div><!--/.breadcrumbs-wrap-->
<div class="interactive-block-ui">
""".format(step_id=step_id, step_label=step_label)
return out_html
def end_step():
"""Generates the HTML for the end of a step, including breadcrumbs"""
return " </div><!--/.interactive-block-ui-->\n </div><!--/.interactive-block-inner-->\n</div><!--/.interactive-block-->"
def filter_soup(soup, **kwargs):
"""Add steps to each tutorial-step-crumbs element based on the total steps
in the document. Each step results in a li element such as:
<li class="breadcrumb-item disabled current bc-connect">
<a href="#interactive-connect">Connect</a>
</li>"""
crumb_uls = soup.find_all(class_="tutorial-step-crumbs")
steps = [(el.attrs["data-stepid"], el.attrs["data-steplabel"]) for el in crumb_uls]
def add_lis(parent_ul, steps, current_step_id):
i = 0
for step_id, step_label in steps:
li = soup.new_tag("li")
li_classes = ["breadcrumb-item", "bc-{step_id}".format(step_id=step_id)]
if i > 0:
li_classes.append("disabled") # Steps get enabled in order by JS
if step_id == current_step_id:
li_classes.append("current")
li.attrs['class'] = li_classes
li_a = soup.new_tag("a", href="#interactive-{step_id}".format(step_id=step_id))
li_a.append(step_label)
li.append(li_a)
parent_ul.append(li)
i += 1
for ul in crumb_uls:
ul_step_id = ul.attrs["data-stepid"]
add_lis(ul, steps, ul_step_id)
export = {
"start_step": start_step,
"end_step": end_step
}