diff --git a/README.md b/README.md
index 667c705..b09a019 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,13 @@
## Getting ready
-Run `npx http-server` and open `http://localhost:8080/` in your favorite browser!
+Run `npx -p local-web-server ws` and open `http://localhost:8000/` in your favorite browser!
+
+## Development notes
+
+### Generate translations
+
+Run `npm run generate-translations`
## Useful links
diff --git a/app/about/about.js b/app/about/about.js
new file mode 100644
index 0000000..1b5b730
--- /dev/null
+++ b/app/about/about.js
@@ -0,0 +1,17 @@
+(function() {
+ // globals
+ MyApp.About = {};
+
+
+ // utility functions
+
+ // app functions
+ MyApp.About.renderAboutPage = function() {
+ $('.js-page-container').html(ejs.rr('/app/about/templates/about.ejs'));
+ };
+
+ // events
+
+ // app startup
+ page('/about', MyApp.About.renderAboutPage);
+})();
diff --git a/app/about/templates/about.ejs b/app/about/templates/about.ejs
new file mode 100644
index 0000000..e709d8f
--- /dev/null
+++ b/app/about/templates/about.ejs
@@ -0,0 +1,11 @@
+This is the coolest app ever.
+
+
+ - simple
+ - fast
+ - easy to understand
+ - easy to mantain
+ - easy to evolve
+
+
+yay!
diff --git a/js/config.js b/app/config.js
similarity index 100%
rename from js/config.js
rename to app/config.js
diff --git a/app/index.js b/app/index.js
new file mode 100644
index 0000000..4411449
--- /dev/null
+++ b/app/index.js
@@ -0,0 +1,55 @@
+(function() {
+ // globals
+ MyApp.Utils = {};
+
+ // utility functions
+
+ // app functions
+
+ // events
+
+ // app startup
+
+ // set language
+ i18next
+ .use(i18nextBrowserLanguageDetector)
+ .use(i18nextXHRBackend)
+ .init({
+ detection: {
+ order: ['querystring', 'cookie', 'navigator'],
+ lookupQuerystring: 'lang',
+ lookupCookie: 'current-language',
+ caches: ['cookie'],
+ cookieMinutes: 5256000
+ },
+ whitelist: ['en', 'de', 'it'],
+ load: 'languageOnly',
+ fallbackLng: 'it',
+ backend: {
+ loadPath: '/i18n/{{lng}}.json'
+ }
+ })
+ .then(function() {
+ // language initialized
+ // if there is a lang query string parameter, remove it and reload: we save the language in a cookie so the url stays nice
+ var urlQueryString = new URLSearchParams(window.location.search);
+ if (urlQueryString.has('lang')) {
+ urlQueryString.delete('lang');
+ var newUrl = [location.protocol, '//', location.host, location.pathname].join('') +
+ (urlQueryString.toString() !== '' ? '?' + urlQueryString.toString() : '') +
+ window.location.hash;
+ window.location = newUrl;
+ return;
+ }
+
+ // render main shell
+ MyApp.Shell.renderShell()
+ .then(function() {
+ //setup routing
+ page({
+ hashbang: true
+ });
+ });
+ });
+
+})();
diff --git a/app/shell/shell.js b/app/shell/shell.js
new file mode 100644
index 0000000..3de9bd2
--- /dev/null
+++ b/app/shell/shell.js
@@ -0,0 +1,30 @@
+(function() {
+ // globals
+ MyApp.Shell = {};
+
+ // utility functions
+
+ // app functions
+ MyApp.Shell.renderShell = function() {
+ document.title = i18next.t('vanillaJS');
+
+ var d = $.Deferred();
+
+ //preload this template, so we can be sure the dom in rendered when we resolve
+ ejs.preloadTemplate('/app/shell/templates/main.ejs')
+ .then(function(templateUrl) {
+ $('.js-main-content').html(ejs.rr(templateUrl));
+ d.resolve();
+ });
+ return d;
+ };
+
+ MyApp.Shell.renderHomePage = function() {
+ $('.js-page-container').html(ejs.rr('/app/shell/templates/home.ejs'));
+ };
+
+ // events
+
+ // app startup
+ page('/', MyApp.Shell.renderHomePage);
+})();
diff --git a/app/shell/templates/home.ejs b/app/shell/templates/home.ejs
new file mode 100644
index 0000000..feeac7b
--- /dev/null
+++ b/app/shell/templates/home.ejs
@@ -0,0 +1,8 @@
+
diff --git a/app/shell/templates/main.ejs b/app/shell/templates/main.ejs
new file mode 100644
index 0000000..b74f88b
--- /dev/null
+++ b/app/shell/templates/main.ejs
@@ -0,0 +1,12 @@
+
diff --git a/app/text/templates/sometext.ejs b/app/text/templates/sometext.ejs
new file mode 100644
index 0000000..7af22ea
--- /dev/null
+++ b/app/text/templates/sometext.ejs
@@ -0,0 +1,5 @@
+
+ <% for (var i=0; i
+ - <%= texts[i].description %>
+ <% } %>
+
diff --git a/app/text/text.js b/app/text/text.js
new file mode 100644
index 0000000..2056788
--- /dev/null
+++ b/app/text/text.js
@@ -0,0 +1,32 @@
+(function() {
+ // globals
+ MyApp.Text = {};
+
+ // utility functions
+
+ // app functions
+ MyApp.Text.renderTextPage = function() {
+ $('.js-page-container').html(ejs.rr('/app/text/templates/sometext.ejs', {
+ texts: [
+ {
+ id: 100,
+ description: 'Some text with id 100'
+ },
+ {
+ id: 200,
+ description: 'Some other text with id 200. Click it!'
+ }
+ ]
+ }));
+ };
+
+ // events
+ $(document).on('click', '.js-link', function(ev) {
+ var el = $(ev.currentTarget);
+ var linkId = el.attr('data-id');
+ PNotify.success('The text you clicked had id ' + linkId + '. Maybe next time I will do something with this id.');
+ });
+
+ // app startup
+ page('/text', MyApp.Text.renderTextPage);
+})();
diff --git a/i18n/de.json b/i18n/de.json
index ab3b82e..559af0b 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -1,4 +1,4 @@
{
- "vanillaJS": "vanillaJS Beispiel Projekt",
- "awesome": "Coole app."
+ "vanillaJS": "vanillaJS Beispiel Projekt",
+ "awesome": "Coole app."
}
diff --git a/i18n/en.json b/i18n/en.json
index a196451..156dfba 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1,4 +1,4 @@
{
- "vanillaJS": "vanillaJS seed project",
- "awesome": "This is an awesome app!"
+ "vanillaJS": "vanillaJS seed project",
+ "awesome": "This is an awesome app!"
}
diff --git a/i18n/it.json b/i18n/it.json
index 6526c74..c81d7c7 100644
--- a/i18n/it.json
+++ b/i18n/it.json
@@ -1,4 +1,4 @@
{
- "vanillaJS": "progetto di esempio vanillaJS",
- "awesome": "Questa app è fantastica!"
+ "vanillaJS": "progetto di esempio vanillaJS",
+ "awesome": "Questa app è fantastica!"
}
diff --git a/i18next-scanner.config.js b/i18next-scanner.config.js
new file mode 100644
index 0000000..0792167
--- /dev/null
+++ b/i18next-scanner.config.js
@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+
+module.exports = {
+ input: [
+ 'src/**/*.{js,ejs}'
+ ],
+ output: './',
+ options: {
+ debug: false,
+ func: {
+ list: ['i18next.t', 'i18n.t', 'this.i18n.tr'],
+ extensions: ['.js', '.ejs']
+ },
+ lngs: ['en', 'it', 'de'],
+ ns: [
+ 'translation'
+ ],
+ defaultLng: 'en',
+ defaultNs: 'translation',
+ resource: {
+ loadPath: 'i18n/{{lng}}.json',
+ savePath: 'i18n/{{lng}}.json',
+ jsonIndent: 4,
+ lineEnding: '\n'
+ },
+ nsSeparator: false, // namespace separator
+ keySeparator: false, // key separator
+ interpolation: {
+ prefix: '{{',
+ suffix: '}}'
+ },
+ removeUnusedKeys: true
+ },
+ transform: function customTransform(file, enc, done) {
+ const {ext} = path.parse(file.path);
+ const content = fs.readFileSync(file.path, enc);
+ if (ext === '.js' || ext === '.ejs') {
+ let p = this.parser;
+ p.parseFuncFromString(content, function(key) {
+ p.set(key, '⚠ ' + key + ' ⚠');
+ });
+ }
+ done();
+ }
+};
diff --git a/index.html b/index.html
index 11eabf7..11bf156 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,12 @@
-
-
+
+
+
+
+
+
+