Add multi-language support (#21)

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 2.0.1
 ##  _unreleased_
 1. [](#new)
+   - Add multi-language support (#21)
    - add Fontawesome Icons _(v6.7.2)_ (#20)
    - add Image Card Template (#19)
 1. [](#bugfix)

README.md

@@ -15,6 +15,7 @@ _Learn more about all the features of Hadron in detail on [tutorials.crabston.ch
 - Featured posts for blog
 - Built-in Support for Embed.ly
 - Built-in Support for H5P
+- Built-in multilanguage support
 - Newest Fontawesome Icons (v6.7.2)
 - more theme customization options
 - other enhancements

languages/de.yaml

@@ -1,3 +1,9 @@
+LANGUAGE:
+  LANGUAGE: 🌐 Sprache
+  NAME: Deutsch
+  SLUG: de
+  ICON: 🇩🇪
+
 TEMPLATE:
   DEFAULT:
     BODY_CLASSES:

languages/en.yaml

@@ -1,3 +1,9 @@
+LANGUAGE:
+  LANGUAGE: 🌐 Language
+  NAME: English
+  SLUG: en
+  ICON: 🇬🇧
+
 TEMPLATE:
   DEFAULT:
     BODY_CLASSES:

scss/_components.scss

@@ -1,3 +1,4 @@
+@import 'components/language-switcher';
 @import 'templates/image-cards';
 
 // overlays
@@ -26,3 +27,22 @@
 
 	img { padding: 1rem; }
 }
+
+nav.language-switcher {
+	nav:not(.dropmenu) li {
+		font-size: 16px;
+	}
+
+	ul {
+		display: flex;
+		gap: .5rem
+	}
+
+	li {
+		margin-top: 0;
+
+		&::marker {
+			content: none;
+		}
+	}
+}

scss/components/_language-switcher.scss

@@ -0,0 +1,38 @@
+nav.language-switcher {
+	margin-left: 1rem;
+
+	ul {
+		display: flex;
+		gap: .5rem
+	}
+
+	li {
+		margin-top: 0;
+
+		&::marker {
+			content: none;
+		}
+	}
+
+	a {
+		&.active {
+			color: $primary-color;
+		}
+	}
+
+	> ul > li > a {
+		padding: .25rem !important;
+	}
+
+	.mobile-container & {
+		font-size: 1rem;
+		margin-top: 2rem;
+
+		a {
+			&:not(.active) { color: $text-color-secondary; }
+
+			&.active { text-decoration: none; }
+		}
+	}
+}
+

templates/partials/base.html.twig

@@ -56,6 +56,44 @@
 	{% do assets.addJs('theme://js/responsiveTable.js', {group:'bottom'}) %}
 {% endblock %}
 
+{% block header %}
+    <section id="header" class="section">
+	    <section class="container {{ grid_size }}">
+		    <nav class="navbar">
+			    <section class="navbar-section logo">
+				    {% include 'partials/logo.html.twig' %}
+			    </section>
+			    <section class="navbar-section desktop-menu">
+
+				    <nav class="dropmenu animated">
+					    {% block header_navigation %}
+						    {% include 'partials/navigation.html.twig' %}
+					    {% endblock %}
+				    </nav>
+
+				    <nav class="dropmenu language-switcher">
+					    {% block language_switcher %}
+						    {% include 'partials/langauge-switcher.html.twig' %}
+					    {% endblock %}
+				    </nav>
+
+				    {% if config.plugins.login.enabled and grav.user.username %}
+					    <span class="login-status-wrapper"><i class="fa fa-user"></i> {% include 'partials/login-status.html.twig' %}</span>
+				    {% endif %}
+
+			    </section>
+		    </nav>
+	    </section>
+    </section>
+    <div class="mobile-menu">
+	    <div class="button_container" id="toggle">
+		    <span class="top"></span>
+		    <span class="middle"></span>
+		    <span class="bottom"></span>
+	    </div>
+    </div>
+{% endblock %}
+
 {% block footer %}
 	<section id="footer" class="section bg-gray">
 		<section class="container {{ grid_size }}">
@@ -67,3 +105,19 @@
 		</section>
 	</section>
 {% endblock %}
+
+{% block mobile %}
+    <div class="mobile-container">
+	    <div class="overlay" id="overlay">
+		    <div class="mobile-logo">
+			    {% include 'partials/logo.html.twig' with {mobile: true} %}
+		    </div>
+		    <nav class="language-switcher">
+			    {% include 'partials/langauge-switcher.html.twig' with {mobile: true} %}
+		    </nav>
+		    <nav class="overlay-menu">
+			    {% include 'partials/navigation.html.twig' with {tree: true} %}
+		    </nav>
+	    </div>
+    </div>
+{% endblock %}

templates/partials/langauge-switcher.html.twig

@@ -0,0 +1,62 @@
+{# TODO: add default config #}
+{% set display = display ?? config.get('plugins.langswitcher.display', 'dropdown') %} {# inline, dropdown #}
+{% set format = format ?? config.get('plugins.langswitcher.language_display', 'short') %} {# long, short, icon, combined #}
+{% set enabled = enabled ?? config.get('plugins.langswitcher.enabled', false) %}
+
+{# TODO: remove #}
+{% set display = 'dropdown' %}
+{% set format = 'combined' %}
+{% set enabled = true %}
+
+{% macro lang_name(language) %}
+	{{ 'LANGUAGE.NAME'|tl([language]) }}
+{% endmacro %}
+
+{% macro lang_icon(language) %}
+	{{ 'LANGUAGE.ICON'|tl([language]) }}
+{% endmacro %}
+
+{% macro lang_switcher(page, display, format) %}
+	{% import _self as macros %}
+
+	{% if display=='dropdown' %}
+		<li><a href="#">{{ 'LANGUAGE.LANGUAGE'|tl }}</a><ul>
+	{% endif %}
+
+	{% for language in grav.language.languages %}
+		{% set page_url = base_url ~ "/" ~ language ~ page.route|e %}
+		{% set active_page = (page.language == language) ? 'active' : '' %}
+
+		<li>
+			<a href="{{ page_url ~ uri.params ~ (uri.query|length > 1 ? '?' ~ uri.query) }}" class="{{ active_page }}">
+				{% if format == 'long' %}
+					{{ macros.lang_name(language) }}
+				{% elseif format == 'short' %}
+					{{ language|upper }}
+				{% elseif format == 'icon' %}
+					{{ macros.lang_icon(language) }}
+				{% elseif format == 'combined' %}
+					{{ macros.lang_icon(language) }} {{ macros.lang_name(language) }}
+				{% endif %}
+			</a>
+		</li>
+	{% endfor %}
+
+	{% if display=='dropdown' %}
+		</ul></li>
+	{% endif %}
+{% endmacro %}
+
+{% if enabled and not mobile %}
+	<ul>
+		{% import _self as macros %}
+		{{ macros.lang_switcher(page, display, format) }}
+	</ul>
+{% endif %}
+
+{% if enabled and mobile %}
+	<ul {{ tree ? 'class="tree"' : '' }}>
+		{% import _self as macros %}
+		{{ macros.lang_switcher(page, 'mobile', format) }}
+	</ul>
+{% endif %}