UUDigitalHumanitieslab · jgonggrijp · Jun 30, 2022 · Oct 11, 2021 · Oct 11, 2021 · Nov 29, 2021
diff --git a/frontend/gulpfile.ts b/frontend/gulpfile.ts
@@ -26,6 +26,7 @@ import { argv } from 'yargs';
 import { JSDOM, VirtualConsole } from 'jsdom';
 import * as through2 from 'through2';
 import chalk from 'chalk';
+import * as i18nextParser from 'i18next-parser';
 
 type LibraryProps = {
     module: string,
@@ -283,6 +284,15 @@ function reportBundleError(errorObj) {
     log.error(chalk.red(errorObj.message));
 }
 
+function i18nParse() {
+    return src(sourceDir)
+        .pipe(new i18nextParser({
+          locales: ['en', 'fr'],
+          output: 'locales/$LOCALE/$NAMESPACE.json'
+        }))
+        .pipe(dest(`${sourceDir}/i18n`));
+}
+
 function jsBundle() {
     return tsModules().bundle()
         .on('error', reportBundleError)
@@ -484,6 +494,8 @@ export const watch = series(fullStatic, function watch(done) {
         retest(reloadPr(specRunner.render))
     );
 
+    // i18nParse();
+
     exitController.once('signal', () => {
         [
             tsModules(), tsTestModules(), reporterModules(), styleWatch,

diff --git a/frontend/package.json b/frontend/package.json
@@ -77,6 +77,7 @@
     "gulp-sourcemaps": "^2.6.4",
     "gulp-uglify": "^3.0.1",
     "http-proxy-middleware": "^0.19.0",
+    "i18next-parser": "^5.0.0",
     "jasmine-ajax": "^4.0.0",
     "jasmine-core": "~3.5.0",
     "jasmine-terminal-reporter": "^1.0.3",

diff --git a/frontend/src/feedback/feedback-template.hbs b/frontend/src/feedback/feedback-template.hbs
@@ -3,48 +3,48 @@
     <form class="box register-form is-narrow-modal-form">
         {{#if wasSentSuccessfully}}
         <header>
-            <h3 class="title is-3 page-header">Feedback submitted</h3>
+            <h3 class="title is-3 page-header">{{#i18n 'feedback_submitted'}}Feedback submitted{{/i18n}}</h3>
         </header>
         <div class="field">
-            <p>Thank you very much for your feedback, it is highly appreciated!</p>
+            <p>{{#i18n 'thanks_feedback'}}Thank you very much for your feedback, it is highly appreciated!{{/i18n}}</p>
         </div>
         <div class="field is-grouped">
             <div class="control">
-                <button class="button btn-close" type=button>Close</button>
+                <button class="button btn-close" type=button>{{#i18n 'close'}}Close{{/i18n}}</button>
             </div>
         </div>
         {{else}}
         <header>
-            <h3 class="title is-3 page-header">Feedback</h3>
+            <h3 class="title is-3 page-header">{{#i18n 'feedback'}}Feedback{{/i18n}}</h3>
         </header>
         <div class="field">
-            <label class="label">Subject</label>
+            <label class="label">{{#i18n 'subject'}}Subject{{/i18n}}</label>
             <div class="control">
                 <input name="subject" class="input" type="text" name="title" placeholder="About READ-IT">
             </div>
         </div>
 
         <div class="field">
             <div class="control">
-                <label class="label">Feedback</label>
+                <label class="label">{{#i18n 'feedback'}}Feedback{{/i18n}}</label>
                 <textarea name="feedback" class="textarea" placeholder="e.g. I love READ-IT!"></textarea>
             </div>
         </div>
 
         {{#if hasError}}
         <div class="field form-feedback-bar has-background-danger has-text-white">
-            <p class="help">Feedback submission failed. Please try again and if this error keeps occuring, contact the
-                site administrator.</p>
+            <p class="help">{{#i18n 'feedback_failed'}}Feedback submission failed. Please try again and if this error keeps occuring, contact the
+                site administrator.{{/i18n}}</p>
         </div>
         {{/if}}
 
         <div class="field is-grouped">
             <div class="control">
-                <button class="button is-link btn-submit" type=submit>Submit</button>
+                <button class="button is-link btn-submit" type=submit>{{#i18n 'submit'}}Submit{{/i18n}}</button>
             </div>
 
             <div class="control">
-                <button class="button btn-close" type=button>Close</button>
+                <button class="button btn-close" type=button>{{#i18n 'close'}}Close{{/i18n}}</button>
             </div>
         </div>
         {{/if}}

diff --git a/frontend/src/footer/footer-template.hbs b/frontend/src/footer/footer-template.hbs
@@ -1,5 +1,5 @@
 <figure class="footer-dh">
-    <p>Developed by</p>
+    <p>{{#i18n 'developed_by'}}Developed by{{/i18n}}</p>
     <a href="https://dig.hum.uu.nl" target="_blank"><img class="dhlab"
             src="{{static 'image/dighum-logo-blue.svg'}}"></a>
     <div class="footer-project is-pulled-right">

diff --git a/frontend/src/forms/add-button-template.hbs b/frontend/src/forms/add-button-template.hbs
@@ -1,4 +1,4 @@
 <button type=button class="button is-success">
-    <span>Add</span>
+    <span>{{#i18n 'add'}}Add{{/i18n}}</span>
     <span class="icon is-small"><i class="fas fa-plus"></i></span>
 </button>
diff --git a/frontend/src/forms/ontology-class-picker-template.hbs b/frontend/src/forms/ontology-class-picker-template.hbs
@@ -1,7 +1,7 @@
 <div class="dropdown">
     <div class="dropdown-trigger">
         <button type=button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-            <span class="dropdown-label">This is a
+            <span class="dropdown-label">{{#i18n 'define_category'}}This is a{{/i18n}}
                 <span class="dropdown-label-tag">...</span>
             </span>
             <span class="icon is-small">

diff --git a/frontend/src/forms/remove-button-template.hbs b/frontend/src/forms/remove-button-template.hbs
@@ -1,4 +1,4 @@
 <button type=button class="button is-danger">
-    <span>Remove</span>
+    <span>{{#i18n 'remove'}}Remove{{/i18n}}</span>
     <span class="icon is-small"><i class="fas fa-times"></i></span>
 </button>
diff --git a/frontend/src/global/i18n.ts b/frontend/src/global/i18n.ts
@@ -1,8 +1,6 @@
 import { Deferred } from 'jquery';
 import * as i18next from 'i18next';
 import * as languageDetector from 'i18next-browser-languagedetector';
-import Handlebars from 'handlebars/dist/handlebars.runtime';
-import registerI18nHelper from 'handlebars-i18next';
 
 import * as french from '../i18n/fr.json';
 

diff --git a/frontend/src/index.hbs b/frontend/src/index.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html prefix="og: http://ogp.me/ns#">
 
 <head>
     <meta charset="utf-8">
@@ -10,6 +10,9 @@
         integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
     <link rel="icon" href="{{{staticRoot}}}image/favicon.ico" type="image/x-icon">
+    <meta property="og:title" content="READ-IT">
+    <meta property="og:description" content="READ-IT is an annotation tool for reading testimonies. Data is represented as linked data.">
+    <meta property="og:type" content="website">
 </head>
 
 <body>

diff --git a/frontend/src/item-metadata/item-metadata-template.hbs b/frontend/src/item-metadata/item-metadata-template.hbs
@@ -7,8 +7,8 @@
         <table class="accordion-content table is-bordered">
             <thead>
                 <tr>
-                    <th>Name</th>
-                    <th>Value</th>
+                    <th>{{#i18n 'table_name'}}Name{{/i18n}}</th>
+                    <th>{{#i18n 'table_value'}}Value{{/i18n}}</th>
                 </tr>
             </thead>
             <tbody>

diff --git a/frontend/src/login/login-template.hbs b/frontend/src/login/login-template.hbs
@@ -2,27 +2,27 @@
 <div class="modal-content">
     <form class="box is-narrow-modal-form">
         <div class="field">
-            <label class="label">Username</label>
+            <label class="label">{{#i18n 'username'}}Username{{/i18n}}</label>
             <div class="control">
                 <input type=text name=username autofocus required class="input">
             </div>
         </div>
         <div class="field">
-            <label class="label">Password</label>
+            <label class="label">{{#i18n 'password'}}Password{{/i18n}}</label>
             <div class="control">
                 <input type=password name=password required class="input">
             </div>
-            <p class="help is-danger login-failed is-hidden">That didn't work. Please try again.</p>
+            <p class="help is-danger login-failed is-hidden">{{#i18n 'login_failed'}}That didn't work. Please try again.{{/i18n}}</p>
         </div>
         <div class="field is-grouped">
             <div class="control">
-                <button type=submit class="button is-primary">Login</button>
+                <button type=submit class="button is-primary">{{#i18n 'login'}}Login{{/i18n}}</button>
             </div>
             <div class="control">
-                <button type=reset class="button">Cancel</button>
+                <button type=reset class="button">{{#i18n 'cancel'}}Cancel{{/i18n}}</button>
             </div>
             <div class="control is-vertical-center">
-                <p>Don't have an account? <a id="register">Sign up!</a></p>
+                <p>{{#i18n 'no_account'}}Don't have an account?{{/i18n}}<a id="register">{{#i18n 'sign_up'}}Sign up!{{/i18n}}</a></p>
             </div>
         </div>
     </form>

diff --git a/frontend/src/menu/menu-template.hbs b/frontend/src/menu/menu-template.hbs
@@ -13,48 +13,56 @@
         </div>
         <div id="navbarMenu" class="navbar-menu">
             <div class="navbar-start">
-                <a class="navbar-item" href="/search">
+                <a class="navbar-item tooltip is-tooltip-right" data-tooltip="{{#i18n 'about_tooltip'}}Find out more about the READ-IT project{{/i18n}}" href="https://readit-project.eu" target="_blank">
+                    <span class="icon-text">
+                        <span class="icon is-small has-text-primary">
+                            <i class="fas fa-info-circle"></i>
+                        </span>
+                        <span>{{#i18n 'about'}}About{{/i18n}}</span>
+                </a>
+                <a class="navbar-item tooltip is-tooltip-left" data-tooltip="{{#i18n 'search_tooltip'}}Search reading experiences and annotations{{/i18n}}" href="/search">
                     <span class="icon-text">
                         <span class="icon is-small has-text-primary">
                             <i class="fas fa-search"></i>
                         </span>
-                        <span>Search</span>
+                        <span>{{#i18n 'search'}}Search{{/i18n}}</span>
                     </span>
                 </a>
-                <div class="navbar-item has-dropdown is-hoverable">
+                <div class="navbar-item has-dropdown is-hoverable" data-tooltip="{{#i18n 'explore_tooltip'}}Get a random selection of reading experiences and annotations{{/i18n}}">
                     <a class="navbar-link">
                         <span class="icon-text">
                             <span class="icon is-small has-text-primary">
                                 <i class="fas fa-compass"></i>
                             </span>
-                            <span>Explore</span>
+                            <span>{{#i18n 'explore'}}Explore{{/i18n}}</span>
                         </span>
                     </a>
                     <div class="navbar-dropdown">
                         <a href="/explore/sources" class="navbar-item" id="source-list">
-                            Sources
+                            {{#i18n 'sources'}}Sources{{/i18n}}
                         </a>
                         <a href="/explore/items" class="navbar-item" id="item-list">
-                            Items
+                            {{#i18n 'items'}}Items{{/i18n}}
                         </a>
                     </div>
                 </div>
                 {{#if uploadSources}}
-                <a class="navbar-item" href="/upload">
+                <a class="navbar-item tooltip is-tooltip-left" 
+                    data-tooltip="{{#i18n 'upload_tooltip'}}Upload reading testimonies for annotation{{/i18n}}" href="/upload">
                     <span class="icon-text">
                         <span class="icon is-small has-text-primary">
                             <i class="fas fa-upload"></i>
                         </span>
-                        <span>Upload</span>
+                        <span>{{#i18n 'upload'}}Upload{{/i18n}}</span>
                     </span>
                 </a>
                 {{/if}}
             </div>
             <div class="navbar-end">
-                <a class="navbar-item tooltip is-tooltip-left" data-tooltip="Contribute to READ-IT through the project website"
+                <a class="navbar-item tooltip is-tooltip-left" data-tooltip="{{#i18n 'contribute_tooltip'}}Find out how to contribute to READ-IT{{/i18n}}"
                     href="https://readit-project.eu/contact/contribute-to-read-it/", target="_blank">
                     <span class="icon-text">
-                        <span>Contribute</span>
+                        <span>{{#i18n 'contribute'}}Contribute{{/i18n}} </span>
                         <span class="icon is-small has-text-primary">
                             <i class="fas fa-external-link-alt"></i>
                         </span>
@@ -67,20 +75,20 @@
                     </a>
                     <div class="navbar-dropdown">
                         <a class="navbar-item" href="/landing">
-                            Personal landing page
+                            {{#i18n 'landing-page'}}Personal landing page{{/i18n}}
                         </a>
                         <a class="navbar-item" href="/explore/sources/mine">
-                            My sources
+                            {{#i18n 'my-sources'}}My sources{{/i18n}}
                         </a>
                         <a class="navbar-item" href="/explore/items/mine">
-                            My items
+                            {{#i18n 'my-items'}}My items{{/i18n}}
                         </a>
                         <hr class="navbar-divider">
-                        <a class="navbar-item" id="feedback">
-                            Feedback
+                        <a class="navbar-item tooltip is-tooltip-left" data-tooltip="{{#i18n 'feedback-tooltip'}}Give us feedback on the interface{{/i18n}}" id="feedback">
+                            {{#i18n 'feedback'}}Feedback{{/i18n}}
                         </a>
                         <a class="navbar-item" id="logout" href="/leave">
-                            Log out
+                            {{#i18n 'log_out'}}Log out{{/i18n}}
                         </a>
                     </div>
                 </div>

diff --git a/frontend/src/panel-annotation-list/annotation-list-panel-template.hbs b/frontend/src/panel-annotation-list/annotation-list-panel-template.hbs
@@ -1,17 +1,17 @@
 <div class="panel-header">
     <header>
-        <h3 class="title is-3">Annotations</h3>
+        <h3 class="title is-3">{{#i18n 'annotations_title'}}Annotations{{/i18n}}</h3>
     </header>
     <div class="buttons is-right">
         <button type=button class="button filter">
             <span class="icon is-large has-text-primary tooltip is-tooltip-left"
-                data-tooltip="{{#i18n 'adjust-filter'}}Adjust filter{{/i18n}}">
+                data-tooltip="{{#i18n 'adjust_filter'}}Adjust filter{{/i18n}}">
                 <i class="fas fa-filter"></i>
             </span>
         </button>
         <a class="button rdf-export" href="{{downloadLink}}">
             <span class="icon is-large has-text-primary tooltip is-tooltip-left"
-                data-tooltip="Export annotations">
+                data-tooltip="{{#i18n 'export_annotations'}}Export annotations{{/i18n}}">
                 <i class="fas fa-download"></i>
             </span>
         </a>
@@ -21,7 +21,7 @@
                     <i class="fas fa-times"></i>
                 </button>
                 <header>
-                    <h4 class="title is-4">{{#i18n 'adjust-filter'}}Adjust filter{{/i18n}}</h4>
+                    <h4 class="title is-4">{{#i18n 'adjust_filter'}}Adjust filter{{/i18n}}</h4>
                 </header>
             </div>
             <div class="panel-content"></div>