search

claudetech / node-static-i18n

HTML static pages i18n tool
https://www.npmjs.com/package/static-i18n
MIT License
104 stars 21 forks source link

Link urls not relative to language #30

Open thewebisyourfriend opened 5 years ago

thewebisyourfriend commented 5 years ago

I have been searching for a tool I could use in my build process to translate a simple blog into multiple languages getting the translations from json, and this tool looks great for this. However I cannot get the file path attributes to become relative for each language.

For example: 

<link rel="stylesheet" type="text/css" href="/assets/app.css">
<a href="/blog/test-post/" rel="bookmark">Test Post</a>
<script src="/assets/vendor.js" async></script>
<script src="/assets/app.js" async></script>

All remain the same url for each language....

Also I was not sure how to translate the <html lang="en"> tag either.

danhper commented 5 years ago

Hi, This is exactly what the tool has been designed for, so hopefully it should work out for your use case. The tool does not try to make any guess about how links should look so you need to explicitly add the path in the link. There is data-attr-t and data-attr-t-interpolate which are exactly made for this. For the language, you could have

<html data-attr-t lang-t="lang">

and have a key named lang in your translation file, with the correct value for each language. For the link you could have something like this:

<a data-attr-t data-attr-t-interpolate
     href-t="{{langPrefix}}/blog/test-post/" rel="bookmark">
     Test Post
  </a>

And langPrefix could be an empty string for the default and "/fr" for French, for example.

Here is a working example, which can be compiled with the following command

static-i18n -l en -i en -i fr www

index.html

<!DOCTYPE html>
<html data-attr-t lang-t="lang">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 data-t="title"></h1>

  <a data-attr-t data-attr-t-interpolate
     href-t="{{langPrefix}}/blog/test-post/" rel="bookmark">
     Test Post
  </a>
</body>
</html>

locales/en.json

{
  "lang": "en",
  "title": "My page",
  "langPrefix": ""
}

locales/fr.json

{
  "lang": "fr",
  "title": "Ma page",
  "langPrefix": "/fr"
}
thewebisyourfriend commented 5 years ago

Thank you! I assumed that it would work this out automatically as stated in the documentation:

fixPaths (default: true): When true, the script[src] and link[href] relative paths are fixed to fit the new subdirectory structure.

Is this not the case that it does it automatically?

danhper commented 5 years ago

fixPaths is not meant to translate but simply to avoid having wrong paths when generating the HTML if the paths were relative. For example, ./css/style.css would be changed to ../css/style.css if the HTML is included in a sub-directory. In your case, all the paths are absolute so fixPaths does not change anything. I hope this helps.

thewebisyourfriend commented 5 years ago

Thank you, but what you mention doesn't work for me; In your example, ./css/style.css does not change to ../css/style.css so paths to js and css become incorrect for each translation.

danhper commented 5 years ago

Hi, Could you please provide a minimum example? I cannot reproduce. I added the following line to the above example and compiled with the same command but it behaves as expected

    <link rel="stylesheet" href="./css/style.css">

The output for this particular line is

    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href=".././css/style.css">
pcoeper commented 4 years ago

Hi,

I planned to use the gulp plugin you mention in the README. The gulp tool calls the process() method of your lib which (if I got it right) does not handle processing the paths for styles and scripts since options.file is not set and undefined by default.

My question is: Since process() handles the translation of each locale given in options.locales, why it is not possible to change the paths for each translated file besides the file defined by options.locale? I didn't look at the shell command you mentioned above but I guess it calls the processDir() method which does exactly that?!

Please let me know if I got this all wrong. But maybe we can discuss if having process() change the paths is an option for your tool.

Thanks a lot!

pcoeper commented 4 years ago

Hi @danhper ,

I got in contact with the author of the gulp-plugin to tackle the problem of my previous post. However I experience a strange behavior when working with "nested" html files. Assume the following structure:

src
  |
  +-- assets
  |    |
  |    +-- styles.css
  |
  +-- index.html
  |
  +-- nestedHtml
  |     |
  |     +-- nested.html

Within the index.html the styles.css file is linked with: <link rel="stylesheet" href="./assets/styles.css"> whereas within the nestedHtml/nested.html file the stylesheet is linked with: <link rel="stylesheet" href="../assets/styles.css">

When I now run static18n.processDir('./src', {}) the href of the stylesheet link within the index.html file does not change (as expected) but the link of nestedHtml/nested.html changes to: <link rel="stylesheet" href="../../assets/styles.css"> It adds another ../ where I would've expected it to also not change since the structure of the directory has not changed either. Where did I go wrong here? Thanks a lot.

Edit: What I figured out so far is that the problem might be within the getPath() method. For index.html:

For nestedHtml/nested.html:

danhper commented 4 years ago

Thanks for the detailed investigation and sorry for the huge delay. Would you have time to send a PR for this, please? Thanks a lot!