merged changes, ran sass compiler

README.md

@@ -4,9 +4,9 @@ The [XRP Ledger Dev Portal](https://xrpl.org) is the authoritative source for XR
 
 To build the site locally:
 
-1. Install [**Dactyl**](https://github.com/ripple/dactyl):
+1. Install [**Dactyl**](https://github.com/ripple/dactyl) and `lxml`:
 
-        sudo pip3 install dactyl
+        sudo pip3 install dactyl lxml
 
 2. Clone the repo and change into its directory:
 

assets/js/jump-to-top.js

@@ -26,6 +26,6 @@ $(document).ready(function() {
     }
   });
   $(".jump-to-top").click(function() {
-    $("body").animate({scrollTop: TO_TOP_POS}, TO_TOP_SPEED)
+    $("html").animate({scrollTop: TO_TOP_POS}, TO_TOP_SPEED)
   });
 });

dactyl-config.yml

@@ -54,7 +54,7 @@ cover_page:
 
 languages:
     -   code: en
-        display_name: English
+        display_name: Eng
         prefix: "/"
     -   code: ja
         display_name: 日本語
@@ -69,6 +69,7 @@ targets:
         #  Override them with --vars to change which fork/branch to edit.
         github_forkurl: https://github.com/ripple/xrpl-dev-portal
         github_branch: master
+        prefix: "/"
         link_subs:
             "./src/api-v3/paths/preparations/payments.ts": "https://github.com/xpring-eng/xrp-api/blob/master/src/api-v3/paths/preparations/payments.ts"
         readability_goals:
@@ -79,6 +80,7 @@ targets:
         display_name: XRP Ledger Dev Portal (日本語)
         github_forkurl: https://github.com/ripple/xrpl-dev-portal
         github_branch: master
+        prefix: "/ja/"
         locale_file: locale/ja/LC_MESSAGES/messages.mo
         link_subs:
             # Adjust XRP-API readme link to point to the right place in the repo
@@ -257,14 +259,6 @@ pages:
 
 # "Build" funnel ---------------------------------------------------------------
     -   name: Build
-        funnel: Build
-        template: template-landing-children.html #TODO: change?
-        html: build.html
-        targets:
-            - en
-            - ja
-
-    -   name: Docs
         funnel: Build
         template: template-landing-docs.html
         html: docs.html
@@ -6290,7 +6284,7 @@ pages:
     -   md: dev-tools/dev-tools.md
         html: dev-tools.html
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         targets:
             - en
 
@@ -6305,14 +6299,14 @@ pages:
         template: template-redirect.html
         redirect_url: dev-tools.html
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         targets:
             - en
             - ja
 
     -   name: RPC Tool
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         html: xrp-ledger-rpc-tool.html
         targets:
             - en
@@ -6321,7 +6315,7 @@ pages:
 
     -   name: WebSocket API Tool
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         template: template-websocket-api-tool.html
         html: websocket-api-tool.html
         targets:
@@ -6330,7 +6324,7 @@ pages:
 
     -   name: Data API v2 Tool
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         html: data-api-v2-tool.html
         methods_js: js/apitool-methods-data_v2.js
         rest_host: https://data.ripple.com
@@ -6343,7 +6337,7 @@ pages:
 
     -   name: ripple.txt Validator # Redirect from ripple.txt validator to toml
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         html: ripple-txt-validator.html
         template: template-redirect.html
         redirect_url: xrp-ledger-toml-checker.html
@@ -6353,7 +6347,7 @@ pages:
 
     -   name: xrp-ledger.toml Checker
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         html: xrp-ledger-toml-checker.html
         targets:
             - en
@@ -6362,7 +6356,7 @@ pages:
 
     -   name: Domain Verification Checker
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         html: validator-domain-verifier.html
         targets:
             - en
@@ -6372,7 +6366,7 @@ pages:
     -   name: XRP Faucets
         html: xrp-testnet-faucet.html
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         template: template-test-net.html
         targets:
             - en
@@ -6381,7 +6375,7 @@ pages:
     -   name: XRP Test Net Faucet # Redirect from old URL
         html: xrp-test-net-faucet.html
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         template: template-redirect.html
         redirect_url: xrp-testnet-faucet.html
         targets:
@@ -6390,7 +6384,7 @@ pages:
 
     -   name: Transaction Sender
         funnel: Build
-        category: Dev Tools
+        doc_type: Dev Tools
         html: tx-sender.html
         targets:
             - en

styles/_buttons.scss

@@ -1,23 +1,23 @@
 .content a.button {
-  color: $black;
+  color: $white;
-  border: 1px solid $gray-300;
+  border: 2px solid $white;
 }
 .content a.button:hover {
   border: 1px solid $black;
 }
 
 .btn-outline-secondary {
-  color: $black;
+  color: $white;
-  border-color: $gray-300;
+  border-color: $white;
 }
 
 #main_content_wrapper .btn-outline-secondary:hover,
 #main_content_wrapper .btn-outline-secondary:active,
 .button:hover, #request_button:hover {
   /* Undo Bootstrap styling */
-  color: $black;
+  color: $white;
   background-color: inherit;
-  border: 1px solid $black;
+  border: 2px solid $white;
 }
 
 /* Button styling ----------------------------------------------------------- */

styles/_colors.scss

@@ -108,3 +108,10 @@ $body-color:      $white;
 $headings-color:  $white;
 $text-muted:      $gray-200;
 $breadcrumb-bg:   $black;
+$dropdown-bg:     rgba(34,37,43,0.8);
+$dropdown-divider-bg: $black;
+$dropdown-color:  $secondary;
+$dropdown-link-color: $white;
+$dropdown-link-hover-color: $primary;
+$dropdown-link-hover-bg: transparent;
+$dropdown-link-active-bg: transparent;

styles/_github-edit.scss

@@ -1,22 +1,10 @@
 /* Edit on GitHub link ------------------------------------------------------ */
