Template: update translations navigation bar

Author: bitschmidty

_config.yml

@@ -51,19 +51,23 @@ defaults:
     values:
       image: https://bitcoinops.org/img/logos/optech-notext.png
       breadcrumbs: true
+      localizable: true
   - scope:
       path: "_topics"
     values:
       layout: topic
       permalink: /en/topics/:title/
+      localizable: false
 
 collections:
   topics:
     output: true
 
 languages:
-  - ja
-  - es
+  - code: ja
+    name: Japanese
+  - code: es
+    name: Spanish
 
 ## In-text aliases
 trb: "709,632" # TapRoot Block (activation)

_includes/functions/localization-finder.md

@@ -1,7 +1,13 @@
 {% assign baseurl = page.permalink | remove_first: "/" | remove_first: page.lang %}
-
-{% for lang in site.languages %}
-  {% assign localization = "/" | append: lang | append:baseurl %}
-  {% assign locale = site.posts | where:"permalink", localization %}
-  {% assign localizations = localizations | concat: locale %}
-{% endfor %}
+<div class="localization">
+    <a href="{{ '/en' | append:baseurl }}">en</a>
+    {% for lang in site.languages %}
+        {% assign localization = "/" | append: lang.code | append:baseurl %}
+        {% assign locale = site.posts | where:"permalink", localization %}
+        {% if locale.size == 0 %}
+            | <span title="No {{lang.name}} translation currently available">{{ lang.code }}</span>
+        {% else %}
+            | <a href="{{ locale[0].url }}">{{lang.code}}</a>
+        {% endif %}
+    {% endfor %}
+</div>

_layouts/blog.md

@@ -7,7 +7,7 @@ layout: default
 <div class="localization">
   <a href="/en/blog/">en</a>
   {% for lang in site.languages %}
-    | <a href="/{{ lang }}/blog/">{{lang}}</a>
+    | <a href="/{{ lang.code }}/blog/">{{lang.code}}</a>
   {% endfor %}
 </div>
 

_layouts/newsletter.html

@@ -3,18 +3,9 @@
 --- 
 <link rel="stylesheet" href="/assets/css/main.css">
 
-{% include functions/localization-finder.md %}
-
 <article class="newsletter">
   <header class="post-header">
-    {% if localizations.size > 0 %}
-      <div class="localization">
-        <a href="{{ '/en' | append:baseurl }}">en</a>
-        {% for locale in localizations %}
-          | <a href="{{ locale.url }}">{{locale.lang}}</a>
-        {% endfor %}
-      </div>
-    {% endif %}
+    {% include functions/localization-finder.md %}
     {% assign year = page.date | date: "%Y" %}
     {% assign path = "/" | append: page.lang | append: "/newsletters/" | append: year | append: "/" %}
     {% include linkers/breadcrumbs.md path=path %}

_layouts/newsletters.md

@@ -7,7 +7,7 @@ layout: default
 <div class="localization">
   <a href="/en/newsletters/">en</a>
   {% for lang in site.languages %}
-    | <a href="/{{ lang }}/newsletters/">{{lang}}</a>
+    | <a href="/{{ lang.code }}/newsletters/">{{lang.code}}</a>
   {% endfor %}
 </div>
 

_layouts/post.html

@@ -3,18 +3,12 @@
 ---
 <link rel="stylesheet" href="/assets/css/main.css">
 
-{% include functions/localization-finder.md %}
+{% assign baseurl = page.permalink | remove_first: "/" | remove_first: page.lang %}
 
 <article class="post">
-
   <header class="post-header">
-    {% if localizations.size > 0 %}
-      <div class="localization">
-        <a href="{{ '/en' | append:baseurl }}">en</a>
-        {% for locale in localizations %}
-          | <a href="{{ locale.url }}">{{locale.lang}}</a>
-        {% endfor %}
-      </div>
+    {% if page.localizable %}
+      {% include functions/localization-finder.md %}
     {% endif %}
     {% include linkers/breadcrumbs.md path=page.url %}
     <h1 class="post-title">{{ page.title | escape }}</h1>

_layouts/publications.md

@@ -7,7 +7,7 @@ layout: default
 <div class="localization">
   <a href="/en/publications/">en</a>
   {% for lang in site.languages %}
-    | <a href="/{{ lang }}/publications/">{{lang}}</a>
+    | <a href="/{{ lang.code }}/publications/">{{lang.code}}</a>
   {% endfor %}
 </div>
 

assets/css/main.scss

@@ -249,6 +249,12 @@ div.compat-usability img
 div.localization
 {
   text-align: right;
+
+  span {
+    font-style: italic;
+    color:gray;
+    cursor: not-allowed;
+  }
 }
 
 .pc125 {