mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-27 15:15:50 +00:00
Convert page-docs.html.jinja to tsx using the convert-template.cjs script
This commit is contained in:
Amarantha Kulkarni
committed by
mDuo13
mDuo13
parent
f480162b4d
commit
c566aa9401
376
content/docs.page.tsx
Normal file
376
content/docs.page.tsx
Normal file
@@ -0,0 +1,376 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslate } from '@portal/hooks';
|
||||
|
||||
const recommendedPages = [
|
||||
{
|
||||
"description": "rippled API Reference",
|
||||
"link": "./manage-the-rippled-server.html",
|
||||
},
|
||||
{
|
||||
"description": "XRP Faucet",
|
||||
"link": "./xrp-testnet-faucet.html",
|
||||
},
|
||||
{
|
||||
"description": "Getting Started with Python",
|
||||
"link": "./get-started-using-python.html#get-started-using-python",
|
||||
},
|
||||
{
|
||||
"description": "Websocket API Tool",
|
||||
"link": "./websocket-api-tool.html",
|
||||
},
|
||||
{ "description": "XRP Ledger Explorer", "link": "https://livenet.xrpl.org" },
|
||||
] ;
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
"title": "On-Chain Finance",
|
||||
"id": "on-chain-finance-use-cases",
|
||||
"imgClass": "wallet-illustration",
|
||||
"subItems": [
|
||||
{
|
||||
"description": "Trade on the decentralized exchange",
|
||||
"link": "./trade-in-the-decentralized-exchange.html",
|
||||
},
|
||||
{
|
||||
"description": "Make payments",
|
||||
"link": "./send-xrp.html",
|
||||
},
|
||||
{
|
||||
"description": "Use specialized payment types",
|
||||
"link": "./use-specialized-payment-types.html"
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
"title": "Tokens",
|
||||
"id": "token-use-cases",
|
||||
"imgClass": "token-illustration",
|
||||
"subItems": [
|
||||
{
|
||||
"description": "Non-fungible Tokens",
|
||||
"link": "./non-fungible-tokens.html",
|
||||
},
|
||||
{
|
||||
"description": "Issue a stablecoin",
|
||||
"link": "./issue-a-fungible-token.html",
|
||||
},
|
||||
{
|
||||
"description": "Assign an authorized minter",
|
||||
"link": "./assign-an-authorized-minter-using-javascript.html",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
"title": "Payments",
|
||||
"id": "payments-use-cases",
|
||||
"imgClass": "connections-illustration",
|
||||
"subItems": [
|
||||
{
|
||||
"description": "Peer to peer payments",
|
||||
"link": "./direct-xrp-payments.html",
|
||||
},
|
||||
{
|
||||
"description": "Cross-currency payments",
|
||||
"link": "./cross-currency-payments.html",
|
||||
},
|
||||
{
|
||||
"description": "Escrows",
|
||||
"link": "./escrow.html",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
;
|
||||
|
||||
const test = "./assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png";
|
||||
|
||||
const target= {prefix: ''}; // TODO: fixme
|
||||
|
||||
export default function Docs() {
|
||||
const { translate } = useTranslate();
|
||||
|
||||
return (
|
||||
<div className="landing page-docs page-docs-index landing-builtin-bg overflow-hidden styled-page">
|
||||
<div>
|
||||
<section className="text-center title-space">
|
||||
<div className="col-lg-9 mx-auto text-center">
|
||||
<div className="d-flex flex-column-reverse">
|
||||
<h1 className>{translate("XRP Ledger Developer Resources")}</h1>
|
||||
<h6 className="eyebrow mb-3">{translate("Documentation")}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{'{'}# Macros #{'}'}
|
||||
$$ macro primaryButton(href, text, isArrowUp) $$
|
||||
$$ if isArrowUp $$
|
||||
<a className="btn btn-primary btn-arrow-out" id="$$href$$-button" href="$$href$$">$$ text $$</a>
|
||||
$$ else $$
|
||||
<a className="btn btn-primary btn-arrow" id="$$href$$-button" href="$$href$$">$$ text $$</a>
|
||||
$$ endif $$
|
||||
$$ endmacro $$
|
||||
$$ macro flatCard(href, title, description, linkText, imgClass) $$
|
||||
<a href="$$href$$" className="card flat-card float-up-on-hover">
|
||||
<img className="mb-2 $$imgClass$$" alt="$$title$$" />
|
||||
<h5 className="row">
|
||||
<div className="nav-link">$$ title $$</div>
|
||||
</h5>
|
||||
<p className="row faded-text flat-card-padding">
|
||||
$$ description $$
|
||||
</p>
|
||||
<div className="col align-button-on-bottom">
|
||||
<div className="btn btn-primary btn-arrow" id="$$href$$-button">$$ linkText $$</div>
|
||||
</div>
|
||||
</a>
|
||||
$$ endmacro $$
|
||||
$$ macro videoCard(url, title, src)$$
|
||||
<div className="col float-up-on-hover">
|
||||
<a href="$$url$$" id="playvideo" className="btn1" data-url="$$url$$">
|
||||
<img alt="$$title$$" className="get-started-img video-image" id="$$title$$" src={require("$$src$$")} />
|
||||
<h6 className="pt-3">$$ title $$</h6>
|
||||
</a>
|
||||
</div>
|
||||
$$ endmacro $$
|
||||
$$ macro useCasesCard(subItems, title, imgClass, id) $$
|
||||
<div className="col">
|
||||
<img className="use-cases-img img-fluid mb-2 shadow $$imgClass$$" alt="$$title$$" id="$$id$$" />
|
||||
<h5 className="mt-4">$$title$$ </h5>
|
||||
<ul className="nav flex-column">
|
||||
{ subItems.map(item => (
|
||||
<li className="nav-item"><a href={item.link} className="nav-link">{item.description}</a>
|
||||
)) }
|
||||
</li></ul>
|
||||
</div>
|
||||
$$ endmacro $$
|
||||
$$ macro devToolsCard(link, title, description) $$
|
||||
<a href="$$ link $$" className="col dev-tools-link">
|
||||
<h6 className="btn-arrow">$$ title $$</h6>
|
||||
<p> $$ description $$</p>
|
||||
</a>
|
||||
$$ endmacro $$
|
||||
$$
|
||||
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 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",
|
||||
{'}'},
|
||||
]
|
||||
$$
|
||||
$$
|
||||
set devTools = [
|
||||
{'{'}
|
||||
"title": _("Faucets"),
|
||||
"link": "./xrp-testnet-faucet.html",
|
||||
"description":
|
||||
_("Get credentials and test-XRP for XRP Ledger Testnet or Devnet."),
|
||||
{'}'},
|
||||
{'{'}
|
||||
"title": _("WebSocket Tool"),
|
||||
"link": "./websocket-api-tool.html",
|
||||
"description":
|
||||
_("Send sample requests and get responses from the rippled API."),
|
||||
{'}'},
|
||||
{'{'}
|
||||
"title": _("XRP Ledger Explorer"),
|
||||
"link": "https://livenet.xrpl.org",
|
||||
"description":
|
||||
_("View validations of new ledger versions in real-time, chart the location of servers in the XRP Ledger."),
|
||||
{'}'},
|
||||
{'{'}
|
||||
"title": _("Transaction Sender"),
|
||||
"link": "./tx-sender.html",
|
||||
"description":
|
||||
_("Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address."),
|
||||
{'}'},
|
||||
]
|
||||
$$
|
||||
<section className="container-new ">
|
||||
<div className="nav card-grid flat-card-grid card-grid-3xN">
|
||||
<div className="col">
|
||||
$$ flatCard("./concepts.html",
|
||||
_("Concepts"),
|
||||
_("Learn the \"what\" and the \"why\" behind fundamental aspects of the XRP Ledger."),
|
||||
_("Read the Docs"),
|
||||
"concepts-doc-illustration") $$
|
||||
</div>
|
||||
<div className="col">
|
||||
$$ flatCard("./tutorials.html",
|
||||
_("Tutorials"),
|
||||
_("Get step-by-step guidance to perform common tasks with the XRP Ledger."),
|
||||
_("View Tutorials"),
|
||||
"tutorial-illustration") $$
|
||||
</div>
|
||||
<div className="col">
|
||||
$$ flatCard("./references.html",
|
||||
_("References"),
|
||||
_("Look up reference documentation for the XRP Ledger protocol, API methods, and more."),
|
||||
_("View References"),
|
||||
"ref-book-illustration") $$
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new">
|
||||
<h4 className="pb-4">{translate("Use Cases")}</h4>
|
||||
<div className="card-grid card-grid-3xN use-cases">
|
||||
{ useCases.map(useCase => (
|
||||
$$ useCasesCard(useCase.subItems, useCase.title, useCase.imgClass, useCase.id)$$
|
||||
)) }
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new ">
|
||||
<h4 className="pb-4">{translate("Getting Started")}</h4>
|
||||
<div className="card-grid card-grid-2xN quickstart-card">
|
||||
<div className="col">
|
||||
<a href="./send-payments-using-javascript.html" className="card float-up-on-hover">
|
||||
<h5 className="mt-7">{translate("Quickstart to XRP Ledger")}</h5>
|
||||
<p className="mb-8 mt-4">
|
||||
{translate("An introduction to fundamental aspects of the XRP Ledger.")}
|
||||
</p>
|
||||
<div className="dg-lg-block mb-3">
|
||||
<div className="btn btn-primary btn-arrow get-started-button">
|
||||
{translate("Get Started")}
|
||||
</div>
|
||||
</div>
|
||||
<img alt="quick-start" id="quick-start-img" className="quickstart-image" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="card-grid card-grid-2xN video-grid">
|
||||
{ getStartedVideos.map(video => (
|
||||
$$ videoCard(video.url, video.title, video.src) $$
|
||||
)) }
|
||||
</div>
|
||||
<div className="align-button-on-bottom">
|
||||
$$ primaryButton("https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi", _("Watch Full Series"), true) $$
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new ">
|
||||
<div className="d-flex flex-column-reverse col-sm-8 p-0">
|
||||
<h3 className="h4 h2-sm">{translate("Interact with the XRP Ledger in a language of your choice")}</h3>
|
||||
<h6 className="eyebrow mb-3">{translate("Explore SDKs")}</h6>
|
||||
</div>
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col">
|
||||
<div className="card-grid langs-cards card-grid-2xN mt-10" id="langs-cards">
|
||||
<div className="col langs">
|
||||
<a href="./get-started-using-javascript.html">
|
||||
<img alt="Javascript Logo" src={require("./assets/img/logos/javascript.svg")} className="circled-logo" />
|
||||
<h5 className="btn-arrow">{translate("Javascript")}</h5>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col langs">
|
||||
<a href="./get-started-using-python.html">
|
||||
<img alt="Python Logo" src={require("./assets/img/logos/python.svg")} className="circled-logo" />
|
||||
<h5 className="btn-arrow">{translate("Python")}</h5>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col langs">
|
||||
<a href="./get-started-using-java.html">
|
||||
<img alt="Java Logo" src={require("./assets/img/logos/java.svg")} className="circled-logo" />
|
||||
<h5 className="btn-arrow">{translate("Java")}</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col center-image">
|
||||
<img className="img-fluid sdk-img" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new ">
|
||||
<h4 className="pb-4">{translate("Intermediate Learning Sources")}</h4>
|
||||
<div className="card-grid card-grid-3xN">
|
||||
{ intermediateVideos.map(video => (
|
||||
$$ videoCard(video.url, video.title, video.src) $$
|
||||
)) }
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new ">
|
||||
<div className="card-grid card-grid-2xN">
|
||||
<div className="col d-flex align-items-center justify-content-center">
|
||||
<img className="dev-tools-img" />
|
||||
</div>
|
||||
<div className="col explore-links">
|
||||
<div className="d-flex flex-column-reverse w-100">
|
||||
<h4 className="mb-10">{translate("Explore, Test, Verify")}</h4>
|
||||
<h6 className="mb-3">{translate("Explore Dev Tools")}</h6>
|
||||
</div>
|
||||
<p className="mb-20">
|
||||
{translate("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 className="card-grid card-grid-2xN">
|
||||
{ devTools.map(card => (
|
||||
$$ devToolsCard(card.link, card.title, card.description) $$
|
||||
)) }
|
||||
</div>
|
||||
$$ primaryButton("./dev-tools.html", "View All tools", false) $$
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="container-new " id="docs-browse-by">
|
||||
<div className="row card-grid card-grid-2xN">
|
||||
<div className="col" id="popular-topics">
|
||||
<h2 className="h4">{translate("Browse By Recommended Pages")}</h2>
|
||||
<ul className="nav flex-column">
|
||||
{ recommendedPages.map(page => (
|
||||
<li className="nav-item"><a href={page.link} className="nav-link">{page.description}</a>
|
||||
)) }
|
||||
</li></ul>
|
||||
</div>{/*/#popular-topics*/}
|
||||
<div className="col">
|
||||
<div className="card cta-card p-8-sm p-10-until-sm br-8">
|
||||
<img src={require("./img/backgrounds/cta-home-purple.svg")} className="d-none-sm cta cta-top-left" />
|
||||
<img src={require("./img/backgrounds/cta-home-green.svg")} className="cta cta-bottom-right" />
|
||||
<div className="z-index-1 position-relative">
|
||||
<h2 className="h4 mb-8-sm mb-10-until-sm">{translate("Get Free Test XRP")}</h2>
|
||||
<p className="mb-10">{translate("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.")}</p>
|
||||
<a className="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">{translate("Generate Testnet Credentials")}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>{/* Browse by recommended and Generate Testnet Credentials */}
|
||||
<section className="container-new">
|
||||
<a href="./docs-index.html" className="btn-arrow arrow-purple documentation-index mr-auto">{translate("See full documentation index")}</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user