Docs: start redoing landing page

2026-06-06 18:26:42 +00:00 · 2021-06-23 17:22:03 -07:00
parent 574941b691
commit ae533b608b
20 changed files with 3510 additions and 3381 deletions
--- a/assets/css/devportal2020.css
+++ b/assets/css/devportal2020.css
--- a/assets/img/logos/globe.svg
+++ b/assets/img/logos/globe.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9997 25.6666C20.443 25.6666 25.6663 20.4432 25.6663 13.9999C25.6663 7.5566 20.443 2.33325 13.9997 2.33325C7.55635 2.33325 2.33301 7.5566 2.33301 13.9999C2.33301 20.4432 7.55635 25.6666 13.9997 25.6666Z" stroke="#E0E0E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.33301 14H25.6663" stroke="#E0E0E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9997 2.33325C16.9178 5.528 18.5762 9.67396 18.6663 13.9999C18.5762 18.3259 16.9178 22.4718 13.9997 25.6666C11.0815 22.4718 9.42313 18.3259 9.33301 13.9999C9.42313 9.67396 11.0815 5.528 13.9997 2.33325V2.33325Z" stroke="#E0E0E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/img/logos/java.svg
+++ b/assets/img/logos/java.svg
--- a/assets/img/logos/javascript.svg
+++ b/assets/img/logos/javascript.svg
--- a/assets/img/logos/python.svg
+++ b/assets/img/logos/python.svg
--- a/content/tutorials/get-started/get-started-using-http-websocket-apis.md
+++ b/content/tutorials/get-started/get-started-using-http-websocket-apis.md
@@ -7,6 +7,7 @@ top_nav_name: HTTP / WebSocket
 top_nav_grouping: Get Started
 labels:
  - Development
+showcase_icon: assets/img/logos/globe.svg
 ---
 # Get Started Using HTTP / WebSocket APIs

--- a/content/tutorials/get-started/get-started-using-java.md
+++ b/content/tutorials/get-started/get-started-using-java.md
@@ -12,6 +12,7 @@ filters:
  - include_code
 labels:
  - Development
+showcase_icon: assets/img/logos/java.svg
 ---

 # Get Started Using Java
--- a/content/tutorials/get-started/get-started-using-node-js.ja.md
+++ b/content/tutorials/get-started/get-started-using-node-js.ja.md
@@ -4,6 +4,7 @@ parent: get-started.html
 blurb: XRP Ledgerに照会するエントリーレベルのJavaScriptアプリケーションを構築します。
 labels:
  - 開発
+showcase_icon: assets/img/logos/javascript.svg
 ---
 # RippleAPI入門ガイド

--- a/content/tutorials/get-started/get-started-using-node-js.md
+++ b/content/tutorials/get-started/get-started-using-node-js.md
@@ -6,6 +6,7 @@ top_nav_name: JavaScript
 top_nav_grouping: Get Started
 labels:
  - Development
+showcase_icon: assets/img/logos/javascript.svg
 ---
 # Get Started Using Node.js

--- a/content/tutorials/get-started/get-started-using-python.md
+++ b/content/tutorials/get-started/get-started-using-python.md
@@ -9,6 +9,7 @@ filters:
  - include_code
 labels:
  - Development
+showcase_icon: assets/img/logos/python.svg
 ---

 # Get Started Using Python
--- a/dactyl-config.yml
+++ b/dactyl-config.yml
--- a/styles/_colors.scss
+++ b/styles/_colors.scss
@@ -112,6 +112,8 @@ $text-muted:      $gray-200;
 $breadcrumb-bg:   $black;
 $breadcrumb-active-color: $gray-400;

+$card-bg:   $gray-800;
+
 $dropdown-bg:     $gray-900;
 $dropdown-divider-bg: $black;
 $dropdown-border-color: $gray-900;
--- a/styles/_landings.scss
+++ b/styles/_landings.scss
@@ -221,3 +221,33 @@
  border: 2px solid $white;
  background: $dark;
 }
