Fix #28 Add language switcher (#45)

Don't overwrite

crowdin download requires files exist

Add language switcher

Co-authored-by: Kitaiti Makoto <KitaitiMakoto@gmail.com>
Reviewed-on: plume/joinplu.me#45

Rakefile

@@ -29,6 +29,7 @@ multitask :build_site => [:build_base, "crowdin:download"] do
     content = path.read
     content.sub! /<script type="text\/javascript" src="\/\/cdn.crowdin.com\/jipt\/jipt.js"><\/script>/, ""
     dest = Pathname(path.to_path.sub(LOCALE_DIR, BUILD_DIR))
+    next if dest.file?
     $stderr.puts "copy #{path} -> #{dest}"
     dest.parent.mkpath
     dest.write content
@@ -62,7 +63,7 @@ end
 
 namespace :crowdin do
   desc "Download translations"
-  task :download do
+  task :download => :build_trans_src do
     sh "crowdin", "download"
   end
 

data/languages.yaml

@@ -0,0 +1,33 @@
+---
+af: Afrikaans
+ar: العربية
+ca: Català
+cs: Česky
+da: Dansk
+de: Deutsch
+el: Ελληνικά
+en: English
+eo: Esperanto
+es: Español
+fa: فارسی
+fi: Suomi
+fr: Français
+gl: Galego
+he: עברית
+hu: Magyar
+it: Italiano
+ja: 日本語
+ko: 한국어
+nl: Nederlands
+'no': Norsk (bokmål)
+pl: Polski
+pt: Português
+ro: Română
+ru: Русский
+si: සිංහල
+sr: Српски
+sv: Svenska
+tr: Türkçe
+uk: Українська
+vi: Việtnam
+zh: 中文

source/index.html.erb

@@ -2,6 +2,14 @@
   <h1>Plume</h1>
   <h2>A federated blogging application</h2>
   <img src="/images/logo.png"/>
+  <div class="language-switcher">
+    <button aria-controls="languages" aria-haspopup="true" aria-expanded="false"><img src="/images/LanguageIcon.png" alt="switch language"></button>
+    <ul id="languages" class="languages" aria-hidden="true">
+      <% data.languages.each_pair do |code, name| %>
+      <li lang="<%=h code %>" translate="no" class="language"><%= link_to h(name), code == "en" ? "/" : "/#{code}/", hreflang: h(code), rel: "alternate" %></li>
+      <% end %>
+    </ul>
+  </div>
 </header>
 
 <main>

source/javascripts/site.js

@@ -20,3 +20,23 @@ if (instancesList) {
       instancesList.appendChild(document.createTextNode('Error retriving instances'))
     })
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+  for (const switcher of document.getElementsByClassName('language-switcher')) {
+    const control = switcher.querySelector('[aria-haspopup]');
+    control.addEventListener('click', event => {
+      const popupId = control.getAttribute('aria-controls');
+      if (! popupId) return;
+      const popup = document.getElementById(popupId);
+      if (! popup) return;
+      if (control.getAttribute('aria-expanded') === 'true') {
+        control.setAttribute('aria-expanded', 'false');
+        popup.setAttribute('aria-hidden', 'true');
+      } else {
+        control.setAttribute('aria-expanded', 'true');
+        popup.setAttribute('aria-hidden', 'false');
+
+      }
+    });
+  }
+});

source/stylesheets/site.css.scss

@@ -40,6 +40,15 @@ header {
     grid-row: 1 / 3;
     grid-column: 2;
   }
+
+  .language-switcher {
+    position: absolute;
+    top: 2vw;
+    right: 2vw;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+  }
 }
 
 body > main {
@@ -144,6 +153,65 @@ section {
   }
 }
 
+.language-switcher {
+  position: relative;
+  font-size: 1rem;
+
+  [aria-haspopup] {
+    display: block;
+    width: 2em;
+    padding: 0;
+    line-height: 1;
+    border: none;
+    background: transparent;
+
+    &:hover {
+      opacity: 0.5;
+    }
+
+    &[aria-expanded="true"] {
+      opacity: 0.5;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  [aria-hidden="true"] {
+    display: none;
+  }
+
+  .languages {
+    position: absolute;
+    right: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0.5em 0;
+    border-radius: 0.1em;
+    background: #ffffff;
+    box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.6);
+  }
+
+  .language {
+    padding: 0;
+
+    a {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 0.5em 1em;
+      border-left: solid 0.5em transparent;
+
+      &:hover, &:focus {
+        border-left-color: $plume;
+      }
+    }
+  }
+}
+
 #instances {
   font-size: 1.2em;
   padding: 0;