Merge pull request #752 from phil-opp/lang-selector

Add a language selector for browser-supported languages

blog/static/css/main.css

@@ -249,7 +249,7 @@ aside#all-posts-link {
     display: none;
   }
 
-  aside#recent-updates {
+  aside.page-aside-right {
     position: absolute;
     min-width: 11rem;
     max-width: 17rem;
@@ -259,21 +259,21 @@ aside#all-posts-link {
     font-size: 90%;
   }
 
-  aside#recent-updates .block {
+  aside.page-aside-right .block {
     margin-bottom: 1.5rem;
   }
 
-  aside#recent-updates h1 {
+  aside.page-aside-right h2 {
     font-size: 110%;
     margin-bottom: .2rem;
   }
 
-  aside#recent-updates ul {
+  aside.page-aside-right ul {
     margin: 0 0 .2rem 0;
     padding: 0 0 0 1rem;
   }
 
-  aside#recent-updates ul li {
+  aside.page-aside-right ul li {
     margin-top: .5rem;
   }
 
@@ -285,7 +285,7 @@ aside#all-posts-link {
   }
 }
 
-aside#recent-updates time {
+aside.page-aside-right time {
   color: #9a9a9a;
 }
 
@@ -421,3 +421,7 @@ details summary h3, details summary h4, details summary h5, details summary h6 {
   display: inline-block;
   margin-left: 16px;
 }
+
+.hidden {
+  display: none;
+}

blog/static/js/main.js

@@ -1,4 +1,6 @@
 window.onload = function() {
+  show_lang_selector();
+
   var container = document.querySelector('#toc-aside');
 
   if (container != null) {
@@ -61,3 +63,19 @@ function toc_scroll_position(container) {
     current_toc_item.classList.add("active");
   }
 }
+
+function show_lang_selector() {
+  var show_lang_selector = false;
+  for (language_selector of document.querySelectorAll('#language-selector li')) {
+    var lang = language_selector.getAttribute("data-lang-switch-to");
+    this.console.log(lang)
+    if (this.navigator.languages.includes(lang)) {
+      this.console.log("supported!");
+      language_selector.classList.remove("hidden");
+      show_lang_selector = true
+    }
+  }
+  if (show_lang_selector) {
+    document.querySelector("#language-selector").classList.remove("hidden")
+  }
+}

blog/templates/second-edition/index.html

@@ -78,14 +78,14 @@
 {% endblock main %}
 
 {% block after_main %}
-<aside id="recent-updates">
+<aside class="page-aside-right">
     <div class="block">
-        <h1>Recent Updates</h1>
+        <h2>Recent Updates</h2>
         {% include "auto/recent-updates.html" %}
     </div>
 
     <div class="block">
-        <h1>Repository</h1>
+        <h2>Repository</h2>
         <div class="gh-repo-box">
             <div>
                 <svg viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>
@@ -115,7 +115,15 @@
             </p>
         </div>
     </div>
-
+    <div class="block hidden" id="language-selector">
+        <h2>Language</h2>
+        <ul>
+            <li><a href="/">English (Original)</a></li>
+            {% for lang in config.languages %}
+                <li data-lang-switch-to="{{ lang.code }}" class="hidden"><a href="/{{ lang.code }}">{{ lang.code }}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
 </aside>
 
 {% endblock after_main %}

blog/templates/second-edition/page.html

@@ -89,4 +89,15 @@
         {{ macros::utterances() }}
     </section>
 
+    <aside class="page-aside-right">
+        <div class="block hidden" id="language-selector">
+            <h2>Other Languages</h2>
+            <ul>
+                {% for translation in page.translations %}
+                    <li data-lang-switch-to="{{ translation.lang }}" class="hidden"><a href="{{ translation.permalink }}">{{ translation.lang }} {% if translation.lang == "en" %}(original){% endif %}</a></li>
+                {% endfor %}
+            </ul>
+        </div>
+    </aside>
+
 {% endblock after_main %}