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

chore: fix docs page after migration

Browse Source
This commit is contained in:
Roman Hotsiy
2023-10-11 11:58:28 +08:00
committed by mDuo13
parent de0ca20900
commit 400f638859
2 changed files with 412 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

724
content/docs.page.tsx
View File

@@ -2,89 +2,227 @@ import * as React from 'react';
import { useTranslate } from '@portal/hooks'; import { useTranslate } from '@portal/hooks';
const recommendedPages = [ const recommendedPages = [
{ {
"description": "rippled API Reference", description: 'rippled API Reference',
"link": "./manage-the-rippled-server.html", link: './manage-the-rippled-server.html',
}, },
{ {
"description": "XRP Faucet", description: 'XRP Faucet',
"link": "./xrp-testnet-faucet.html", link: './xrp-testnet-faucet.html',
}, },
{ {
"description": "Getting Started with Python", description: 'Getting Started with Python',
"link": "./get-started-using-python.html#get-started-using-python", link: './get-started-using-python.html#get-started-using-python',
}, },
{ {
"description": "Websocket API Tool", description: 'Websocket API Tool',
"link": "./websocket-api-tool.html", link: './websocket-api-tool.html',
}, },
{ "description": "XRP Ledger Explorer", "link": "https://livenet.xrpl.org" }, { description: 'XRP Ledger Explorer', link: 'https://livenet.xrpl.org' },
] ; ];
const useCases = [ const useCases = [
{ {
"title": "On-Chain Finance", title: 'On-Chain Finance',
"id": "on-chain-finance-use-cases", id: 'on-chain-finance-use-cases',
"imgClass": "wallet-illustration", imgClass: 'wallet-illustration',
"subItems": [ subItems: [
{ {
"description": "Trade on the decentralized exchange", description: 'Trade on the decentralized exchange',
"link": "./trade-in-the-decentralized-exchange.html", link: './trade-in-the-decentralized-exchange.html',
}, },
{ {
"description": "Make payments", description: 'Make payments',
"link": "./send-xrp.html", link: './send-xrp.html',
}, },
{ {
"description": "Use specialized payment types", description: 'Use specialized payment types',
"link": "./use-specialized-payment-types.html" link: './use-specialized-payment-types.html',
} },
], ],
}, },
{ {
"title": "Tokens", title: 'Tokens',
"id": "token-use-cases", id: 'token-use-cases',
"imgClass": "token-illustration", imgClass: 'token-illustration',
"subItems": [ subItems: [
{ {
"description": "Non-fungible Tokens", description: 'Non-fungible Tokens',
"link": "./non-fungible-tokens.html", link: './non-fungible-tokens.html',
}, },
{ {
"description": "Issue a stablecoin", description: 'Issue a stablecoin',
"link": "./issue-a-fungible-token.html", link: './issue-a-fungible-token.html',
}, },
{ {
"description": "Assign an authorized minter", description: 'Assign an authorized minter',
"link": "./assign-an-authorized-minter-using-javascript.html", link: './assign-an-authorized-minter-using-javascript.html',
}, },
], ],
}, },
{ {
"title": "Payments", title: 'Payments',
"id": "payments-use-cases", id: 'payments-use-cases',
"imgClass": "connections-illustration", imgClass: 'connections-illustration',
"subItems": [ subItems: [
{ {
"description": "Peer to peer payments", description: 'Peer to peer payments',
"link": "./direct-xrp-payments.html", link: './direct-xrp-payments.html',
}, },
{ {
"description": "Cross-currency payments", description: 'Cross-currency payments',
"link": "./cross-currency-payments.html", link: './cross-currency-payments.html',
}, },
{ {
"description": "Escrows", description: 'Escrows',
"link": "./escrow.html", link: './escrow.html',
}, },
], ],
}, },
] ];
; const intermediateVideos = [
{
src: require('./static/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: require('./static/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: require('./static/img/backgrounds/docs-sidechains@2x.png'),
title: 'Federated Sidechains',
url: 'https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&showinfo=0&autoplay=1',
},
];
const getStartedVideos = [
{
src: require('./static/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: require('./static/img/backgrounds/docs-accounts@2x.png'),
title: 'Accounts',
url: 'https://www.youtube.com/embed/eO8jE6PftX8?rel=0&showinfo=0&autoplay=1',
},
{
src: require('./static/img/backgrounds/docs-decentralized-exchange@2x.png'),
title: 'Decentralized Exchange',
url: 'https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&showinfo=0&autoplay=1',
},
{
src: require('./static/img/backgrounds/docs-tokenization@2x.png'),
title: 'Tokenization',
url: 'https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&showinfo=0&autoplay=1',
},
];
const test = "./assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png"; const 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.',
},
];
const test = './assets/img/backgrounds/docs-intro-to-XRP-ledger@2x.png';
const target= {prefix: ''}; // TODO: fixme const target = { prefix: '' }; // TODO: fixme
function UseCasesCard(props: {
useCase: {
id: string;
title: string;
imgClass: string;
subItems: { description: string; link: string }[];
};
}) {
const { useCase } = props;
return (
<div className="col">
<img className={'use-cases-img img-fluid mb-2 shadow ' + useCase.imgClass} alt={useCase.title} id={useCase.id} />
<h5 className="mt-4">{useCase.title}</h5>
<ul className="nav flex-column">
{useCase.subItems.map(item => (
<li key={item.link} className="nav-item">
<a href={item.link} className="nav-link">
{item.description}
</a>
</li>
))}
</ul>
</div>
);
}
function FlatCard(props: { href: string; title: string; description: string; linkText: string; imgClass }) {
const { title, description, linkText, href, imgClass } = props;
return (
<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>
);
}
function VideoCard(props: { url: string; title: string; src: string }) {
const { url, title, src } = props;
return (
<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={src} />
<h6 className="pt-3">{title}</h6>
</a>
</div>
);
}
function DevToolCard(props: { link: string; title: string; description: string }) {
const { translate } = useTranslate();
const { link, title, description } = props;
return (
<a href={link} className="col dev-tools-link">
<h6 className="btn-arrow">{translate(title)}</h6>
<p> {translate(description)}</p>
</a>
);
}
function PrimaryButton(props: { href: string; text: string; isArrowUp: boolean }) {
const { href, text, isArrowUp } = props;
return (
<a className={`btn btn-primary ${isArrowUp ? 'btn-arrow-out' : 'btn-arrow'}`} id={href + '-button'} href="{href}">
{text}
</a>
);
}
export default function Docs() { export default function Docs() {
const { translate } = useTranslate(); const { translate } = useTranslate();
@@ -92,285 +230,197 @@ export default function Docs() {
return ( return (
<div className="landing page-docs page-docs-index landing-builtin-bg overflow-hidden styled-page"> <div className="landing page-docs page-docs-index landing-builtin-bg overflow-hidden styled-page">
<div> <div>
<section className="text-center title-space"> <section className="text-center title-space">
<div className="col-lg-9 mx-auto text-center"> <div className="col-lg-9 mx-auto text-center">
<div className="d-flex flex-column-reverse"> <div className="d-flex flex-column-reverse">
<h1 className>{translate("XRP Ledger Developer Resources")}</h1> <h1>{translate('XRP Ledger Developer Resources')}</h1>
<h6 className="eyebrow mb-3">{translate("Documentation")}</h6> <h6 className="eyebrow mb-3">{translate('Documentation')}</h6>
</div> </div>
</div> </div>
</section> </section>
{'{'}# Macros #{'}'}
$$ macro primaryButton(href, text, isArrowUp) $$ <section className="container-new ">
$$ if isArrowUp $$ <div className="nav card-grid flat-card-grid card-grid-3xN">
<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&amp;showinfo=0&amp;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&amp;showinfo=0&amp;autoplay=1",
{'}'},
{'{'}
"src": "./assets/img/backgrounds/docs-sidechains@2x.png",
"title": _("Federated Sidechains"),
"url": "https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&amp;showinfo=0&amp;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&amp;showinfo=0&amp;autoplay=1",
{'}'},
{'{'}
"src": "./assets/img/backgrounds/docs-accounts@2x.png",
"title": _("Accounts"),
"url": "https://www.youtube.com/embed/eO8jE6PftX8?rel=0&amp;showinfo=0&amp;autoplay=1",
{'}'},
{'{'}
"src": "./assets/img/backgrounds/docs-decentralized-exchange@2x.png",
"title": _("Decentralized Exchange"),
"url": "https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&amp;showinfo=0&amp;autoplay=1",
{'}'},
{'{'}
"src": "./assets/img/backgrounds/docs-tokenization@2x.png",
"title": _("Tokenization"),
"url": "https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&amp;showinfo=0&amp;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"> <div className="col">
$$ flatCard("./concepts.html", <FlatCard
_("Concepts"), href="./concepts.html"
_("Learn the \"what\" and the \"why\" behind fundamental aspects of the XRP Ledger."), title={translate('Concepts')}
_("Read the Docs"), description={translate('Learn the "what" and the "why" behind fundamental aspects of the XRP Ledger.')}
"concepts-doc-illustration") $$ linkText={translate('Read the Docs')}
imgClass="concepts-doc-illustration"
/>
</div> </div>
<div className="col"> <div className="col">
$$ flatCard("./tutorials.html", <FlatCard
_("Tutorials"), href="./tutorials.html"
_("Get step-by-step guidance to perform common tasks with the XRP Ledger."), title={translate('Tutorials')}
_("View Tutorials"), description={translate('Get step-by-step guidance to perform common tasks with the XRP Ledger.')}
"tutorial-illustration") $$ linkText={translate('View Tutorials')}
imgClass="tutorial-illustration"
/>
</div> </div>
<div className="col"> <div className="col">
$$ flatCard("./references.html", <FlatCard
_("References"), href="./references.html"
_("Look up reference documentation for the XRP Ledger protocol, API methods, and more."), title={translate('References')}
_("View References"), description={translate(
"ref-book-illustration") $$ 'Look up reference documentation for the XRP Ledger protocol, API methods, and more.'
)}
linkText={translate('View References')}
imgClass="ref-book-illustration"
/>
</div> </div>
</div> </div>
</section> </section>
<section className="container-new"> <section className="container-new">
<h4 className="pb-4">{translate("Use Cases")}</h4> <h4 className="pb-4">{translate('Use Cases')}</h4>
<div className="card-grid card-grid-3xN use-cases"> <div className="card-grid card-grid-3xN use-cases">
{ useCases.map(useCase => ( {useCases.map(useCase => (
$$ useCasesCard(useCase.subItems, useCase.title, useCase.imgClass, useCase.id)$$ <UseCasesCard useCase={useCase} />
)) } ))}
</div> </div>
</section> </section>
<section className="container-new "> <section className="container-new ">
<h4 className="pb-4">{translate("Getting Started")}</h4> <h4 className="pb-4">{translate('Getting Started')}</h4>
<div className="card-grid card-grid-2xN quickstart-card"> <div className="card-grid card-grid-2xN quickstart-card">
<div className="col"> <div className="col">
<a href="./send-payments-using-javascript.html" className="card float-up-on-hover"> <a href="./send-payments-using-javascript.html" className="card float-up-on-hover">
<h5 className="mt-7">{translate("Quickstart to XRP Ledger")}</h5> <h5 className="mt-7">{translate('Quickstart to XRP Ledger')}</h5>
<p className="mb-8 mt-4"> <p className="mb-8 mt-4">{translate('An introduction to fundamental aspects of the XRP Ledger.')}</p>
{translate("An introduction to fundamental aspects of the XRP Ledger.")} <div className="dg-lg-block mb-3">
</p> <div className="btn btn-primary btn-arrow get-started-button">{translate('Get Started')}</div>
<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>
<img alt="quick-start" id="quick-start-img" className="quickstart-image" />
</a>
</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="col">
<div className="card-grid langs-cards card-grid-2xN mt-10" id="langs-cards"> <div className="card-grid card-grid-2xN video-grid">
<div className="col langs"> {getStartedVideos.map(video => (
<a href="./get-started-using-javascript.html"> <VideoCard url={video.url} title={translate(video.title)} src={video.src} />
<img alt="Javascript Logo" src={require("./assets/img/logos/javascript.svg")} className="circled-logo" /> ))}
<h5 className="btn-arrow">{translate("Javascript")}</h5> </div>
</a> <div className="align-button-on-bottom">
</div> <PrimaryButton
<div className="col langs"> href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
<a href="./get-started-using-python.html"> text={translate('Watch Full Series')}
<img alt="Python Logo" src={require("./assets/img/logos/python.svg")} className="circled-logo" /> isArrowUp={true}
<h5 className="btn-arrow">{translate("Python")}</h5> />
</a> </div>
</div> </div>
<div className="col langs"> </div>
<a href="./get-started-using-java.html"> </section>
<img alt="Java Logo" src={require("./assets/img/logos/java.svg")} className="circled-logo" /> <section className="container-new ">
<h5 className="btn-arrow">{translate("Java")}</h5> <div className="d-flex flex-column-reverse col-sm-8 p-0">
</a> <h3 className="h4 h2-sm">{translate('Interact with the XRP Ledger in a language of your choice')}</h3>
</div> <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('./static/img/logos/javascript.svg')}
className="circled-logo"
/>
<h5 className="btn-arrow">{translate('Javascript')}</h5>
</a>
</div> </div>
<div className="col langs">
<a href="./get-started-using-python.html">
<img alt="Python Logo" src={require('./static/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('./static/img/logos/java.svg')} className="circled-logo" />
<h5 className="btn-arrow">{translate('Java')}</h5>
</a>
</div>
</div>
</div> </div>
<div className="col center-image"> <div className="col center-image">
<img className="img-fluid sdk-img" /> <img className="img-fluid sdk-img" />
</div> </div>
</div> </div>
</section> </section>
<section className="container-new "> <section className="container-new ">
<h4 className="pb-4">{translate("Intermediate Learning Sources")}</h4> <h4 className="pb-4">{translate('Intermediate Learning Sources')}</h4>
<div className="card-grid card-grid-3xN"> <div className="card-grid card-grid-3xN">
{ intermediateVideos.map(video => ( {intermediateVideos.map(video => (
$$ videoCard(video.url, video.title, video.src) $$ <VideoCard url={video.url} title={translate(video.title)} src={video.src} />
)) } ))}
</div> </div>
</section> </section>
<section className="container-new "> <section className="container-new ">
<div className="card-grid card-grid-2xN"> <div className="card-grid card-grid-2xN">
<div className="col d-flex align-items-center justify-content-center"> <div className="col d-flex align-items-center justify-content-center">
<img className="dev-tools-img" /> <img className="dev-tools-img" />
</div> </div>
<div className="col explore-links"> <div className="col explore-links">
<div className="d-flex flex-column-reverse w-100"> <div className="d-flex flex-column-reverse w-100">
<h4 className="mb-10">{translate("Explore, Test, Verify")}</h4> <h4 className="mb-10">{translate('Explore, Test, Verify')}</h4>
<h6 className="mb-3">{translate("Explore Dev Tools")}</h6> <h6 className="mb-3">{translate('Explore Dev Tools')}</h6>
</div> </div>
<p className="mb-20"> <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.")} {translate(
</p> 'Use these web-based tools to assist during all stages of development, from getting your first payment to testing your implementation for best practices.'
<div className="card-grid card-grid-2xN"> )}
{ devTools.map(card => ( </p>
$$ devToolsCard(card.link, card.title, card.description) $$ <div className="card-grid card-grid-2xN">
)) } {devTools.map(card => (
</div> <DevToolCard
$$ primaryButton("./dev-tools.html", "View All tools", false) $$ link={card.link}
title={translate(card.title)}
description={translate(card.description)}
/>
))}
</div>
<PrimaryButton href="./dev-tools.html" text={translate('View All tools')} isArrowUp={false} />
</div> </div>
</div> </div>
</section> </section>
<section className="container-new " id="docs-browse-by"> <section className="container-new " id="docs-browse-by">
<div className="row card-grid card-grid-2xN"> <div className="row card-grid card-grid-2xN">
<div className="col" id="popular-topics"> <div className="col" id="popular-topics">
<h2 className="h4">{translate("Browse By Recommended Pages")}</h2> <h2 className="h4">{translate('Browse By Recommended Pages')}</h2>
<ul className="nav flex-column"> <ul className="nav flex-column">
{ recommendedPages.map(page => ( {recommendedPages.map(page => (
<li className="nav-item"><a href={page.link} className="nav-link">{page.description}</a> <li className="nav-item">
)) } <a href={page.link} className="nav-link">
</li></ul> {translate(page.description)}
</div>{/*/#popular-topics*/} </a>
<div className="col"> </li>
<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" /> </ul>
<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>
</div> <div className="col">
</section>{/* Browse by recommended and Generate Testnet Credentials */} <div className="card cta-card p-8-sm p-10-until-sm br-8">
<section className="container-new"> <img src={require('./img/backgrounds/cta-home-purple.svg')} className="d-none-sm cta cta-top-left" />
<a href="./docs-index.html" className="btn-arrow arrow-purple documentation-index mr-auto">{translate("See full documentation index")}</a> <img src={require('./img/backgrounds/cta-home-green.svg')} className="cta cta-bottom-right" />
</section> <div className="z-index-1 position-relative">
</div> <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>
<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> </div>
) );
} }

50
content/top-nav.yaml
View File

@@ -10,58 +10,58 @@
- group: XRP Ledger Overview - group: XRP Ledger Overview
items: items:
- label: XRPL Overview - label: XRPL Overview
link: /about/xrp-ledger-overview/ href: /about/xrp-ledger-overview/
- label: Use Cases - label: Use Cases
link: /about/use-cases/ href: /about/use-cases/
- label: History - label: History
link: /about/history/ href: /about/history/
- label: Ledger Explorer - label: Ledger Explorer
link: https://livenet.xrpl.org href: https://livenet.xrpl.org
external: true external: true
- group: XRP - group: XRP
items: items:
- label: XRP Overview - label: XRP Overview
link: /about/xrp-overview href: /about/xrp-overview
- group: Sustainability - group: Sustainability
items: items:
- label: Impact - label: Impact
link: /about/impact/ href: /about/impact/
- group: About - group: About
items: items:
- label: XRPL Foundation - label: XRPL Foundation
link: https://foundation.xrpl.org/ href: https://foundation.xrpl.org/
external: true external: true
- label: FAQ - label: FAQ
link: /about/faq/ href: /about/faq/
- group: Docs - group: Docs
items: items:
- hero: top-nav-hero-docs - hero: top-nav-hero-docs
label: Documentation label: Documentation
description: Dive into XRP Ledger technology and start integrating. description: Dive into XRP Ledger technology and start integrating.
link: /docs/ page: ./docs.page.tsx
- group: Introduction to the XRP Ledger - group: Introduction to the XRP Ledger
items: items:
- label: What is XRP? - label: What is XRP?
link: /docs/concepts/introduction/what-is-xrp href: /docs/concepts/introduction/what-is-xrp
- label: What is the XRP Ledger? - label: What is the XRP Ledger?
link: /docs/concepts/introduction/what-is-xrpl href: /docs/concepts/introduction/what-is-xrpl
- label: Transactions and Requests - label: Transactions and Requests
link: /docs/concepts/introduction/txn-and-requests href: /docs/concepts/introduction/txn-and-requests
- group: Tutorials - group: Tutorials
items: items:
- label: Quickstart - label: Quickstart
link: /docs/tutorials/quickstart href: /docs/tutorials/quickstart
- label: Code Samples - label: Code Samples
link: /docs/code-samples href: /docs/code-samples
- group: API Reference - group: API Reference
items: items:
- label: Client Libraries - label: Client Libraries
link: /docs/references/client-libraries/ href: /docs/references/client-libraries/
- label: Public API Methods - label: Public API Methods
link: /docs/references/http-websocket-apis/public-api-methods/ href: /docs/references/http-websocket-apis/public-api-methods/
- label: Admin API Methods - label: Admin API Methods
link: /docs/references/http-websocket-apis/admin-api-methods/ href: /docs/references/http-websocket-apis/admin-api-methods/
- group: Popular Pages - group: Popular Pages
items: items:
- label: Send XRP - label: Send XRP
@@ -71,7 +71,7 @@
- label: XRPL Servers - label: XRPL Servers
href: /infrastructure/xrpl-servers/ href: /infrastructure/xrpl-servers/
- label: Dev Tools - label: Dev Tools
link: /docs/dev-tools/ href: /docs/dev-tools/
- group: Community - group: Community
@@ -79,18 +79,18 @@
- hero: top-nav-hero-contribute - hero: top-nav-hero-contribute
label: Contribute to the XRPL Community label: Contribute to the XRPL Community
description: Join the conversation description: Join the conversation
link: /community/ href: /community/
- label: Events - label: Events
link: /community/events/ href: /community/events/
- label: Ambassadors - label: Ambassadors
link: /community/ambassadors/ href: /community/ambassadors/
- label: XRPL Jobs - label: XRPL Jobs
link: https://jobs.xrpl.org/ href: https://jobs.xrpl.org/
external: true external: true
- label: Blog - label: Blog
link: /blog/ href: /blog/
- label: XRPL Grants - label: XRPL Grants
link: https://xrplgrants.org/ href: https://xrplgrants.org/
external: true external: true
- label: Report a Scam - label: Report a Scam
link: /community/report-a-scam/ href: /community/report-a-scam/