Add translation support

404.md

@@ -4,7 +4,47 @@ title: 404 Error
 tagline: Ah snap! We could not find what you are looking for!
 permalink: /404.html
 ---
+{% include translations %}
+{% assign en_pages = site.documents | concat: site.pages | where: "language", "en"  %}
 
-Try got get back to the Home Page and start over!
+<noscript>
+{{ translations.p404_body["en"] }}
 
-[Go to the Home Page]({{ site.url }}{{ site.baseurl }})
+[{{ translations.p404_go_home["en"] }}]({{ en_pages | where: "ref", "download" | map: "url" | first | relative_url }})
+</noscript>
+
+<p id="404_body"></p>
+
+<p><a id="404_go_home" href="{{ en_pages | where: "ref", "home" | map: "url" | first | relative_url }}"></a></p>
+
+<script>
+  "use strict";
+  (function() {
+    let languageMap = {
+      {% for language in site.supported_languages %}
+        "{{ language }}": {
+          "404_title": "{{ translations.p404_title[language] }}",
+          "404_tagline": "{{ translations.p404_tagline[language] }}",
+          "404_body": "{{ translations.p404_body[language] }}",
+          "404_go_home": "{{ translations.p404_go_home[language] }}"
+        },
+      {% endfor %}
+    };
+
+    function setLanguage(language) {
+      document.getElementsByTagName("title")[0].textContent = languageMap[language]["404_title"] + " | {{ site.title }}";
+      document.getElementsByClassName("project-name")[0].textContent = languageMap[language]["404_title"];
+      document.getElementsByClassName("project-tagline")[0].textContent = languageMap[language]["404_tagline"];
+      document.getElementById("404_body").textContent = languageMap[language]["404_body"];
+      document.getElementById("404_go_home").textContent = languageMap[language]["404_go_home"];
+    }
+
+    for (const language in languageMap) {
+      if (window.location.pathname.startsWith("/" + language + "/")) {
+        setLanguage(language);
+        return;
+      }
+    }
+    setLanguage("en");
+  })();
+</script>

_config.yml

@@ -22,11 +22,53 @@ plugins:
 
 theme: # leave it empty
 
+supported_languages:
+  - en
+#  - fr
+
+language_endonyms:
+  en: "English"
+  fr: "Français"
+
+language_flags:
+  en: "\U0001F1FA\U0001F1F8"
+  fr: "\U0001F1EB\U0001F1F7"
+
 # social
 author: "The Pencil2D Team"
 defaults:
   - values:
       image: /images/pencil_icon.png
+      comments: false
+  -
+    scope:
+      path: "" # an empty string here means all files in the project
+    values:
+      layout: "default"
+      language: en
+  -
+    scope:
+      path: "_translations"
+    values:
+      untranslated: true
+  -
+    scope:
+      path: "_translations/fr"
+    values:
+      language: fr
+  -
+    scope:
+      path: "_posts"
+    values:
+      layout: "post"
+      language: en
+      permalink: /news/:year/:month/:title
+  -
+    scope:
+      path: "_translations/fr/_posts"
+    values:
+      layout: "post"
+      permalink: /fr/nouvelles/:year/:month/:title
 
 twitter:
   username: pencil2d
@@ -40,3 +82,8 @@ github:
 
 bitbucket:
   url: "https://bitbucket.org/chchwy/pencil2d"
+
+collections:
+  translations:
+    output: true
+    permalink: :path:output_ext

_data/translations.yml

@@ -0,0 +1,63 @@
+untranslated_warning:
+  en: "Warning: This page has not been completely translated. If you can help, please contribute at <a href='https://github.com/pencil2d/pencil2d.github.io'>https://github.com/pencil2d/pencil2d.github.io</a>"
+  fr: "Attention : Cette page n'a pas été traduite complètement. Si vous pouvez nous aider, s'il vous plaît contribuer à <a href='https://github.com/pencil2d/pencil2d.github.io'>https://github.com/pencil2d/pencil2d.github.io</a>"
+download:
+  en: "Download"
+  fr: "Télécharger"
+community:
+  en: "Community"
+  fr: "Communauté"
+forum:
+  en: "Forum"
+  fr: "Forum"
+facebook:
+  en: "Facebook"
+  fr: "Facebook"
+discord:
+  en: "Discord"
+  fr: "Discord"
+youtube:
+  en: "YouTube"
+  fr: "YouTube"
+tumblr:
+  en: "Tumblr"
+  fr: "Tumblr"
+news:
+  en: "News"
+  fr: "Nouvelles"
+docs:
+  en: "Docs"
+  fr: "Docs"
+tutorials:
+  en: "Tutorials"
+  fr: "Tutoriels"
+faq:
+  en: "FAQ"
+  fr: "FAQ"
+user_manual:
+  en: "User's Manual"
+  fr: "Manuel d'Util"
+contribute:
+  en: "Contribute"
+  fr: "Contribuer"
+download_now:
+  en: "Download Now!"
+  fr: "Téléchargez maintenant!"
+whats_new:
+  en: "What's New?"
+  fr: "Quoi de neuf?"
+disqus_no_javascript:
+  en: "Please enable JavaScript to view the comments powered by Disqus."
+  fr: "S'il vous plaît activer JavaScript pour voir les commentaires fournis par Disqus."
+p404_title:
+  en: "404 Error"
+  fr: "404 Erreur"
+p404_tagline:
+  en: "Ah snap! We could not find what you are looking for!"
+  fr: "Oh mon dieu! Nous ne pouvons pas trouver que vous voulez!"
+p404_body:
+  en: "Return to the home page and try again."
+  fr: "Retournez au accueil et essayez encore."
+p404_go_home:
+  en: "Go to the Home Page"
+  fr: "Allez au accueil"

