feat: localize and translate website into English

src/includes/colophon-contact.njk

@@ -0,0 +1,4 @@
+<div class="colophon-contact" {{ site.animation }}>
+  <h2>{{ i18n[locale].colophon.contact.headline }}</h2>
+  {{ i18n[locale].colophon.contact.text | markdown | safe }}
+</div>

src/includes/colophon-donation.njk

@@ -0,0 +1,60 @@
+<div class="colophon-donation" {{ site.animation }}>
+  <h2>
+    <span class="colophon-donation-heart">♥︎</span>
+    {{ i18n[locale].colophon.donation.headline }}
+  </h2>
+  {{ i18n[locale].colophon.donation.text | markdown | safe }}
+  <ul class="colophon-donation-list">
+    <li class="colophon-donation-list-item">
+      <svg
+        class="colophon-donation-icon"
+        title="Bitcoin"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+      >
+        <use xlink:href="#bitcoin"></use>
+      </svg>
+      <pre class="colophon-dontation-crypto-hash">{{ site.bitcoin }}</pre
+      >
+    </li>
+    <li class="colophon-donation-list-item">
+      <svg
+        class="colophon-donation-icon"
+        title="Ethereum"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+      >
+        <use xlink:href="#ethereum"></use>
+      </svg>
+      <pre class="colophon-dontation-crypto-hash">{{ site.ethereum }}</pre
+      >
+    </li>
+    <li class="colophon-donation-list-item">
+      <a
+        href="https://www.paypal.me/kogakure/"
+        rel="nofollow noopener noreferrer external"
+        target="_blank"
+      >
+        <button
+          class="colophon-dontation-button"
+          type="button"
+        >
+          <svg
+            class="colophon-donation-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            width="1em"
+            height="1em"
+          >
+            <use xlink:href="#paypal"></use>
+          </svg>
+          {{ i18n[locale].colophon.donation.paypal }}
+        </button>
+      </a>
+    </li>
+  </ul>
+</div>

src/includes/colophon-faq.njk

@@ -0,0 +1,29 @@
+<div class="colophon-faq">
+  <h2>{{ i18n[locale].colophon.faq.headline }}</h2>
+  <ul class="colophone-faq-list">
+    <li class="colophon-faq-list-item" {{ site.animation }}>
+      <h3>{{ i18n[locale].colophon.faq.subheadline1 }}</h3>
+      {{ i18n[locale].colophon.faq.text1 | markdown | safe }}
+    </li>
+    <li class="colophon-faq-list-item" {{ site.animation }}>
+      <h3>{{ i18n[locale].colophon.faq.subheadline2 }}</h3>
+      {{ i18n[locale].colophon.faq.text2 | markdown | safe }}
+    </li>
+    <li class="colophon-faq-list-item" {{ site.animation }}>
+      <h3>{{ i18n[locale].colophon.faq.subheadline3 }}</h3>
+      {{ i18n[locale].colophon.faq.text3 | markdown | safe }}
+    </li>
+    <li class="colophon-faq-list-item" {{ site.animation }}>
+      <h3>{{ i18n[locale].colophon.faq.subheadline4 }}</h3>
+      {{ i18n[locale].colophon.faq.text4 | markdown | safe }}
+    </li>
+    <li class="colophon-faq-list-item" {{ site.animation }}>
+      <h3>{{ i18n[locale].colophon.faq.subheadline5 }}</h3>
+      {{ i18n[locale].colophon.faq.text5 | markdown | safe }}
+    </li>
+    <li class="colophon-faq-list-item" {{ site.animation }}>
+      <h3>{{ i18n[locale].colophon.faq.subheadline6 }}</h3>
+      {{ i18n[locale].colophon.faq.text6 | markdown | safe }}
+    </li>
+  </ul>
+</div>

src/includes/colophon-intro.njk

@@ -0,0 +1,4 @@
+<div class="colophon-intro" {{ site.animationDelay }}>
+  <h1 class="colphon-title">{{ title }}</h1>
+  {{ i18n[locale].colophon.intro | markdown | safe }}
+</div>

src/includes/colophon-meaning.njk

@@ -0,0 +1,4 @@
+<div class="colophon-meaning" {{ site.animation }}>
+  <h2>{{ i18n[locale].colophon.meaning.headline }}</h2>
+  {{ i18n[locale].colophon.meaning.text | markdown | safe }}
+</div>

src/includes/colophon-tech.njk

