OpenStop website in English

[idotj]

The app works perfectly in English and it would be a good option to have the website in English as well.

[idotj]

I created a fork with an implementation for i18n:

https://github.com/idotj/OpenStop-website

In this example a select/option in the header will allow to switch between German and English. This demo only translate the main title (H1) and the alt + title for the image related with the Google Play Store.

Please have a look, and if that do the job I can take some free time to complete the task. Thanks

[7h30n3]

Thank you for making the OpenStop website multilingual. Once its done we can also add it to Weblate. 😊

My only wish for this PR is, to change / add only things, which are directly related to making the website multitlingual. This means:

• There is no need to add trailing slahes (/). The website is already valid HTML5
• Don't add new line breaks to exisiting code
• Don't change unrelated code in the CSS file (line breaks, quotation marks,...)

All this can be done in a separate PR.

Maybe, just maybe you can also add a browser language detection and set the website language accordingly and to English as a fallback.

[idotj]

Good catch for the browser language detection 👍

Sorry about the code formatting but I'm using Prettier and by default applies in every saved file. Are you using any other code formatting plugin, or any settings/config JSON for Prettier?

Thx

[Robbendebiene]

Hi, sorry for the late reply.

@idotj Thanks a lot for all the work you have done.

I think the best practice way of doing translations for GitHub pages is using template strings and generating static pages for every language. This is usually done by a small framework. So the files are not created by us nor uploaded to GitHub, instead they are generated by a script whenever the GiHub page is published. The end result file structure may look like this in our case:

index.html
de/index.html
fr/index.html
...

This way we do not even need any javascript. Even the language switcher just has to be a "list of links" pointing to the respective language path. (only exception might be the language detection)

I'm not familiar with jekyll but people seem to recommend it for this particular task. It would be great if you could continue in this direction.

Ideally I would just like to edit the existing html file with some template strings like so

      <section class="motivation-section page-section slant-bottom">
        <div class="section-content text-banner">
          <figure class="quote">
            <blockquote cite="https://www.gesetze-im-internet.de/pbefg/__8.html">
              <p>{{quoteTemplateStringA}}</p>
            </blockquote>
            <figcaption class="smaller"><abbr title="{{quoteTemplateStringB}}">{{quoteTemplateStringC}}</abbr><cite>{{quoteTemplateStringD}}</cite></figcaption>
          </figure>
        </div>
      </section>

There are probably better frameworks (like https://gohugo.io/) for this, so feel free to use any of them (there are a lot https://github.com/myles/awesome-static-generators 😅)

Are you using any other code formatting plugin, or any settings/config JSON for Prettier?

For this project we didn't use any formatter or linter.

[idotj]

Hi @Robbendebiene Thanks for the suggestions, but in that case I will then let somebody else to handle this issue. I was looking to give a hand in a very easy and simple way, not adding any external dependencies, libraries or frameworks for this simple page.

I'm not familiar neither with Jekyll and I don't have the time to play with it. Idem for Hugo or other frameworks but I hope someone can take the lead here.

Anyways, good luck with the project and I wish you all the best!