p5.js-website [i18n] RTL support

Fixes: Support for Right-to-left languages (Persian, Arabic, Hebrew, Urdu etc.)

Changes (in 4 commits so review by commit is easier):

Adds rtl support: https://github.com/processing/p5.js-website/commit/b65a3738900ae9e3c62af84f27e61baa7768fb60 (Mirrors the page for right to left languages)
- Adds rtl parameter to Gruntfile
- Based on rtl adds dir='rtl' to <html> tag
- Adds .rtl class to <html> tag (Not ideal but better than restructuring the entire page)
Slightly restructures homepage 'Hello' and search bar to avoid float: right as it breaks rtl: https://github.com/processing/p5.js-website/commit/73600727245956c83ebab251e650009c14fabcc1
Some css overrides: https://github.com/processing/p5.js-website/commit/23d0c46bb6cae8ec5f8acf7d01e440025e8eac8a
Moved sidebar to layout https://github.com/processing/p5.js-website/commit/6da4690b462c711b4c1448c5177521f5a57b752f The sidebar on the homepage was inside a flex container and it was working fine but on the other pages it was not. I had to add flex to the top container on every page but instead of that took the opportunity and moved the {{> sidebar }} to the layout and added flex to the container in the layout to make the templates dryer. The diff looks large but the change was mechanical running a regex like:

<div id="([a-z\-]+)">[\n\s]+\{\{> sidebar\}\}[\n\s]+<div class="column-span">

Screenshots

p5-rtl-desktop

more screenshots

Mobile

p5-rtl-mobile

Note: I am also working on Persian translation but decided to do 2 separate PRs to make the review easier for you. So this PR does not include fa.yml etc and the screenshots above with Persian text in them are just for demonstration. This PR should not cause any change to the website.

Testing: I tried to check all the pages on different screen sizes and browsers but I might have missed a page since I don't know my way around the website very well.

Apr 14 '20 06:04 sepans

I don't think there's currently plans to officially support additional languages other than the ones that are already live or are being worked on (ie. Korean and Hindi).

Although this PR do add much of the things I would like to see on the site, we do have the policy of usually requiring an issue to be opened before a PR should be filed so that discussions about any particular features are hammered out before any work is done. I'm inclined to review this PR as is now but next time please do open an issue first. Thanks.

Apr 15 '20 12:04 limzykenneth

Thanks for your comment @limzykenneth 🙌 If there is no plan for adding additional languages it is fine to close this PR, or just cherry-pick the needed changes.

Maybe a more urgently needed change is to update the i18n doc with this policy before someone else starts translation for another language.

Apr 16 '20 01:04 sepans

@sepans Translation of the website is always welcomed, the only difference is whether a language is officially supported or not. An officially supported language will be listed on p5js.org while an unoffical one can be hosted by the translator wherever they wish. The i18n documentation aims to make the technical aspect of the translation clear and any suggestion of new official translations should follow the PR workflow documented here.

Apr 16 '20 16:04 limzykenneth

Thanks for the explanation. I still argue for adding that 'official languages' to the i18n document because I personally could have translated a lot of more examples instead of translating the homepage if I knew that. Maybe an RFC if a better place to have this discussion.

Apr 16 '20 18:04 sepans

@sepans Would you like to submit a modification to the translation docs? Only thing to keep in mind is that while we may not officially support some languages at the moment, any translation effort is always welcomed.

Apr 18 '20 14:04 limzykenneth