@@ -0,0 +1,4 @@
+<div class="colophon-tech" {{ site.animation }}>
+  <h2>{{ i18n[locale].colophon.tech.headline }}</h2>
+  {{ i18n[locale].colophon.tech.text | markdown | safe }}
+</div>

src/includes/colophon-why.njk

@@ -0,0 +1,4 @@
+<div class="colophon-why" {{ site.animation }}>
+  <h2>{{ i18n[locale].colophon.why.headline }}</h2>
+  {{ i18n[locale].colophon.why.text | markdown | safe }}
+</div>

src/includes/downloads-container.njk

@@ -0,0 +1,43 @@
+<article class="downloads-container rowgap">
+  <figure class="downloads-layout downloads-50-start" {{ site.animation }}>
+    <div class="image-shadow downloads-image-container">
+      <img src="/assets/images/downloads/ingo.jpg" alt=""/>
+    </div>
+    <figcaption>
+      <h2>{{ i18n[locale].downloads.font.headline }}<h2>
+      {{ i18n[locale].downloads.font.text | markdown | safe }}
+      <p>
+        {% more i18n[locale].downloads.font.more, "https://github.com/kogakure/font-ingo", true %}<br />
+        {% download i18n[locale].downloads.font.download, "/downloads/iga-ninja-font.zip" %}
+      </p>
+    </figcaption>
+  </figure>
+  <figure class="downloads-layout downloads-50-end" {{ site.animation }}>
+    <div class="image-shadow downloads-image-container">
+      <img src="/assets/images/downloads/ogama.jpg" alt=""/>
+    </div>
+    <figcaption>
+      <h2>{{ i18n[locale].downloads.cgi.headline }}</h2>
+      {{ i18n[locale].downloads.cgi.text | markdown | safe }}
+      <p>
+        {% more i18n[locale].downloads.cgi.more, "https://github.com/kogakure/3d-models-kogakure", true %}
+      </p>
+    </figcaption>
+  </figure>
+  {% if locale === "de" %}
+  <figure class="downloads-layout downloads-50-start" {{ site.animation }}>
+    <div class="image-shadow downloads-image-container">
+      <img src="/assets/images/chronology/gitbook-kogakure.jpg" alt=""/>
+    </div>
+    <figcaption>
+      <h2>{{ i18n[locale].downloads.book.headline }}</h2>
+      {{ i18n[locale].downloads.book.text | markdown | safe }}
+      <p>
+        {% download i18n[locale].downloads.book.pdf, "/downloads/book-kogakure.pdf", true %} •
+        {% download i18n[locale].downloads.book.epub, "/downloads/book-kogakure.epub" %} •
+        {% download i18n[locale].downloads.book.mobi, "/downloads/book-kogakure.mobi" %}
+      </p>
+    </figcaption>
+  </figure>
+  {% endif %}
+</article>

src/includes/downloads-intro.njk

@@ -0,0 +1,4 @@
+<div class="downloads-intro" {{ site.animationDelay }}>
+  <h1 class="downloads-title">{{ title }}</h1>
+  {{ i18n[locale].downloads.intro | markdown | safe }}
+</div>

src/includes/glossary-intro.njk

@@ -0,0 +1,4 @@
+<div class="glossary-intro" {{ site.animationDelay }}>
+  <h1 class="glossary-title">{{ title }}</h1>
+  {{ i18n[locale].glossary.intro | markdown | safe }}
+</div>

src/includes/glossary-list.njk

@@ -0,0 +1,24 @@
+<div class="glossary-list">
+  {% for item in glossaryData %}
+  <dl class="glossary-list-item" {{ site.animation }}>
+    {% if item.title %}
+      <dt class="glossary-list-item-romanji">{{ item.title }}</dt>
+    {% endif %}
+    {% if item.japanese or item.chinese or item.sanskrit %}
+    <dt class="glossary-list-item-japanese">{{ item.japanese }}{{ item.chinese}}{{ item.sanskrit }}</dt>
+    {% endif %}
+    {% if item.translation %}
+    <dd class="glossary-list-item-translation">
+    <q>{{ item.translation }}</q>
+    </dd>
+    {% endif %}
+    {% if item.description %}
+    <dd class="glossary-list-item-description">
+      {% if item.sanskrit %}<em>{{ i18n[locale].glossary.sanskrit }}</em>. {% endif %}
+      {% if item.chinese %}<em>{{ i18n[locale].glossary.chinese }}</em>. {% endif %}
+      {{ item.description | safe }}
+    </dd>
+    {% endif %}
+  </dl>
+  {% endfor %}
+</div>

