Merge pull request #1258 from jakeatdocforce/code_samples_page_mduo13

Code samples page expanding on mduo13 work

assets/img/logos/cli.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="144.77597"
+   height="113.576"
+   viewBox="0 0 38.305308 30.050315"
+   version="1.1"
+   id="svg832"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="cli.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview834"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     fit-margin-top="20"
+     fit-margin-left="20"
+     fit-margin-right="20"
+     fit-margin-bottom="20"
+     units="px"
+     inkscape:zoom="0.5"
+     inkscape:cx="279"
+     inkscape:cy="26"
+     inkscape:window-width="1920"
+     inkscape:window-height="1047"
+     inkscape:window-x="3000"
+     inkscape:window-y="840"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs829" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-31.491723,-141.29313)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;line-height:0;font-family:'Source Han Sans';-inkscape-font-specification:'Source Han Sans';letter-spacing:0px;word-spacing:0px;fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="35.950481"
+       y="162.18568"
+       id="text3799"><tspan
+         sodipodi:role="line"
+         id="tspan3797"
+         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:25.4px;font-family:'Source Han Sans';-inkscape-font-specification:'Source Han Sans Semi-Bold';fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px"
+         x="35.950481"
+         y="162.18568">&gt;_</tspan></text>
+  </g>
+</svg>

assets/img/logos/golang.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 205.4 76.7" style="enable-background:new 0 0 205.4 76.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00ACD7;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M15.5,23.2c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5h35.7c0.4,0,0.5,0.3,0.3,0.6l-1.7,2.6
+					c-0.2,0.3-0.7,0.6-1,0.6L15.5,23.2z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M0.4,32.4c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5h45.6c0.4,0,0.6,0.3,0.5,0.6l-0.8,2.4
+					c-0.1,0.4-0.5,0.6-0.9,0.6L0.4,32.4z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M24.6,41.6c-0.4,0-0.5-0.3-0.3-0.6l1.4-2.5c0.2-0.3,0.6-0.6,1-0.6h20c0.4,0,0.6,0.3,0.6,0.7L47.1,41
+					c0,0.4-0.4,0.7-0.7,0.7L24.6,41.6z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g id="CXHf1q_3_">
+			<g>
+				<g>
+					<path class="st0" d="M128.4,21.4c-6.3,1.6-10.6,2.8-16.8,4.4c-1.5,0.4-1.6,0.5-2.9-1c-1.5-1.7-2.6-2.8-4.7-3.8
+						c-6.3-3.1-12.4-2.2-18.1,1.5c-6.8,4.4-10.3,10.9-10.2,19c0.1,8,5.6,14.6,13.5,15.7c6.8,0.9,12.5-1.5,17-6.6
+						c0.9-1.1,1.7-2.3,2.7-3.7c-3.6,0-8.1,0-19.3,0c-2.1,0-2.6-1.3-1.9-3c1.3-3.1,3.7-8.3,5.1-10.9c0.3-0.6,1-1.6,2.5-1.6
+						c5.1,0,23.9,0,36.4,0c-0.2,2.7-0.2,5.4-0.6,8.1c-1.1,7.2-3.8,13.8-8.2,19.6c-7.2,9.5-16.6,15.4-28.5,17
+						c-9.8,1.3-18.9-0.6-26.9-6.6c-7.4-5.6-11.6-13-12.7-22.2c-1.3-10.9,1.9-20.7,8.5-29.3c7.1-9.3,16.5-15.2,28-17.3
+						c9.4-1.7,18.4-0.6,26.5,4.9c5.3,3.5,9.1,8.3,11.6,14.1C130,20.6,129.6,21.1,128.4,21.4z"/>
+				</g>
+				<g>
+					<path class="st0" d="M161.5,76.7c-9.1-0.2-17.4-2.8-24.4-8.8c-5.9-5.1-9.6-11.6-10.8-19.3c-1.8-11.3,1.3-21.3,8.1-30.2
+						c7.3-9.6,16.1-14.6,28-16.7c10.2-1.8,19.8-0.8,28.5,5.1c7.9,5.4,12.8,12.7,14.1,22.3c1.7,13.5-2.2,24.5-11.5,33.9
+						c-6.6,6.7-14.7,10.9-24,12.8C166.8,76.3,164.1,76.4,161.5,76.7z M185.3,36.3c-0.1-1.3-0.1-2.3-0.3-3.3
+						c-1.8-9.9-10.9-15.5-20.4-13.3c-9.3,2.1-15.3,8-17.5,17.4c-1.8,7.8,2,15.7,9.2,18.9c5.5,2.4,11,2.1,16.3-0.6
+						C180.5,51.3,184.8,44.9,185.3,36.3z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

assets/js/code-samples.js

@@ -0,0 +1,18 @@
+$(document).ready(() => {
+  $(".single_lang input").change((event) => {
+    const lang = $(event.target).val()
+    const lang_checked = $(event.target).prop("checked")
+
+    if (lang_checked) {
+      // Enabling a language
+      //$("#input_all").prop("checked", false)
+      $("#code_samples_list .card").hide()
+      $(`#code_samples_list .card.lang_${lang}`).show()
+    }
+    // Disabling a language? Let the other element's handler do it
+  })
+  $("#input_all").change((event) => {
+    const lang = $(event.target).val()
+    $("#code_samples_list .card").show()
+  })
+})

content/_code-samples/address_encoding/README.md

@@ -0,0 +1,3 @@
+# Address Encoding
+
+Encode XRP Ledger addresses in base58. (This reference implementation is equivalent to the ones included in most client libraries.)

content/_code-samples/build-a-wallet/README.md

@@ -0,0 +1,3 @@
+# Build a Wallet
+
+Implement a non-custodial wallet application that can check an account's balances, send XRP, and notify when the account receives incoming transactions.

content/_code-samples/checks/README.md

@@ -0,0 +1,3 @@
+# Use Checks
+
+Create, cash, and cancel Checks for exact or flexible amounts.