-.github-edit-wrap {
+.github-edit-wrap .github-edit.nav-link {
-  border: 1px solid $gray-400;
+  background-image: url(../vendor/github-marks/GitHub-Mark-Light-32px.png);
-  margin-right: 5px;
-  margin-left: 5px;
-}
-.github-edit-wrap:hover {
-  border-color: $black;
-}
-.github-edit-wrap .github-edit {
-  background-image: url(../vendor/github-marks/GitHub-Mark-32px.png);
   background-size: 24px 24px;
   background-position: left 12px center;
   background-repeat: no-repeat;
-  padding: 8px 16px 8px 48px;
+  padding-left: 48px;
-  color: $gray-600;
   text-decoration: none;
   display: block;
-  line-height: 17px; /* Match search box height */
-  font-family: "Space Mono", monospace;
-  font-weight: 700;
 }

styles/_top-nav.scss

@@ -1,33 +1,70 @@
 /* Top navigation ----------------------------------------------------------- */
 
-.navbar.fixed-top {
-  background-color: $black; // TODO: unnecessary if top nav is no longer fixed
-}
-
 .navbar .navbar-nav .nav-link {
   color: $white;
 }
 
-.navbar .navbar-nav .nav-link:hover,
+.dropdown-toggle::after {
-.navbar .navbar-nav .nav-link:active,
+  border-width: 0;
-.navbar .navbar-nav .active .nav-link,
+  position: absolute;
-.navbar .active-parent .nav-link {
+  top: 80%;
-  color: $white;
+  left: 50%;
-  font-weight: bold;
 }
 
-.navbar.fixed-top {
+.dropdown-toggle.with-caret::after {
-  font-weight: 400;
+  position: relative;
-  padding: 0;
+  top: 4px;
-  margin: 0 48px;
+  left: 0;
+  border-top: 8px solid $primary;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  border-bottom: 0;
+  transition: 0.2s;
 }
 
-@media (max-width: 1105px) {
+.dropdown.show .dropdown-toggle.with-caret::after {
-  .navbar.fixed-top {
+  // border-top: 0;
-    margin: 0 20px;
+  // border-right: 5px solid transparent;
+  // border-left: 5px solid transparent;
+  // border-bottom: 8px solid $primary;
+  transform: scaleY(-1);
+}
+
+.dropdown.show .dropdown-toggle {
+  color: $gray-500;
+  position: relative;
+}
+
+.dropdown.show .dropdown-toggle:not(.with-caret)::after,
+.dropdown-toggle:not(.with-caret):hover::after {
+  content: " ";
+  display: static;
+  border: 3px solid $primary;
+  border-radius: 50%;
+  font-size: 0;
+  height: 0;
+  width: 0;
+}
+
+
+
+.navbar .dropdown-menu {
+  backdrop-filter: blur(8px);
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  min-width: 250px;
+
+  .dropdown-item {
+    line-height: 262%;
+    border-bottom: 2px solid $black;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &.active, &:hover {
+      font-weight: bold;
     }
-  .navbar .navbar-nav .nav-link {
-    padding-right: 5px;
   }
 }
 
@@ -45,7 +82,6 @@
   font-size: 1rem;
   line-height: 52px;
   text-decoration: none;
-  font-family: 'Space Mono', monospace;
 }
 
 .navbar .navbar-nav .nav-link:hover {
@@ -144,36 +180,6 @@
 
 }
 
-/* Push content below fixed header ------------------------------------------ */
-#main_content_wrapper {
-  margin-top: 68px;
-  // padding: 0 48px;
-}
-
-/* Fix so anchors don't jump under the fixed header ------------------------- */
-.main h1:before,
-.main h2:before,
-.main h3:before,
-.main h4:before,
-.main h5:before,
-.main h6:before,
-#main_content_wrapper:before,
-.interactive-block:before {
-  display: block;
-  content: " ";
-  margin-top: -67px;
-  height: 67px;
-  visibility: hidden;
-}
-
-.card h1:before,
-.card h2:before,
-.card h3:before,
-.card h4:before,
-.card h5:before,
-.card h6:before {
-  display: none;
-}
 
 
 @media (max-width: 1010px) {
@@ -184,7 +190,6 @@
   }
 }
 
-#navbarHolder .language-selector .btn {
+#navbarHolder .language-selector {
   font-size: 0.875rem;
-  padding: .375rem .75rem;
 }

styles/xrpl.scss

@@ -3,10 +3,11 @@
 @import "_colors.scss";
 
 $navbar-padding-y: 0;
-$navbar-nav-link-padding-x: 1rem;
+$navbar-nav-link-padding-x: 1.25rem;
 $border-radius: 0;
 $border-radius-lg: 0;
 $border-radius-sm: 0;
+$dropdown-border-width: 0;
 
 // @import "_font-face.scss";
 $font-family-monospace: 'Work Sans', monospace;

tool/template-base.html

@@ -51,52 +51,7 @@
 
 <body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">
 
-  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-black">
+  {% include 'template-top-nav.html' %}
-    <a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
-    <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse justify-content-end" id="navbarHolder">
-      <ul class="nav navbar-nav">
-        {% set funnels = [] %}
-        {% for page in pages %}
-          {% if page.funnel is defined and page.funnel not in funnels %}
-            {% set thisfunneltop = pages|selectattr('funnel', 'defined_and_equalto', page.funnel)|first %}
-            <li class="nav-item{% if currentpage == thisfunneltop %} active{% elif currentpage.funnel is defined and currentpage.funnel == thisfunneltop.name %} active-parent{% endif %}">
-              <a class="nav-link" href="{{ thisfunneltop.html }}">{{ thisfunneltop.name }}</a>
-            </li>
-            {% set _ = funnels.append(page.funnel) %}
-          {% endif %}
-        {% endfor %}
-        <!-- TODO: add dev blog to "Build"
-        <li class="nav-item">
-          <a class="nav-link" href="/blog/">{% trans %}Blog{% endtrans %}</a>
-        </li>
-        -->
-      </ul><!-- /.navbar-nav -->
-      {% include 'template-github-edit.html' %}
-      <form class="navbar-form navbar-right" id="navbar-search" role="search">
-        <div class="form-inline">
-          <label class="sr-only" for="topsearchbar">{% trans %}Search site...{% endtrans %}</label>
-          <input id="topsearchbar" name="q" type="text" class="form-control" class="top-search" placeholder="{% trans %}Search site...{% endtrans %}">
-          <button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
-        </div>
-      </form>
-      <div class="nav navbar-nav language-selector">
-        <div class="dropdown">
-          <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="language_selector_header_btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
-          </button>
-          <div class="dropdown-menu" aria-labelledby="language_selector_header_btn">
-            {% for lang in config.languages %}
-            <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>
-            {% endfor %}
-          </div><!--/.dropdown-menu-->
-        </div><!--/.dropdown-->
-      </div><!--/.language-selector-->
-    </div><!--/#navbarHolder-->
-    <div class="menu-overlay"></div>
-  </nav>
 
   <div class="container-fluid" role="document" id="main_content_wrapper">
     <div class="row">

tool/template-github-edit.html

@@ -1,4 +1,4 @@
-<div class="github-edit-wrap">
+<div class="nav-item github-edit-wrap">
   {% if target.github_forkurl is defined %}
     {% set have_edit_link = False %}
     {% if currentpage.md is defined %}
@@ -23,6 +23,6 @@
     {% if not have_edit_link %}
       {% set githuburl = target.github_forkurl %}
     {% endif %}
-    <a href="{{githuburl}}" target="_blank" class="github-edit">{% trans %}Edit{% endtrans %}</a>
+    <a href="{{githuburl}}" target="_blank" class="nav-link github-edit">{% trans %}Edit{% endtrans %}</a>
   {% endif %}
 </div><!-- /.github-edit -->

tool/template-top-nav.html

@@ -0,0 +1,71 @@
+<div class="container">
+<nav class="navbar navbar-expand-lg row">
+  <a href="{{target.prefix}}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
+  <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse justify-content-center" id="navbarHolder">
+    <ul class="nav navbar-nav">
+      {% macro dropdown(links) %}
+      <li class="nav-item dropdown">
+        {% set funnelhead = links|first %}
+        <a class="nav-link dropdown-toggle" href="#" id="topnav_{{funnelhead.html}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{funnelhead.name}}</a>
+        <div class="dropdown-menu" aria-labelledby="topnav_{{funnelhead.html}}">
+          {% for link in links %}{% if not loop.first %}
+          <a class="dropdown-item{% if currentpage == link %} active{% endif %}" href="{{target.prefix}}{{link.html}}">{{link.name}}</a>
+          {% endif %}{% endfor %}
+        </div>
+      </li>
+      {% endmacro %}
+
+      {{ dropdown(pages|selectattr('funnel', 'defined_and_equalto','Learn')|list) }}
+
+      {% set explore_links = pages|selectattr('funnel', 'defined_and_equalto','Explore')|list + [{"name":"Ledger Explorer", "html": "https://livenet.xrpl.org/"}] %}
+      {{ dropdown(explore_links) }}
+
+      {% set build_links = [
+        {"name": "Build", "html": "docs.html"},
+        {"name": "Get Started", "html":"get-started-with-the-rippled-api.html"},
+        {"name": "Docs", "html": "docs.html"},
+        {"name": "Tools", "html": "dev-tools.html"},
+        {"name": "Dev Blog", "html": "/blog/"}
+      ] %}
+      {{ dropdown(build_links) }}
+
+      <li class="nav-item">
+        <a class="nav-link" href="contribute.html">{% trans %}Contribute{% endtrans %}</a>
+      </li>
+
+      {% include 'template-github-edit.html' %}
+
+      <div class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">Open Search</span></a>
+        <div class="dropdown-menu">
+          <form class="navbar-form navbar-right" id="navbar-search" role="search">
+            <div class="form-inline">
+              <label class="sr-only" for="topsearchbar">{% trans %}Search site...{% endtrans %}</label>
+              <input id="topsearchbar" name="q" type="text" class="form-control" class="top-search" placeholder="{% trans %}Search site...{% endtrans %}">
+              <button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
+            </div>
+          </form>
+        </div><!--/.dropdown-menu-->
+      </div><!--/.dropdown-->
+
+    </ul><!-- /.navbar-nav -->
+
+    <div class="nav navbar-nav language-selector">
+      <div class="dropdown">
+        <a class="nav-link dropdown-toggle with-caret" type="button" id="language_selector_header_btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
+        </a>
+        <div class="dropdown-menu" aria-labelledby="language_selector_header_btn">
+          {% for lang in config.languages %}
+          <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>
+          {% endfor %}
+        </div><!--/.dropdown-menu-->
+      </div><!--/.dropdown-->
+    </div><!--/.language-selector-->
+  </div><!--/#navbarHolder-->
+  <div class="menu-overlay"></div>
+</nav>
+</div>