mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-19 11:15:49 +00:00
405 lines
14 KiB
Django/Jinja
405 lines
14 KiB
Django/Jinja
{% extends "base.html.jinja" %}
|
|
|
|
{% block mainclasses %}landing page-docs-index landing-builtin-bg jackson-identifier {% endblock %}
|
|
|
|
{% block breadcrumbs %}{% endblock %}
|
|
|
|
{% block main %}
|
|
|
|
<div class="landing page-docs landing-builtin-bg overflow-hidden styled-page">
|
|
<section class="text-center title-space">
|
|
<div class="col-lg-9 mx-auto text-center">
|
|
<div class="d-flex flex-column-reverse">
|
|
<h1 class="">{% trans %}XRP Ledger Developer Resources{% endtrans %}</h1>
|
|
<h6 class="eyebrow mb-3">{% trans %}Documentation{% endtrans %}</h6>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# Macros #}
|
|
{% macro primaryButton(href, text, isArrowUp) %}
|
|
{% if isArrowUp %}
|
|
<a class="btn btn-primary btn-arrow-up" id="{{href}}-button" href="{{href}}">{{ text }}</a>
|
|
{% else %}
|
|
<a class="btn btn-primary btn-arrow" id="{{href}}-button" href="{{href}}">{{ text }}</a>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro flatCard(href, title, description, linkText, src) %}
|
|
<div class="card video-image flat-card">
|
|
<img
|
|
src={{src}}
|
|
alt={{title}}
|
|
/>
|
|
<h5 class="row">{{ title }}</h5>
|
|
<p class="row faded-text flat-card-padding">
|
|
{{ description }}
|
|
</p>
|
|
<div class="col align-button-on-bottom">
|
|
{{ primaryButton(href, linkText, false) }}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro videoCard(url, title, src)%}
|
|
<div class="col">
|
|
<a class="btn1" data-url={{url}}> {# TODO: Remove me, If you use href instead, this loads the YouTube videos right away as full screen things #}
|
|
<img
|
|
class="get-started-img video-image"
|
|
id={{title}}
|
|
src={{src}}
|
|
/>
|
|
</a>
|
|
|
|
<h6 class="pt-3">{{ title }}</h6>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro useCasesCard(subItems, title, src, id) %}
|
|
<div class="col">
|
|
<img
|
|
class="use-cases-img img-fluid mb-2 shadow"
|
|
src={{src}}
|
|
alt="{{title}}"
|
|
id={{id}}
|
|
>
|
|
<h5 class="mt-4">{{title}} </h5>
|
|
<ul class="nav flex-column">
|
|
{% for item in subItems %}
|
|
<li class="nav-item"><a href="{{item.link}}" class="nav-link">{{item.description}}</a>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro devToolsCard(link, title, description) %}
|
|
<div class="col dev-tools-link">
|
|
<a href="{{ link }}">
|
|
<h6 class="btn-arrow">{{ title }}</h6>
|
|
<p> {{ description }}</p>
|
|
</a>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% set recommendedPages = [
|
|
{
|
|
"description": _("rippled API Reference"),
|
|
"link": "https://xrpl.org/manage-the-rippled-server.html",
|
|
},
|
|
{
|
|
"description": _("XRP Faucet"),
|
|
"link": "https://xrpl.org/xrp-testnet-faucet.html",
|
|
},
|
|
{
|
|
"description": _("Getting Started with Python"),
|
|
"link": "https://xrpl.org/get-started-using-python.html#get-started-using-python",
|
|
},
|
|
{
|
|
"description": _("Websocket API Tool"),
|
|
"link": "https://xrpl.org/websocket-api-tool.html",
|
|
},
|
|
{ "description": _("XRP Ledger Explorer"), "link": "https://livenet.xrpl.org" },
|
|
] %}
|
|
|
|
{%
|
|
set intermediateVideos = [
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-advanced-payment-features@2x.png",
|
|
"title": "Advanced Payment Features",
|
|
"url": "https://www.youtube.com/embed/e2Iwsk37LMk?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-governance@2x.png",
|
|
"title": "Governance and the Amendment Process",
|
|
"url": "https://www.youtube.com/embed/4GbRdanHoR4?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-sidechains@2x.png",
|
|
"title": "Federated Sidechains",
|
|
"url": "https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
]
|
|
%}
|
|
{% set useCases = [
|
|
{
|
|
"title": "Build a Wallet",
|
|
"id": "build-a-wallet",
|
|
"src": "/assets/img/backgrounds/docs-wallet@2x.png",
|
|
"subItems": [
|
|
{
|
|
"description": "Use Specialized Payment Types",
|
|
"link": "https://xrpl.org/use-specialized-payment-types.html",
|
|
},
|
|
{
|
|
"description": "Build a Desktop Wallet in Python",
|
|
"link": "https://xrpl.org/build-a-desktop-wallet-in-python.html",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
"title": "NFTs",
|
|
"id": "nfts",
|
|
"src": "/assets/img/backgrounds/docs-nft@2x.png",
|
|
"subItems": [
|
|
{
|
|
"description": "NFT Conceptual Overview",
|
|
"link": "https://xrpl.org/non-fungible-tokens.html",
|
|
},
|
|
{
|
|
"description": "NFToken Format",
|
|
"link": "https://xrpl.org/nftoken.html",
|
|
},
|
|
{
|
|
"description": "NFToken Tester Tutorial",
|
|
"link": "https://xrpl.org/nftoken-tester-tutorial.html",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
"title": "Run an XRP Ledger Node",
|
|
"id": "run-an-xrp-ledger-node",
|
|
"src": "/assets/img/backgrounds/docs-node@2x.png",
|
|
"subItems": [
|
|
{
|
|
"description": "About the Server",
|
|
"link": "https://xrpl.org/xrpl-servers.html",
|
|
},
|
|
{
|
|
"description": "Install & Configure",
|
|
"link": "https://xrpl.org/install-rippled.html",
|
|
},
|
|
{
|
|
"description": "Run a Validator Node",
|
|
"link": "https://xrpl.org/run-rippled-as-a-validator.html",
|
|
},
|
|
],
|
|
},
|
|
]
|
|
%}
|
|
{%
|
|
set getStartedVideos = [
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png",
|
|
"title": "Intro to XRP Ledger",
|
|
"url": "https://www.youtube.com/embed/sVTybJ3cNyo?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-accounts@2x.png",
|
|
"title": "Accounts",
|
|
"url": "https://www.youtube.com/embed/eO8jE6PftX8?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-decentralized-exchange@2x.png",
|
|
"title": "Decentralized Exchange",
|
|
"url": "https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
{
|
|
"src": "/assets/img/backgrounds/docs-tokenization@2x.png",
|
|
"title": "Tokenization",
|
|
"url": "https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&showinfo=0&autoplay=1",
|
|
},
|
|
]
|
|
%}
|
|
|
|
<section class="text-left">
|
|
<div class="mx-auto mb-10">
|
|
<h4>Getting Started with XRP Ledger</h4>
|
|
</div>
|
|
<div class="card-grid flat-card-grid card-grid-3xN">
|
|
<div class="col">
|
|
{{ flatCard("./concepts/",
|
|
"Concepts",
|
|
"Lorem ipsum dolor sit amet consectetur. Ullamcorper senectus egestas mauris ante tellus eu feugiat cursus. Quis in mi augue curabitur orci purus massa nec sagittis.",
|
|
"Read the Docs",
|
|
"/img/graphics/concepts-docs.svg") }}
|
|
</div>
|
|
<div class="col">
|
|
{{ flatCard("./tutorials/",
|
|
"Tutorials",
|
|
"Lorem ipsum dolor sit amet consectetur. Ullamcorper senectus egestas mauris ante tellus eu feugiat cursus. Quis in mi augue curabitur orci purus massa nec sagittis.",
|
|
"View Tutorials",
|
|
"/img/graphics/blue-computer.png") }}
|
|
</div>
|
|
<div class="col">
|
|
{{ flatCard("./references/",
|
|
"References",
|
|
"Lorem ipsum dolor sit amet consectetur. Ullamcorper senectus egestas mauris ante tellus eu feugiat cursus. Quis in mi augue curabitur orci purus massa nec sagittis.",
|
|
"View References",
|
|
"/img/graphics/ref-book.png") }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="text-left">
|
|
<div class="card-grid card-grid-2xN">
|
|
<div class="col">
|
|
<h6>Explore SDKs</h6>
|
|
<h4>Interact with the XRP Ledger in a language of your choice</h4>
|
|
<div class="card-grid langs-cards card-grid-2xN mt-10">
|
|
<div class="col langs">
|
|
<a href="https://xrpl.org/get-started-using-javascript.html">
|
|
<img
|
|
src="/assets/img/logos/javascript.svg"
|
|
class="circled-logo"
|
|
>
|
|
<h5 class="btn-arrow">Javascript</h5>
|
|
</a>
|
|
</div>
|
|
<div class="col langs">
|
|
<a href="https://xrpl.org/get-started-using-python.html">
|
|
<img
|
|
src="/assets/img/logos/python.svg"
|
|
class="circled-logo"
|
|
>
|
|
<h5 class="btn-arrow">Python</h5>
|
|
</a>
|
|
</div>
|
|
<div class="col langs">
|
|
<a href="https://xrpl.org/get-started-using-java.html">
|
|
<img
|
|
src="/assets/img/logos/java.svg"
|
|
class="circled-logo"
|
|
>
|
|
<h5 class="btn-arrow">Java</h5>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<img
|
|
src="/assets/img/backgrounds/sdk-black.png"
|
|
class="img-fluid pt-20 sdk-img"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="text-left">
|
|
<h4 class="pb-4">Use Cases</h4>
|
|
<div class="card-grid card-grid-3xN">
|
|
{% for useCase in useCases %}
|
|
{{ useCasesCard(useCase.subItems, useCase.title, useCase.src, useCase.id)}}
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="text-left">
|
|
<div class="mx-auto mb-10">
|
|
<h4>Getting Started with XRP Ledger</h4>
|
|
</div>
|
|
<div class="card-grid card-grid-2xN quickstart-card">
|
|
<div class="col">
|
|
<div class="card video-image">
|
|
<h5 class="mt-7"> Quickstart to XRP Ledger </h5>
|
|
<p class="mb-8 mt-4">
|
|
An introduction to fundamental aspects of the XRP Ledger.
|
|
</p>
|
|
<div class="dg-lg-block mb-3">
|
|
<a
|
|
class="btn btn-primary btn-arrow get-started-button"
|
|
href="./tutorials/quickstart/"
|
|
>
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
<img
|
|
src="/assets/img/backgrounds/docs-quick-start.svg"
|
|
alt="quick-start"
|
|
id="quick-start-img"
|
|
class="quickstart-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card-grid card-grid-2xN video-grid">
|
|
{% set test = "/assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png"%}
|
|
{% for video in getStartedVideos %}
|
|
{{ videoCard(video.url, video.title, video.src) }}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="align-button-on-bottom">
|
|
{{ primaryButton("https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi", "Watch Full Series", true) }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="text-left">
|
|
<h4 class="pb-4">Intermediate Learning Sources</h4>
|
|
<div class="card-grid card-grid-3xN">
|
|
{% for video in intermediateVideos %}
|
|
{{ videoCard(video.url, video.title, video.src) }}
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="text-left">
|
|
<div class="card-grid card-grid-2xN">
|
|
<div class="col d-flex align-items-center justify-content-center">
|
|
<img
|
|
src="/assets/img/backgrounds/docs-devtools-@2x.png"
|
|
class="dev-tools-img"
|
|
>
|
|
</div>
|
|
<div class="col">
|
|
<div class="d-flex flex-column-reverse w-100">
|
|
<h4 class="mb-10">Explore, Test, Verify</h4>
|
|
<h6 class="mb-3">Explore Dev Tools</h6>
|
|
</div>
|
|
<p class="mb-20">
|
|
Use these web-based tools to assist during all stages of
|
|
development, from getting your first payment to testing your
|
|
implementation for best practices.{" "}
|
|
</p>
|
|
<div class="card-grid card-grid-2xN">
|
|
{% for card in devTools %}
|
|
{{ devToolsCard(card.link, card.title, card.description) }}
|
|
{% endfor %}
|
|
</div>
|
|
{{ primaryButton("https://xrpl.org/dev-tools.html", "View All tools", false) }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container-new" id="docs-browse-by">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-10" id="popular-topics">
|
|
<h2 class="h4">{% trans %}Browse By Recommended Pages{% endtrans %}</h2>
|
|
<ul class="nav flex-column">
|
|
{% for page in recommendedPages %}
|
|
<li class="nav-item"><a href="{{page.link}}" class="nav-link">{{page.description}}</a>
|
|
{% endfor %}
|
|
</ul>
|
|
</div><!--/#popular-topics-->
|
|
|
|
<div class="col-lg-6 p-6-sm p-10-until-sm br-8 cta-card">
|
|
<img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
|
|
<img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
|
|
<div class="z-index-1 position-relative">
|
|
<h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Have an Idea for a Tool?{% endtrans %}</h2>
|
|
<p class="mb-10">{% trans %}Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.{% endtrans %}</p>
|
|
<a class="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">Generate Testnet Credentials</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- Browse by recommended and Generate Testnet Credentials -->
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block endbody %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block analytics %}
|
|
<script type="application/javascript">
|
|
window.dataLayer = window.dataLayer || [];
|
|
window.dataLayer.push({
|
|
"event": "page_info",
|
|
"page_type": "Hub Page",
|
|
"page_group": "Docs"
|
|
})
|
|
</script>
|
|
{% endblock analytics %}
|