Nav improvements

- Use translated names
- Revised build dropdown
- More flexible from config file, less template editing

dactyl-config.yml

@@ -170,10 +170,21 @@ pages:
         category: Uses
         template: template-learn-overview.html
         html: overview.html
-        name_in_top_nav: Overview
+        top_nav_level: 1
+        top_nav_name: Overview
         sidebar: disabled
         targets:
             - en
+
+    -   name: 学ぶ
+        funnel: Learn
+        category: Uses
+        template: template-learn-overview.html
+        html: overview.html
+        top_nav_level: 1
+        top_nav_name: オーバービュー
+        sidebar: disabled
+        targets:
             - ja
 
     -   name: Uses
@@ -181,6 +192,7 @@ pages:
         category: Uses
         template: template-learn-uses.html
         html: uses.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -191,6 +203,7 @@ pages:
         category: History
         template: template-learn-history.html
         html: history.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -201,6 +214,7 @@ pages:
         category: Impact
         template: template-learn-impact.html
         html: impact.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -211,6 +225,7 @@ pages:
         category: Carbon Calculator
         template: template-calculator.html
         html: carbon-calculator.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -224,24 +239,21 @@ pages:
         funnel: Explore
         targets:
             - en
-            - ja
 
-    # News page isn't ready at the moment
-    # -   name: News
-    #     funnel: Explore
-    #     category: News
-    #     template: template-explore-news.html
-    #     html: news.html
-    #     sidebar: disabled
-    #     targets:
-    #         - en
-    #         - ja
+    -   name: 探る
+        html: explore.html
+        template: template-redirect.html
+        redirect_url: businesses.html
+        funnel: Explore
+        targets:
+            - ja
 
     -   name: Wallets
         funnel: Explore
         category: Wallets
         template: template-explore-wallets.html
         html: wallets.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -252,6 +264,7 @@ pages:
         category: Exchanges
         template: template-explore-exchanges.html
         html: exchanges.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -262,6 +275,7 @@ pages:
         category: Businesses
         template: template-explore-businesses.html
         html: businesses.html
+        top_nav_level: 1
         sidebar: disabled
         targets:
             - en
@@ -273,13 +287,17 @@ pages:
         template: template-landing-docs.html
         html: docs.html
         sidebar: disabled
+        top_nav_level: 1
+        top_nav_name: Docs
         targets:
             - en
 
-    -   name: ドキュメント
+    -   name: 作る
         funnel: Build
         template: template-landing-docs.html
         html: docs.html
+        top_nav_level: 1
+        top_nav_name: ドキュメント
         sidebar: disabled
         targets:
             - ja
@@ -290,6 +308,7 @@ pages:
         funnel: Build
         doc_type: Concepts
         html: concepts.html
+        top_nav_level: 2
         template: template-landing-children.html
         blurb: Learn the "what" and "why" behind fundamental aspects of the XRP Ledger.
         targets:
@@ -299,6 +318,7 @@ pages:
         funnel: Build
         doc_type: Concepts
         html: concepts.html
+        top_nav_level: 2
         template: template-landing-children.html
         blurb: XRP Ledgerの基本的な部分の背景に「何があるか」、「なぜなのか」を学びましょう。
         targets:
@@ -1434,6 +1454,7 @@ pages:
         html: tutorials.html
         funnel: Build
         doc_type: Tutorials
+        top_nav_level: 2
         template: template-landing-children.html
         blurb: Get step-by-step guidance to perform common tasks with the XRP Ledger.
         targets:
@@ -1443,6 +1464,7 @@ pages:
         html: tutorials.html
         funnel: Build
         doc_type: Tutorials
+        top_nav_level: 2
         template: template-landing-children.html
         blurb: XRP Ledgerで一般的なタスクを実行するためのステップバイステップのガイダンスを紹介します。
         targets:
@@ -3025,6 +3047,7 @@ pages:
         doc_type: References
         template: template-landing-references.html
         html: references.html
+        top_nav_level: 2
         sidebar: disabled
         blurb: Complete references for different interfaces to the XRP Ledger.
         targets:
@@ -3036,6 +3059,7 @@ pages:
         doc_type: References
         template: template-landing-references.html
         html: references.html
+        top_nav_level: 2
         sidebar: disabled
         blurb: XRP Ledgerへのさまざまなインターフェイスの包括的なリファレンスです。
         targets:
@@ -6300,6 +6324,7 @@ pages:
         html: dev-tools.html
         funnel: Build
         doc_type: Dev Tools
+        top_nav_level: 1
         targets:
             - en
 
@@ -6307,6 +6332,7 @@ pages:
         html: dev-tools.html
         funnel: Build
         doc_type: Dev Tools
+        top_nav_level: 1
         targets:
             - ja
 
@@ -6314,8 +6340,6 @@ pages:
         html: dev-tools-dev-tools.html
         template: template-redirect.html
         redirect_url: dev-tools.html
-        funnel: Build
-        doc_type: Dev Tools
         targets:
             - en
             - ja

styles/_top-nav.scss

@@ -97,6 +97,10 @@
       line-height: 262%;
       padding: 0 .875rem;
 
+      &.top-level-2 {
+        padding-left: 2rem
+      }
+
       &:hover {
         color: $primary;
       }