+
+// Docs page -------------------------------------------------------------------
+
+#software-and-sdks {
+  .card-deck .card {
+    background-position: bottom;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  .card-deck .card:nth-child(1) {
+    background-image: url(../../img/cards/green.svg);
+  }
+  .card-deck .card:nth-child(2) {
+    background-image: url(../../img/cards/neutral-blue.svg);
+  }
+  .card-deck .card:nth-child(3) {
+    background-image: url(../../img/cards/magenta-orange.svg);
+  }
+  .card-deck .card:nth-child(4) {
+    background-image: url(../../img/cards/orange-yellow.svg);
+  }
+
+  .circled-logo {
+    background-color: $gray-600;
+    border-radius: 50%;
+    padding: .75rem;
+    width: 50px;
+    height: 50px;
+  }
+}
--- a/styles/_layout.scss
+++ b/styles/_layout.scss
@@ -226,7 +226,7 @@ $columns: 12; // Number of columns in the grid system
  @for $width from 1 through $columns {
    .col-new-#{$width} {
      flex-basis: $width / $columns * 100%;
-    }  
+    }
  }
  .col-new {
    background-position: bottom;
@@ -242,7 +242,7 @@ $columns: 12; // Number of columns in the grid system
    @include media-breakpoint-up(lg) {
      margin: 40px;
    }
-    
+
    &#pink-purple {
      background-image: url(../../img/cards/pink-purple.svg);
    }
@@ -252,6 +252,9 @@ $columns: 12; // Number of columns in the grid system
    &#light-green {
      background-image: url(../../img/cards/light-green.svg);
    }
+    &#green {
+      background-image: url(../../img/cards/green.svg);
+    }
    &#orange {
      background-image: url(../../img/cards/orange.svg);
    }
@@ -282,7 +285,7 @@ $columns: 12; // Number of columns in the grid system
    &#blue-light-blue {
      background-image: url(../../img/cards/blue-light-blue.svg);
    }
-    
+
  }

  .card-new {
@@ -305,22 +308,10 @@ $columns: 12; // Number of columns in the grid system



-/* Grid Box Vertical numbers ------------------------------------------------ */
-.flag-vertical {
-  color: $gray-200;
-  position: absolute;
-  top: 2em;
-  right: 3em;
-  width: 20px;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-  -webkit-transform-origin: 100% 100%;
-  -ms-transform-origin: 100% 100%;
-  transform-origin: 100% 100%;
-  font-size: 0.833em;
-  letter-spacing: 2px;
-}
+// 4-column layout used in docs.html -------------------------------------------
+// #doc-types .card-columns {
+//   column-count: 3;
+// }

 // Misc. layout styles ---------------------------------------------------------

--- a/styles/_status-labels.scss
+++ b/styles/_status-labels.scss
@@ -219,3 +219,9 @@
    }
  }
 }
+
+.tag-cloud {
+  .list-inline-item {
+    margin-top: 1.5rem;
+  }
+}
--- a/styles/_top-nav.scss
+++ b/styles/_top-nav.scss
@@ -581,6 +581,12 @@
  margin-top: -80px;
  height: 80px;
  visibility: hidden;
+  z-index: -1;
+}
+
+// Fix so links aren't unclickable underneath the header anchor-fix
+a {
+  z-index: 1;
 }

 // Animated chevron (e.g. for language dropdown) -------------------------------
--- a/styles/xrpl.scss
+++ b/styles/xrpl.scss
@@ -15,6 +15,10 @@ $border-radius-sm: 4px;
 $dropdown-border-width: 1px;
 $enable-shadows: true;
 $dropdown-box-shadow: 0px 5px 40px $gray-900;
+$card-spacer-x: 2rem;
+$card-spacer-y: 2rem;
+$card-border-radius: $border-radius-lg;
+$card-columns-gap: 2rem;
 $caret-width: .4em;

 $input-btn-padding-y: 1rem;