_includes/comments.html

@@ -1,3 +1,4 @@
+{% include translations %}
 <br><hr />
 <div id="disqus_thread"></div>
 <script>
@@ -12,4 +13,4 @@
 (d.head || d.body).appendChild(s);
 })();
 </script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<noscript>{{ translations.disqus_no_javascript[page.language] }}</noscript>

_includes/site-header.html

@@ -10,11 +10,7 @@
     {% else %}
       <img src="{{ "/images/pencil_icon.png" | relative_url }}" style="float:left; width:54px; margin-right: 10px;" alt="Pencil2D Icon">
     {% endif %}
-    {% if page.layout != 'home' %}
-      <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
-    {% else %}
-      <a class="site-title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
-    {% endif %}
+    <a class="site-title" href="{{ translated_pages | where: "ref", "home" | map: "url" | first | relative_url }}">{{ site.title | escape }}</a>
 
     {% if page_paths %}
       <nav class="site-nav">
@@ -30,27 +26,41 @@
         </label>
 
         <div class="trigger">
-          <a class="page-link" href="{{ "/download" | relative_url }}">Download</a>
+          <a class="page-link" href="{{ translated_pages | where: "ref", "download" | map: "url" | first | relative_url }}">{{ translations.download[page.language] }}</a>
+          <div class="dropdown">
+            <a class="page-link" href="{{ translated_pages | where: "ref", "community" | map: "url" | first | relative_url }}">{{ translations.community[page.language] }}</a>
+            <div class="dropdown-content">
+              <a class="page-link" href="https://discuss.pencil2d.org/">{{ translations.forum[page.language] }}</a>
+              <a class="page-link" href="https://www.facebook.com/groups/709024775972087/">{{ translations.facebook[page.language] }}</a>
+              <a class="page-link" href="https://discord.gg/8FxdV2g">{{ translations.discord[page.language] }}</a>
+              <a class="page-link" href="https://www.youtube.com/channel/UCexMjl4rq8OyzAc7C03uKCQ/playlists">{{ translations.youtube[page.language] }}</a>
+              <a class="page-link" href="https://pencil2d-software.tumblr.com/">{{ translations.tumblr[page.language] }}</a>
+            </div>
+          </div>
+          <a class="page-link" href="{{ translated_pages | where: "ref", "news" | map: "url" | first | relative_url }}">{{ translations.news[page.language] }}</a>
           <div class="dropdown">
-            <a class="page-link" href="{{ "/community" | relative_url }}">Community</a>
+            <a class="page-link" href="{{ translated_pages | where: "ref", "docs" | map: "url" | first | relative_url }}">{{ translations.docs[page.language] }}</a>
             <div class="dropdown-content">
-              <a class="page-link" href="https://discuss.pencil2d.org/">Forum</a>
-              <a class="page-link" href="https://www.facebook.com/groups/709024775972087/">Facebook</a>
-              <a class="page-link" href="https://discord.gg/8FxdV2g">Discord</a>
-              <a class="page-link" href="https://www.youtube.com/channel/UCexMjl4rq8OyzAc7C03uKCQ/playlists">Youtube</a>
-              <a class="page-link" href="https://pencil2d-software.tumblr.com/">Tumblr</a>
+              <a class="page-link" href="{{ translated_pages | where: "ref", "tutorials" | map: "url" | first | relative_url }}">{{ translations.tutorials[page.language] }}</a>
+              <a class="page-link" href="{{ translated_pages | where: "ref", "docs" | map: "url" | first | relative_url }}">{{ translations.faq[page.language] }}</a>
+              <a class="page-link" href="{{ translated_pages | where: "ref", "user_manual" | map: "url" | first | relative_url }}">{{ translations.user_manual[page.language] }}</a>
             </div>
           </div>
-          <a class="page-link" href="{{ "/news.html" | relative_url }}">News</a>
+          <a class="page-link" href="{{ translated_pages | where: "ref", "contribute" | map: "url" | first | relative_url }}">{{ translations.contribute[page.language] }}</a>
+          {% if page.language %}
           <div class="dropdown">
-            <a class="page-link" href="{{ "/doc" | relative_url }}">Docs</a>
+            <a class="page-link" href="">{{site.language_flags[page.language]}}</a>
             <div class="dropdown-content">
