Skip to content

Fix rtl languages #152

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

Merged
merged 2 commits into from
Nov 3, 2020
Merged

Fix rtl languages #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6f58a7
Support RTL-Languages
jotoeri Oct 31, 2020
6e8b232
Keep code-elements ltr
jotoeri Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions assets/css/new-challenge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,11 @@ gre7-border.border-box code {

/* CODE STYLES
-------------------------------------------------------------------------- */
/* TODO needs some Cleanup, to have similar styling accros challenges and no doubled classes here! */

div.code {
padding-bottom: 4px;
}

code {
font-size: 0.8em;
Expand Down
28 changes: 16 additions & 12 deletions config/i18next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
/** Configuration Settings for i18next */

// Available appLanguages
/* Available appLanguages
* Each language is defined as an object per languageKey:
* The Object MUST contain a name-property, which will be shown in the dropdown-menu
* Optional Property "direction: 'rtl'" is used to mark right-to-left lanugages.
*/
const appLanguages = {
'en-US': 'English',
'de-DE': 'Deutsch',
'es-ES': 'Español',
'fr-FR': 'Français',
'ja-JP': '日本語',
'ko-KR': '한국어',
'ku': 'کوردی',
'pl-PL': 'Polski',
'pt-BR': 'Português Brasileiro',
'uk-UA': 'Українська',
'zh-TW': '中文(臺灣)',
'en-US': { name: 'English' },
'de-DE': { name: 'Deutsch' },
'es-ES': { name: 'Español' },
'fr-FR': { name: 'Français' },
'ja-JP': { name: '日本語' },
'ko-KR': { name: '한국어' },
'ku': { name: 'کوردی', direction: 'rtl' },
'pl-PL': { name: 'Polski' },
'pt-BR': { name: 'Português Brasileiro' },
'uk-UA': { name: 'Українська' },
'zh-TW': { name: '中文(臺灣)' },
}
const appLanguageKeys = Object.keys(appLanguages)

Expand Down
4 changes: 2 additions & 2 deletions lib/build/build-helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ function getLocaleMenu () {
const { appLanguages } = require('../../config/i18next.config')
let localeMenu = ''

Object.entries(appLanguages).forEach(([languageKey, language]) => {
localeMenu = localeMenu.concat('<option value="' + languageKey + '">' + language + '</option>')
Object.entries(appLanguages).forEach(([languageKey, languageObject]) => {
localeMenu = localeMenu.concat('<option value="' + languageKey + '">' + languageObject.name + '</option>')
})
return localeMenu
}
Expand Down
20 changes: 15 additions & 5 deletions lib/i18n-translate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

const i18n = require('electron').remote.getGlobal('i18n')
const { appLanguages } = require('../config/i18next.config')

// defaultOptions for interpolation
const defaultOptions = {
Expand Down Expand Up @@ -99,9 +100,18 @@ function insertBoxTranslationStyles () {
document.styleSheets[sheetIndex].deleteRule(0)
}

// Append new rules
document.styleSheets[sheetIndex].insertRule(".chal-goal.border-box::before {content: '" + i18n.t('Goal') + "';}", 0)
document.styleSheets[sheetIndex].insertRule(".chal-no-pass.border-box::before {content: '" + i18n.t("Didn't Pass?") + "';}", 0)
document.styleSheets[sheetIndex].insertRule(".chal-tip.border-box::before {content: '" + i18n.t('Tip') + "';}", 0)
document.styleSheets[sheetIndex].insertRule(".chal-step.border-box::before {content: '" + i18n.t('Step') + "';}", 0)
// Insert Style for right-to-left languages
if (appLanguages[i18n.language].direction === 'rtl') {
document.styleSheets[sheetIndex].insertRule('div.content {direction: rtl;}')
// Code-Elements should stay ltr
document.styleSheets[sheetIndex].insertRule('div.code {direction: ltr;}')
}

// Append rules for challenge-boxes
if (document.styleSheets[sheetIndex].ownerNode.id === 'challenge-translation-style') {
document.styleSheets[sheetIndex].insertRule(".chal-goal.border-box::before {content: '" + i18n.t('Goal') + "';}")
document.styleSheets[sheetIndex].insertRule(".chal-no-pass.border-box::before {content: '" + i18n.t("Didn't Pass?") + "';}")
document.styleSheets[sheetIndex].insertRule(".chal-tip.border-box::before {content: '" + i18n.t('Tip') + "';}")
document.styleSheets[sheetIndex].insertRule(".chal-step.border-box::before {content: '" + i18n.t('Step') + "';}")
}
}
20 changes: 10 additions & 10 deletions resources/content/challenges/11_merge_tada.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,24 @@
<p i18n-data="ch11~Your pull request has been merged! Your branch was merged into the 'gh-pages' branch of the original on GitHub. You can merge your branch locally, too."></p>

<p i18n-data="ch11~First, move into the branch you want to merge into — in this case, the branch 'gh-pages'."></p>
<p><code class="shell">git checkout gh-pages</code></p>
<div class='code'><code class="shell">git checkout gh-pages</code></div>

<p i18n-data="ch11~Now tell Git what branch you want to merge in — in this case, your feature branch that begins with {/dqm/}add-{/dqm/}."></p>
<p><code class="shell">git merge &#60;BRANCHNAME&#62;</code></p>
<div class='code'><code class="shell">git merge &#60;BRANCHNAME&#62;</code></div>

<p i18n-data="ch11~Tidy up by deleting your feature branch. Now that it has been merged you don't really need it around."></p>
<p><code class="shell">git branch -d &#60;BRANCHNAME&#62;</code></p>
<div class='code'><code class="shell">git branch -d &#60;BRANCHNAME&#62;</code></div>

<p i18n-data="ch11~You can also delete the branch from your remote on GitHub:"></p>
<p><code class="shell">git push &#60;REMOTENAME&#62; --delete &#60;BRANCHNAME&#62;</code></p>
<div class='code'><code class="shell">git push &#60;REMOTENAME&#62; --delete &#60;BRANCHNAME&#62;</code></div>
</div>

<div class="chal-step blue-border border-box">
<h3 i18n-data="ch11~Pull from Upstream"></h3>
<p i18n-data="ch11~And last but not least, the original has changed since your pull request was merged — Reporobot added your name to the website! If you pull in these changes from upstream you'll be up to date and have that version too. You can actually see it live as well at: yourusername.github.io/patchwork."></p>

<p i18n-data="ch11~To pull from the original upstream:"></p>
<p><code class="shell">git pull upstream gh-pages</code></p>
<div class='code'><code class="shell">git pull upstream gh-pages</code></div>
</div>

<div class="chal-background light-blue solid-box">
Expand All @@ -50,14 +50,14 @@
<div class="chal-tip grey-border border-box">
<ul class="no-list-style">
<li><strong i18n-data="ch11~Merge a branch into current branch"></strong></li>
<code class="shell">git merge &#60;BRANCHNAME&#62;</code>
<div class='code'><code class="shell">git merge &#60;BRANCHNAME&#62;</code></div>
<li><strong i18n-data="ch11~Change the branch you're working on"></strong></li>
<code class="shell">git checkout &#60;BRANCHNAME&#62;</code>
<div class='code'><code class="shell">git checkout &#60;BRANCHNAME&#62;</code></div>
<li><strong i18n-data="ch11~Delete a local branch"></strong></li>
<code class="shell">git branch -d &#60;BRANCHNAME&#62;</code>
<div class='code'><code class="shell">git branch -d &#60;BRANCHNAME&#62;</code></div>
<li><strong i18n-data="ch11~Delete a remote branch"></strong></li>
<code class="shell">git push &#60;REMOTENAME&#62; --delete &#60;BRANCHNAME&#62;</code>
<div class='code'><code class="shell">git push &#60;REMOTENAME&#62; --delete &#60;BRANCHNAME&#62;</code></div>
<li><strong i18n-data="ch11~Pull from a remote branch"></strong></li>
<code class="shell">git pull &#60;REMOTENAME&#62; &#60;BRANCHNAME&#62;</code>
<div class='code'><code class="shell">git pull &#60;REMOTENAME&#62; &#60;BRANCHNAME&#62;</code></div>
</ul>
</div>
8 changes: 4 additions & 4 deletions resources/content/challenges/1_get_git.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,17 @@
<p i18n-type="standard_html"
i18n-data="ch01~Once Git is installed, open your {/str/}terminal{/str_e/}. You can verify that Git is really there by typing:"></p>

<p><code class="shell">git --version</code></p>
<div class='code'><code class="shell">git --version</code></div>

<p i18n-data="ch01~This will return the version of Git on your computer and look something like this:"></p>

<p><code class="comment">git version 1.9.1</code></p>
<div class='code'><code class="comment">git version 1.9.1</code></div>

<p i18n-data="ch01~Next, configure Git so it knows to associate your work to you:"></p>
<p i18n-data="ch01~Set your name:"></p>
<p><code class="shell">git config --global user.name "Your Name"</code></p>
<div class='code'><code class="shell">git config --global user.name "Your Name"</code></div>
<p i18n-data="ch01~Now set your email:"></p>
<p><code class="shell">git config --global user.email "youremail@example.com"</code></p>
<div class='code'><code class="shell">git config --global user.email "youremail@example.com"</code></div>

<p i18n-data="ch01~You're done with your first challenge! Click the 'Verify' button to check the challenge."></p>
</div>
Expand Down
14 changes: 7 additions & 7 deletions resources/content/challenges/2_repository.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@

<p><span i18n-data="ch02~First, make a new folder:"></span></br>
<span class="inline-tip" i18n-type="standard_html" i18n-data="ch02~Tip: mkdir stands for {/em/}make directory{/em_e/}"></span></p>
<code class="shell">mkdir hello-world</code>
<div class='code'><code class="shell">mkdir hello-world</code></div>

<p><span i18n-data="ch02~Then go into that folder:"></span></br>
<span class="inline-tip" i18n-type="standard_html" i18n-data="ch02~Tip: cd stands for {/em/}change directory{/em_e/}"></span></p>
<code class="shell">cd hello-world</code>
<div class='code'><code class="shell">cd hello-world</code></div>

<p i18n-data="ch02~Finally, tell Git to initialize (start tracking) the folder you are now in:"></p>
<code class="shell">git init</code>
<div class='code'><code class="shell">git init</code></div>

<p i18n-data="ch02~The last command should return something starting with 'Initialized empty Git repository'. The others commands do not return anything."></p>

Expand All @@ -57,12 +57,12 @@
<div class="chal-tip grey-border border-box">
<ul class="no-list-style">
<li><strong i18n-data="ch02~Make a new folder (aka make directory)"></strong></li>
<code class="shell">mkdir &#60;FOLDERNAME&#62;</code>
<div class='code'><code class="shell">mkdir &#60;FOLDERNAME&#62;</code></div>
<li><strong i18n-data="ch02~Navigate into an existing folder (aka change directory)"></strong></li>
<code class="shell">cd &#60;FOLDERNAME&#62;</code>
<div class='code'><code class="shell">cd &#60;FOLDERNAME&#62;</code></div>
<li><strong i18n-data="ch02~List the items in a folder"></strong></li>
<code class="shell">ls </code>
<div class='code'><code class="shell">ls </code></div>
<li><strong i18n-data="ch02~Turn Git on for a folder"></strong></li>
<code class="shell">git init</code>
<div class='code'><code class="shell">git init</code></div>
</ul>
</div>
18 changes: 9 additions & 9 deletions resources/content/challenges/3_commit_to_it.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@
<p i18n-data="ch03~Make sure you're still within your 'hello-world' directory when you're running these commands. Use Git to see what changed in your repository:"></p>

<p i18n-data="ch03~First, check the status:"></p>
<p><code class="shell">git status</code></p>
<div class='code'><code class="shell">git status</code></div>
<p i18n-data="ch03~Git should tell you that a file has been added."></p>

<p i18n-type="standard_html"
i18n-data="ch03~Then {/str/}add{/str_e/} the file you just created so that it becomes a part of the changes you will {/str/}commit{/str_e/} (aka save) with Git:"></p>
<p><code class="shell">git add readme.txt</code></p>
<div class='code'><code class="shell">git add readme.txt</code></div>

<p i18n-type="standard_html"
i18n-data="ch03~Finally, {/str/}commit{/str_e/} those changes to the repository's history with a short (m) message describing the updates."></p>
<p><code class="shell">git commit -m "Created readme"</code></p>
<div class='code'><code class="shell">git commit -m "Created readme"</code></div>
</div>

<div class="chal-step blue-border border-box">
Expand All @@ -42,7 +42,7 @@

<p i18n-type="standard_html"
i18n-data="ch03~Tell Git to show you the {/str/}diff{/str_e/}:"></p>
<p><code class="shell">git diff</code></p>
<div class='code'><code class="shell">git diff</code></div>

<p i18n-data="ch03~Now with what you just learned above, commit this latest change."></p>
</div>
Expand All @@ -52,14 +52,14 @@
<div class="chal-tip grey-border border-box">
<ul class="no-list-style">
<li><strong i18n-data="ch03~Check status of changes to a repository"></strong></li>
<li><code class="shell">git status</code></li>
<div class='code'><code class="shell">git status</code></div>
<li><strong i18n-data="ch03~View changes to files"></strong></li>
<li><code class="shell">git diff</code></li>
<div class='code'><code class="shell">git diff</code></div>
<li><strong i18n-data="ch03~Add a file's changes to be committed"></strong></li>
<li><code class="shell">git add &#60;FILENAME&#62;</code></li>
<div class='code'><code class="shell">git add &#60;FILENAME&#62;</code></div>
<li><strong i18n-data="ch03~To add all files changes"></strong></li>
<li><code class="shell">git add .</code></li>
<div class='code'><code class="shell">git add .</code></div>
<li><strong i18n-data="ch03~To commit (aka save) the changes you've added with a short message describing the changes"></strong></li>
<li><code class="shell">git commit -m "your commit message"</code></li>
<div class='code'><code class="shell">git commit -m "your commit message"</code></div>
<ul>
</div>
6 changes: 3 additions & 3 deletions resources/content/challenges/4_githubbin.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@
i18n-data="ch04~Add your GitHub username to your Git configuration. We'll do this just for the sake of Git-it{/smc/} it makes it easier to verify the upcoming challenges. Save it exactly as you created it on GitHub and {/str/}capitalize where capitalized{/str_e/}. Note, you don't need to enter the {/dqm/}{/lt/}{/dqm/} and {/dqm/}{/gt/}{/dqm/}."></p>

<p i18n-data="ch04~Add your GitHub username to your Git configuration:"></p>
<code class="shell">git config --global user.username &#60;UserName&#62;</code>
<div class='code'><code class="shell">git config --global user.username &#60;UserName&#62;</code></div>

<p i18n-data="ch04~You can double check what you have set in your Git config by typing:"></p>
<code>git config --global user.username</code>
<div class='code'><code>git config --global user.username</code></div>
</div>

{{{ verify_button }}}
Expand All @@ -44,6 +44,6 @@

<p i18n-type="standard_html" i18n-data="ch04~A common error is not having your GitHub username match the case of the one you set with {/cde/}git config{/cde_e/}. For instance, 'JLord' isn't the same as 'jlord'"></p>
<p i18n-data="ch04~To change your username set with Git, just do the same command you did earlier, but with the correct capitalization:"></p>
<p><code class="shell">git config --global user.username &#60;UserName&#62;</code></p>
<div class='code'><code class="shell">git config --global user.username &#60;UserName&#62;</code></div>
<p i18n-data="ch04~When you've made your updates, verify again!"></p>
</div>
16 changes: 8 additions & 8 deletions resources/content/challenges/5_remote_control.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
i18n-data="ch05~Back in your terminal, and inside of the 'hello-world' folder that you initialized as a Git repository in the earlier challenge, you want to tell Git to remember the address of the remote version on GitHub's servers. You can have multiple remotes so each requires a name. The primary remote is typically named {/cde/}origin{/cde_e/}."></p>

<p i18n-data="ch05~To add a remote named 'origin' to your repository:"></p>
<code class="shell">git remote add origin &lt;URLFROMGITHUB&gt;</code>
<div class='code'><code class="shell">git remote add origin &lt;URLFROMGITHUB&gt;</code></div>

<p i18n-type="standard_html"
i18n-data="ch05~Your {/str/}local{/str_e/} repository now knows where your {/str/}remote{/str_e/} repository, named 'origin', lives on GitHub's servers. Think of it as adding a name and address on speed dial—now when you need to send something there, you can."></p>
Expand All @@ -67,7 +67,7 @@
<p i18n-type="standard_html"
i18n-data="ch05~If you have {/str/}GitHub Desktop{/str_e/} on your computer, a remote named 'origin' is automatically created in your local repository. In that case, you'll just need to tell it what URL to associate with 'origin'. Use this command instead of the 'add' one above:"></p>

<code class="shell">git remote set-url origin &lt;URLFROMGITHUB&gt;</code>
<div class='code'><code class="shell">git remote set-url origin &lt;URLFROMGITHUB&gt;</code></div>
</blockquote>
</div>

Expand All @@ -80,7 +80,7 @@
i18n-data="ch05~Git has a branching system so that you can work on different parts of a project at different times. We'll learn more about that later, but by default the first branch is named 'master'. When you push (and later pull) from a project, you tell Git the {/str/}branch name{/str_e/} you want and the name of the {/str/}remote{/str_e/} that it lives on."></p>

<p i18n-data="ch05~In this case, we'll send our branch named 'master' to our remote on GitHub named 'origin'."></p>
<code class="shell">git push origin master</code>
<div class='code'><code class="shell">git push origin master</code></div>

<p i18n-type="standard_html"
i18n-data="ch05~Now go to your remote repository's page on GitHub.com and refresh the page. {/str/}Wow!{/str_e/} Everything is now the same locally as it is remotely. Congrats on your first public repository!"></p>
Expand All @@ -91,14 +91,14 @@
<div class="chal-tip grey-border border-box">
<ul class="no-list-style">
<li><strong i18n-data="ch05~Add remote connections"></strong></li>
<code class="shell">git remote add &lt;REMOTENAME&gt; &lt;URL&gt;</code>
<div class='code'><code class="shell">git remote add &lt;REMOTENAME&gt; &lt;URL&gt;</code></div>
<li><strong i18n-data="ch05~Set a URL to a remote"></strong></li>
<code class="shell">git remote set-url &lt;REMOTENAME&gt; &lt;URL&gt;</code>
<div class='code'><code class="shell">git remote set-url &lt;REMOTENAME&gt; &lt;URL&gt;</code></div>
<li><strong i18n-data="ch05~Pull in changes"></strong></li>
<code class="shell">git pull &lt;REMOTENAME&gt; &lt;BRANCHNAME&gt;</code>
<div class='code'><code class="shell">git pull &lt;REMOTENAME&gt; &lt;BRANCHNAME&gt;</code></div>
<li><strong i18n-data="ch05~View remote addresses"></strong></li>
<code class="shell">git remote -v</code>
<div class='code'><code class="shell">git remote -v</code></div>
<li><strong i18n-data="ch05~Push changes"></strong></li>
<code class="shell">git push &lt;REMOTENAME&gt; &lt;BRANCH&gt;</code>
<div class='code'><code class="shell">git push &lt;REMOTENAME&gt; &lt;BRANCH&gt;</code></div>
</ul>
</div>
Loading