src/includes/home-link.njk

@@ -1,10 +1,16 @@
+{% if locale === "de" %}
+  {% set homeLink = "/" %}
+{% else %}
+  {% set homeLink = "/" + locale + "/" %}
+{% endif %}
+
 {% if isHome %}
   <div class="home-link-spacer"></div>
 {% else %}
-  <a class="home-link" href="/" title="Back to Homepage">
+<a class="home-link" href="{{ homeLink }}" title="{{ i18n[locale].homeLink }}">
     <button
       class="home-link-button"
-      aria-label="Back to Homepage"
+      aria-label="{{ i18n[locale].homeLink }}"
       type="button"
     >
       <svg class="home-link-icon" aria-hidden="true"  viewBox="0 0 24 24" width="1em" height="1em">

src/includes/homepage-intro.njk

@@ -0,0 +1,5 @@
+<div class="homepage-intro" {{ site.animationDelay }}>
+  <h1 class="homepage-title">{{ title }}</h1>
+  {{ i18n[locale].homepage.intro | markdown | safe }}
+</div>
+

src/includes/homepage-toc.njk

@@ -0,0 +1,34 @@
+{% if locale === "de" %}
+  {% set prefix = "/" %}
+{% else %}
+  {% set prefix = "/" + locale + "/" %}
+{% endif %}
+
+<section class="homepage-toc">
+  <h2 class="homepage-toc-title">{{ i18n[locale].homepage.tocHeadline }}</h2>
+  <nav>
+    <ol class="homepage-toc-intro">
+      {% for item in prefaceCollection %}
+      <li>
+        <a href="{{ prefix }}{{ item.slug }}/">{{ item.title }}</a>
+      </li>
+      {% endfor %}
+    </ol>
+    <ol class="homepage-toc-content">
+    {% for chapter in tocCollection %}
+    <li class="homepage-toc-chapter">
+      {{ chapter.title }}
+      <ol>
+        {% for section in chapter.items %}
+        <li class="homepage-toc-">
+          <a href="{{ prefix }}{{ section.slug }}/">
+            {{ section.title }}
+          </a>
+        </li>
+        {% endfor %}
+      </ol>
+    </li>
+    {% endfor %}
+    </ol>
+  </nav>
+</section>

src/includes/language-switcher.njk

@@ -0,0 +1,20 @@
+<span class="language-switcher">
+{% for lang in site.languages %}
+  {% if loop.first %}<ul class="language-switcher-list">{% endif %}
+
+  {% set translatedUrl = "/" + lang.language + "/" %}
+  {% set activeClass = "is-active" if lang.language == locale else "" %}
+
+  {% for item in collections.all %}
+    {% if item.data.translationKey == translationKey and item.data.locale == lang.language %}
+      {% set translatedUrl = item.url %}
+    {% endif %}
+  {% endfor %}
+
+  <li class="language-switcher-list-item">
+    <a class="language-switcher-link {{ activeClass }}" href="{{ translatedUrl }}">{{ lang.title }}</a>
+  </li>
+
+  {% if loop.last %}</ul>{% endif %}
+{% endfor %}
+</span>

src/includes/legal.njk

@@ -9,4 +9,7 @@
       1999–{{ site.buildTime | dateToFormat('YYYY') }}
     </time>
   </span>
+  <span class="legal-bullet"> / </span>
+  {% include "language-switcher.njk" %}
+  <span class="hidden-ninja"> 🥷 </span>
 </div>

src/includes/meta-tags.njk

@@ -18,7 +18,11 @@
   {%- if og -%}
     {{ site.url }}/assets/images/branding/og/{{ og }}
   {%- else -%}
-    {{ site.url }}/assets/images/branding/og/banner.png
+    {% if locale === "en" %}
+      {{ site.url }}/assets/images/branding/og/banner-en.png
+    {% else %}
+      {{ site.url }}/assets/images/branding/og/banner-de.png
+    {% endif %}
   {%- endif -%}
 {%- endset -%}
 

src/includes/recommendations-books.njk