--- a/template/component-tag-cloud.html.jinja
+++ b/template/component-tag-cloud.html.jinja
@@ -0,0 +1,12 @@
+<ul class="tag-cloud list-inline">
+{% for page in pages %}
+  {% if page.landing_for is defined %}
+      <li class="list-inline-item">
+        <a class="label label-{{slug(page.landing_for)}}" href="{% if "//" not in page.html %}{{target.prefix}}{% endif %}{{page.html}}" title="{{page.blurb}}">
+        {{page.name}}
+          <span class="badge badge-pill">{{label_count(pages, page.landing_for)}}</span>
+        </a>
+      </li>
+  {% endif %}
+{% endfor %}
+</ul>
--- a/template/page-by-label.html.jinja
+++ b/template/page-by-label.html.jinja
@@ -3,19 +3,6 @@
 {% block main %}
  <section class="content">
    <h1 id="main-page-header">{{ currentpage.name }}</h1>
-
-    <ul class="tag-cloud list-inline">
-    {% set lblsize = label_sizes(pages) %}
-    {% for page in pages %}
-      {% if page.landing_for is defined %}
-          <li class="list-inline-item">
-            <a class="label label-{{slug(page.landing_for)}}" href="{% if "//" not in page.html %}{{target.prefix}}{% endif %}{{page.html}}" title="{{page.blurb}}">
-            {{page.name}}
-              <span class="badge badge-pill">{{label_count(pages, page.landing_for)}}</span>
-            </a>
-          </li>
-      {% endif %}
-    {% endfor %}
-  </ul>
+    {% include 'component-tag-cloud.html.jinja' %}
  </section>
 {% endblock %}
--- a/template/page-docs.html.jinja
+++ b/template/page-docs.html.jinja
@@ -2,51 +2,89 @@

 {% block mainclasses %}landing padded-landing page-docs-index{% endblock %}

-{% block main %}
-  <section class="container-fluid card-grid card-grid-2x2">
-    <div class="section-hero card">
-      <h1 class="main-page-header">{% trans %}XRP Ledger Documentation{% endtrans %}</h1>
-      <p class="blurb">{% trans %}Dive into our documentation and start integrating with the XRP Ledger.{% endtrans %}</p>
-      <p class="blurb">{% trans %}Browse by category, or skip straight to the <a href="#full-doc-index">full documentation index</a>.{% endtrans %}</p>
+{% block breadcrumbs %}{% endblock %}

-      <div class="highlight-subcard">
-        <h3>Hot Topic: NFTs</h3>
-        <p class="blurb">{% trans %}Interested in non-fungible tokens, but concerned about their <a href="impact.html">large carbon footprint</a>? Check out these proposed standards for issuing NFTs on the XRP Ledger:{% endtrans %}</p>
-        <ul>
-          <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/30" class="external-link" target="_blank">XLS-14d: Non fungible tokens (indivisible NFT's) on the XRPL<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
-          <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/40" class="external-link" target="_blank">XLS-19d: Wallet based Proof of Digital Asset Property and Rights (NFT)<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
-          <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/46" class="external-link" target="_blank">XLS-20d: Non-Fungible Token Support<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
-        </ul>
-      </div><!--/.highlight-card-->
+{% block main %}
+  <section class="py-26 text-center">
+    <div class="col-md-4 mx-auto text-center">
+      <div class="d-flex flex-column-reverse">
+        <h1 class="mb-18">{% trans %}What would you like to learn?{% endtrans %}</h1>
+        <h6 class="green-500 mb-3">{% trans %}XRP Ledger Documentation{% endtrans %}</h6>
+      </div>
+      <div class="center-search">
+        <form role="search">
+          <div class="form-group">
+            <div class="input-group">
+              <label class="input-group-prepend" for="docsearchbox"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
+              <input id="docsearchbox" type="text" class="form-control" placeholder="{% trans %}Search for articles, training, and code samples...{% endtrans %}">
+            </div><!--/.form-group-->
+          </div>
+        </form>
+      </div><!--/.center-search-->
    </div>

