Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Link urls not relative to language #30

Open
thewebisyourfriend opened this issue Aug 7, 2019 · 8 comments
Open

Link urls not relative to language #30

thewebisyourfriend opened this issue Aug 7, 2019 · 8 comments

Comments

@thewebisyourfriend
Copy link

thewebisyourfriend commented Aug 7, 2019 •
edited
Loading

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
Copy link
Member

danhper commented Aug 7, 2019

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
Copy link
Author

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
Copy link
Member

danhper commented Aug 12, 2019

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.

@danhper danhper closed this as completed Aug 12, 2019
@thewebisyourfriend
Copy link
Author

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
Copy link
Member

danhper commented Aug 20, 2019

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

  • index.html:
    <link rel="stylesheet" href="./css/style.css">
  • fr/index.html
    <link rel="stylesheet" href=".././css/style.css">

@danhper danhper reopened this Aug 20, 2019
@pcoeper
Copy link

pcoeper commented Mar 14, 2020

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
Copy link

pcoeper commented Mar 27, 2020 •
edited
Loading

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:

  • filtepath = 'index.html'
  • output = 'index.html'
  • diff = (= empty)

For nestedHtml/nested.html:

  • filtepath = 'nestedHtml/nested.html'
  • output = 'nestedHtml/nested.html'
  • diff = '..'

@danhper
Copy link
Member

danhper commented Aug 9, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@danhper @thewebisyourfriend @pcoeper