@@ -0,0 +1,46 @@
+{% if locale === "en" %}{% set affiliateUrl = "http://www.amazon.de/gp/product/{{ book.asin }}?ie=UTF8&tag=stefanimhoffde-21&linkCode=as2&camp=1638&creative=6742&creativeASIN={{ book.asin }}" %}{% endif %}
+{% if locale === "en" %}{% set affiliateUrl = "https://www.amazon.com/gp/product/{{ book.asin }}/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN={{ book.asin }}&linkCode=as2&tag=kogakure-20" %}{% endif %}
+
+<div class="recommendations-books">
+  <h2>{{ i18n[locale].recommendations.books.headline }}</h2>
+  <article class="recommendations-container">
+    {% for book in bookCollection %}
+    <div {{ site.animation }}>
+      {% if book.asin %}
+      <a
+        class="product"
+        href="{{ affiliateUrl }}"
+        rel="nofollow noopener noreferrer external"
+        target="_blank"
+      >
+        {% if book.cover %}
+          <img alt="{{ book.title }}" src="{{ book.cover }}" />
+        {% else %}
+          {% if locale === "en" %}
+            {% product book.asin, book.title, "en" %}
+          {% else %}
+            {% product book.asin, book.title %}
+          {% endif %}
+        {% endif %}
+      </a>
+      {% else %}
+        {% if book.link %}
+        <a
+        class="product"
+        href="{{ book.link }}"
+        rel="nofollow noopener noreferrer external"
+        target="_blank"
+      >
+        <img alt="{{ book.title }}" src="{{ book.cover }}" />
+      </a>
+        {% else %}
+          <img alt="{{ book.title }}" src="{{ book.cover }}" />
+        {% endif %}
+      {% endif %}
+      <h3 class="recommendations-product-title">
+        {{ book.title }}
+      </h3>
+    </div>
+    {% endfor %}
+  </article>
+</div>

src/includes/recommendations-intro.njk

@@ -0,0 +1,4 @@
+<div class="recommendations-intro" {{ site.animationDelay }}>
+  <h1 class="recommendations-title">{{ title }}</h1>
+  {{ i18n[locale].recommendations.intro | markdown | safe }}
+</div>

src/includes/recommendations-movies.njk

@@ -0,0 +1,44 @@
+{% if locale === "en" %}{% set affiliateUrl = "http://www.amazon.de/gp/product/{{ movie.asin }}?ie=UTF8&tag=stefanimhoffde-21&linkCode=as2&camp=1638&creative=6742&creativeASIN={{ movie.asin }}" %}{% endif %}
+{% if locale === "en" %}{% set affiliateUrl = "https://www.amazon.com/gp/product/{{ movie.asin }}/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN={{ movie.asin }}&linkCode=as2&tag=kogakure-20" %}{% endif %}
+
+<div class="recommendations-movies">
+  <h2>{{ i18n[locale].recommendations.movies.headline }}</h2>
+  <article class="recommendations-container">
+    {% for movie in movieCollection %}
+    <div {{ site.animation }}>
+      {% if movie.asin %}
+      <a
+        class="product"
+        href="{{ affiliateUrl }}"
+        rel="nofollow noopener noreferrer external"
+        target="_blank"
+      >
+        {% if movie.cover %}
+          <img alt="{{ movie.title }}" src="{{ movie.cover }}" />
+        {% else %}
+          {% if locale === "en" %}
+            {% product movie.asin, movie.title, "en" %}
+          {% else %}
+            {% product movie.asin, movie.title %}
+          {% endif %}
+        {% endif %}
+      </a>
+      {% elif movie.imdb %}
+      <a
+        class="product"
+        href="https://www.imdb.com/title/{{ movie.imdb }}"
+        rel="nofollow noopener noreferrer external"
+        target="_blank"
+      >
+        <img alt="{{ movie.title }}" src="{{ movie.cover }}" />
+      </a>
+      {% else %}
+        <img alt="{{ movie.title }}" src="{{ movie.cover }}" />
+      {% endif %}
+      <h3 class="recommendations-product-title">
+        {{ movie.title }}
+      </h3>
+    </div>
+    {% endfor %}
+  </article>
+</div>

src/includes/theme-toggle.njk

@@ -1,4 +1,4 @@
-<button id="theme-toggle" class="theme-toggle" aria-label="Switch color theme">
+<button id="theme-toggle" class="theme-toggle" aria-label="{{ i18n[locale].themeToggle }}">
   <svg class="theme-toggle-icon"  aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
     <use xlink:href="#circle"></use>
   </svg>

src/includes/up-link.njk

@@ -1,5 +1,5 @@
 <a id="up-link" class="up-link" href="#top" onClick="{scrollToTop}">
-  <button class="up-link-button" aria-label="Back to top">
+  <button class="up-link-button" aria-label="{{ i18n[locale].upLink }}">
     <svg class="up-link-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
       <use xlink:href="#arrow-up"></use>
     </svg>