Files
xrpl-dev-portal/template/base.html.jinja
Jake c5489fe3a7 Add videos to xrpl overview page
Update css to v6

Add videos to xrpl overview page

Update css to v6

Move video player up on screen

Adjust vid position and size

Fix expanded video sizing on more resolutions
2022-01-13 16:36:50 -08:00

159 lines
7.5 KiB
Django/Jinja

<!DOCTYPE html>
<html lang="{{target.lang}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ currentpage.name }} - {{target.display_name}}</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="{{ currentpage.name|escape }} | {{ target.display_name }}">
<meta property="og:url" content="https://xrpl.org/{% if currentpage.html != 'index.html' %}{{currentpage.html}}{% endif %}" />
<meta property="og:description" content="{% if currentpage.html == 'index.html' %}{{ target.blurb|escape}}{% else %}{{ currentpage.blurb|escape }}{% endif %}" />
<meta name="description" content="{% if currentpage.html == 'index.html' %}{{ target.blurb|escape}}{% else %}{{ currentpage.blurb|escape }}{% endif %}" />
<meta property="og:image" content="https://xrpl.org/assets/img/{% if currentpage.fb_card %}{{currentpage.fb_card}}{% else %}xrpl-fb-li-card.png{% endif %}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://xrpl.org/assets/img/{% if currentpage.twitter_card %}{{currentpage.twitter_card}}{% else %}xrpl-twitter-card.png{% endif %}" />
{% if currentpage.canonical_url %}<link rel="canonical" href="{{currentpage.canonical_url}}" />{% endif %}
<meta name="robots" content="index, follow" />
{% for lang in config.languages %}
<link rel="alternate" href="https://xrpl.org{{lang.prefix}}{{currentpage.html}}" hreflang="{{lang.code}}" />
{% endfor %}
<link rel="alternate" href="https://xrpl.org/{{currentpage.html}}" hreflang="x-default" /><!-- Default: US english -->
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="{{currentpage.prefix}}assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{currentpage.prefix}}assets/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{currentpage.prefix}}assets/favicons/favicon-32x32.png">
<link rel="manifest" href="{{currentpage.prefix}}assets/favicons/site.webmanifest">
<link rel="shortcut icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#25A768">
<meta name="msapplication-config" content="{{currentpage.prefix}}assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#25A768">
{% if target.light_theme_enabled %}
<!-- The page supports both dark and light color schemes, and the page author prefers dark. -->
<meta name="color-scheme" content="dark light">
{% endif %}
<!-- jQuery -->
<script src="{{currentpage.prefix}}assets/vendor/jquery-3.6.0.min.js"></script>
<!-- Google Tag Manager -->
{% block analytics %}{% endblock %}
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KCQZ3L8');</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45576805-2"></script>
<!-- Stylesheet -->
{% if target.lang=="ja" %}
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
{% endif %}
<link href="{{currentpage.prefix}}assets/css/devportal2021-v6.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
{% if "js_editor" in currentpage.filters %}
<script src="assets/vendor/jshint.js"></script>
<script src="assets/vendor/codemirror-js-json-lint.min.js"></script>
<script src="assets/vendor/cm-javascript-lint.js"></script>
<script src="assets/js/js-editor.js"></script>
{% endif %}
{% if target.light_theme_enabled %}
<!-- Theme switch -->
<script src="assets/js/theme-switch.js"></script>
{% endif %}
{% block head %}
{% endblock %}
</head>
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% include 'component-top-nav.html.jinja' %}
<div class="container-fluid" role="document" id="main_content_wrapper">
<div class="row">
<!-- Right sidebar first so it's at the beginning for mobile layouts -->
{% if currentpage.sidebar is undefined or (currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only") %}
<aside class="right-sidebar col-lg-3 order-lg-4" role="complementary">
{% block right_sidebar %}{% endblock %}
</aside>
{% endif %}
<!-- main column -->
<main class="main {% if currentpage.sidebar is defined and currentpage.sidebar == "disabled" %}col-md-12{% elif currentpage.sidebar == "left_only" %}col-lg-9 col-md-7{% else %}col-md-7 col-lg-6{% endif %} order-md-3 {% block mainclasses %}{% endblock %}" role="main" id="main_content_body">
{% block breadcrumbs %}
{% include 'breadcrumbs.html' %}
{% endblock %}
{% block main %}{% endblock %}
</main>
{% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}
<!-- Left sidebar last so it's at the end for mobile -->
<aside class="left-sidebar col-md-5 col-lg-3 order-md-1" role="complementary">
{% block left_sidebar %}
{% set docs_top = pages|selectattr('html', 'defined_and_equalto', 'docs.html')|list|first %}
{% if docs_top.is_ancestor_of(currentpage.html) %}
{% set tree_top = docs_top %}
{% endif %}
{% include "component-tree-nav.html.jinja" %}
{% endblock %}
</aside>
{% endif %}
</div><!--/.row (main layout)-->
</div>
{% include 'component-footer.html.jinja' %}
<!-- Non-blocking resources -->
<!-- Bootstrap JS -->
<script src="{{currentpage.prefix}}assets/vendor/bootstrap.min.js"></script>
<!-- fontawesome icons -->
<link rel="stylesheet" href="{{currentpage.prefix}}assets/vendor/fontawesome/css/font-awesome.min.css" />
<!-- Algolia DocSearch -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
$(document).ready(() => {
const ds = docsearch({
apiKey: '70de5b9b8ef95460f3c6e04054b325b2',
indexName: 'xrpl',
inputSelector: '#topsearchbox',
algoliaOptions: { 'facetFilters': ["lang:{{target.lang}}"] },
debug: false
});
const search_params = new URLSearchParams(window.location.search)
if (search_params.has("q")) {
$(".navbar-toggler").click() // Show nav on mobile since search is in there
ds.autocomplete.autocomplete.setVal(search_params.get("q"))
ds.autocomplete.autocomplete.open()
}
})
</script>
{% if currentpage.embed_xrpl_js %}
<!-- ripple-lib & prerequisites -->
{{currentpage.ripple_lib_tag}}
{% endif %}
{% if "interactive_steps" in currentpage.filters %}
<!-- Helper for interactive tutorials -->
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/interactive-tutorial.js"></script>
{% endif %}
{% block endbody %}{% endblock %}
</body>
</html>