Support translations for the UI, fixes #1

2017-10-19 22:18:46 +02:00 · 2017-10-19 22:18:46 +02:00 · a1a65bb9f0
Parent ef36a953b4
--- a/docs/05_Configuration/_index.md
+++ b/docs/05_Configuration/_index.md
@ -107,6 +107,41 @@ Directory structure:
 │   │   │   ├── 05_Code_Highlighting.md
 ```

+### Language
+
+You can change the default language with the `language` option.
+
+```json
+{
+  "language": "fr"
+}
+```
+
+This will change the language of the text within Daux.io and also the `<html lang>` attribute.
+
+You can override the translations with the `strings` option.
+A string that isn't found will fall back to english.
+
+```json
+{
+  "strings": {
+    "fr": {
+      "CodeBlocks_title": "Afficher le code",
+      "CodeBlocks_hide": "Non",
+      "CodeBlocks_below": "En Dessous",
+      "CodeBlocks_inline": "A côté",
+      "CodeBlocks_show": "Afficher le code",
+      "Search_placeholder": "Rechercher...",
+      "Link_previous": "Précédent",
+      "Link_next": "Suivant",
+      "Edit_on": "Editer sur :name:",
+      "View_on_github": "Voir sur GitHub",
+      "View_documentation": "Voir la Documentation"
+    }
+  }
+}
+```
+
 ### Processor
 You can set the processor in the documentation or as an option to the command line. If you need it when running the server, you should add it to the configuration.

--- a/global.json
+++ b/global.json
@ -16,6 +16,37 @@
        "folders": []
    },

+    "language": "en",
+
+    "strings": {
+        "en": {
+            "CodeBlocks_title": "Code blocks",
+            "CodeBlocks_hide": "No",
+            "CodeBlocks_below": "Below",
+            "CodeBlocks_inline": "Inline",
+            "CodeBlocks_show": "Show Code Blocks",
+            "Search_placeholder": "Search...",
+            "Link_previous": "Previous",
+            "Link_next": "Next",
+            "Edit_on": "Edit on :name:",
+            "View_on_github": "View On GitHub",
+            "View_documentation": "View Documentation"
+        },
+        "fr": {
+            "CodeBlocks_title": "Afficher le code",
+            "CodeBlocks_hide": "Non",
+            "CodeBlocks_below": "En Dessous",
+            "CodeBlocks_inline": "A côté",
+            "CodeBlocks_show": "Afficher le code",
+            "Search_placeholder": "Rechercher...",
+            "Link_previous": "Précédent",
+            "Link_next": "Suivant",
+            "Edit_on": "Editer sur :name:",
+            "View_on_github": "Voir sur GitHub",
+            "View_documentation": "Voir la Documentation"
+        }
+    },
+
    "timezone": "America/Los_Angeles",

    "live": {
--- a/libs/Format/HTML/ContentPage.php
+++ b/libs/Format/HTML/ContentPage.php
@ -71,7 +71,7 @@ class ContentPage extends \Todaymade\Daux\Format\Base\ContentPage
                    $entry_page[$name] = $params['base_page'] . $params['entry_page'][$key]->getUrl();
                }
            } else {
-                $entry_page['View Documentation'] = $params['base_page'] . $params['entry_page']->getUrl();
+                $entry_page['__VIEW_DOCUMENTATION__'] = $params['base_page'] . $params['entry_page']->getUrl();
            }
        }

@ -103,7 +103,7 @@ class ContentPage extends \Todaymade\Daux\Format\Base\ContentPage

        $context = ['page' => $page, 'params' => $params];

-        $template = new Template($params['templates'], $params['theme']['templates']);
+        $template = new Template($params);

        return $template->render($this->isLanding() ? 'theme::home' : 'theme::content', $context);
    }
--- a/libs/Format/HTML/Template.php
+++ b/libs/Format/HTML/Template.php
@ -9,12 +9,18 @@ class Template
 {
    protected $engine;

+    protected $params;
+
    /**
     * @param string $base
     * @param string $theme
     */
-    public function __construct($base, $theme)
+    public function __construct($params)
    {
+        $this->params = $params;
+        $base = $params['templates'];
+        $theme = $params['theme']['templates'];
+
        // Use internal templates if no templates
        // dir exists in the working directory
        if (!is_dir($base)) {
@ -57,6 +63,20 @@ class Template
            return $this->renderNavigation($nav);
        });

+        $this->engine->registerFunction('translate', function ($key) {
+            $language = $this->params['language'];
+
+            if (array_key_exists($key, $this->params['strings'][$language])) {
+                return $this->params['strings'][$language][$key];
+            }
+
+            if (array_key_exists($key, $this->params['strings']['en'])) {
+                return $this->params['strings']['en'][$key];
+            }
+
+            return "Unknown key $key";
+        });
+
        $this->engine->registerFunction('get_breadcrumb_title', function ($page, $base_page) {
            $title = '';
            $breadcrumb_trail = $page['breadcrumb_trail'];
--- a/libs/Server/ErrorPage.php
+++ b/libs/Server/ErrorPage.php
@ -37,7 +37,7 @@ class ErrorPage extends SimplePage
            'language' => '',
        ];

-        $template = new Template($params['templates'], $params['theme']['templates']);
+        $template = new Template($params);

        return $template->render('error', ['page' => $page, 'params' => $params]);
    }
--- a/templates/content.php
+++ b/templates/content.php
@ -12,12 +12,13 @@
        $edit_on = $params->getHTML()->getEditOn();
        if ($edit_on) { ?>
        <span style="float: right; font-size: 10px; color: gray;">
-            <a href="<?= $edit_on['basepath'] ?>/<?= $page['relative_path'] ?>" target="_blank">Edit on <?= $edit_on['name'] ?></a>
+            <a href="<?= $edit_on['basepath'] ?>/<?= $page['relative_path'] ?>" target="_blank">
+                <?= str_replace(":name:", $edit_on['name'], $this->translate("Edit_on")) ?>
+            </a>
        </span>
        <?php } ?>
    </div>

-
    <div class="s-content">
        <?= $page['content']; ?>
    </div>
@ -30,11 +31,11 @@
    <nav>
        <ul class="Pager">
            <?php if (!empty($page['prev'])) {
-        ?><li class=Pager--prev><a href="<?= $base_url . $page['prev']->getUrl() ?>">Previous</a></li><?php
+        ?><li class=Pager--prev><a href="<?= $base_url . $page['prev']->getUrl() ?>"><?= $this->translate("Link_previous") ?></a></li><?php

    } ?>
            <?php if (!empty($page['next'])) {
-        ?><li class=Pager--next><a href="<?= $base_url . $page['next']->getUrl() ?>">Next</a></li><?php
+        ?><li class=Pager--next><a href="<?= $base_url . $page['next']->getUrl() ?>"><?= $this->translate("Link_next") ?></a></li><?php

    } ?>
        </ul>
--- a/templates/home.php
+++ b/templates/home.php
@ -10,25 +10,22 @@

 <div class="Homepage">
    <div class="HomepageTitle container">
-        <?php if ($params['tagline']) {
-    echo '<h2>' . $params['tagline'] . '</h2>';
-} ?>
+        <?= ($params['tagline'])? '<h2>' . $params['tagline'] . '</h2>' : '' ?>
    </div>

    <div class="HomepageImage container">
-        <?php if ($params['image']) {
-    echo '<img class="homepage-image img-responsive" src="' . $params['image'] . '" alt="' . $params['title'] . '">';
-} ?>
+        <?= ($params['image'])? '<img class="homepage-image img-responsive" src="' . $params['image'] . '" alt="' . $params['title'] . '">' : '' ?>
    </div>

    <div class="HomepageButtons">
        <div class="container">
            <?php
            if ($params['html']['repo']) {
-                echo '<a href="https://github.com/' . $params['html']['repo'] . '" class="Button Button--secondary Button--hero">View On GitHub</a>';
+                echo '<a href="https://github.com/' . $params['html']['repo'] . '" class="Button Button--secondary Button--hero">' . $this->translate("View_on_github") . '</a>';
            }
+            $view_doc = $this->translate("View_documentation");
            foreach ($page['entry_page'] as $key => $node) {
-                echo '<a href="' . $node . '" class="Button Button--primary Button--hero">' . $key . '</a>';
+                echo '<a href="' . $node . '" class="Button Button--primary Button--hero">' . str_replace("__VIEW_DOCUMENTATION__", $view_doc, $key) . '</a>';
            }
            if(isset($params['html']['buttons']) && is_array($params['html']['buttons'])) {
                foreach ($params['html']['buttons'] as $name => $link ) {
@ -54,32 +51,23 @@
 <div class="HomepageFooter">
    <div class="container">
        <div class="container--inner">
-            <?php if (!empty($params['html']['links'])) {
-                ?>
+            <?php if (!empty($params['html']['links'])) { ?>
                <ul class="HomepageFooter__links">
                    <?php foreach ($params['html']['links'] as $name => $url) {
                    echo '<li><a href="' . $url . '" target="_blank">' . $name . '</a></li>';
                } ?>
                </ul>
-            <?php
+            <?php } ?>

-            } ?>
-
-            <?php if (!empty($params['html']['twitter'])) {
-                ?>
+            <?php if (!empty($params['html']['twitter'])) { ?>
                <div class="HomepageFooter__twitter">
-                    <?php foreach ($params['html']['twitter'] as $handle) {
-                    ?>
+                    <?php foreach ($params['html']['twitter'] as $handle) { ?>
                    <div class="Twitter">
                        <iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?= $handle; ?>&amp;show_count=false"></iframe>
                    </div>
-                    <?php
-
-                } ?>
+                    <?php } ?>
                </div>
-            <?php
-
-            } ?>
+            <?php } ?>
        </div>
    </div>
    <div class="clearfix"></div>
--- a/templates/layout/00_layout.php
+++ b/templates/layout/00_layout.php
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js" lang="en">
+<html class="no-js" lang="<?=$params['language'] ?>">
 <head>
    <title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
    <meta name="description" content="<?= $params['tagline']; ?>">
--- a/templates/layout/05_page.php
+++ b/templates/layout/05_page.php
@ -37,14 +37,14 @@
                    <div class="CodeToggler">
                        <hr/>
                        <?php if ($params['html']['float']) { ?>
-                            <span class="CodeToggler__text">Code blocks</span>
+                            <span class="CodeToggler__text"><?=$this->translate("CodeBlocks_title") ?></span>
                            <div class="ButtonGroup" role="group">
-                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--hide">No</button>
-                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--below">Below</button>
-                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float">Inline</button>
+                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--hide"><?=$this->translate("CodeBlocks_hide") ?></button>
+                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--below"><?=$this->translate("CodeBlocks_below") ?></button>
+                                <button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float"><?=$this->translate("CodeBlocks_inline") ?></button>
                            </div>
                        <?php } else { ?>
-                            <label class="Checkbox">Show Code Blocks
+                            <label class="Checkbox"><?=$this->translate("CodeBlocks_show") ?>
                                <input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
                                <div class="Checkbox__indicator"></div>
                            </label>
--- a/templates/partials/navbar_content.php
+++ b/templates/partials/navbar_content.php
@ -5,7 +5,7 @@
        <svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451">
            <path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/>
        </svg>
-        <input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on"
+        <input type="search" id="tipue_search_input" class="Search__field" placeholder="<?=$this->translate("Search_placeholder") ?>" autocomplete="on"
               results=25 autosave=text_search>
    </div>
 <?php } ?>