-              <a class="page-link" href="{{ "/doc/tutorials.html" | relative_url }}">Tutorials</a>
-              <a class="page-link" href="{{ "/doc/faq.html" | relative_url }}">FAQ</a>
-              <a class="page-link" href="{{ "/doc/user-manual.html" | relative_url }}">User's Manual</a>
+              {% for language in site.supported_languages %}
+                {% if page.ref %}
+                  <a class="page-link" href="{{ site.documents | concat: site.pages | where: "language", language | where: "ref", page.ref | map: "url" | first | relative_url }}">{{ site.language_flags[language] }} {{ site.language_endonyms[language] }}</a>
+                {% else %}
+                  <a class="page-link" href="{{ site.documents | concat: site.pages | where: "language", language | where: "ref", "home" | map: "url" | first | relative_url }}">{{ site.language_flags[language] }} {{ site.language_endonyms[language] }}</a>
+                {% endif %}
+              {% endfor %}
             </div>
           </div>
-          <a class="page-link" href="{{ "/contribute" | relative_url }}">Contribute</a>
+          {% endif %}
         </div>
       </nav>
     {% endif %}

_includes/translated_pages

@@ -0,0 +1 @@
+{% assign translated_pages = site.documents | concat: site.pages | where: "language", page.language | uniq %}

_includes/translations

@@ -0,0 +1 @@
+{% assign translations = site.data.translations %}

_layouts/default.html

@@ -1,5 +1,7 @@
+{% include translations %}
+{% include translated_pages %}
 <!DOCTYPE html>
-<html itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang | default: site.lang | default: "en" }}">
+<html itemscope itemtype="http://schema.org/WebPage" lang="{{ page.language | default: "en" }}">
   <head>
     <!-- Non social metatags -->
     <meta charset="utf-8">
@@ -51,31 +53,25 @@
 
     <section class="page-header">
       <h1 class="project-name">
-        {% if page.layout == 'gsoc' %}
+        {% if page.logo %}
           {% unless page-tagline %}
-            <img src="https://developers.google.com/open-source/gsoc/resources/downloads/GSoC-icon.svg" style="height: 4rem;vertical-align: middle;" alt="" aria-hidden="true" />
-          {% endunless %}
-        {% endif %}
-        {% if page.layout == 'hacktoberfest' %}
-          {% unless page-tagline %}
-            <img src="{{ "/images/hacktoberfest-icon.svg" | relative_url }}" style="height: 4rem;vertical-align: middle;" alt="" aria-hidden="true" />
+            <img src="{{ page.logo | relative_url }}" style="height: 4rem;vertical-align: middle;" alt="" aria-hidden="true" />
           {% endunless %}
         {% endif %}
         {{ page.title | default: site.title | escape }}
       </h1>
+      {% if page.tagline %}
       <h2 class="project-tagline">
-        {% if page.layout == 'gsoc' and page-tagline %}
-            <img src="https://developers.google.com/open-source/gsoc/resources/downloads/GSoC-icon.svg" style="height: 2rem;vertical-align: middle;" alt="" aria-hidden="true" />
-        {% endif %}
-        {% if page.layout == 'hacktoberfest' and page-tagline %}
-            <img src="{{ "/images/hacktoberfest-icon.png" | relative_url }}" style="height: 2rem;vertical-align: middle;" alt="" aria-hidden="true" />
+        {% if page.logo %}
+          <img src="{{ page.logo | relative_url }}" style="height: 2rem;vertical-align: middle;" alt="" aria-hidden="true" />
         {% endif %}
-        {{ page-tagline }}
+        {{ page.tagline | escape }}
       </h2>
-      {% if page.layout == 'home' %}
-          <a href="/download" class="btn">Download now!</a>
-          <a href="/doc/tutorials.html" class="btn">Tutorials</a>
-          <a href="/2021/02/pencil2d-0.6.6-release.html" class="btn">What's New?</a>
+      {% endif %}
+      {% if page.ref == "home" %}
+      <a href="{{ translated_pages | where: "ref", "download" | map: "url" | first | relative_url }}" class="btn">{{ translations.download_now[page.language] }}</a>
+      <a href="{{ translated_pages | where: "ref", "tutorials" | map: "url" | first | relative_url }}" class="btn">{{ translations.tutorials[page.language] }}</a>
+      <a href="{{ translated_pages | where: "layout", "post" | sort: "date" | map: "url" | last | relative_url }}" class="btn">{{ translations.whats_new[page.language] }}</a>
       {% endif %}
       <!-- Post tagline -->
       {% if page.layout == 'post' %}
@@ -95,6 +91,10 @@ <h2 class="project-date">
 
     <section class="main-content">
 
+      {% if page.untranslated %}
+      <div class="untranslated-warning">{{ translations.untranslated_warning[page.language] }}</div>
+      {% endif %}
+
       {{ content }}
 
       <aside>