@videinfra/static-website-builder 2.2.2 → 2.3.1

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.3.0] - 2026-04-09
+### Addded
+- Translation support for TWIG
+
 ## [2.2.2] - 2026-04-08
 ### Fixed
 - Fixed gulp-sass missing error message

package/init/default/config/config.js

@@ -6,9 +6,6 @@
  * in each tasks config.js file
  */
 
-import * as sassPlugin from '@videinfra/static-website-builder/plugins/sass';
-import * as twigPlugin from '@videinfra/static-website-builder/plugins/twig';
-
 export const clean = {};
 export const staticFiles = {};
 export const html = {};
@@ -20,15 +17,20 @@ export const javascripts = {};
 export const stylesheets = {};
 export const browserSync = {};
 export const sizereport = {};
+export const translations = {};
 
 export const plugins = [
     // Enables SASS engine and .sass and .scss file compilation
-    sassPlugin,
+    (await import('@videinfra/static-website-builder/plugins/sass.js')),
 
     // Enables TwigJS engine .twig file compilation
-    twigPlugin,
-];
+    (await import('@videinfra/static-website-builder/plugins/twig.js')),
 
+    // Additional twig plugins
+    (await import('@videinfra/static-website-builder/plugins/twig/symfony-filters.js')),
+    (await import('@videinfra/static-website-builder/plugins/twig/lodash-filters.js')),
+    (await import('@videinfra/static-website-builder/plugins/twig/symfony-functions.js')),
+];
 
 /*
  * Path configuration

package/init/test/config/config.js

@@ -5,6 +5,7 @@
 import * as sassPlugin from '../../../plugins/sass.js';
 import * as twigPlugin from '../../../plugins/twig.js';
 import * as symfonyFiltersPlugin from '../../../plugins/twig/symfony-filters.js';
+import * as symfonyFunctionsPlugin from '../../../plugins/twig/symfony-functions.js';
 
 export const clean = {};
 export const staticFiles = {};
@@ -46,6 +47,9 @@ export const plugins = [
 
     // Enables TWIG Symfony filters
     symfonyFiltersPlugin,
+
+    // Enables TWIG Symfony functions
+    symfonyFunctionsPlugin,
 ];
 
 export const env = {
@@ -65,6 +69,11 @@ export const env = {
     },
 };
 
+export const translations = {
+    locales: ['en', 'de'],
+    defaultLocale: 'en',
+};
+
 /*
  * Path configuration
  * All options will be merged with defaults, but not replaces whole configuration object

package/init/test/src/html/de/translation.twig

@@ -0,0 +1 @@
+{% include '../translation.twig' %}

package/init/test/src/html/translation.twig

@@ -0,0 +1,15 @@
+<p>ROUTE: {{ app.request.attributes.get('_route') }}</p>
+<p>PATH: {{ path(app.request.attributes.get('_route')) }}</p>
+<p>DE_PATH: {{ path(app.request.attributes.get('_route'), { _locale: 'de' }) }}</p>
+<p>EN_PATH: {{ path(app.request.attributes.get('_route'), { _locale: 'en' }) }}</p>
+<p>HOMEPAGE PATH: {{ path('app.homepage') }}</p>
+<p>HOMEPAGE DE_PATH: {{ path('app.homepage', { _locale: 'de' }) }}</p>
+<p>HOMEPAGE EN_PATH: {{ path('app.homepage', { _locale: 'en' }) }}</p>
+
+<p>TITLE: {{ 'title'|trans({}, 'test') }}</p>
+<p>CATEGORY: {{ 'category.name'|trans({}, 'test') }}</p>
+<p>MISSING: {{ 'missing'|trans({}, 'test') }}</p>
+<p>INVALID_GROUP: {{ 'invalid_group'|trans({}, 'invalid_group') }}</p>
+<p>MISSING_ATTRIBUTES: {{ 'missing_attributes'|trans }}</p>
+
+<p>TITLE 2: {{ 'title'|trans({}, 'test-2') }}</p>

package/init/test/src/translations/test-2.en.yml

@@ -0,0 +1 @@
+title: Test 2

package/init/test/src/translations/test.de.yml

@@ -0,0 +1,3 @@
+title: 'Titel'
+category:
+    name: 'Kategorie'

package/init/test/src/translations/test.en.yml

@@ -0,0 +1,3 @@
+title: 'Title'
+category:
+    name: 'Category'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videinfra/static-website-builder",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "description": "Customizable static site project builder",
   "license": "MIT",
   "engines": {
@@ -50,6 +50,7 @@
     "gulp-sizereport": "^1.2.1",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-svgstore": "^9.0.0",
+    "js-yaml": "^4.1.1",
     "lodash.clone": "^4.3.2",
     "lodash.some": "^4.2.2",
     "minimist": "^1.2.8",

package/plugins/twig/symfony-filters/filters.js

@@ -1,5 +1,6 @@
 import { getTaskConfig }  from '../../../lib/get-config.js';
 import { loadEnvData } from '../../../tasks/env/get-env.js';
+import getTranslations from '../../../tasks/translations/get-translations.js';
 import preposition_nbsp  from './preposition_nbsp.js';
 
 const exports = [];
@@ -99,4 +100,38 @@ exports.push({
     }
 });
 
+/**
+ * Translation filter
+ *
+ * @example
+ *   {{ 'hello world' | trans }}
+ */
+exports.push({
+    name: 'trans',
+    func: function (data, args) {
+        const group = args[1];
+        const currentPagePath = this.context.currentPagePath;
+        const locales = this.context.app.request.languages;
+        let locale = currentPagePath.split('/')[1];
+
+        if (!locales.includes(locale)) {
+            locale = this.context.app.request.defaultLocale;
+        }
+
+        // Find translation
+        let translations = getTranslations(locale, group);
+        const dataParts = data.split('.');
+
+        for (let i = 0; i < dataParts.length; i++) {
+            if (translations && dataParts[i] in translations) {
+                translations = translations[dataParts[i]];
+            } else {
+                return data;
+            }
+        }
+
+        return translations;
+    }
+});
+
 export default exports;

package/plugins/twig/symfony-functions/functions.js

@@ -27,5 +27,24 @@ export default [
             const normalizedPath = (path || path === 0 ? String(path) : '');
             return applyFilter('version', applyFilter('cdnify', normalizedPath));
         }
-    }
+    },
+
+    // Fake "path" filter, it tries to replicate Symfony's path() function
+    {
+        name: 'path',
+        func: function (path, args) {
+            // Find locale information
+            const locale = args?._locale || this.context.app.request.locale;
+            const defaultLocale = this.context.app.request.defaultLocale;
+            const pathPrefix = locale === defaultLocale ? '' : `/${locale}`;
+
+            if (path === 'app.homepage') {
+                return `${pathPrefix}/`;
+            } else if (path.startsWith('app.')) {
+                return `${pathPrefix}/${path.slice(4).replace(/_/g, '-')}`;
+            } else {
+                return `${pathPrefix}${path}`;
+            }
+        },
+    },
 ];

package/tasks/data/config.js

@@ -1,5 +1,6 @@
 import dataLoaderJs from './data-loader-js.js';
 import dataLoaderJson from './data-loader-json.js';
+import dataLoaderYml from './data-loader-yml.js';
 
 /**
  * Data loading for HTML task
@@ -13,6 +14,7 @@ export const data = {
     loaders: {
         js: dataLoaderJs,
         json: dataLoaderJson,
+        yml: dataLoaderYml,
     },
 
     // Glob list of files, which to ignore, relative to the data source folder

package/tasks/data/data-loader-yml.js

@@ -0,0 +1,6 @@
+import fs from 'fs';
+import yaml from 'js-yaml';
+
+export default function dataLoaderYML(fileName) {
+    return yaml.load(fs.readFileSync(fileName, 'utf8'));
+}

package/tasks/data/get-data.js

@@ -80,6 +80,29 @@ export default function (options) {
     const build = options && !!options.build;
     const htmlSourceFolders = getSourcePaths('html');
 
+    // Find locale information
+    const translationConfig = getTaskConfig('translations');
+    const locales = translationConfig.locales;
+    const defaultLocale = translationConfig.defaultLocale;
+
+    /**
+     * Create symfony request parameter
+     * @param {object} values
+     * @returns {object}
+     */
+    function symfonyRequestProperty(values) {
+        values = values || {};
+        return {
+            all: values,
+            get: function (name) {
+                return name in values ? values[name] : null;
+            },
+            has: function (name) {
+                return !!(name in values);
+            },
+        };
+    }
+
     /**
      * Calculate current page path based on file path which is being processed
      * @param {*} file
@@ -109,27 +132,85 @@ export default function (options) {
         return currentPagePath;
     }
 
+    const getRouteFromPath = function (path) {
+        if (!path || path === '/') {
+            return 'app.homepage';
+        } else {
+            return path;
+        }
+    }
+
     return function (file) {
         // We expose `currentPagePath` to Twig templates
         const currentPagePath = getCurrentPagePath(file);
 
+        // Resolve locales
+        let currentPagePathWithoutLocale = currentPagePath;
+        let locale = currentPagePath.split('/')[1];
+
+        if (!locales.includes(locale)) {
+            locale = defaultLocale;
+        } else {
+            currentPagePathWithoutLocale = currentPagePath.replace(`/${locale}`, '') || '/';
+        }
+
+        const symonyAppData = {
+            app: {
+                environment: global.production ? 'prod' : 'dev',
+                debug: false,
+
+                request: {
+                    content: null,
+                    languages: locales,
+                    charsets: null,
+                    encodings: null,
+                    acceptableContentTypes: null,
+                    pathInfo: currentPagePath,
+                    requestUri: currentPagePath,
+                    baseUrl: '',
+                    basePath: null,
+                    method: 'GET',
+                    format: null,
+                    locale: locale,
+                    defaultLocale: defaultLocale,
+
+                    attributes: symfonyRequestProperty({
+                        _locale: locale,
+                        _route: getRouteFromPath(currentPagePathWithoutLocale),
+                        _route_params: {
+                            _locale: locale,
+                        },
+                    }),
+                    query: symfonyRequestProperty(),
+                    server: symfonyRequestProperty(),
+                    files: symfonyRequestProperty(),
+                    cookies: symfonyRequestProperty(),
+                    headers: symfonyRequestProperty(),
+
+                    get: function () {
+                        return null;
+                    },
+                }
+            }
+        };
+
         if (build) {
             // Cache during full build
             if (!cache) {
                 cache = getData();
             }
 
-            return {
+            return merge({
                 currentPagePath,
-                ...cache
-            };
+                ...cache,
+            }, symonyAppData);
         } else {
             // Don't cache during watch build
             cache = null;
-            return {
+            return merge({
                 currentPagePath,
                 ...getData(),
-            };
+            }, symonyAppData);
         }
     };
 }

package/tasks/translations/config.js

@@ -0,0 +1,29 @@
+import preprocessTranslationsConfig from './preprocess-config.js';
+
+/**
+ * Translations loading for HTML task
+ * This task doesn't have actual task, instead it's used by 'html' task
+ */
+
+export const translations = {
+    // List of locales, must be set only if there is more than 1 locale
+    locales: [],
+
+    // Default locale
+    defaultLocale: '',
+};
+
+/**
+ * Paths relative to the global src and dest folders
+ */
+export const paths = {
+    translations: {
+        src: 'translations',
+    },
+};
+
+export const preprocess = {
+    translations: [
+        preprocessTranslationsConfig,
+    ]
+};

package/tasks/translations/get-translations.js

@@ -0,0 +1,49 @@
+import fs from 'fs';
+import path from 'path';
+
+import merge from '../../lib/merge.js';
+import { getSourcePaths, getPathConfig } from '../../lib/get-path.js';
+import logError from '../../lib/log-error.js';
+import dataLoaderYml from '../data/data-loader-yml.js';
+
+let cache = {};
+let cacheTime = null;
+
+export default function getTranslations(locale, group) {
+    const build = global.production;
+
+    // Invalidate cache after 1 second
+    if (!build && cacheTime && Date.now() - cacheTime > 1000) {
+        cache = {};
+    }
+
+    cacheTime = Date.now();
+
+    if (cache[locale] && cache[locale][group]) {
+        return cache[locale][group];
+    } else {
+        const folders = getSourcePaths('translations');
+
+        folders.forEach((folder) => {
+            const fullFilePath = path.resolve(folder, `${group}.${locale}.yml`);
+
+            if (fs.existsSync(fullFilePath)) {
+                try {
+                    const fileData = dataLoaderYml(fullFilePath);
+                    cache = merge(cache, { [locale]: { [group]: fileData }});
+                } catch (err) {
+                    logError({
+                        message: `Failed to parse "${path.join(getPathConfig().src, getPathConfig().data.src, fileName)}"`,
+                        plugin: 'data',
+                    });
+                }
+            }
+        });
+
+        if (cache[locale] && cache[locale][group]) {
+            return cache[locale][group];
+        } else {
+            return {};
+        }
+    }
+}

package/tasks/translations/preprocess-config.js

@@ -0,0 +1,19 @@
+/**
+ * Modify configuration
+ *
+ * @param {object} config Translations configuration
+ * @returns {object} Transformed Translations configuration
+ */
+export default function preprocessTranslationsConfig (config = {}) {
+    if ((!config.locales || !config.locales.length) && config.defaultLocale) {
+        config.locales = [config.defaultLocale];
+    } else if (config.locales && config.locales.length && !config.defaultLocale) {
+        config.defaultLocale = config.locales[0];
+    } else if ((!config.locales || !config.locales.length) && !config.defaultLocale) {
+        // Assume "en" as default
+        config.locales = ['en'];
+        config.defaultLocale = 'en';
+    }
+
+    return config;
+}

package/tests/build/translations.test.js

@@ -0,0 +1,57 @@
+import path from 'path';
+import { fileURLToPath } from 'node:url';
+import fsPromises from 'fs/promises';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const publicPath = path.resolve(__dirname, 'public');
+
+test('Translation EN paths', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'translation.html'), { encoding: 'utf8' }).then((html) => {
+        expect(html.indexOf('<p>ROUTE: /translation</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>PATH: /translation</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>DE_PATH: /de/translation</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>EN_PATH: /translation</p>')).not.toBe(-1);
+
+        expect(html.indexOf('<p>HOMEPAGE PATH: /</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>HOMEPAGE DE_PATH: /de/</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>HOMEPAGE EN_PATH: /</p>')).not.toBe(-1);
+    });
+});
+
+test('Translation DE paths', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'de/translation.html'), { encoding: 'utf8' }).then((html) => {
+        expect(html.indexOf('<p>ROUTE: /translation</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>PATH: /de/translation</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>DE_PATH: /de/translation</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>EN_PATH: /translation</p>')).not.toBe(-1);
+
+        expect(html.indexOf('<p>HOMEPAGE PATH: /de/</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>HOMEPAGE DE_PATH: /de/</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>HOMEPAGE EN_PATH: /</p>')).not.toBe(-1);
+    });
+});
+
+test('Translation EN', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'translation.html'), { encoding: 'utf8' }).then((html) => {
+        expect(html.indexOf('<p>TITLE: Title</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>CATEGORY: Category</p>')).not.toBe(-1);
+
+        // Missing translation file
+        expect(html.indexOf('<p>TITLE 2: Test 2</p>')).not.toBe(-1);
+
+        // Missing translations just produce same string
+        expect(html.indexOf('<p>MISSING: missing</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>INVALID_GROUP: invalid_group</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>MISSING_ATTRIBUTES: missing_attributes</p>')).not.toBe(-1);
+    });
+});
+
+test('Translation DE', () => {
+    return fsPromises.readFile(path.resolve(publicPath, 'de/translation.html'), { encoding: 'utf8' }).then((html) => {
+        expect(html.indexOf('<p>TITLE: Titel</p>')).not.toBe(-1);
+        expect(html.indexOf('<p>CATEGORY: Kategorie</p>')).not.toBe(-1);
+
+        // Missing translation file
+        expect(html.indexOf('<p>TITLE 2: title</p>')).not.toBe(-1);
+    });
+});