content/_code-samples/escrow/README.md

@@ -0,0 +1,5 @@
+# Escrows
+
+Create, finish, and cancel [Escrows](https://xrpl.org/escrow.html) using conditional or time-based release.
+
+Examples from the [Escrow Tutorials](https://xrpl.org/use-escrows.html).

content/_code-samples/freeze/README.md

@@ -0,0 +1,5 @@
+# Freezes
+
+Freeze and unfreeze issued tokens, check freeze status, or give up the ability to freeze tokens.
+
+Examples from the [Freeze tutorials](https://xrpl.org/use-tokens.html).

content/_code-samples/get-started/README.md

@@ -0,0 +1,9 @@
+# Introductory Code Samples
+
+Connect to the XRP Ledger and query it for data.
+
+For more context, see the Get Started tutorial for your preferred language:
+
+- [Python](https://xrpl.org/get-started-using-python.html)
+- [Java](https://xrpl.org/get-started-using-java.html)
+- [JavaScript](https://xrpl.org/get-started-using-javascript.html)

content/_code-samples/issue-a-token/README.md

@@ -0,0 +1,5 @@
+# Issue a Fungible Token
+
+Configure issuer settings and issue fungible tokens to another account.
+
+For an interactive tutorial demonstrating the function of these code samples, see [Issue a Fungible Token](https://xrpl.org/issue-a-fungible-token.html).

content/_code-samples/key-derivation/README.md

@@ -0,0 +1,5 @@
+# Cryptographic Key Derivation
+
+Derive secp256k1 or Ed25519 key pairs from seeds in any of the XRP Ledger's encodings and formats. (This implementation is equivalent to the ones included in most client libraries.)
+
+For background and diagrams, see [Key Derivation](https://xrpl.org/cryptographic-keys.html#key-derivation).

content/_code-samples/monitor-payments-websocket/README.md

@@ -0,0 +1,3 @@
+# Monitor Incoming Payments with WebSocket
+
+Use the WebSocket protocol to watch for incoming payments to an XRP Ledger address, _without_ using a client library.

content/_code-samples/monitor-payments-websocket/go/monitor-incoming-payments.go

@@ -0,0 +1,97 @@
+package main
+
+// Connect to the XRPL Ledger using websocket and subscribe to an account
+// translation from the JavaScript example to Go
+// https://xrpl.org/monitor-incoming-payments-with-websocket.html
+// This example uses the Gorilla websocket library to create a websocket client
+// install: go get github.com/gorilla/websocket
+
+import (
+	"encoding/json"
+	"flag"
+	"log"
+	"net/url"
+	"os"
+	"os/signal"
+	"time"
+
+	"github.com/gorilla/websocket"
+)
+
+// websocket address
+var addr = flag.String("addr", "s.altnet.rippletest.net:51233", "http service address")
+
+// Payload object
+type message struct {
+	Command  string   `json:"command"`
+	Accounts []string `json:"accounts"`
+}
+
+func main() {
+	flag.Parse()
+	log.SetFlags(0)
+
+	var m message
+
+	// check for interrupts and cleanly close the connection
+	interrupt := make(chan os.Signal, 1)
+	signal.Notify(interrupt, os.Interrupt)
+
+	u := url.URL{Scheme: "ws", Host: *addr, Path: "/"}
+	log.Printf("connecting to %s", u.String())
+
+	// make the connection
+	c, _, err := websocket.DefaultDialer.Dial(u.String(), nil)
+	if err != nil {
+		log.Fatal("dial:", err)
+	}
+	// on exit close
+	defer c.Close()
+
+	done := make(chan struct{})
+
+	// send a subscribe command and a target XRPL account
+	m.Command = "subscribe"
+	m.Accounts = append(m.Accounts, "rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM")
+
+	// struct to JSON marshalling
+	msg, _ := json.Marshal(m)
+	// write to the websocket
+	err = c.WriteMessage(websocket.TextMessage, []byte(string(msg)))
+	if err != nil {
+		log.Println("write:", err)
+		return
+	}
+
+	// read from the websocket
+	_, message, err := c.ReadMessage()
+	if err != nil {
+		log.Println("read:", err)
+		return
+	}
+	// print the response from the XRP Ledger
+	log.Printf("recv: %s", message)
+
+	// handle interrupt
+	for {
+		select {
+		case <-done:
+			return
+		case <-interrupt:
+			log.Println("interrupt")
+
+			// Cleanly close the connection by sending a close message and then
+			// waiting (with timeout) for the server to close the connection.
+			err := c.WriteMessage(websocket.CloseMessage, websocket.FormatCloseMessage(websocket.CloseNormalClosure, ""))
+			if err != nil {
+				log.Println("write close:", err)
+				return
+			}
+			select {
+			case <-done:
+			case <-time.After(time.Second):
+			}
+			return
+		}
+	}
+}

content/_code-samples/nftoken-tester/README.md

@@ -0,0 +1,3 @@
+# NFToken Test Harness
+
+Build an interface that can mint and trade non-fungible tokens (NFTs) on the NFT-Devnet.

content/_code-samples/quickstart/README.md

@@ -1,20 +1,5 @@
 # Quickstart Samples Archive
 
-This folder contains the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive, which includes 4 iterative HTML pages as a test harness for XRPL features, with accompanying JavaScript files. The archive includes the following files:
+Create a test harness for XRPL features using 4 iterative HTML pages and accompanying JavaScript files.
 
-1.get-accounts-send--xrp.html
-
-2.create-trustline-send-currency.html
-
-3.mint-nfts.html
-
-4.transfer-nfts.html
-
-
-ripplex1-send-xrp.js
-
-ripplex2-send-currency.js
-
-ripplex3-mint-nfts.js
-
-ripplex4-transfer-nfts.js
+Get up and running with the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive, which includes 4 iterative HTML pages as a test harness for XRPL features, with accompanying JavaScript files. For the full explanation, see the [XRPL Quickstart Tutorial](https://xrpl.org/xrpl-quickstart.html).

content/_code-samples/require-destination-tags/README.md

@@ -1,5 +1,5 @@
-# Require Destination Tags Sample Code
+# Require Destination Tags
 
-This code demonstrates how to configure your XRP Ledger account to require destination tags. For a detailed explanation, see <https://xrpl.org/require-destination-tags.html>.
+Require incoming payments to specify a [Destination Tag](https://xrpl.org/source-and-destination-tags.html) so you know whom to credit.
 
-The code is designed to run in-browser by loading `demo.html` and watching the console output or in Node.js. For Node.js, you must first install the dependencies using your preferred package manager (such as `yarn` or `npm`).
+Examples from the [Require Destination Tags tutorial](https://xrpl.org/require-destination-tags.html).

content/_code-samples/require-destination-tags/js/README.md

@@ -0,0 +1,5 @@
+# Require Destination Tags Sample Code
+
+This code demonstrates how to configure your XRP Ledger account to require destination tags. For a detailed explanation, see <https://xrpl.org/require-destination-tags.html>.
+
+The code is designed to run in-browser by loading `demo.html` and watching the console output or in Node.js. For Node.js, you must first install the dependencies using your preferred package manager (such as `yarn` or `npm`).

content/_code-samples/secure-signing/README.md

@@ -0,0 +1,5 @@
+# Secure Signing
+
+Sign transactions from the security of your own machine.
+
+For more information and more options, see [Set Up Secure Signing](https://xrpl.org/set-up-secure-signing.html).

content/_code-samples/send-xrp/README.md

@@ -0,0 +1,5 @@
+# Send XRP
+
+Send a direct XRP payment to another account in the XRP Ledger.
+
+Examples from the interactive [Send XRP tutorial](https://xrpl.org/send-xrp.html).

content/_code-samples/submit-and-verify/README.md

@@ -1,8 +1,11 @@
 # Submit and Verify
 
-Example JavaScript code using ripple-lib to submit a signed transaction blob and wait until it has a final result.
+Submit a signed transaction blob and wait until it has a final result.
 
-Example usage:
+- [submit-and-verify.js](js/submit-and-verify.js): ripple-lib 1.x version.
+- [submit-and-verify2.js](js/submit-and-verify2.js): xrpl.js 2.x version. Unlike the submitAndWait() method built into xrpl.js, this checks the server's available history and returns a different code when the transaction's status is unknowable with the server's available history versus if the transaction was _definitely_ not confirmed by consensus.
+
+Example usage (ripple-lib 1.x):
 
 ```js
 // example testnet creds. Don't use for real

content/_code-samples/tx-serialization/README.md

@@ -0,0 +1,5 @@
+# Transaction Serialization
+
+Convert transactions and other XRPL data from JSON to their canonical binary format for signing or cryptographic verification. (This reference implementation is equivalent to the ones included in most client libraries.)
+
+For a detailed explanation, see [Serialization](https://xrpl.org/serialization.html).

content/_code-samples/use-tickets/README.md

@@ -0,0 +1,5 @@
+# Tickets
+
+Create a Ticket and use it to send a transaction out of the usual Sequence order.
+
+For more context, see the interactive [Use Tickets tutorial](https://xrpl.org/use-tickets.html).

content/references/protocol-reference/serialization.ja.md

@@ -45,13 +45,13 @@ curated_anchors:
 **JSON:**
 
 ```json
-{% include '_code-samples/tx-serialization/test-cases/tx1.json' %}
+{% include '_code-samples/tx-serialization/py/test-cases/tx1.json' %}
 ```
 
 **バイナリ（16進数として表現）:**
 
 ```text
-{% include '_code-samples/tx-serialization/test-cases/tx1-binary.txt' %}
+{% include '_code-samples/tx-serialization/py/test-cases/tx1-binary.txt' %}
 ```
 
 ## サンプルコード
@@ -60,7 +60,7 @@ curated_anchors:
 
 - C++: [`rippled`コードベース](https://github.com/ripple/rippled/blob/develop/src/ripple/protocol/impl/STObject.cpp)
 - JavaScript: [`ripple-binary-codec`](https://github.com/ripple/ripple-binary-codec/)パッケージ
-- Python 3: [このリポジトリのコードサンプルセクション]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_code-samples/tx-serialization/serialize.py)
+- Python 3: [このリポジトリのコードサンプルセクション]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_code-samples/tx-serialization/)
 
 これらのすべての実装には、一般利用が可能なオープンソースライセンスが提供されているので、学習のためにドキュメントと合わせて使用するだけでなく、必要に応じてコードをインポート、使用、または変更することができます。
 

content/references/protocol-reference/serialization.md

@@ -45,13 +45,13 @@ Both signed and unsigned transactions can be represented in both JSON and binary
 **JSON:**
 
 ```json
-{% include '_code-samples/tx-serialization/test-cases/tx1.json' %}
+{% include '_code-samples/tx-serialization/py/test-cases/tx1.json' %}
 ```
 
 **Binary (represented as hexadecimal):**
 
 ```text
-{% include '_code-samples/tx-serialization/test-cases/tx1-binary.txt' %}
+{% include '_code-samples/tx-serialization/py/test-cases/tx1-binary.txt' %}
 ```
 
 ## Sample Code
@@ -60,7 +60,7 @@ The serialization processes described here are implemented in multiple places an
 
 - In C++ [in the `rippled` code base](https://github.com/ripple/rippled/blob/develop/src/ripple/protocol/impl/STObject.cpp).
 - In JavaScript in the [`ripple-binary-codec`](https://github.com/ripple/ripple-binary-codec/) package.
-- In Python 3 in [this repository's code samples section]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_code-samples/tx-serialization/serialize.py).
+- In Python 3 in [this repository's code samples section]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_code-samples/tx-serialization/).
 
 Additionally, many [client libraries](client-libraries.html) provide serialization support under permissive open-source licenses, so you can import, use, or adapt the code for your needs.
 

content/references/protocol-reference/transactions/transaction-metadata.md

@@ -20,7 +20,7 @@ Some fields that may appear in transaction metadata include:
 The following JSON object shows the metadata for [a complex cross-currency payment](https://xrpcharts.ripple.com/#/transactions/8C55AFC2A2AA42B5CE624AEECDB3ACFDD1E5379D4E5BF74A8460C5E97EF8706B):
 
 ```json
-{% include '_code-samples/metadata/cross-currency-payment.json' %}
+{% include '_api-examples/metadata/cross-currency-payment.json' %}
 ```
 
 ## AffectedNodes

content/references/rippled-api/commandline-usage.ja.md

@@ -84,7 +84,7 @@ rippled -a [OPTIONS]
 | オプション                | 説明                                          |
 |:----------------------|:-----------------------------------------------------|
 | `--ledger {LEDGER}`   | `{LEDGER}`（レジャーハッシュまたはレジャーインデックス）により初期レジャーと識別されているレジャーバージョンを読み込みます。指定されたレジャーバージョンは、サーバーのレジャーストアーに格納される必要があります。 |
-| `--ledgerfile {FILE}` | 指定された`{FILE}`からレジャーバージョンを読み込みます（このファイルには完全なレジャーがJSONフォーマットで格納されている必要があります）。このようなファイルの例については、付属の[`ledger-file.json`]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_code-samples/rippled-cli/ledger-file.json)を参照してください。 |
+| `--ledgerfile {FILE}` | 指定された`{FILE}`からレジャーバージョンを読み込みます（このファイルには完全なレジャーがJSONフォーマットで格納されている必要があります）。このようなファイルの例については、付属の[`ledger-file.json`]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_api-examples/rippled-cli/ledger-file.json)を参照してください。 |
 | `--load`              | **廃止予定** デバッグのためのオプションです。ディスク上のレジャーストアーから初期レジャーを読み込むだけです。 |
 | `--replay`            | デバッグのためのオプションです。`--ledger`と組み合わせて使用し、レジャーの閉鎖をリプレイします。サーバーのレジャーストアーには、当該レジャーとその直前のバージョンのレジャーがすでに格納されている必要があります。サーバーでは、前のレジャーをベースとして使用して、指定されたレジャーのすべてのトランザクションが処理されます。その結果、指定されたレジャーが再作成されます。デバッガーを使用して、特定のトランザクションの処理ロジックを分析するためのブレークポイントを追加できます。 |
 | `--start`             | デバッグのためのオプションです。既知のすべてのAmendment（反対票を投じるようにサーバーに設定されているAmendmentを除く）が適用されている新しいジェネシスレジャーを使用して開始します。したがってこれらのAmendmentの機能は、2週間の[Amendmentプロセス](amendments.html)期間ではなく、2番目のレジャーの開始時から使用可能になります。 |

content/references/rippled-api/commandline-usage.md

@@ -83,7 +83,7 @@ The following options determine which ledger to load first when starting up. The
 | Option                | Description                                          |
 |:----------------------|:-----------------------------------------------------|
 | `--ledger {LEDGER}`   | Load the ledger version identified by `{LEDGER}` (either a ledger hash or a ledger index) as the initial ledger. The specified ledger version must be in the server's ledger store. |
-| `--ledgerfile {FILE}` | Load the ledger version from the specified `{FILE}`, which must contain a complete ledger in JSON format. For an example of such a file, see the provided [`ledger-file.json`]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_code-samples/rippled-cli/ledger-file.json). |
+| `--ledgerfile {FILE}` | Load the ledger version from the specified `{FILE}`, which must contain a complete ledger in JSON format. For an example of such a file, see the provided [`ledger-file.json`]({{target.github_forkurl}}/blob/{{target.github_branch}}/content/_api-examples/rippled-cli/ledger-file.json). |
 | `--load`              | **DEPRECATED** Intended for debugging. Only load the initial ledger from the ledger store on disk. |
 | `--replay`            | Intended for debugging. Use with `--ledger` to replay a ledger close. Your server must have the ledger in question and its direct ancestor already in the ledger store. Using the previous ledger as a base, the server processes all the transactions in the specified ledger, resulting in a re-creation of the specified ledger. With a debugger, you can add breakpoints to analyze specific transaction processing logic. |
 | `--start`             | Intended for debugging. Start with a new genesis ledger that has all known amendments (except those the server is configured to vote against) enabled. The functionality of those amendments is therefore available starting from the second ledger, rather than going through the full two-week [Amendment Process](amendments.html). |

content/references/rippled-api/peer-port-methods/peer-crawler.md

@@ -76,7 +76,7 @@ Response:
 ```json
 200 OK
 
-{% include '_code-samples/peer-crawler/crawl.json' %}
+{% include '_api-examples/peer-crawler/crawl.json' %}
 ```
 
 

content/references/rippled-api/peer-port-methods/validator-list.md

@@ -87,7 +87,7 @@ Each member of the `validators` array has the following fields:
 #### Example Decoded Blob
 
 ```json
-{% include '_code-samples/vl/vl-blob.json' %}
+{% include '_api-examples/vl/vl-blob.json' %}
 ```
 
 ## Example
@@ -115,7 +115,7 @@ Response:
 ```json
 200 OK
 
-{% include '_code-samples/vl/vl.json' %}
+{% include '_api-examples/vl/vl.json' %}
 ```
 
 

content/tutorials/get-started/monitor-incoming-payments-with-websocket.ja.md

@@ -363,7 +363,7 @@ WS_HANDLERS["transaction"] = log_tx
 以下のサンプルコードは、上に示したすべてのトランザクションのタイプのトランザクションメタデータを確認し、アカウントが受け取ったXRPの金額をレポートします。
 
 ```js
-{% include '_code-samples/monitor-payments-websocket/read-amount-received.js' %}
+{% include '_code-samples/monitor-payments-websocket/js/read-amount-received.js' %}
 ```
 
 {{ start_step("Read Payments") }}
@@ -480,106 +480,10 @@ $("#tx_read").click((event) => {
 
 <!-- MULTICODE_BLOCK_START -->
 
-*Go*
+_Go_
 
 ```go
-package main
-
-// Connect to the XRPL Ledger using websocket and subscribe to an account
-// translation from the JavaScript example to Go
-// https://developers.ripple.com/monitor-incoming-payments-with-websocket.html
-// This example uses the Gorilla websocket library to create a websocket client
-// install: go get github.com/gorilla/websocket
-
-import (
-	"encoding/json"
-	"flag"
-	"log"
-	"net/url"
-	"os"
-	"os/signal"
-	"time"
-
-	"github.com/gorilla/websocket"
-)
-
-// websocket address
-var addr = flag.String("addr", "s.altnet.rippletest.net:51233", "http service address")
-
-// Payload object
-type message struct {
-	Command  string   `json:"command"`
-	Accounts []string `json:"accounts"`
-}
-
-func main() {
-	flag.Parse()
-	log.SetFlags(0)
-
-	var m message
-
-	// check for interrupts and cleanly close the connection
-	interrupt := make(chan os.Signal, 1)
-	signal.Notify(interrupt, os.Interrupt)
-
-	u := url.URL{Scheme: "ws", Host: *addr, Path: "/"}
-	log.Printf("connecting to %s", u.String())
-
-	// make the connection
-	c, _, err := websocket.DefaultDialer.Dial(u.String(), nil)
-	if err != nil {
-		log.Fatal("dial:", err)
-	}
-	// on exit close
-	defer c.Close()
-
-	done := make(chan struct{})
-
-	// send a subscribe command and a target XRPL account
-	m.Command = "subscribe"
-	m.Accounts = append(m.Accounts, "rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM")
-
-	// struct to JSON marshalling
-	msg, _ := json.Marshal(m)
-	// write to the websocket
-	err = c.WriteMessage(websocket.TextMessage, []byte(string(msg)))
-	if err != nil {
-		log.Println("write:", err)
-		return
-	}
-
-	// read from the websocket
-	_, message, err := c.ReadMessage()
-	if err != nil {
-		log.Println("read:", err)
-		return
-	}
-	// print the response from the XRP Ledger
-	log.Printf("recv: %s", message)
-
-	// handle interrupt
-	for {
-		select {
-		case <-done:
-			return
-		case <-interrupt:
-			log.Println("interrupt")
-
-			// Cleanly close the connection by sending a close message and then
-			// waiting (with timeout) for the server to close the connection.
-			err := c.WriteMessage(websocket.CloseMessage, websocket.FormatCloseMessage(websocket.CloseNormalClosure, ""))
-			if err != nil {
-				log.Println("write close:", err)
-				return
-			}
-			select {
-			case <-done:
-			case <-time.After(time.Second):
-			}
-			return
-		}
-	}
-}
+{% include '_code-samples/monitor-payments-websocket/go/monitor-incoming-payments.go' %}
 ```
 
 <!-- MULTICODE_BLOCK_END -->

content/tutorials/get-started/monitor-incoming-payments-with-websocket.md

@@ -358,7 +358,7 @@ When you subscribe to an account, you get messages for _all transactions to or f
 The following sample code looks at transaction metadata of all the above transaction types to report how much XRP an account received:
 
 ```js
-{% include '_code-samples/monitor-payments-websocket/read-amount-received.js' %}
+{% include '_code-samples/monitor-payments-websocket/js/read-amount-received.js' %}
 ```
 
 {{ start_step("Read Payments") }}
@@ -475,106 +475,10 @@ Many programming languages have libraries for sending and receiving data over a
 
 <!-- MULTICODE_BLOCK_START -->
 
-*Go*
+_Go_
 
 ```go
-package main
-
-// Connect to the XRPL Ledger using websocket and subscribe to an account
-// translation from the JavaScript example to Go
-// https://developers.ripple.com/monitor-incoming-payments-with-websocket.html
-// This example uses the Gorilla websocket library to create a websocket client
-// install: go get github.com/gorilla/websocket
-
-import (
-	"encoding/json"
-	"flag"
-	"log"
-	"net/url"
-	"os"
-	"os/signal"
-	"time"
-
-	"github.com/gorilla/websocket"
-)
-
-// websocket address
-var addr = flag.String("addr", "s.altnet.rippletest.net:51233", "http service address")
-
-// Payload object
-type message struct {
-	Command  string   `json:"command"`
-	Accounts []string `json:"accounts"`
-}
-
-func main() {
-	flag.Parse()
-	log.SetFlags(0)
-
-	var m message
-
-	// check for interrupts and cleanly close the connection
-	interrupt := make(chan os.Signal, 1)
-	signal.Notify(interrupt, os.Interrupt)
-
-	u := url.URL{Scheme: "ws", Host: *addr, Path: "/"}
-	log.Printf("connecting to %s", u.String())
-
-	// make the connection
-	c, _, err := websocket.DefaultDialer.Dial(u.String(), nil)
-	if err != nil {
-		log.Fatal("dial:", err)
-	}
-	// on exit close
-	defer c.Close()
-
-	done := make(chan struct{})
-
-	// send a subscribe command and a target XRPL account
-	m.Command = "subscribe"
-	m.Accounts = append(m.Accounts, "rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM")
-
-	// struct to JSON marshalling
-	msg, _ := json.Marshal(m)
-	// write to the websocket
-	err = c.WriteMessage(websocket.TextMessage, []byte(string(msg)))
-	if err != nil {
-		log.Println("write:", err)
-		return
-	}
-
-	// read from the websocket
-	_, message, err := c.ReadMessage()
-	if err != nil {
-		log.Println("read:", err)
-		return
-	}
-	// print the response from the XRP Ledger
-	log.Printf("recv: %s", message)
-
-	// handle interrupt
-	for {
-		select {
-		case <-done:
-			return
-		case <-interrupt:
-			log.Println("interrupt")
-
-			// Cleanly close the connection by sending a close message and then
-			// waiting (with timeout) for the server to close the connection.
-			err := c.WriteMessage(websocket.CloseMessage, websocket.FormatCloseMessage(websocket.CloseNormalClosure, ""))
-			if err != nil {
-				log.Println("write close:", err)
-				return
-			}
-			select {
-			case <-done:
-			case <-time.After(time.Second):
-			}
-			return
-		}
-	}
-}
+{% include '_code-samples/monitor-payments-websocket/go/monitor-incoming-payments.go' %}
 ```
 
 <!-- MULTICODE_BLOCK_END -->

content/tutorials/manage-account-settings/require-destination-tags.md

@@ -59,7 +59,7 @@ For example:
 
 _JavaScript_
 
-{{ include_code("_code-samples/require-destination-tags/require-destination-tags.js", language="js", start_with="// Send AccountSet", end_before="// Confirm Account") }}
+{{ include_code("_code-samples/require-destination-tags/js/require-destination-tags.js", language="js", start_with="// Send AccountSet", end_before="// Confirm Account") }}
 
 <!-- MULTICODE_BLOCK_END -->
 
@@ -88,7 +88,7 @@ After the transaction is validated, you can check your account's settings to con
 
 _JavaScript_
 
-{{ include_code("_code-samples/require-destination-tags/require-destination-tags.js", language="js", start_with="// Confirm Account", end_before="// End main()") }}
+{{ include_code("_code-samples/require-destination-tags/js/require-destination-tags.js", language="js", start_with="// Confirm Account", end_before="// End main()") }}
 
 <!-- MULTICODE_BLOCK_END -->
 

content/tutorials/quickstart/create-accounts-send-xrp.md

@@ -38,7 +38,7 @@ To get started, create a new folder on your local disk and install the JavaScrip
 ```
 
 
-Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive.
+Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive.
 
 ## Usage
 
@@ -89,7 +89,7 @@ To transfer XRP between accounts:
 
 # Code Walkthrough
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) in the source repository for this website.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) in the source repository for this website.
 
 
 

content/tutorials/quickstart/create-trustline-send-currency.md

@@ -26,7 +26,7 @@ This example shows how to:
 ![Test harness with currency transfer](img/quickstart5.png)
 
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive to try each of the samples in your own browser.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive to try each of the samples in your own browser.
 
 
 ## Usage
@@ -78,7 +78,7 @@ To transfer an issued currency token, once you have created a TrustLine:
 
 # Code Walkthrough
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive to try each of the samples in your own browser.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive to try each of the samples in your own browser.
 
 ## ripplex2-send-currency.js
 

content/tutorials/quickstart/mint-and-burn-nftokens.md

@@ -26,7 +26,7 @@ This example shows how to:
 
 # Usage
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive to try the sample in your own browser.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive to try the sample in your own browser.
 
 ## Get Accounts
 
@@ -100,7 +100,7 @@ To permanently destroy a NFToken:
 
 # Code Walkthrough
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive to examine the code samples.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive to examine the code samples.
 
 ## ripplex3-mint-nfts.js
 

content/tutorials/quickstart/transfer-nftokens.md

@@ -27,7 +27,7 @@ This example shows how to:
 
 ![Quickstart form with NFToken transfer fields](img/quickstart13.png)
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive to try each of the samples in your own browser.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive to try each of the samples in your own browser.
 
 
 # Usage
@@ -158,7 +158,7 @@ To cancel a buy or sell offer that you have created:
 
 # Code Walkthrough 
 
-You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive to try each of the samples in your own browser.
+You can download the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive to try each of the samples in your own browser.
 
 
 ## Create Sell Offer

content/tutorials/quickstart/xrpl-quickstart.md

@@ -52,7 +52,7 @@ To get started, create a new folder on your local disk and install the JavaScrip
 ```
 
 
-Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/quickstart.zip) archive.
+Download and expand the [Quickstart Samples](https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/quickstart/js/quickstart.zip) archive.
 
 ---
 

dactyl-config.yml

@@ -3934,7 +3934,23 @@ pages:
         targets:
             - ja
 
+# Code Samples page (final location TBD)
+    -   name: Code Samples
+        html: code-samples.html
+        parent: docs.html
+        template: page-code-samples.html.jinja
+        sidebar: left_only
+        codesamples: true
+        filters:
+            - code_samples
+        top_nav_grouping: Online Tools
+        blurb: Browse sample code for building common use cases on the XRP Ledger.
+        targets:
+            - en
+            - ja
+
 # Dev Tools --------------------------------------------------------------------
+
     -   md: dev-tools/dev-tools.md
         html: dev-tools.html
         parent: docs.html

styles/_cards.scss

@@ -1,6 +1,108 @@
 .card, .cta-card, .q-wrapper {
   box-shadow: $dropdown-box-shadow;
 }
+#code-samples-deck  {
+  .card {
+    box-shadow: none;
+    margin: 0 2rem 5rem 2rem;
+  }
+  .card-header {
+    border-bottom: none;
+    background-color: unset;
+  }
+  .card-footer {
+    background-color: unset;
+    font-size: initial;
+  }
+
+  .card-deck .card a{
+    margin: 0 2.5rem 5rem 2.5rem;
+  }
+}
+
+.code-contribute {
+  @include media-breakpoint-up(lg) {
+  width: 75vw;
+  position: relative;
+  left: 20%;
+  right: 20%;
+  margin-left: -30vw;
+  margin-right: -30vw;
+  }
+}
+
+.contribute {
+  &::before {
+    content:"";
+    display: block;
+    height:2px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+  }
+  
+  .dot {
+    height: 16px;
+    width: 16px;
+    background-color: #111112;
+    border-radius: 50%;
+    border: 3px solid #FBFF4C;
+    display: inline-block;
+    position: absolute;
+    top: -7px;
+    left: -6px;
+  }
+
+  @include media-breakpoint-down(md) {
+    &::before {
+      left: 0;
+      // transform: rotate(90deg);
+      height: 100%;
+      width: 2px;
+      top: 15px;
+    }
+    .dot {
+      top: 5px;
+      left: -6px;
+    }
+  }
+}
+
+.contribute_1 {
+  &::before {
+    background: -webkit-linear-gradient(left, rgba(254, 255, 1, 1), rgba(255, 45, 154, 1) );
+  }
+  .dot {
+    border-color: #FBFF4C;
+  }
+}
+.contribute_2 {
+  &::before {
+    background: -webkit-linear-gradient(left,  rgba(255, 45, 154, 1), rgba(226, 76, 255, 1));
+  }
+  .dot {
+    border-color: #FF198B;
+  }
+}
+.contribute_3 {
+  &::before {
+    background: -webkit-linear-gradient(left, rgba(226, 76, 255, 1),rgba(154, 82, 255, 1)    );
+  } 
+  .dot {
+    border-color: #C000E5;
+  }
+}
+.contribute_4 {
+  &::before {
+    background: -webkit-linear-gradient(left, rgba(154, 82, 255, 1),rgba(154, 82, 255, 1)    );
+  }
+  .dot {
+    border-color: #9A52FF;
+  }
+}
+
+
+
 
 .card-body > p,
 .card-body > p:not(:last-child) {
@@ -33,6 +135,8 @@ a.card:hover h3 {
     display: inline-block; // fix sizing in Chrome
   }
   margin-bottom: 0.75rem;
+  margin-left: -15px;
+  border: 2px solid #232325;
 }
 
 .card-deck {

styles/light/_light-theme.scss

@@ -340,6 +340,19 @@ aside .active > a:hover {
   background-color: $light-standout-bg;
   box-shadow: $light-box-shadow;
 }
+#code-samples-deck {
+  .card {
+    box-shadow: $light-box-shadow;
+  }
+  .card-header {
+    border-bottom: none;
+    background-color: $light-standout-bg;
+  }
+  .card-footer {
+    background-color: $light-standout-bg;
+  }
+}
+
 
 // FAQ
 .page-faq,

styles/package.json

@@ -4,9 +4,9 @@
     "node-sass": "^7.0.0"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v3.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v3.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v3.css --output-style compressed --source-map true"
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v4.css --output-style compressed",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v4.css --output-style compressed --source-map true",
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v4.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

template/base.html.jinja

@@ -53,7 +53,7 @@
     {% if target.lang=="ja" %}
     <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
     {% endif %}
-    <link href="{{currentpage.prefix}}assets/css/devportal2022-v3.css" rel="stylesheet" />
+    <link href="{{currentpage.prefix}}assets/css/devportal2022-v4.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 
@@ -109,6 +109,8 @@
             {% endif %}
             {% include "component-tree-nav.html.jinja" %}
           {% endblock %}
+          {% block bottom_left_sidebar %}
+          {% endblock %}
       </aside>
       {% endif %}
     </div><!--/.row (main layout)-->

template/page-code-samples.html.jinja

@@ -0,0 +1,127 @@
+{% extends "base.html.jinja" %}
+
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing page-community{% endblock %}
+
+{% block main %}
+<div class="">
+
+<section class="py-26">
+  <div class="col-lg-8 mx-auto text-lg-center">
+    <div class="d-flex flex-column-reverse">
+
+      <h1 class="mb-0">{% trans %}Start Building with Example Code{% endtrans %}</h1>
+      <h6 class="eyebrow mb-3">{% trans %}Code Samples{% endtrans %}</h6>
+    </div>
+{#    <a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a> #}
+  </div>
+</section>
+
+<div class="position-relative d-none-sm">
+    <img src="./img/backgrounds/xrpl-overview-orange.svg" id="xrpl-overview-orange">
+  </div>
+
+<section class="container-new py-26">
+  <div class="d-flex flex-column col-sm-8 p-0">
+    <h3 class="h4 h2-sm">{% trans %}Browse sample code for building common use cases on the XRP Ledger{% endtrans %}</h3>
+  </div>
+
+  <div class="row col-12  card-deck mt-10" id="code-samples-deck">
+
+    {% set code_samples = all_code_samples() %}
+
+    {% set lang_icons = {
+      "cli": "assets/img/logos/cli.svg",
+      "go": "assets/img/logos/golang.svg",
+      "java": "assets/img/logos/java.svg",
+      "js": "assets/img/logos/javascript.svg",
+      "py": "assets/img/logos/python.svg",
+      "http": "assets/img/logos/globe.svg",
+    } %}
+
+  <div class="row col-md-12 px-0" id="code_samples_list">
+    {% for card in code_samples %}
+      <a class="card cardtest col-12 col-lg-5 {% for lang in card.langs %} lang_{{lang}} {% endfor %} " href="{{target.github_forkurl}}/tree/{{target.github_branch}}/{{card.href}}">
+        <div class="card-header">
+        {% for lang in card.langs %}
+          <span class="circled-logo"><img src="{{lang_icons[lang]}}" /></span>
+        {% endfor %}
+        </div>
+        <div class="card-body">
+          <h4 class="card-title h5">{{card.title}}</h4>
+          <p class="card-text">{{card.description}}</p>
+        </div>
+        <div class="card-footer">&nbsp;</div>
+      </a>
+    {% endfor %}
+    </div>
+  </div>
+</section>
+
+<section class="container-new py-26">
+  <div>
+
+    <div class="d-flex flex-column">
+      <h3 class="h4 h2-sm pb-4">{% trans %}Contribute Code Samples{% endtrans %}</h3>
+      <h6 class="eyebrow mb-20">{% trans %}Help the XRPL community by submitting your<br> own code samples{% endtrans %}</h6>
+    </div>
+
+    <div class="row pl-4">
+      <div class=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_1"><span class="dot"></span><h5 class="pb-4 pt-md-5">Fork and clone</h5><p class="pb-4">Fork the <a href="{{target.github_forkurl}}">xrpl-dev-portal repo</a>. Using git, clone the fork to your computer.</p></div>
+      <div class=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_2"><span class="dot"></span><h5 class="pb-4 pt-md-5">Add to folder</h5><p class="pb-4">Add your sample code to the <code>content/_code-samples/</code> folder. Be sure to include a <code>README.md</code> that summarizes what it does and anything else people should know about it.</p></div>
+      <div class=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_3"><span class="dot"></span><h5 class="pb-4 pt-md-5">Commit and push</h5><p class="pb-4">Commit your changes and push them to your fork on GitHub.</p></div>
+      <div class=" col-lg-3 pl-4 pl-lg-0 pr-2 contribute  dot contribute_4 mb-4"><span class="dot"></span><h5 class="pb-4 pt-md-5">Open a pull request</h5><p class="pb-0 mb-0">Open a pull request to the original repo. Maintainers will review your submission and suggest changes if necessary. If the code sample is helpful, it’ll be merged and added to XRPL.org!</p></div>
+    </div>
+
+    {#<a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a>#}
+
+  </div>
+</section>
+
+</div>
+{% endblock %}
+
+
+{% block analytics %}
+    <script type="application/javascript">
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      "event": "page_info",
+      "page_type": "Hub Page",
+      "page_group": "Code Samples"
+    })
+    </script>
+{% endblock analytics %}
+
+
+{% block bottom_left_sidebar %}
+{% set lang_text = {
+      "cli": "CLI",
+      "go": "go",
+      "java": "Java",
+      "js": "JavaScript",
+      "py": "Python",
+      "http": "HTTP",
+    } %}
+
+<div class="p-2 mt-30">
+    <form >
+    <p>Code Language</p>
+        <div>
+            <input type="radio" name="langs" id="input_all" value="All" checked> <label for="input_all">All</label>
+        </div>
+        {% for lang in all_langs %}
+            <div class="single_lang">
+                <input type="radio" name="langs" id="input_{{lang}}" value="{{lang}}">
+                <label for="input_{{lang}}">{{lang_text[lang]}}</label>
+            </div>
+        {% endfor %}
+    </form>
+</div>
+
+<br><br>
+{% endblock %}
+
+{% block endbody %}
+<script type="application/javascript" src="{{currentpage.prefix}}assets/js/code-samples.js"></script>
+{% endblock %}

tool/filter_code_samples.py

@@ -0,0 +1,100 @@
+################################################################################
+## Code Sample Functions                                                      ##
+## Author: Rome Reginelli                                                     ##
+## Copyright: Ripple Labs, Inc. 2021                                          ##
+## License: MIT https://github.com/XRPLF/xrpl-dev-portal/blob/master/LICENSE  ##
+##                                                                            ##
+## Find code samples in the repository contents and figure out metadata about ##
+## them automatically.                                                        ##
+################################################################################
+
+import os
+import re
+from bs4 import BeautifulSoup
+from markdown import markdown
+
+
+cs_dir = "content/_code-samples/"
+skip_dirs = [
+    "node_modules",
+    ".git",
+    "__pycache__"
+]
+words_to_caps = [
+    "xrp",
+]
+
+def to_title_case(s):
+    """
+    Convert a folder name string to title case, for code samples that don't have
+    a README file. The input string is expected to be in kebab-case or snake_case.
+    """
+    words = re.split(r"_|[^\w']", s)
+    words = [w.upper() if w in words_to_caps else w.title() for w in words if w] #remove empty splits
+    return " ".join(words).replace("'S", "'s").replace(" A ", " a ")
+
+# def all_langs():
+langs = []
+
+def sortfunc(cs):
+    """
+    Sort code samples alphabetically by title except with "Intro" fields first
+    """
+    if "Intro" in cs["title"] or "Quickstart" in cs["title"]:
+        return " "+cs["title"]
+    else:
+        return cs["title"]
+
+def all_code_samples():
+    cses = []
+
+    for dirpath, dirnames, filenames in os.walk(cs_dir):
+        if dirpath == cs_dir:
+            continue
+        # limit depth to just the code samples and language folders
+        depth = dirpath.count(os.sep) - cs_dir.count(os.sep) + 1
+        if depth > 1:
+            continue
+        for sd in skip_dirs:
+            if sd in dirnames:
+                dirnames.remove(sd)
+
+        cs = {
+            "path": dirpath,
+            "langs": sorted(list(set(["http" if d in ("websocket", "json-rpc") else d for d in dirnames]))),
+        }
+
+        # add unique names to list for sorting.
+        for d in dirnames:
+            lang = "http" if d in ("websocket", "json-rpc") else d
+            if lang not in langs:
+                langs.append(lang)
+
+        if "README.md" in filenames:
+            with open(os.path.join(dirpath, "README.md"), "r") as f:
+                md = f.read()
+            md = markdown(md)
+            soup = BeautifulSoup(md, "html.parser")
+            h = soup.find(["h1", "h2", "h3"]) # get first header in the file
+            if h:
+                cs["title"] = h.get_text()
+            else:
+                cs["title"] = to_title_case(os.path.basename(dirpath))
+            p = soup.find("p") # first paragraph defines the blurb
+            if p:
+                cs["description"] = p.get_text()
+            else:
+                cs["description"] = ""
+
+        else:
+            cs["title"] = to_title_case(os.path.basename(dirpath))
+            cs["description"] = ""
+        cs["href"] = dirpath
+        cses.append(cs)
+
+    return sorted(cses, key=sortfunc)
+
+export = {
+    "all_code_samples": all_code_samples,
+    "all_langs": langs,
+}