xrpl-dev-portal/template/page-code-samples.html.jinja

{% extends "base.html.jinja" %}

{% block bodyclasses %}no-sidebar{% endblock %}
{% block mainclasses %}landing page-community{% endblock %}

{% block main %}
<div class="overflow-hidden">

{# <div class="position-relative">
    <img src="./img/backgrounds/xrpl-overview-purple.svg" class="landing-bg" id="xrpl-overview-purple">
  </div> #}

<section class="py-26 text-center">
  <div class="col-lg-8 mx-auto text-center">
    <div class="d-flex flex-column-reverse">
      
      <h1 class="mb-0">{% trans %}Solutions to Accelerate Development{% endtrans %}</h1>
      <h6 class="eyebrow mb-3">{% trans %}Code Samples{% endtrans %}</h6>
    </div>
    <a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a>
  </div>
</section>

{# <div class="position-relative d-none-sm">
    <img src="./img/backgrounds/xrpl-overview-orange.svg" id="xrpl-overview-orange">
  </div> #}

<section class="container-new py-26">
  <div class="d-flex flex-column col-sm-8 p-0">
    <h3 class="h4 h2-sm">{% trans %}Browse sample code for building common use cases on the XRP Ledger{% endtrans %}</h3>
    <h6 class="eyebrow mb-3">{% trans %}Explore Code Samples{% endtrans %}</h6>
  </div>
 
  <div class="row col-12  card-deck mt-10" id="code-samples-deck">


    {# {% set code_samples = [
      { "href": "https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/checks",
        "title":  _("Checks Tutorials"),
        "langs": [
          "js",
          "json-rpc",
          "websocket",
          "cli"
        ],
        "description":  _("Create, cash, and cancel Checks for exact or flexible amounts.")
      },
    ] %} #}

    {% set code_samples = all_code_samples() %}

    {% set lang_icons = {
      "cli": "assets/img/logos/cli.svg",
      "go": "assets/img/logos/golang.svg",
      "java": "assets/img/logos/java.svg",
      "js": "assets/img/logos/javascript.svg",
      "py": "assets/img/logos/python.svg",
      "http": "assets/img/logos/globe.svg",
    } %}

  <div class="row col-md-12 px-0">
    {% for card in code_samples %}
      <a class="card cardtest col-12 col-lg-5" href="{{target.github_forkurl}}/tree/{{target.github_branch}}/{{card.href}}">
        <div class="card-header">
        {% for lang in card.langs %}
          <span class="circled-logo"><img src="{{lang_icons[lang]}}" /></span>
        {% endfor %}
        </div>
        <div class="card-body">
          <h4 class="card-title h5">{{card.title}}</h4>
          <p class="card-text">{{card.description}}</p>
        </div>
        <div class="card-footer">
          <span class="label label-accounts" href="label-accounts.html" title="Pages relating to accounts in the XRP Ledger.">Accounts</span>
        </div>
      </a>
    {% endfor %}
    </div>
  </div>
</section>


<section class="py-26 container">
  <div class="col-lg-12 mx-auto ">
    
    <div class="d-flex flex-column">
      <h6 class="eyebrow mb-3">{% trans %}Help the XRPL community by submitting your own code samples{% endtrans %}</h6>
      <h3 class="h4 h2-sm">{% trans %}Contribute Code Samples{% endtrans %}</h3>
    </div>

    <div class="row">
      <div class=" col-lg-3 "><h5 class="pb-4">Fork and clone</h5><p>Fork the xrpl-dev-portal repo. Using git, clone the fork to your computer.</p></div>
      <div class=" col-lg-3 "><h5 class="pb-4">Add to folder</h5><p>Add your sample code to the content/_code-samples folder. Be sure to include a README.md that summarizes what it does and anything else people should know about it.</p></div>
      <div class=" col-lg-3 "><h5 class="pb-4">Commit and push</h5><p>Commit your changes and push them to your fork on GitHub.</p></div>
      <div class=" col-lg-3 "><h5 class="pb-4">Open a pull request</h5><p>Open a pull request to the original repo. Maintainers will review your submission and suggest changes if necessary. If the code sample is helpful, it’ll be merged and added to XRPL.org!</p></div>
    </div>

    <a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a>

  </div>
</section>


</div>
{% endblock %}



{% block analytics %}
    <script type="application/javascript">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      "event": "page_info",
      "page_type": "Hub Page",
      "page_group": "Code Samples"
    })
    </script>
{% endblock analytics %}