Browse Source

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: https://git.joinplu.me/plume/joinplu.me/pulls/45
main
KitaitiMakoto 2 years ago
parent
commit
59645433a1
  1. 3
      Rakefile
  2. 33
      data/languages.yaml
  3. BIN
      source/images/LanguageIcon.png
  4. 8
      source/index.html.erb
  5. 20
      source/javascripts/site.js
  6. 68
      source/stylesheets/site.css.scss

3
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

33
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: 中文

BIN
source/images/LanguageIcon.png

After

Width: 128  |  Height: 128  |  Size: 4.7 KiB

8
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>

20
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');
}
});
}
});

68
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;

Loading…
Cancel
Save