Add language changing button

This commit is contained in:
rubenwardy 2020-08-18 23:38:19 +01:00
parent 725240d523
commit acdc71b34f
6 changed files with 131 additions and 76 deletions

View File

@ -1,6 +1,9 @@
# cta = call to action (used when prompting user their language is available)
- code: en - code: en
name: English (UK) name: English (UK)
cta: This book is available in English cta: This book is available in English
- code: it - code: it
name: Italiano name: Italiano
cta: Questo libro è disponibile in italiano cta: Questo libro è disponibile in italiano

24
_layouts/base.html Normal file
View File

@ -0,0 +1,24 @@
---
layout: compress
---
<!doctype html>
<html>
<head>
<title>{% if page.homepage %}{% else %}{{ page.title }} - {% endif %}Minetest Modding Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="An easy guide to learn how to create mods for Minetest">
<meta name="keywords" content="Minetest, modding, book, tutorial, guide, easy">
<meta name="author" content="rubenwardy">
<meta name="flattr:id" content="gl763e">
<style>body,html,nav{background:#333}nav,nav li,nav li a{display:block}body,html,main,nav li{margin:0;padding:0}main,nav{position:absolute;top:0}body,html{font-size:17px;color:#000}#container{width:100%;max-width:1100px;margin:auto;position:relative}nav{left:0;width:280px;list-style:none;color:#fff}nav li a{padding:5px;color:#ccc;text-decoration:none}main{left:280px;right:0}article{background:#fff;padding:0 20px 20px}</style>
<link rel="stylesheet" href="{{ page.root }}/static/style.css?v=2">
</head>
<body>
<div id="container">
{{ content }}
</div>
</body>
</html>

View File

@ -1,90 +1,75 @@
--- ---
layout: compress layout: base
--- ---
<!doctype html> {% assign pathsplit = page.path | split: '/' %}
<html>
<head>
<title>{% if page.homepage %}{% else %}{{ page.title }} - {% endif %}Minetest Modding Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="An easy guide to learn how to create mods for Minetest">
<meta name="keywords" content="Minetest, modding, book, tutorial, guide, easy">
<meta name="author" content="rubenwardy">
<meta name="flattr:id" content="gl763e">
<style>body,html,nav{background:#333}nav,nav li,nav li a{display:block}body,html,main,nav li{margin:0;padding:0}main,nav{position:absolute;top:0}body,html{font-size:17px;color:#000}#container{width:100%;max-width:1100px;margin:auto;position:relative}nav{left:0;width:280px;list-style:none;color:#fff}nav li a{padding:5px;color:#ccc;text-decoration:none}main{left:280px;right:0}article{background:#fff;padding:0 20px 20px}</style> {% assign language = pathsplit[0] %}
<link rel="stylesheet" href="{{ page.root }}/static/style.css">
</head>
<body>
{% assign pathsplit = page.path | split: '/' %}
{% assign language = pathsplit[0] %} {% if language == "_it" %}
{% assign language = "it" %}
{% assign links = site.it | sort: "idx" %}
{% else %}
{% assign language = "en" %}
{% assign links = site.en | sort: "idx" %}
{% endif %}
{% if language == "_it" %} {% assign num = 0 %}
{% assign language = "it" %}
{% assign links = site.it | sort: "idx" %}
{% else %}
{% assign language = "en" %}
{% assign links = site.en | sort: "idx" %}
{% endif %}
{% assign num = 0 %} <nav>
{% for link in links %}
{% assign idsplit = link.id | split: '/' %}
{% assign section = idsplit[2] %}
<li>
<a href="{{ page.root }}{{ link.url }}"
class="{% if page.title == link.title %}selected{% endif %}{% if section != last_section and section != 'index' %} hr {% endif %}">
{% if section != "index" %}{{ num }} - {% endif %}
{{ link.title }}
</a>
</li>
<div id="container"> {% assign last_section = section %}
<nav> {% assign num = num | plus:1 %}
{% for link in links %} {% endfor %}
{% assign idsplit = link.id | split: '/' %}
{% assign section = idsplit[2] %}
<li>
<a href="{{ page.root }}{{ link.url }}"
class="{% if page.title == link.title %}selected{% endif %}{% if section != last_section and section != 'index' %} hr {% endif %}">
{% if section != "index" %}{{ num }} - {% endif %}
{{ link.title }}
</a>
</li>
{% assign last_section = section %} <li><a href="{{ page.root }}/lua_api.html" class="hr">Lua Modding API Reference</a></li>
{% assign num = num | plus:1 %} <li><a href="https://github.com/rubenwardy/minetest_modding_book/archive/examples.zip">Download Examples</a></li>
{% endfor %} </nav>
<li><a href="{{ page.root }}/lua_api.html" class="hr">Lua Modding API Reference</a></li> <main>
<li><a href="https://github.com/rubenwardy/minetest_modding_book/archive/examples.zip">Download Examples</a></li> <article {% if page.homepage %}class="homepage"{% endif %}>
</nav> <a href="{{ page.root }}/languages.html" class="language-switcher">
<img src="{{ page.root }}/static/languages.svg" alt="Choose a language">
<span>{{ language }}</span>
</a>
<main> {% if page.no_header %}{% else %}<h1>{{ page.title }}</h1>{% endif %}
<article {% if page.homepage %}class="homepage"{% endif %}> {{ content }}
{% if page.no_header %}{% else %}<h1>{{ page.title }}</h1>{% endif %} </article>
{{ content }}
</article>
{% for link in links %}
{% if link.title == page.title %}
{% unless forloop.first %}
{% assign prev = tmpprev %}
{% endunless %}
{% unless forloop.last %}
{% assign next = links[forloop.index] %}
{% endunless %}
{% endif %}
{% assign tmpprev = link %}
{% endfor %}
{% for link in links %} <ul class="prevnext">
{% if link.title == page.title %} <li>{% if prev %}<a href="{{ page.root }}{{ prev.url}}">&lt; {{ prev.title }}</a>{% endif %}</li>
{% unless forloop.first %} <li>{% if next %}<a href="{{ page.root }}{{ next.url}}">{{ next.title }} &gt;</a>{% endif %}</li>
{% assign prev = tmpprev %} </ul>
{% endunless %}
{% unless forloop.last %}
{% assign next = links[forloop.index] %}
{% endunless %}
{% endif %}
{% assign tmpprev = link %}
{% endfor %}
<ul class="prevnext"> <footer>
<li>{% if prev %}<a href="{{ page.root }}{{ prev.url}}">&lt; {{ prev.title }}</a>{% endif %}</li> &copy; 2014-20
<li>{% if next %}<a href="{{ page.root }}{{ next.url}}">{{ next.title }} &gt;</a>{% endif %}</li> {% if language == "en" %}
</ul> | Helpful? Consider
<a href="https://rubenwardy.com/donate/">donating</a>
<footer> to support my work.
&copy; 2014-20 | {% endif %}
Helpful? Consider </footer>
<a href="https://rubenwardy.com/donate/">donating</a> </main>
to support my work.
</footer>
</article>
</main>
<script async src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script async src="{{ page.root }}/static/script.js"></script>
</body>
</html>

View File

@ -83,6 +83,24 @@ article {
// text-align: justify; // text-align: justify;
} }
.language-switcher {
display: flex;
align-items: center;
float: right;
color: black;
text-decoration: none;
padding-top: 0.3rem;
img, span {
display: inline-block;
}
img {
height: 1.2em;
padding-right: 0.3em;
}
}
footer { footer {
margin: 0 0 20px 0; margin: 0 0 20px 0;
padding: 1em 1.5em; padding: 1em 1.5em;

24
languages.html Normal file
View File

@ -0,0 +1,24 @@
---
title: Languages
layout: base
root: .
---
<main>
<article>
<h1>Minetest Modding Book</h1>
<h2>Choose a Language</h2>
<ul>
{% for lang in site.data.languages %}
<li><a href="{{ lang.code }}/index.html">{{ lang.name }}</a></li>
{% endfor %}
</ul>
</article>
<footer>
&copy; 2014-20
</footer>
</main>

1
static/languages.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="language" class="svg-inline--fa fa-language fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"></path></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB