assemble / grunt-assemble-i18n

Assemble middleware for adding i18n support to projects.

grunt-assemble-i18n

Plugin for adding i18n support to Assemble projects.

$ npm i grunt-assemble-i18n --save

Other grunt-assemble plugins

• grunt-assemble: Static site generator for Grunt.js, Yeoman and Node.js. Used by Zurb Foundation, Zurb Ink, H5BP/Effeckt,… more | homepage
• grunt-assemble-anchors: Assemble plugin for creating anchor tags from headings in generated html using Cheerio.js. | homepage
• grunt-assemble-contextual: Generates a JSON file with the context of each page. Basic plugin to help see… more | homepage
• grunt-assemble-decompress: Assemble plugin for extracting zip, tar and tar.gz archives. | homepage
• grunt-assemble-download: Assemble plugin for downloading files from GitHub. | homepage
• grunt-assemble-lunr: Assemble plugin for adding search capabilities to your static site, with lunr.js. | homepage
• grunt-assemble-navigation: Assemble navigation plugin. Automatically generate Bootstrap-style, multi-level side nav. See the sidenav on assemble.io for… more | homepage
• grunt-assemble-permalinks: Permalinks plugin for Assemble, the static site generator for Grunt.js, Yeoman and Node.js. This plugin… more | homepage
• grunt-assemble-sitemap: Sitemap plugin for Assemble | homepage
• grunt-assemble-toc: Assemble middleware for adding a Table of Contents (TOC) to any HTML page. | homepage
• grunt-assemble-wordcount: Assemble plugin for displaying wordcount and average reading time to blog posts or pages. | homepage

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Author

Jon Schlinkert

• github/assemble
• twitter/assemble

License

Copyright © 2015 Jon Schlinkert Released under the MIT license.

---

This file was generated by verb-cli on September 25, 2015.

grunt-assemble-i18n's Issues

Keep folder structure inside language folder?

When I use the "with-permalinks" option, the translated file will be put in a folder with the language name.:

foo/index.html -> foo/language/index.html

But I'd like the parent folder also to be into the language folder, like this:

foo/index.html -> language/foo/index.html

How can I do that?

Improvement: release tags, npm entry

Repo has no release tags. Often it's the easiest for devs to check up on the tags while defining dependencies.

Update: I just realised it's not released yet despite the listing under Assemble plugins.

README.md cannot be generated using Verb

I'd like to update the documentation, but I cannot generate the README.md with Verb. I'm getting this error when I run verb:

helper-base: %j TypeError: Cannot call method 'render' of null
helper-base error: %j TypeError in plugin 'verb-plugin:render'
Message:
    Cannot call method 'render' of null

I tried updating the verb dependency to verb 0.6.2 and renaming verbrc.md to verb.md, but still no luck.

i18n helper not accessible in partial

In the partial {{i18n "key"}} will throw up with "The 'language' parameter is not defined", see helpers-i18n.js:28.

Fails to get the language.

v0.1.3

@ain @jonschlinkert any issue in release a new version?

Need a way to specify the list of languages from the grunt file

language not being set

I've copied the info in various working examples but I'm still getting The 'language' parameter is not defined. I'm not totally sure where I should be check it.. I'm not calling the language variable directly like in #35. it's just by virtue of calling the Handlebars i18n helper

My assemble (0.4.3) task looks like this:

assemble: {
  options: {
    flatten: true,
    data: '<%= config.app %>/data/**/*.{yml,json}',
    layout: 'default.hbs',
    layoutdir: '<%= config.app %>/templates/layouts/',
    partials: ['<%= config.app %>/templates/partials/**/*.hbs'],
  },
  pages: {
    files: {
      '.tmp/': ['<%= config.app %>/templates/pages/**/*.hbs']
    },
    options: {
      plugins: [
        'assemble-contrib-i18n',
        'assemble-contrib-permalinks'
      ],
      i18n: {
        languages: [
          'en',
          'fr'
        ],
        templates: [
          "<%= config.app %>/templates/pages/**/*.hbs"
        ]
      },
      permalinks: {
        structure: ':language/index.html'
      }
    }
  }
},

I have data\i18n\fr.yml and data\i18n\en.yml

But I think maybe I'm missing a step

`i18n` helper inside `each` helper results in: The 'language' parameter is not defined

I am trying to use the i18n helper inside an each helper loop. However, trying to do this will result in: Warning: The 'language' parameter is not defined Use --force to continue.. Maybe this is some issue about the scope?

{{#each press.releases}}
    <li class="press-release">
        <h3>{{i18n title}}</h3> <!-- Should use the title of the press release as the translation key -->
    </li>
{{/each}}

I’m using [email protected] and [email protected]

Note: It also does not work if I use a fixed string as translation key, e.g. {{i18n "site.title"}}.

Stack overflow on language in front matter

Having a page with front matter of

language: <%= language %>

will result in Warning: Maximum call stack size exceeded as reported in #35.

Moving to `grunt-assemble-i18n`

@LaurentGoderre we'd like to move this code to grunt-assemble-i18n and deprecating assemble-middleware-i18n on npm.

I noticed there are some outstanding issues and PRs that we can try to resolve before moving. There's also an issue for migrating to [email protected]. We can take a look at the code and see if there's any common code that we might want to extract from this module and create a common module that can be used in both libraries.

If you (or anyone else) have any issues/questions/comments, please leave them here and we can discuss.

0 pages assembled

Relating to PR #14: i18n_1-like task configuration fails for me with nothing assembled:

assemble: {
  options: {
    flatten: false,
    plugins: ['assemble-contrib-permalinks'],
    layoutext: '.hbs',
    assets: 'assets',
    layoutdir: '<%= yeoman.src %>/templates/layouts',
    partials: ['<%= yeoman.src %>/templates/partials/*.hbs'],
    data: ['<%= yeoman.src %>/data/{i18n/,}*.yml'],
  },
  pages: {
    options: {
      /*permalinks: {
        structure: ':lang/:section/:slug:ext'
      },*/
      i18n: {
        data: 'src/data/i18n/i18n.yml'
      },
      pages: ['src/templates/pages/index.hbs']
    },
    dest: 'app/',
    src: '!*.*'
  }
}

Feature: YML-based translation files

I saw that the current translation format has been chosen to be on JSON, but, I've just worked on our own standard in conjunction of Assemble based on YAML and we've used YAML for translations in other context (Symfony, Rails) before. Would be nice to have YAML, even instead of JSON. IMHO clearer to work with.

progress (sticky)

Let's just dedicate an issue to ongoing general discussion until we get this working. @assemble/i18n @ain, @doowb

Feature: use-case example for a standard multilingual site

Pushing another idea for a documentation feature.

Currently the rough example case puts files into the distribution folders as per tasks defined in Gruntfile.

In real-life scenario though, it's often desirable to have a single template-base and publish it to different langauges automatically. Also given, that it'd be nice to have it automatically populated based on i18n.json, in the circumstances. So the distribution structure would be:

dist
  |
  – en
    |
    –– index.html
    |
    –– about.html
    |
    –– contact.html
  |
  – de
    |
    –– index.html
    |
    –– about.html
    |
    –– contact.html

and so on.

I think it would make a whole lot of sense to produce an example based on this scenario.

i18n navigation

Hello,

I am currently building a project in Assemble with a focus on internationalization and would like to use this plug-in, but am having trouble with the set-up process because there is not a lot of documentation here. I am aiming to have my data stored in yml files and then generate multiple pages for each language (currently just english and spanish). I would like to have a button that users can use to translate between languages. My repo is https://github.com/mayaman26/p5js-website

I would appreciate any assistance/guidance! Thank you.

Add documentation

Please add some basic documentation about how to install and use this plugin.

"with-plugin" task fails: No source files found

Running the default grunt task in the module repo results in an error:

Running "assemble:with-plugin" (assemble) task
Warning: No source files found. Use --force to continue.

Support request: brackets for property access fail

The situation: �this['en_US'].key vs this.['en_US'].key vs this.en_US.key. Only the latter one succeeds in template.

Is there really no way to access properties dynamically?

"with-plugin" doesn't work without a trailing slash for the dest folder

Currently, if the trailing slash is omitted, all files are written to the same file

For example

theme:
  options:
    plugins: ['assemble-contrib-i18n']
      i18n:
        data: ['site/data/i18n.json']
        templates: ['site/pages/theme/*.hbs']
  dest:  "dist/unmin/theme"
  src: "!*.*"

Results in all files being written to dist/unmin/theme.html

Suggestion: make replacement of page file name optional

Currently plugin generates files in format: page-language.ext
So resulting site looks like this:

[en]
index-en.html
blog-en.html

IMHO adding lang suffix to filename is not necessary and should be optional.

For me fix is replacing line 21 In lib/i18n.js:
from:

var filename = page.replace(ext, "-" + language + ext);

to:

var filename = page;

problem with translation strings for pages

Hi guys,

i'm using this plugin quite heavily at the moment and am happy that it works for me almost 100%. So great work! I do have one compiling issue with the pages feature though.
I have around 8 pages which have a custom title. I'm generating the navigation out of the page titles:

{{#withSort pages "data.sortorder"}}
    {{#is data.language ../language}}
    <li class="nav-item item-{{this.basename}}{{#if this.isCurrentPage}} active{{/if}}">
        <a href="{{relative dest this.dest}}">{{ data.title }}</a>
    </li>
    {{/is}}
{{/withSort}}

title: '<%= i18n[language].H_I_02 %>'
layout: 'lyt-default.hbs'
description: 'press page'
sortorder: 3

in the json:

    "H_I_01": "FAQs",
    "H_I_02": "Press",
    "H_I_03": "Contact",
    "H_I_04": "Newsletter",

For around half of the pages the translation of the titles works but for some pages I get just the string rendered out into the navigation. So on some pages I get the following navigation:
FAQs | <%= i18n[language].H_I_02 %> | Contact | Newsletter OR
<%= i18n[language].H_I_01 %> | <%= i18n[language].H_I_02 %> | Contact | Newsletter

I'm not sure how this happened. All pages have the same implementation of the title string. Also weird that on the page itself the string is fine. So in this example above, if I'd click the weird string which is supposed to be press, the navigation shows correctly on the press page.

I tried to reduce the complexity of how the pages are rendered out (without sort, without url etc) but it's always the same result.

Do you have any idea what went wrong? In which area would I need to look, to fix this?

Thanks!

Publish to npm

I know there's still a few issues to work out but could we push the first version on npm? We are already using it in our project.

Convert to assemble v0.6.0

Need a way to flatten the output of "with-plugin"

Right now, it preserves the structure of the templates which is not necessarily the desired behavior.

Any idea how we would tackle that?

Support for grunt-newer

For performance reasons, support for grunt-newer would definitely be a must.

Currently, it fails with:

>> File "src/templates/pages/about-us/index.hbs" changed.

Running "newer:assemble" (newer) task

Running "newer:assemble:pages" (newer) task
Fatal error: path must be a string
TypeError: path must be a string
    at Object.fs.stat (fs.js:670:11)
    at iterate (/Users/ain/projects/.../node_modules/grunt-newer/lib/util.js:39:8)
    at exports.anyNewer (/Users/ain/projects/.../node_modules/grunt-newer/lib/util.js:53:3)
    at /Users/ain/projects/.../node_modules/grunt-newer/lib/util.js:87:16
    at Object.oncomplete (fs.js:107:15)

Version number

The version number is v0.1.1. Shouldn't it be v0.0.1?

Out of memory on compilation

With pages collection we're currently running out of memory on large datasets:

FATAL ERROR: CALL_AND_RETRY_2 Allocation failed - process out of memory
Abort trap: 6

Any ideas for a workaround?

Feature: i18n lodash variable templates in front-matter

It should be possible to render i18n strings in front-matter (i.e. for permalinks), e.g.:

---
title: <%= i18n.title %>

---

or in a similar fashion in order to access translated values in front-matter block.

lodash templates for variables disregarded in front-matter

Variables as mentioned in #5 are not making it through to the template, e.g.:

---
foo: <%= bar %>

---

Allow language files to be divided or data to be nested

I have a data file with translations for a language: es.yml (spanish in this case) and I'd like to divide it.

Is it possible to split the translation for that language between several files?

If not, is it possible to nest key-value pairs inside the file?...

index:
  text: Hola mundo!
  fruit: plátano
contact:
  text: Adiós mundo!

I've tried to use the helper as {{i18n "index.text"}} but it doesn't seem to work.

Apologies if any of those options is actually possible, I've had the impression that they are not.

Complementary plugin (shameless plug :P)

I created a complementary plugin to this one which gets a CSV translation files and generates the files required for this task. It even output the list of languages to allow easier integration with this plugin.

https://github.com/wet-boew/grunt-i18n-csv

P.S. I haven't done the documentation yet.

Unexpected identifier on templates

I set up the latest master on the project I'm working on, got the following error:

/Users/ain/projects/.../Gruntfile.js:326
            templates: ['src/templates/pages/*/**.hbs']
            ^^^^^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "build" not found. Use --force to continue.
Error: Task "build" not found.
    at Task.run (/Users/ain/projects/.../node_modules/grunt/lib/util/task.js:171:28)
    at /Users/ain/projects/.../node_modules/grunt/lib/grunt.js:154:39
    at Array.forEach (native)
    at Object.grunt.tasks (/Users/ain/projects/.../node_modules/grunt/lib/grunt.js:154:9)
    at Object.module.exports [as cli] (/Users/ain/projects/.../node_modules/grunt/lib/grunt/cli.js:38:9)
    at Object.<anonymous> (/opt/local/lib/node_modules/grunt-cli/bin/grunt:45:20)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)

Aborted due to warnings.

JIT Grunt issue?

Duplicate Navigation generated in within partials

I have a partial for generating navigation bar:

        {{#each pages}}
        <li{{#if this.isCurrentPage}} class="active"{{/if}}>
          <a href="{{relative dest this.dest}}">{{ data.title }}</a>
        </li>
        {{/each}}

Using plugin, navigation is generated for every language, which result in huge list of duplicate pages with links to all languages from i18n.json file.

                <li class="hidden active"><a href="#page-top"></a></li>
                <li><a class="page-scroll" href="#about">About</a></li>            
                <li>
                  <a class="page-scroll" href="blog-en.html">Blog</a>
                </li>                
                <li>
                  <a class="page-scroll" href="contact-en.html">Contact</a>
                </li>                
                <li class="">
                  <a href="index-en.html">Home</a>
                </li>                
                <li>
                  <a class="page-scroll" href="pricing-en.html">Pricing</a>
                </li>                
                <li>
                  <a class="page-scroll" href="blog-sk.html">Blog</a>
                </li>                
                <li>
                  <a class="page-scroll" href="contact-sk.html">Contact</a>
                </li>                
                <li>
                  <a class="page-scroll" href="index-sk.html">Home</a>
                </li>                
                <li>
                  <a class="page-scroll" href="pricing-sk.html">Pricing</a>
                </li>                
                <li><a class="page-scroll" href="/login">Login</a></li>            

moderate severity security vulnerability on handlebars dependency

The handlebars package before 4.0.0 for Node.js allows remote attackers to conduct cross-site scripting (XSS) attacks by leveraging a template with an attribute that is not quoted.

The actual dependency is on handlebars v1.3.0.

See the CVE ticket: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-8861

Thus handlebars should be upgraded to v4+, i.e. to the latest stable release.

NB:

• The priority is low because it is a devDependency.
• The upgrade could break the CI jobs because moving over 3 major releases: v1.x −> v4.x

Warning: The 'language' parameter is not defined

I’m trying to use this plugin, but it seems like there’s something wrong. Trying to run grunt assemble causes the following warning: Warning: The 'language' parameter is not defined

I’m trying to access this parameter in a page template like this:

---
lang: <%= language %>
title: SomeTitle

---

My Grunt task looks like this:

assemble: {
    pages: {
      options: {
        flatten: true,
        assets: '<%= config.dist %>/assets',
        layoutdir: '<%= config.src %>/templates/layouts',
        layout: 'default.hbs',
        data: '<%= config.src %>/data/*/*.{json,yml}',
        partials: '<%= config.src %>/templates/partials/*.hbs',
        plugins: ['assemble-contrib-i18n','assemble-contrib-permalinks','assemble-contrib-sitemap'],
        i18n: {
          templates: ['<%= config.src %>/templates/pages/*.hbs']
        },
      },
      dest: '<%= config.dist %>/',
      src: '<%= config.src %>/templates/pages/*.hbs',
    }
  },

  // Before generating any new files,
  // remove any previously-created files.
  clean: ['<%= config.dist %>/**/*.{html,xml}']

});

The i18n.json (as well as the en.json and de.json) containing the languages are included by the wildcard for the data attribute.

Is there anything wrong on my side, or is this a bug?

arrays and front-matter variables

I have this set up so that I can call strings with the i18n helper, but I need to figure out how to handle front-matter variables on a page, and iterating over arrays of data.

Is there a standard/assumed way of doing this?

I want to achieve something like the following:

en:
  title: Bananas
fr:
  title: Les bananes

---
{{title}}

This of course overwrites the en/fr variable so all the other keys are lost and the build fails. My assumption is I need to set these translations in the i18n\en.yml etc?

Then how do I handle, say, an array in my data using {{each}}? I can't pass a helper to a helper

fruits:
-
  name: apple
  color: red or green
  size: medium
-
  name: banana
  color: yellow
  size: medium
-
  name: blueberry
  color: blue
  size: small

{{#each fruits}}
  {{name}}
{{/each}}

Is the key to do fruits: <%= i18n.fruits %> in the front-matter? that doesn't seem to be working...