diff --git a/@theme/styles.css b/@theme/styles.css index 767f48589ad..8c098dae155 100644 --- a/@theme/styles.css +++ b/@theme/styles.css @@ -11,145 +11,148 @@ ul.nav.navbar-nav { flex-grow: 1; } -:root { +:root, :root.dark { + --navbar-height: 80px; + /* XRPL color palette; match to styles/_colors.scss Some colors don't have a 10 equivalent so 9 is repeated. - Note, at present these variables are mostly overridden by - styled-components variables which are in reverse order, so - we can't actually use these variables as-is. + These are in reverse order of the ones in styles/_colors.scss + so that they correspond to the same-named variables provided by + styled-components as part of Redocly. */ + /* Redocly doesn't have vars for grays by default */ - --color-gray-1: #F5F5F7; - --color-gray-2: #E0E0E1; - --color-gray-3: #C1C1C2; - --color-gray-4: #A2A2A4; + --color-gray-1: #111112; + --color-gray-2: #232325; + --color-gray-3: #343437; + --color-gray-4: #454549; --color-gray-5: #838386; - --color-gray-6: #454549; - --color-gray-7: #343437; - --color-gray-8: #232325; - --color-gray-9: #111112; + --color-gray-6: #A2A2A4; + --color-gray-7: #C1C1C2; + --color-gray-8: #E0E0E1; + --color-gray-9: #F5F5F7; --color-gray-10: var(--color-gray-9); /* color-red = XRPL $magenta */ - --color-red-1: #FFE5F2; - --color-red-2: #FFB2D8; - --color-red-3: #FF80BF; - --color-red-4: #FF4BA4; - --color-red-5: #FF198B; - --color-red-6: #E50071; - --color-red-7: #B20058; - --color-red-8: #80003F; - --color-red-9: #4C0026; - --color-red-10: #4C0026; - + --color-red-1: #4C0026; + --color-red-2: #4C0026; + --color-red-3: #80003F; + --color-red-4: #B20058; + --color-red-5: #E50071; + --color-red-6: #FF198B; + --color-red-7: #FF4BA4; + --color-red-8: #FF80BF; + --color-red-9: #FFB2D8; + --color-red-10: #FFE5F2; + /* color-green = XRPL $green */ - --color-green-1: #D6FAE7; - --color-green-2: #ADF5CE; - --color-green-3: #84F0B6; - --color-green-4: #5BEB9D; - --color-green-5: #32E685; - --color-green-6: #2DCF78; - --color-green-7: #28B86A; - --color-green-8: #1E8A50; - --color-green-9: #145C35; - --color-green-10: #0A2E1B; - + --color-green-1: #0A2E1B; + --color-green-2: #145C35; + --color-green-3: #1E8A50; + --color-green-4: #28B86A; + --color-green-5: #2DCF78; + --color-green-6: #32E685; + --color-green-7: #5BEB9D; + --color-green-8: #84F0B6; + --color-green-9: #ADF5CE; + --color-green-10: #D6FAE7; + /* color-gold = XRPL $yellow */ - --color-gold-1: #FEFFE5; - --color-gold-2: #FDFFB2; - --color-gold-3: #FCFF80; - --color-gold-4: #FBFF4C; - --color-gold-5: #FAFF19; - --color-gold-6: #E0E500; - --color-gold-7: #AEB200; - --color-gold-8: #7D8000; - --color-gold-9: #4B4C00; - --color-gold-10: #4B4C00; - + --color-gold-1: #4B4C00; + --color-gold-2: #4B4C00; + --color-gold-3: #7D8000; + --color-gold-4: #AEB200; + --color-gold-5: #E0E500; + --color-gold-6: #FAFF19; + --color-gold-7: #FBFF4C; + --color-gold-8: #FCFF80; + --color-gold-9: #FDFFB2; + --color-gold-10: #FEFFE5; + /* color-blue = XRPL $blue */ - --color-blue-1: #E5F5FF; - --color-blue-2: #B2E0FF; - --color-blue-3: #80CCFF; - --color-blue-4: #4BB7FF; - --color-blue-5: #19A3FF; - --color-blue-6: #008AE5; - --color-blue-7: #006BB2; - --color-blue-8: #004D80; - --color-blue-9: #002E4C; - --color-blue-10: #001133; - + --color-blue-1: #001133; + --color-blue-2: #002E4C; + --color-blue-3: #004D80; + --color-blue-4: #006BB2; + --color-blue-5: #008AE5; + --color-blue-6: #19A3FF; + --color-blue-7: #4BB7FF; + --color-blue-8: #80CCFF; + --color-blue-9: #B2E0FF; + --color-blue-10: #E5F5FF; + /* color purple = XRPL $blue-purple */ - --color-purple-1: #F0E5FF; - --color-purple-2: #D2B2FF; - --color-purple-3: #B480FF; - --color-purple-4: #9A52FF; - --color-purple-5: #7919FF; - --color-purple-6: #5F00E5; - --color-purple-7: #4A00B2; - --color-purple-8: #350080; - --color-purple-9: #20004C; - --color-purple-10: #20004C; - + --color-purple-1: #20004C; + --color-purple-2: #20004C; + --color-purple-3: #350080; + --color-purple-4: #4A00B2; + --color-purple-5: #5F00E5; + --color-purple-6: #7919FF; + --color-purple-7: #9A52FF; + --color-purple-8: #B480FF; + --color-purple-9: #D2B2FF; + --color-purple-10: #F0E5FF; + /* color-magenta = XRPL $red-purple */ - --color-magenta-1: #FBE5FF; - --color-magenta-2: #F2B2FF; - --color-magenta-3: #EA80FF; - --color-magenta-4: #E24CFF; - --color-magenta-5: #D919FF; - --color-magenta-6: #C000E5; - --color-magenta-7: #9500B2; - --color-magenta-8: #6B0080; - --color-magenta-9: #40004C; - --color-magenta-10: #40004C; - - /* XRPL doesn't have a color-cyan equivalent - --color-cyan-1: #e6fffb; - --color-cyan-2: #b5f5ec; - --color-cyan-3: #87e8de; - --color-cyan-4: #5cdbd3; - --color-cyan-5: #36cfc9; - --color-cyan-6: #13c2c2; - --color-cyan-7: #08979c; - --color-cyan-8: #006d75; - --color-cyan-9: #00474f; - --color-cyan-10: #002329; */ - + --color-magenta-1: #40004C; + --color-magenta-2: #40004C; + --color-magenta-3: #6B0080; + --color-magenta-4: #9500B2; + --color-magenta-5: #C000E5; + --color-magenta-6: #D919FF; + --color-magenta-7: #E24CFF; + --color-magenta-8: #EA80FF; + --color-magenta-9: #F2B2FF; + --color-magenta-10: #FBE5FF; + + /* XRPL doesn't have a color-cyan equivalent* + --color-cyan-1: #002329;* + --color-cyan-2: #00474f;* + --color-cyan-3: #006d75;* + --color-cyan-4: #08979c;* + --color-cyan-5: #13c2c2;* + --color-cyan-6: #36cfc9;* + --color-cyan-7: #5cdbd3;* + --color-cyan-8: #87e8de;* + --color-cyan-9: #b5f5ec;* + --color-cyan-10: #e6fffb; */ + /* color-yellow = XRPL $yellow */ - --color-yellow-1: #FEFFE5; - --color-yellow-2: #FDFFB2; - --color-yellow-3: #FCFF80; - --color-yellow-4: #FBFF4C; - --color-yellow-5: #FAFF19; - --color-yellow-6: #E0E500; - --color-yellow-7: #AEB200; - --color-yellow-8: #7D8000; - --color-yellow-9: #4B4C00; - --color-yellow-10: #4B4C00; - - /* XRPL doesn't have a color-lime equivalent - --color-lime-1: #fcffe6; - --color-lime-2: #f4ffb8; - --color-lime-3: #eaff8f; - --color-lime-4: #d3f261; - --color-lime-5: #bae637; - --color-lime-6: #a0d911; - --color-lime-7: #7cb305; - --color-lime-8: #5b8c00; - --color-lime-9: #3f6600; - --color-lime-10: #254000; */ - - /* XRPL doesn't have a color-geekblue equivalent - --color-geekblue-1: #f0f5ff; - --color-geekblue-2: #d6e4ff; - --color-geekblue-3: #adc6ff; - --color-geekblue-4: #85a5ff; - --color-geekblue-5: #597ef7; - --color-geekblue-6: #2f54eb; - --color-geekblue-7: #1d39c4; - --color-geekblue-8: #10239e; - --color-geekblue-9: #061178; - --color-geekblue-10: #030852; */ + --color-yellow-1: #4B4C00; + --color-yellow-2: #4B4C00; + --color-yellow-3: #7D8000; + --color-yellow-4: #AEB200; + --color-yellow-5: #E0E500; + --color-yellow-6: #FAFF19; + --color-yellow-7: #FBFF4C; + --color-yellow-8: #FCFF80; + --color-yellow-9: #FDFFB2; + --color-yellow-10: #FEFFE5; + + /* XRPL doesn't have a color-lime equivalent* + --color-lime-1: #254000;* + --color-lime-2: #3f6600;* + --color-lime-3: #5b8c00;* + --color-lime-4: #7cb305;* + --color-lime-5: #a0d911;* + --color-lime-6: #bae637;* + --color-lime-7: #d3f261;* + --color-lime-8: #eaff8f;* + --color-lime-9: #f4ffb8;* + --color-lime-10: #fcffe6; */ + + /* XRPL doesn't have a color-geekblue equivalent* + --color-geekblue-1: #030852;* + --color-geekblue-2: #061178;* + --color-geekblue-3: #10239e;* + --color-geekblue-4: #1d39c4;* + --color-geekblue-5: #2f54eb;* + --color-geekblue-6: #597ef7;* + --color-geekblue-7: #85a5ff;* + --color-geekblue-8: #adc6ff;* + --color-geekblue-9: #d6e4ff;* + --color-geekblue-10: #f0f5ff; */ /* Dark mode colors by default */ --color-primary-bg: var(--color-gray-10); @@ -162,30 +165,30 @@ ul.nav.navbar-nav { --color-primary-text-hover: #201dad; --color-primary-text: #161087; --color-primary-text-active: #0d086e;*/ - - --link-color-primary: #fff; + + --link-color-primary: white; --link-decoration: underline; --link-font-weight: var(--font-weight-regular); - --link-color-primary-hover: #9a52ff; + --link-color-primary-hover: var(--color-purple-7) --link-decoration-hover: underline; - --link-color-visited: #fff; + --link-color-visited: white; --link-visited-decoration: underline; --bg-color: var(--color-gray-10); - --bg-color-raised: var(--color-gray-8); + --bg-color-raised: var(--color-gray-2); --background-color: var(--bg-color); --font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --heading-font-family: var(--font-family-base); --inline-code-font-family: "Space Mono", monospace; - --inline-code-text-color: #5beb9d; /* $green-400 */ - --inline-code-bg-color: #0a2e1b; /* $green-1000 */ + --inline-code-text-color: var(--color-green-7); + --inline-code-bg-color: var(--color-green-1); --inline-code-border-radius: 0; - --heading-anchor-color: #9a52ff; + --heading-anchor-color: var(--color-purple-7); --h1-font-size: 3rem; --h2-font-size: 2.5rem; --h3-font-size: 2.125rem; @@ -195,14 +198,18 @@ ul.nav.navbar-nav { --h5-font-size: 1.25rem; --h5-line-height: 1.5rem; + --menu-container-padding-top: 0; + --md-content-padding: 4px 0; + --toc-offset-top: 2px; + --sidebar-border-color: transparent; --sidebar-bg-color: transparent; --sidebar-margin-horizontal: 32px; --border-radius-md: 4px; - --code-block-bg-color: #232325; - --code-block-controls-bg-color: #232325; + --code-block-bg-color: var(--color-gray-2); + --code-block-controls-bg-color: var(--color-gray-2); --code-block-controls-border: none; --code-block-padding: 0 2rem 1.5rem 2rem; @@ -216,56 +223,97 @@ ul.nav.navbar-nav { --footer-border-color: transparent; --footer-title-font-weight: 600; --footer-title-font-size: 1rem; - --footer-title-text-color: #A2A2A4; + --footer-title-text-color: var(--color-gray-6); --menu-item-padding-horizontal: 0px; - + --md-list-left-padding: 40px; - --md-table-header-bg-color: #32343E; - --md-table-border-color: #32343E; - + --md-list-margin: 0 0 20px 0; + --md-table-header-bg-color: var(--color-gray-3); + --md-table-border-color: var(--color-gray-3); + --md-tabs-content-padding: 0; + --md-tabs-tab-wrapper-padding: 0; + + --text-color-helper: var(--color-gray-6); + --color-text-primary: white; + --button-color-hover: white; + + --text-color-secondary: var(--color-gray-9); /* inherited for adominition text color */ + --admonition-success-bg-color: var(--color-green-2); + --admonition-info-bg-color: var(--color-blue-4); + /* none of the yellow shades in the XRPL palette work well with "warning" + admonitions, so leave it the default */ + --admonition-danger-bg-color: var(--color-red-3); } :root.light { - --link-color-primary-hover: #4A00B2; - --link-color-visited: #000; - --text-color-secondary: #000; - --code-block-bg-color: #E0E0E1; - --code-block-controls-bg-color: #E0E0E1; + --link-color-primary-hover: var(--color-purple-4); + --link-color-visited: black; + --text-color-secondary: black; + --code-block-bg-color: var(--color-gray-8); + --code-block-controls-bg-color: var(--color-gray-8); --code-block-controls-border: none; - --md-tabs-active-tab-bg-color: #C1C1C2; - - --code-block-tokens-function-color: #B23C00; - --code-block-tokens-operator-color: #000; - --code-block-tokens-comment-color: #343437; - --code-block-tokens-string-color: #145C35; - --inline-code-bg-color: #E0E0E1; - - --search-trigger-bg-color: #E0E0E1; - --search-trigger-color: #838386; - - --language-picker-border-color: #C1C1C2; - --language-picker-background-color: #E0E0E1; - --select-list-bg-color: #E0E0E1; - - --footer-title-text-color: #000; - --bg-color: var(--color-gray-1); - --bg-color-raised: var(--color-gray-2); - --button-content-color-link: #000; + --md-tabs-active-tab-bg-color: var(--color-gray-7); + + --inline-code-bg-color: var(--color-gray-8); + + --search-trigger-bg-color: var(--color-gray-8); + --search-trigger-color: var(--color-gray-5); + --modal-bg-color: var(--color-gray-9); + + --language-picker-border-color: var(--color-gray-7); + --language-picker-background-color: var(--color-gray-8); + --select-list-bg-color: var(--color-gray-8); + + --footer-title-text-color: black; + --bg-color: var(--color-gray-9); + --bg-color-raised: var(--color-gray-8); + --button-content-color-link: black; + + --md-table-header-bg-color: var(--color-gray-8); + --md-table-border-color: var(--color-gray-8); + + --bg-color: var(--color-gray-8); + --code-panel-bg-color: var(--color-blue-7); + --layer-color-hover: var(--color-gray-9); + + --code-block-text-color: var(--color-gray-1); + --code-block-tokens-comment-color: var(--color-gray-4); + --code-block-tokens-constant-color: var(--color-gray-1); + --code-block-tokens-function-color: var(--color-red-4); + --code-block-tokens-keyword-color: var(--color-magenta-5); + --code-block-tokens-operator-color: black; + --code-block-tokens-string-color: var(--color-green-3); - --md-table-header-bg-color: var(--color-gray-2); - --md-table-border-color: var(--color-gray-2); + --bg-raised-gradient: ""; + --text-color-helper: var(--color-gray-4); + --button-color-hover: black; + + --admonition-success-bg-color: var(--color-green-9); + --admonition-info-bg-color: var(--color-blue-9); + --admonition-warning-bg-color: var(--color-yellow-9); + --admonition-danger-bg-color: var(--color-red-9); } :root.dark { - --link-color-primary: #fff; - --link-color-visited: #fff; - --link-color-primary-hover: #9a52ff; - - --search-highlight-text-color: #4BB7FF; /* color-blue-4 */ - - --code-block-tokens-comment-color: #C1C1C2; /* color-gray-3 */ + --link-color-primary: white; + --link-color-visited: white; + --link-color-primary-hover: var(--color-purple-7); + + --navbar-bg-color: var(--color-gray-2); /* controls search box bg */ + --modal-bg-color: var(--color-gray-2); /* controls search modal bg */ + --search-highlight-text-color: var(--color-blue-7); + + --code-block-text-color: var(--color-gray-9); + --code-block-tokens-comment-color: var(--color-gray-7); + --code-block-tokens-constant-color: var(--color-gray-9); + --code-block-tokens-keyword-color: var(--color-magenta-8); + --code-block-tokens-string-color: var(--color-blue-8); + + --code-panel-bg-color: var(--color-blue-3); + --layer-color-hover: var(--color-gray-3); + --bg-raised-gradient: ""; } :root .form-control-plaintext { diff --git a/_code-samples/get-started/js/README.md b/_code-samples/get-started/js/README.md new file mode 100644 index 00000000000..f96921f960f --- /dev/null +++ b/_code-samples/get-started/js/README.md @@ -0,0 +1,135 @@ +# Get Started Using JavaScript Library + +Connects to the XRP Ledger, gets account information, and subscribes to ledger events using JavaScript. + +To download the source code, see [Get Started Using JavaScript Library](http://xrpl.org/docs/tutorials/javascript/build-apps/get-started). + +## Run the Code + +**Node.js** + +Quick setup and usage: + +```sh +npm install +node ./get-acct-info.js +``` + +You should see output similar to the following: + +```sh +Connected to Testnet + +Creating a new wallet and funding it with Testnet XRP... +Wallet: rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i +Balance: 10 + +Account Testnet Explorer URL: +https://testnet.xrpl.org/accounts/rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i + +Getting account info... +{ + "api_version": 2, + "id": 4, + "result": { + "account_data": { + "Account": "rMnXR9p2sZT9iZ6ew3iEqvBMyPts1ADc4i", + "Balance": "10000000", + "Flags": 0, + "LedgerEntryType": "AccountRoot", + "OwnerCount": 0, + "PreviousTxnID": "0FF9DB2FE141DD0DF82566A171B6AF70BB2C6EB6A53D496E65D42FC062C91A78", + "PreviousTxnLgrSeq": 9949268, + "Sequence": 9949268, + "index": "4A9C9220AE778DC38C004B2B17A08E218416D90E01456AFCF844C18838B36D01" + }, + "account_flags": { + "allowTrustLineClawback": false, + "defaultRipple": false, + "depositAuth": false, + "disableMasterKey": false, + "disallowIncomingCheck": false, + "disallowIncomingNFTokenOffer": false, + "disallowIncomingPayChan": false, + "disallowIncomingTrustline": false, + "disallowIncomingXRP": false, + "globalFreeze": false, + "noFreeze": false, + "passwordSpent": false, + "requireAuthorization": false, + "requireDestinationTag": false + }, + "ledger_hash": "304C7CC2A33B712BE43EB398B399E290C191A71FCB71784F584544DFB7C441B0", + "ledger_index": 9949268, + "validated": true + }, + "type": "response" +} + +Listening for ledger close events... +Ledger #9949269 validated with 0 transactions! +Ledger #9949270 validated with 0 transactions! +Ledger #9949271 validated with 0 transactions! + +Disconnected +``` + +**Web** + +To run the web example, open `index.html` in a web browser and wait for the results to appear on the page. + +You should see output similar to the following: + +```text +Connected to Testnet +Creating a new wallet and funding it with Testnet XRP... +Wallet: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S +Balance: 10 +View account on XRPL Testnet Explorer: rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S + +Getting account info... +{ + "api_version": 2, + "id": 5, + "result": { + "account_data": { + "Account": "rf7CWJdNssSzQk2GtypYLVhyvGe8oHS3S", + "Balance": "10000000", + "Flags": 0, + "LedgerEntryType": "AccountRoot", + "OwnerCount": 0, + "PreviousTxnID": "96E4B44F93EC0399B7ADD75489630C6A8DCFC922F20F6810D25490CC0D3AA12E", + "PreviousTxnLgrSeq": 9949610, + "Sequence": 9949610, + "index": "B5D2865DD4BF8EEDFEE2FD95DE37FC28D624548E9BBC42F9FBF61B618E98FAC8" + }, + "account_flags": { + "allowTrustLineClawback": false, + "defaultRipple": false, + "depositAuth": false, + "disableMasterKey": false, + "disallowIncomingCheck": false, + "disallowIncomingNFTokenOffer": false, + "disallowIncomingPayChan": false, + "disallowIncomingTrustline": false, + "disallowIncomingXRP": false, + "globalFreeze": false, + "noFreeze": false, + "passwordSpent": false, + "requireAuthorization": false, + "requireDestinationTag": false + }, + "ledger_hash": "7692673B8091899C3EEE6807F66B65851D3563F483A49A5F03A83608658473D6", + "ledger_index": 9949610, + "validated": true + }, + "type": "response" +} + +Listening for ledger close events... +Ledger #9949611 validated with 0 transactions +Ledger #9949612 validated with 1 transactions +Ledger #9949613 validated with 0 transactions + +Disconnected +``` diff --git a/_code-samples/get-started/js/base.js b/_code-samples/get-started/js/base.js index 8b5238234f8..9c02b161d3a 100644 --- a/_code-samples/get-started/js/base.js +++ b/_code-samples/get-started/js/base.js @@ -1,17 +1,11 @@ -// In browsers, use a + + +
+