-    {% set doc_types = [] %}
-    {% set flag_n = cycler(* range(1,99)) %}
-    {% for page in currentpage.children %}
-      <div class="card">
-        <div class="card-header">
-          <h3 class="card-title"><a href="{{page.html}}">{{page.name}}</a></h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          {% if page.blurb is defined %}
-            <p class="blurb">{{page.blurb}}</p>
-          {% endif %}
-          {% set parent_html = page.html %}
-          {% set parent_name = page.name %}
-          {% set depth = 1 %}
-          {% include 'children.html' %}
-        </div><!--/.card-body-->
-        <div class="card-footer">
-          <div class="readmore">
-            <a class="btn btn-outline-secondary" href="{{page.html}}">{% if page.cta_text %}{{page.cta_text}}{% else %}{% trans %}View All {{parent_name}}{% endtrans %}{% endif %}</a>
-          </div>
-        </div><!--/.card-footer-->
-      </div><!--/.card-->
-    {% endfor %}
-
+    {#<div class="highlight-subcard">
+      <h3>Hot Topic: NFTs</h3>
+      <p class="blurb">{% trans %}Interested in non-fungible tokens, but concerned about their <a href="impact.html">large carbon footprint</a>? Check out these proposed standards for issuing NFTs on the XRP Ledger:{% endtrans %}</p>
+      <ul>
+        <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/30" class="external-link" target="_blank">XLS-14d: Non fungible tokens (indivisible NFT's) on the XRPL<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
+        <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/40" class="external-link" target="_blank">XLS-19d: Wallet based Proof of Digital Asset Property and Rights (NFT)<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
+        <li class="level-1"><a href="https://github.com/XRPLF/XRPL-Standards/discussions/46" class="external-link" target="_blank">XLS-20d: Non-Fungible Token Support<i aria-hidden="true" class="fa fa-external-link"></i></a></li>
+      </ul>
+    </div><!--/.highlight-card-->#}
  </section>

-  <section class="container-fluid doc-index">
+  <section class="container-fluid mb-50">
+    <div class="row">
+      <div class="col col-lg-6" id="popular-topics">
+        <h3>{% trans %}Browse By Popular Topics{% endtrans %}</h3>
+        <ul>
+          {% for pg_html in currentpage.popular_pages %}
+          {% set page = pages|selectattr("html", "defined_and_equalto", pg_html)|first %}
+          <li class="curated-link"><a href="{% if '//' not in page.html %}{{target.prefix}}{% endif %}{{page.html}}">{{page.name}}</a>
+          {% endfor %}
+        </ul>
+      </div><!--/#popular-topics-->
+
+      <div class="col col-lg-6" id="browse-by-label">
+        {% include 'component-tag-cloud.html.jinja' %}
+      </div><!--/#browse-by-label-->
+    </div>
+  </section>
+
+  <section class="container-fluid mb-50" id="software-and-sdks">
+    {% set get_started = pages|selectattr("html", "defined_and_equalto", "get-started.html")|first %}
+
+    <h3>{% trans %}Software and SDKs{% endtrans %}</h3>
+      <div class="row row-cols-2 row-cols-lg-4 card-deck">
+
+      {% for page in get_started.children if page.showcase_icon is defined %}
+      <a class="col card" href="{{target.prefix}}{{page.html}}">
+        <div class="card-body">
+          <img class="circled-logo" src="{{target.prefix}}{{page.showcase_icon}}" />
+          <h4 class="card-title">{% if page.top_nav_name is defined %}{{page.top_nav_name}}{% else %}{{page.name}}{% endif %}</h4>
+        </div>
+      </a>
+      {% endfor %}
+
+    </div><!--/.card-grid-4xN-->
+  </section>
+
+  <section class="container-fluid mb-50" id="doc-types">
+    <div class="row row-cols-2 row-cols-lg-4 card-deck">
+    {% set doc_types = [] %}
+    {% for page in currentpage.children if page.html != "by-label.html" %}
+      <a class="col card" href="{{target.prefix}}{{page.html}}">
+        <div class="card-body">
+          <h4 class="card-title">{{page.name}}</h4>
+          <p class="card-text">{{page.blurb}}</p>
+        </div>
+      </a>
+    {% endfor %}
+    </div>
+  </section>
+
+  <section class="container-fluid mb-50">
    <h2 id="full-doc-index">{% trans %}Full Documentation Index{% endtrans %}</h2>
    <div class="row">
      <div class="col-md-8">