tool/template-landing-docs.html

@@ -5,9 +5,9 @@
 {% block main %}
   <section class="container-fluid card-grid card-grid-2x2">
     <div class="section-hero card">
-      <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>
+      <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>
     </div>
 
     {% set doc_types = [] %}
@@ -15,10 +15,10 @@
     {% 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 %}
-
+        {% set doc_type_name = doc_type_top.name %}
           <div class="card">
             <div class="card-header">
-              <h3 class="card-title"><a href="{{doc_type_top.html}}">{{doc_type_top.name}}</a></h3>
+              <h3 class="card-title"><a href="{{doc_type_top.html}}">{{doc_type_name}}</a></h3>
             </div><!--/.card-header-->
             <div class="card-body">
               {% if page.blurb is defined %}
@@ -30,7 +30,7 @@
             </div><!--/.card-body-->
             <div class="card-footer">
               <div class="readmore">
-                <a class="btn btn-outline-secondary" href="{{doc_type_top.html}}">View All {{doc_type_top.name}}</a>
+                <a class="btn btn-outline-secondary" href="{{doc_type_top.html}}">{% trans %}View All {{doc_type_name}}{% endtrans %}</a>
               </div>
             </div><!--/.card-footer-->
           </div><!--/.card-->
@@ -42,7 +42,7 @@
   </section>
 
   <section class="container-fluid doc-index">
-    <h2 id="full-doc-index">Full Documentation Index</h2>
+    <h2 id="full-doc-index">{% trans %}Full Documentation Index{% endtrans %}</h2>
     <div class="row">
       <div class="col-md-8">
         {% set parent_page = currentpage %}

tool/template-landing-references.html

@@ -4,9 +4,9 @@
 
 {% block main %}
   <section class="container-fluid section-hero">
-    <h1 class="main-page-header">References</h1>
+    <h1 class="main-page-header">{{currentpage.name}}</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>
+    <p class="blurb">{% trans %}Or, skip ahead to the <a href="#full-reference-index">Full Reference Index</a>.{% endtrans %}</p>
   </section>
 
   {% set flag_n = cycler(* range(1,99)) %}
@@ -59,7 +59,7 @@
   </section>
 
   <section class="container-fluid doc-index">
-    <h2 id="full-reference-index">Full Reference Index</h2>
+    <h2 id="full-reference-index">{% trans %}Full Reference Index{% endtrans %}</h2>
     <div class="row">
       <div class="col-md-8">
         {% set parent_page = currentpage %}

tool/template-top-nav.html

@@ -6,32 +6,30 @@
   </button>
   <div class="collapse navbar-collapse justify-content-center" id="navbarHolder">
     <ul class="nav navbar-nav">
-      {% macro dropdown(links) %}
+      {% macro dropdown(funnel, appendpages=[]) %}
       <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="{{link.html}}">{% if link.name_in_top_nav is defined %}{{link.name_in_top_nav}}{% else %}{{link.name}}{% endif %}</a>
-          {% endif %}{% endfor %}
+        {% set links = pages|selectattr('funnel','defined_and_equalto',funnel)|
+                             selectattr('top_nav_level', 'defined')|list +
+                             appendpages %}
+        {% set funneltop = pages|selectattr('funnel','defined_and_equalto',funnel)|first %}
+        <a class="nav-link dropdown-toggle" href="#" id="topnav_{{funneltop.html}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{funneltop.name}}</a>
+        <div class="dropdown-menu" aria-labelledby="topnav_{{funneltop.html}}">
+          {% for link in links %}
+          <a class="dropdown-item {% if link.top_nav_level is undefined %}top-level-1{% else %}top-level-{{link.top_nav_level}}{% endif %}{% if currentpage == link %} active{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
+          {% endfor %}
         </div>
       </li>
       {% endmacro %}
 
-      {% set learn_links = [{"name":"Learn", "html": "learn.html"}] + pages|selectattr('funnel', 'defined_and_equalto','Learn')|list %}
-      {{ dropdown(learn_links) }}
+      {{ dropdown("Learn") }}
 
-      {% set explore_links = pages|selectattr('funnel', 'defined_and_equalto','Explore')|list + [{"name":"Ledger Explorer", "html": "https://livenet.xrpl.org/"}] %}
-      {{ dropdown(explore_links) }}
+      {{ dropdown("Explore", [{"name":"Ledger Explorer", "html": "https://livenet.xrpl.org/"}]) }}
 
-      {% set build_links = [
-        {"name": "Build", "html": "docs.html"},
-        {"name": "Get Started", "html":"get-started.html"},
-        {"name": "Docs", "html": "docs.html"},
-        {"name": "Tools", "html": "dev-tools.html"},
-        {"name": "Dev Blog", "html": "/blog/"}
-      ] %}
-      {{ dropdown(build_links) }}
+      {% if target.lang == "ja" %}
+      {{ dropdown("Build", [{"name": "ブログ", "html": "/blog/"}]) }}
+      {% else %}
+      {{ dropdown("Build", [{"name": "Dev Blog", "html": "/blog/"}]) }}
+      {% endif %}
 
       <li class="nav-item">
         <a class="nav-link" href="contribute.html">{% trans %}Contribute{% endtrans %}</a>