Docs/Refs landing page styles

assets/css/devportal.css

@@ -482,6 +482,7 @@ a.current {
 }
 
 .landing .level-1,
+.landing .level-2,
 .landing .curated-links li {
   font-weight: 400;
   font-size: 14px;
@@ -506,17 +507,10 @@ a.current {
   margin: 0 -8px 0 -8px;
   font-weight: 400;
 }
-.landing .card .level-2 a:hover {
+
-  background-color: #D8EEFC;
+.landing .card .blurb + .children-display,
-  text-decoration: none;
+.landing .card .blurb + .curated-links {
-}
+  margin-top: 1rem;
-.landing .card .level-2 a:hover:after {
-  content: "\f105"; /* fontawesome angle-right */
-  font-family: FontAwesome;
-  position: absolute;
-  right: 0;
-  top: 8px;
-  color: #0D294E;
 }
 
 .level-1:first-child {
@@ -903,6 +897,7 @@ a.current {
 
 .btn:not(.external-link)::after,
 .landing .card .level-1 a::after,
+.landing .card .level-2 a::after,
 .landing .card .curated-links li a::after,
 .content .children-display li a::after {
   content: " ➝";
@@ -918,6 +913,7 @@ a.current {
 
 .btn:not(.external-link):hover::after,
 .landing .card .level-1 a:hover::after,
+.landing .card .level-2 a:hover::after,
 .landing .card .curated-links li a:hover::after,
 .landing a.card:hover .btn::after,
 .content .children-display li a:hover::after {

assets/vendor/bootstrap.css

@@ -7161,12 +7161,14 @@ h1, h2, h3, h4, h5 {
   font-family: 'Space Mono', monospace;
   font-weight: 700; }
 
+.landing section {
+  border-bottom: 1px solid #1B1818; }
+
 .card-grid {
   display: grid;
   gap: 1px;
   background-color: #dedede;
-  padding: 0;
+  padding: 0; }
-  border-bottom: 1px solid #dedede; }
   .card-grid.card-grid-2x2 {
     /* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */
     grid-template-columns: 2fr 1fr 1fr;
@@ -7182,26 +7184,44 @@ h1, h2, h3, h4, h5 {
     /* left half is a hero area; right half is a 2x1 grid. Total grid is 4x1 */
     grid-template-columns: 2fr 1fr 1fr;
     grid-template-rows: 1fr; }
+    .card-grid.card-grid-2x1 .section-hero {
+      grid-row-end: span 1; }
     @media (max-width: 991.98px) {
       .card-grid.card-grid-2x1 {
         /* Switch to 1-column layout on smaller widths */
         grid-template-columns: 1fr;
         grid-template-rows: 1fr; } }
-    .card-grid.card-grid-2x1 .section-hero {
-      grid-row-end: span 1; }
   .card-grid.card-grid-2x4 {
     /* left half is a hero area; right half is a 2x4 grid. Total grid is 4x4 */
     grid-template-columns: 2fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr 1fr; }
+    .card-grid.card-grid-2x4 .section-hero {
+      grid-row-end: span 4; }
     @media (max-width: 991.98px) {
       .card-grid.card-grid-2x4 {
         /* Switch to 1-column layout on smaller widths */
         grid-template-columns: 1fr;
         grid-template-rows: repeat(5, auto); }
         .card-grid.card-grid-2x4 .section-hero {
-          grid-row-end: span 2; } }
+          grid-row-end: span 1; } }
-    .card-grid.card-grid-2x4 .section-hero {
+  .card-grid.card-grid-4xN {
-      grid-row-end: span 4; }
+    /* 4 equal columns and any number of auto-sized rows. */
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-auto-rows: auto;
+    /* No "hero" blocks expected here. */ }
+    @media (max-width: 991.98px) {
+      .card-grid.card-grid-4xN {
+        /* Switch to 1-column layout on smaller widths */
+        grid-template-columns: 1fr; } }
+  .card-grid.card-grid-3xN {
+    /* 3 equal columns and any number of auto-sized rows. */
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: auto;
+    /* No "hero" blocks expected here. */ }
+    @media (max-width: 991.98px) {
+      .card-grid.card-grid-3xN {
+        /* Switch to 1-column layout on smaller widths */
+        grid-template-columns: 1fr; } }
   .card-grid .align-bottom {
     justify-content: flex-end; }
   .card-grid .card {

dactyl-config.yml

@@ -1277,7 +1277,7 @@ pages:
         template: template-landing-references.html
         html: references.html
         sidebar: disabled
-        blurb: Look up the ins-and-outs of XRP Ledger APIs, including sample requests and responses.
+        blurb: Complete references for different interfaces to the XRP Ledger.
         targets:
             - local
 
@@ -1289,7 +1289,7 @@ pages:
         doc_type: References
         supercategory: rippled API
         template: template-landing-children.html
-        blurb: Use the rippled API to communicate with a rippled server, the core peer-to-peer server that manages the XRP Ledger.
+        blurb: Communicate directly with rippled, the core peer-to-peer server that manages the XRP Ledger.
         targets:
             - local
 
@@ -2765,7 +2765,7 @@ pages:
         funnel: Docs
         doc_type: References
         category: Data API
-        blurb: Access more XRP Ledger data, including transaction history and analytics.
+        blurb: RESTful interface to XRP Ledger analytics and historical data.
         curated_anchors:
             - name: Methods
               anchor: "#api-method-reference"

tool/template-landing-docs.html

@@ -6,18 +6,18 @@
   <section class="container-fluid bg-white p-3 p-sm-4">
     <h1 class="main-page-header">XRP Ledger Documentation</h1>
     <p class="blurb">Dive into our documentation and start integrating with the XRP Ledger.</p>
+    <p class="blurb">Browse by category, or skip straight to the <a href="#full-doc-index">full documentation index</a>.</p>
   </section>
 
-  <section class="container-fluid bg-light p-3 p-sm-4">
+  <section class="container-fluid card-grid card-grid-3xN">
-    <div class="card-deck">
     {% set doc_types = [] %}
     {% for page in pages %}
       {% if page.doc_type is defined and page.doc_type not in doc_types %}
         {% set doc_type_top = pages|selectattr('doc_type', 'defined_and_equalto', page.doc_type)|first %}
 
           <div class="card">
-            <div class="card-header bg-dark">
+            <div class="card-header">
-              <h3 class="card-title">{{doc_type_top.name}}</h3>
+              <h3 class="card-title"><a href="{{doc_type_top.html}}">{{doc_type_top.name}}</a></h3>
             </div><!--/.card-header-->
             <div class="card-body">
               {% if page.blurb is defined %}
@@ -29,7 +29,7 @@
             </div><!--/.card-body-->
             <div class="card-footer">
               <div class="readmore">
-                <a class="btn btn-secondary" href="{{doc_type_top.html}}">View All {{doc_type_top.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
+                <a class="btn btn-outline-secondary" href="{{doc_type_top.html}}">View All {{doc_type_top.name}}</a>
               </div>
             </div><!--/.card-footer-->
           </div><!--/.card-->
@@ -37,57 +37,7 @@
         {% set _ = doc_types.append(page.doc_type) %}
       {% endif %}
     {% endfor %}
-  </div><!--/.card-deck-->
-  <div class="card-deck pt-3 pt-sm-4">
 
-      <div class="card">
-        <div class="card-header bg-dark">
-          <h3 class="card-title">Get Started</h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <div class="curated-links">
-            <ul>
-              <li><a href="websocket-api-tool.html">Make a call to the rippled API</a></li>
-              <li><a href="xrp-test-net-faucet.html">Access the XRP Ledger Test Net</a></li>
-              <li><a href="concepts.html">Understand XRP Ledger Concepts</a></li>
-            </ul>
-          </div><!--/.curated-links-->
-        </div><!--/.card-body-->
-      </div><!--/.card-->
-
-      <div class="card">
-        <div class="card-header bg-dark">
-          <h3 class="card-title">Popular Docs</h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <div class="curated-links">
-            <ol>
-              <li><a href="public-rippled-methods.html">rippled API Public Methods Reference</a></li>
-              <li><a href="accounts.html">Accounts</a></li>
-              <li><a href="install-rippled.html">Install rippled</a></li>
-              <li><a href="rippleapi-reference.html">RippleAPI for JavaScript Reference</a></li>
-            </ol>
-          </div><!--/.curated-links-->
-        </div><!--/.card-body-->
-      </div><!--/.card-->
-
-      <div class="card">
-        <div class="card-header bg-dark">
-          <h3 class="card-title">Recently Updated</h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <div class="curated-links">
-            <ol>
-              {% for link in target.recently_updated %}
-                {% set linkpage = pages|selectattr("html", 'defined_and_equalto', link.html)|first %}
-                <li><a href="{{linkpage.html}}">{{linkpage.name}}{% if link.date is defined %} <span class="recently-updated-date">({{link.date}})</span>{% endif %}</a></li>
-              {% endfor %}
-            </ol>
-          </div><!--/.curated-links-->
-        </div><!--/.card-body-->
-      </div><!--/.card-->
-
-    </div><!--/.card-deck-->
   </section>
 
   <section class="container-fluid p-3 p-sm-4">

tool/template-landing-references.html

@@ -6,59 +6,24 @@
   <section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
     <h1 class="main-page-header">References</h1>
     <p class="blurb">{{currentpage.blurb}}</p>
+    <p class="blurb">Or, skip ahead to the <a href="#full-reference-index">Full Reference Index</a>.</p>
   </section>
 
-  <section class="container-fluid bg-light p-3 px-sm-4 pb-sm-4">
+  <section class="container-fluid card-grid card-grid-4xN">
-    <h2><a href="rippled-api.html">rippled API Reference</a></h2>
+    {# hardcoded rippled API block first since it's the only one with a supercategory #}
-    <p class="blurb">Use the <code>rippled</code> API to communicate with a <code>rippled</code> server, the core peer-to-peer server that manages the XRP Ledger.</p>
+    {% set page = pages|selectattr("supercategory", 'defined_and_equalto', "rippled API")|first %}
-      <div class="card-deck pt-3 pt-sm-4">
-        {% for page in pages|selectattr("supercategory", 'defined_and_equalto', "rippled API")|list %}
-        {% if loop.index != 1 and page == pages|selectattr("category", 'defined_and_equalto', page.category)|first %}
     <div class="card">
-            <div class="card-header bg-dark">
+      <div class="card-header">
-              <h3 class="card-title">{{page.name}}</h3>
+        <h3 class="card-title"><a href="{{page.html}}">{{page.name}}</a></h3>
       </div><!--/.card-header-->
       <div class="card-body">
         <p class="blurb">{{page.blurb}}</p>
-              {% if page.curated_anchors is defined %}
-                <div class="curated-links">
-                  <ul>
-                    {% for link in page.curated_anchors %}
-                    <li class="level-1"><a href="{{page.html}}{{link.anchor}}">{{link.name}}</a></li>
-                    {% endfor %}
-                  </ul>
-                </div><!--/.curated-links-->
-              {% else %}
         {% set depth = 1 %}
         {% set parent_page = page %}
         {% include 'template-page-children.html' %}
-              {% endif %}
       </div><!--/.card-body-->
-            <div class="card-footer">
-              <div class="readmore">
-                <a class="btn btn-secondary" href="{{page.html}}">View All {{page.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
-              </div>
-            </div><!--/.card-footer-->
     </div><!--/.card-->
 
-          {# go to new row after admin methods #}
-          {% if page.html == "admin-rippled-methods.html" %}
-      </div><!--/.card-deck-->
-      <div class="card-deck pt-3 pt-sm-4">
-          {% endif %}
-        {% endif %}
-        {% endfor %}
-
-      </div><!--/.card-deck-->
-
-  </section>
-
-  <section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
-
-    <h2>Other XRP Ledger Interfaces</h2>
-    <p class="blurb">Here are a few other ways to interact with the XRP Ledger.</p>
-    <div class="card-deck pt-3 pt-sm-4">
-
     {% for page in pages|selectattr("doc_type", 'defined_and_equalto', "References")|selectattr("supercategory", "undefined_or_ne", "rippled API") %}
       {% if loop.index != 1 and page == pages|selectattr("category", 'defined_and_equalto', page.category)|first %}
         <div class="card">
@@ -85,8 +50,17 @@
       {% endif %}
     {% endfor %}
 
-    </div><!--/.card-deck-->
+  </section>
 
+  <section class="container-fluid p-3 p-sm-4">
+    <h2 id="full-doc-index">Full Reference Index</h2>
+    <div class="row">
+      <div class="col-md-8">
+        {% set parent_page = currentpage %}
+        {% set depth = 5 %}
+        {% include 'template-page-children.html' %}
+      </div>
+    </div>
   </section>
 
 {% endblock %}

tool/template-page-children.html

@@ -4,6 +4,10 @@
 {% if depth is undefined %}
   {% set depth = 5 %}
 {% endif %}
+{% if count is undefined %}
+  {# count controls how many direct children to print at each level #}
+  {% set count = 9999 %}
+{% endif %}
 
 {% if show_blurbs is undefined %}
   {% set show_blurbs = False %}
@@ -35,14 +39,18 @@
   {% set childpages = pages|selectattr(parent_level, 'defined_and_equalto', parent_page[parent_level])|list %}
 {% endif %}
 
-{% macro print_children(parent, thosepages, indent_level, next_level_field, depth_limit) %}
+{% macro print_children(parent, thosepages, indent_level, next_level_field, depth_limit, count_limit) %}
   {% set printed_next_levels = [] %}
+  {% set ns=namespace(count_printed = 0) %}
   {% for onepage in thosepages %}
     {% if onepage == parent %}{# pass #}
     {% elif onepage.template == "template-redirect.html" %}{# don't list redirects #}
     {% elif next_level_field == None or (onepage[next_level_field] is undefined and next_level_field != "supercategory") %}
       {# direct child, print it! #}
+      {% if ns.count_printed < count_limit %}
         <li class="level-{{indent_level}}"><a href="{{onepage.html}}">{{onepage.name}}</a>{% if show_blurbs and onepage.blurb is defined and indent_level == 1%}<p class="blurb child-blurb">{{onepage.blurb}}</p>{% endif %}</li>
+        {% set ns.count_printed = ns.count_printed + 1 %}
+      {% endif %}
 
     {% elif onepage[next_level_field] is undefined and next_level_field == "supercategory" %}
       {# special case, might need to skip "supercategory" #}
@@ -51,6 +59,7 @@
         {# possible direct child or grandchild due to skipped level #}
 
         {% if onepage.category not in printed_next_levels %}
+          {% if ns.count_printed < count_limit %}
             {% set next_level_children = thosepages|selectattr("category",
                 'defined_and_equalto', onepage.category)|list %}
             {% set next_level_parent = next_level_children|first %}
@@ -58,19 +67,25 @@
             {% if indent_level+1 <= depth_limit and next_level_field != None %}
               {# Recurse! #}
               {% set field_after = "subcategory" %}
-            {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit) }}
+              {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit, count_limit) }}
             {% endif %}
             {% set _ = printed_next_levels.append(onepage.category) %}
+            {% set ns.count_printed = ns.count_printed + 1 %}
+          {% endif %}
         {% endif %}
 
       {% else %}
+        {% if ns.count_printed < count_limit %}
           <!-- Template WARNING: no category for page '{{onepage.name}}'? -->
           <li class="level-{{indent_level}}"><a href="{{onepage.html}}">{{onepage.html}}</a>{% if show_blurbs and onepage.blurb is defined and indent_level == 1 %}<p class="blurb child-blurb">{{onepage.blurb}}</p>{% endif %}</li>
+          {% set ns.count_printed = ns.count_printed + 1 %}
+        {% endif %}
       {% endif %}
 
     {% elif onepage[next_level_field] is defined %}
       {# might be a grandchild or lower #}
       {% if onepage[next_level_field] not in printed_next_levels %}
+        {% if ns.count_printed < count_limit %}
           {% set next_level_children = thosepages|selectattr(next_level_field,'defined')|selectattr(next_level_field,
               'defined_and_equalto', onepage[next_level_field])|list %}
           {% set next_level_parent = next_level_children|first %}
@@ -94,9 +109,11 @@
               <!-- ERROR: child-pages template reached unexpected next_level_field case. -->
             {% endif %}
 
-          {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit) }}
+            {{ print_children(next_level_parent, next_level_children, indent_level+1, field_after, depth_limit, count_limit) }}
           {% endif %}
           {% set _ = printed_next_levels.append(onepage[next_level_field]) %}
+          {% set ns.count_printed = ns.count_printed + 1 %}
+        {% endif %}
       {% endif %}
     {% endif %}
   {% endfor %}
@@ -109,6 +126,6 @@
 
 <div class="children-display">
   <ul>
-    {{ print_children(parent_page, childpages, 1, level_2, depth) }}
+    {{ print_children(parent_page, childpages, 1, level_2, depth, count) }}
   </ul>
 </div>

tool/xrpl.scss

@@ -64,17 +64,20 @@ h1, h2, h3, h4, h5 {
   font-weight: 700;
 }
 
+.landing section {
+  border-bottom: 1px solid map-get($theme-colors, primary);
+}
+
 .card-grid {
   display: grid;
   gap: 1px;
   background-color: #dedede;
   padding: 0;
-  border-bottom: 1px solid #dedede;
 
   &.card-grid-2x2 {
-    /* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */
+    /* left half is a hero area; right half is a 2x2 grid. */
     grid-template-columns: 2fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: auto auto;
 
     .section-hero {
       grid-row-end: span 2;
@@ -88,19 +91,19 @@ h1, h2, h3, h4, h5 {
   }
 
   &.card-grid-2x1 {
-    /* left half is a hero area; right half is a 2x1 grid. Total grid is 4x1 */
+    /* left half is a hero area; right half is a 2x1 grid. */
     grid-template-columns: 2fr 1fr 1fr;
     grid-template-rows: 1fr;
 
+    .section-hero {
+      grid-row-end: span 1;
+    }
+
     @include media-breakpoint-down(md) {
       /* Switch to 1-column layout on smaller widths */
       grid-template-columns: 1fr;
       grid-template-rows: 1fr;
     }
-
-    .section-hero {
-      grid-row-end: span 1;
-    }
   }
 
   &.card-grid-2x4 {
@@ -108,18 +111,44 @@ h1, h2, h3, h4, h5 {
     grid-template-columns: 2fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr 1fr;
 
+    .section-hero {
+      grid-row-end: span 4;
+    }
+
     @include media-breakpoint-down(md) {
       /* Switch to 1-column layout on smaller widths */
       grid-template-columns: 1fr;
       grid-template-rows: repeat(5, auto);
 
       .section-hero {
-        grid-row-end: span 2;
+        grid-row-end: span 1;
+      }
     }
   }
 
-    .section-hero {
+  &.card-grid-4xN {
-      grid-row-end: span 4;
+    /* 4 equal columns and any number of auto-sized rows. */
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-auto-rows: auto;
+
+    /* No "hero" blocks expected here. */
+
+    @include media-breakpoint-down(md) {
+      /* Switch to 1-column layout on smaller widths */
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &.card-grid-3xN {
+    /* 3 equal columns and any number of auto-sized rows. */
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: auto;
+
+    /* No "hero" blocks expected here. */
+
+    @include media-breakpoint-down(md) {
+      /* Switch to 1-column layout on smaller widths */
+      grid-template-columns: 1fr;
     }
   }