mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-10 23:05:51 +00:00
second iteration
This commit is contained in:
Phu Pham
@@ -1218,8 +1218,8 @@ pages:
|
||||
html: tutorials.html
|
||||
parent: docs.html
|
||||
top_nav_grouping: Article Types
|
||||
template: pagetype-category.html.jinja
|
||||
blurb: Get step-by-step guidance to perform common tasks with the XRP Ledger.
|
||||
template: pagetype-tutorials.html.jinja
|
||||
blurb: The XRP Ledger tutorials walk you through the steps to learn and get started with the XRP Ledger and to use the ledger for advanced use cases.
|
||||
targets:
|
||||
- en
|
||||
|
||||
|
||||
@@ -936,39 +936,6 @@
|
||||
|
||||
}
|
||||
|
||||
#tutorial-cards {
|
||||
.card:nth-child(1) .card-footer {
|
||||
background-image: url(../img/cards/4col-light-blue-3.svg);
|
||||
}
|
||||
.card:nth-child(2) .card-footer {
|
||||
background-image: url(../img/cards/4col-purple-blue-2.svg);
|
||||
}
|
||||
.card:nth-child(3) .card-footer {
|
||||
background-image: url(../img/cards/4col-magenta-3.svg);
|
||||
}
|
||||
.card:nth-child(4) .card-footer {
|
||||
background-image: url(../img/cards/4col-green-2.svg);
|
||||
}
|
||||
.card:nth-child(5) .card-footer {
|
||||
background-image: url(../img/cards/4col-orange-yellow-2.svg);
|
||||
}
|
||||
.card:nth-child(6) .card-footer {
|
||||
background-image: url(../img/cards/4col-blue-purple.svg);
|
||||
}
|
||||
.card:nth-child(7) .card-footer {
|
||||
background-image: url(../img/cards/4col-yellow-2.svg);
|
||||
}
|
||||
.card:nth-child(8) .card-footer {
|
||||
background-image: url(../img/cards/4col-orange-2.svg);
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.page-faq {
|
||||
&::before {
|
||||
|
||||
100
styles/_tutorials.scss
Normal file
100
styles/_tutorials.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
/* Tutorials ---------------------------------------------------------------- */
|
||||
#tutorial-cards {
|
||||
.card:nth-child(1) .card-footer {
|
||||
background-image: url(../img/cards/4col-light-blue-3.svg);
|
||||
}
|
||||
.card:nth-child(2) .card-footer {
|
||||
background-image: url(../img/cards/4col-purple-blue-2.svg);
|
||||
}
|
||||
.card:nth-child(3) .card-footer {
|
||||
background-image: url(../img/cards/4col-magenta-3.svg);
|
||||
}
|
||||
.card:nth-child(4) .card-footer {
|
||||
background-image: url(../img/cards/4col-green-2.svg);
|
||||
}
|
||||
.card:nth-child(5) .card-footer {
|
||||
background-image: url(../img/cards/4col-orange-yellow-2.svg);
|
||||
}
|
||||
.card:nth-child(6) .card-footer {
|
||||
background-image: url(../img/cards/4col-blue-purple.svg);
|
||||
}
|
||||
.card:nth-child(7) .card-footer {
|
||||
background-image: url(../img/cards/4col-yellow-2.svg);
|
||||
}
|
||||
.card:nth-child(8) .card-footer {
|
||||
background-image: url(../img/cards/4col-orange-2.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.tutorial-card-grid {
|
||||
grid-gap: 40px !important;
|
||||
row-gap: 0 !important;
|
||||
&.card-grid {
|
||||
.card {
|
||||
margin-bottom: 2.5rem;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
|
||||
.card-body {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
|
||||
&.external-link::after {
|
||||
background-size: 0.9rem;
|
||||
vertical-align: middle;
|
||||
margin-left: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-right: 10px;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
&.nav-link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
font-size: 0;
|
||||
padding: 1rem;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-icon-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: $gray-600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 12px;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-lg-6 > .tutorial-sidebar {
|
||||
flex: 0 0 70%;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
|
||||
@@ -69,6 +69,7 @@ $line-height-base: 1.5;
|
||||
@import "_video.scss";
|
||||
//@import "_top-banner.scss";
|
||||
@import "_toml-checker.scss";
|
||||
@import "_tutorials.scss";
|
||||
|
||||
// Light/Dark theme settings ---------------------------------------------------
|
||||
// Option to only change theme on user system settings. No toggle.
|
||||
|
||||
@@ -22,25 +22,7 @@
|
||||
{% if currentpage.blurb != target.blurb %}<p class="blurb">{{ currentpage.blurb }}</p>{% endif %}
|
||||
{% set show_blurbs = True %}
|
||||
{% set depth= 1 %}
|
||||
{% if currentpage.name == "Tutorials" %}
|
||||
{% macro tutorialCard(id, href, title, description, img) %}
|
||||
<a class="card" href="{{href}}" target="_blank" id="{{id}}">
|
||||
{% if img %}<img src="{{img}}" alt="{{title}} Screenshot" />{% endif %}
|
||||
<div class="card-body">
|
||||
<h4 class="card-title h5">{{title}}</h4>
|
||||
<p class="card-text">{{description}}</p>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endmacro %}
|
||||
<div id="tutorial-cards" class="row row-cols-1 row-cols-lg-2 card-deck">
|
||||
{% for child in currentpage.children %}
|
||||
{{ tutorialCard(child.id, child.html, child.name, child.blurb, child.img)}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include 'children.html' %}
|
||||
{% endif %}
|
||||
{% include 'children.html' %}
|
||||
</article>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
222
template/pagetype-tutorials.html.jinja
Normal file
222
template/pagetype-tutorials.html.jinja
Normal file
@@ -0,0 +1,222 @@
|
||||
{% extends "base.html.jinja" %}
|
||||
|
||||
{% block mainclasses %}landing landing-children padded-main{% endblock %}
|
||||
|
||||
{% set categoriesTutorials = [
|
||||
{
|
||||
"id": "beginner",
|
||||
"title": "Beginner Tutorials",
|
||||
"description": "",
|
||||
"children": [
|
||||
{
|
||||
"title": "Quickstart",
|
||||
"description": "This Quickstart tutorial walks you through a test harness interface to try out the XRP Ledger.",
|
||||
"href": "xrpl-quickstart.html",
|
||||
"img": "",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "sdk",
|
||||
"title": "Get started with SDKs",
|
||||
"description": "These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using SDKs.",
|
||||
"children": [
|
||||
{
|
||||
"title": "Python",
|
||||
"description": "Using xrpl.py, a pure Python library.",
|
||||
"href": "get-started-using-python.html",
|
||||
"img": "../../assets/img/logos/python.svg",
|
||||
"external": true,
|
||||
},
|
||||
{
|
||||
"title": "Java",
|
||||
"description": "Using xrpl4j, a pure Java library.",
|
||||
"href": "get-started-using-java.html",
|
||||
"img": "../../assets/img/logos/java.svg",
|
||||
"external": true,
|
||||
},
|
||||
{
|
||||
"title": "Javascript",
|
||||
"description": "Using the xrpl.js client library.",
|
||||
"href": "get-started-using-javascript.html",
|
||||
"img": "../../assets/img/logos/javascript.svg",
|
||||
"external": true,
|
||||
},
|
||||
{
|
||||
"title": "HTTP & Websocket APIs",
|
||||
"description": "Access the XRP Ledger directly through the APIs of its core server.",
|
||||
"href": "http-websocket-apis.html",
|
||||
"img": "../../assets/img/logos/globe.svg",
|
||||
"external": true,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "use-cases",
|
||||
"title": "XRP Ledger Use Cases",
|
||||
"description": "",
|
||||
"children": [
|
||||
{
|
||||
"title": "Payments",
|
||||
"description": "Send and receive payments on the XRP Ledger.",
|
||||
"href": "payment.html",
|
||||
"img": "",
|
||||
},
|
||||
{
|
||||
"title": "Tokens",
|
||||
"description": "Create and trade fungible and non-fungible tokens on the XRP Ledger.",
|
||||
"href": "tokens.html",
|
||||
"img": "",
|
||||
},
|
||||
{
|
||||
"title": "Interoperability",
|
||||
"description": "Create bridges between the XRP Ledger and other cryptocurrency networks.",
|
||||
"href": "xrpl-interoperability.html",
|
||||
"img": "",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "servers",
|
||||
"title": "Manage the XRP Ledger Servers",
|
||||
"description": "",
|
||||
"children": [
|
||||
{
|
||||
"title": "Install rippled Server",
|
||||
"description": "These tutorials describe the steps to install and update the core XRP Ledger server.",
|
||||
"href": "install-rippled.html",
|
||||
"img": "",
|
||||
"external": true,
|
||||
},
|
||||
{
|
||||
"title": "Configure rippled Server",
|
||||
"description": "These tutorials describe the steps to run rippled in stand-alone mode and test features without a full network.",
|
||||
"href": "configure-rippled.html",
|
||||
"img": "",
|
||||
"external": true,
|
||||
},
|
||||
{
|
||||
"title": "Run rippled in Standalone Mode",
|
||||
"description": "Using the xrpl.js client library.",
|
||||
"href": "use-stand-alone-mode.html",
|
||||
"img": "",
|
||||
"external": true,
|
||||
},
|
||||
{
|
||||
"title": "Install Clio Server",
|
||||
"description": "This tutorial describes the steps to install the Clio server on Ubuntu platform.",
|
||||
"href": "install-clio-on-ubuntu.html",
|
||||
"img": "",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "businesses",
|
||||
"title": "XRP Ledger Businesses",
|
||||
"description": "This section demonstrates how to follow various best practices for running businesses that interface with the XRP Ledger, such as exchanges listing XRP and gateways issuing currency in the XRP Ledger.",
|
||||
"children": [
|
||||
{
|
||||
"title": "List XRP as an Exchange",
|
||||
"description": "Run a digital asset exchange? Follow these steps to add XRP.",
|
||||
"href": "list-xrp-as-an-exchange.html",
|
||||
"img": "",
|
||||
},
|
||||
{
|
||||
"title": "Become a Stablecoin Issuer",
|
||||
"description": "Stablecoin issuers link tokens in the XRP Ledger to assets in the outside world.",
|
||||
"href": "become-an-xrp-ledger-gateway.html#become-a-stablecoin-issuer",
|
||||
"img": "",
|
||||
},
|
||||
]
|
||||
},
|
||||
]%}
|
||||
|
||||
{% block right_sidebar %}
|
||||
<div class="tutorial-sidebar">
|
||||
<a class="with-caret expander collapsed d-lg-none" id="toc-expander" role="button" data-toggle="collapse" data-target="#page-toc-wrapper" aria-expanded="false">
|
||||
Page Toolbar
|
||||
<span class="chevron"><span></span><span></span></span>
|
||||
</a>
|
||||
<div id="page-toc-wrapper" class="collapse d-lg-block">
|
||||
<div class="toc-header">
|
||||
<h4>{% trans %}Overview{% endtrans %}</h4>
|
||||
</div>
|
||||
<ul class="page-toc nav flex-column" role="directory">
|
||||
<li class="nav-item"><a class="nav-link" href="#main-page-header">Tutorials</a></li>
|
||||
{% for c in categoriesTutorials %}
|
||||
<li class="nav-item"><a class="nav-link" href="#{{c.id}}">{{c.title}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
{% if content %}
|
||||
|
||||
<section class="pt-3 p-md-3">
|
||||
<article class="content">
|
||||
{{ content }}
|
||||
|
||||
{% set show_blurbs = True %}
|
||||
{% set depth= 1 %}
|
||||
{% include 'children.html' %}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{% else %}
|
||||
<section class="pt-3 p-md-3">
|
||||
<article class="content">
|
||||
<h1 id="main-page-header">{{ currentpage.name }}</h1>
|
||||
{% if currentpage.blurb != target.blurb %}<p class="blurb">{{ currentpage.blurb }}</p>{% endif %}
|
||||
{% set show_blurbs = True %}
|
||||
{% set depth= 1 %}
|
||||
{% macro tutorialCard(title, description, href, img, external) %}
|
||||
<a class="card" href="{{href}}" target="_blank">
|
||||
<div class="card-body">
|
||||
{% if img %}
|
||||
<div class="card-icon-container">
|
||||
<img src="{{img}}" alt="{{title}} Screenshot" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if external %}
|
||||
<h4 class="card-title h5 nav-link external-link">{{title}}</h4>
|
||||
{% else %}
|
||||
<h4 class="card-title h5">{{title}}</h4>
|
||||
{% endif %}
|
||||
|
||||
<p class="card-text">{{description}}</p>
|
||||
</div>
|
||||
<div class="card-footer"> </div>
|
||||
</a>
|
||||
{% endmacro %}
|
||||
|
||||
<div class="tutorial-content">
|
||||
{% for category in categoriesTutorials %}
|
||||
<h5 id="{{category.id}}">{{category.title}}</h5>
|
||||
<p>{{category.description}}</p>
|
||||
<div id="tutorial-cards" class="card-grid card-grid-3xN tutorial-card-grid">
|
||||
{% for child in category.children %}
|
||||
{{ tutorialCard(child.title, child.description, child.href, child.img, child.external)}}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block analytics %}
|
||||
{% from "macro-get_funnel.jinja" import get_funnel %}
|
||||
<script type="application/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
window.dataLayer.push({
|
||||
"event": "page_info",
|
||||
"page_type": "Hub Page",
|
||||
"page_group": "Docs",
|
||||
"page_funnel": "{{get_funnel(pages, currentpage)}}",
|
||||
"page_labels": {{currentpage.labels or []}}
|
||||
})
|
||||
</script>
|
||||
{% endblock analytics %}
|
||||
Reference in New Issue
Block a user