vegancheck.me/docs/localization.html

186 lines
6.1 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-color-mode="dark" data-dark-theme="dark">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>VeganCheck.me Localization Status</title>
<link
rel="stylesheet"
href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css"
/>
<link rel="stylesheet" href="assets/prism.css">
<style>
body {
width: 50%;
}
@media only screen and (max-width: 750px) {
body {
width: 95%;
}
img {
display: none;
}
}
.markdown-body table {
display: revert;
width: 100%;
max-width: 100%;
overflow: auto;
}
:not(pre) >code[class*="language-"], pre[class*="language-"] {
background: #000;
border: solid .01rem #ccc;
}
</style>
</head>
<body class="m-5 mx-auto">
<div class="markdown-body">
<span class="branch-name">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
class="octicon octicon-git-branch"
>
<path
fill-rule="evenodd"
d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
></path>
</svg>
main
</span>
<span class="Label mr-1 Label--success">Stable</span>
<img
width="80px"
src="https://raw.githubusercontent.com/JokeNetwork/vegancheck.me/main/public/img/hero_icon.png"
align="right"
alt="VeganCheck Logo"
/>
<h1>Localization status</h1>
<table>
<thead>
<tr>
<th>Language</th>
<th>Language Code</th>
<th>Translated</th>
<th>Validated</th>
</tr>
</thead>
<tbody>
<tr>
<td>English</td>
<td><code>en</code></td>
<td>100%</td>
<td>✔︎ (Philip)</td>
</tr>
<tr>
<td>German</td>
<td><code>de</code></td>
<td>100%</td>
<td>✔︎ (Philip, Max)</td>
</tr>
<tr>
<td>French</td>
<td><code>fr</code></td>
<td>100%</td>
<td>✔︎ (Léa)</td>
</tr>
<tr>
<td>Spanish</td>
<td><code>es</code></td>
<td>100%</td>
<td></td>
</tr>
<tr>
<td>Polish</td>
<td><code>pl</code></td>
<td>99%</td>
<td>✔︎ (Lukem)</td>
</tr>
<tr>
<td>Czech</td>
<td><code>cz</code></td>
<td>100%</td>
<td>✔︎ (Michal)</td>
</tr>
</tbody>
</table>
<h2 id="help-us-with-localization">Help us with localization</h2>
<p>
Localizations can be found in <code>src/locales</code>. All language
files are in a <code>[countrycode].json</code> file. Please check our
translations if there is already one localization file available in the
language you are speaking. Otherwise, please create a new json file and
duplicate the contents of the <code>en.json</code> file and translate
the strings to your language.
</p>
<p>
Legal documents and everything that is only available in English and/or German should not be translated. This would require us to get a Laywer everytime we got a new translation. Thank you very much!
</p>
<h3 id="optional-steps">Optional steps</h3>
<p>
If you want to help us make the localization process faster, you can also modify the following files:
</p>
<ul>
<li><strong><code>next.config.js</code></strong>: Add your locale ({yourlocale}) to the configuration:<br>
<pre class="highlight"><code class="lang-javascript">i18n: {
locales: ['de', 'en', 'fr', 'es', 'pl', 'cz', '{yourlocale}'],
defaultLocale: 'en',
},</span></code></pre>
</li>
<li><strong><code>src/pages/more.tsx</code></strong>: Add your locale to the change language page:<br>
<pre class="highlight"><code class="lang-javascript">&lt;Link
className=&quot;nolink&quot;
href=&quot;/more&quot;
locale=&quot;{yourlocale}&quot;
onClick={() =&gt; handleLanguageChange(&quot;{yourlocale}&quot;)}
&gt;
&lt;div
className={router.locale === &quot;{yourlocale}&quot; ? &quot;option active&quot; : &quot;option&quot;}
&gt;
&lt;input
className=&quot;form-check-input&quot;
type=&quot;radio&quot;
name=&quot;flexRadioDefault&quot;
checked={router.locale === &quot;{yourlocale}&quot;}
/&gt;
&lt;span className=&quot;price&quot;&gt;{t(&quot;translation_string_for_your_locale&quot;)}&lt;/span&gt;
&lt;/div&gt;
&lt;/Link&gt;</span></code></pre>
</li>
<li><strong><code>locales/[...].json</code></strong>: Add the translation_string_for_your_locale for your locale to the other locales:<br>
<pre class="highlight"><code class="lang-json">/* src/locales/en.json */
"More": {
...
"english": "English",
"german": "German",
"spanish": "Spanish",
"french": "French",
"polish": "Polish",
"cursed": "Cursed",
"czech": "Czech",
"translation_string_for_your_locale": "Your locale in e.g. english"
},</span></code></pre>
</li>
</ul>
<footer class="border-top">
<p class="color-fg-muted mt-2">
&copy; 2023 <a href="//vegancheck.me">VeganCheck.me</a> - Licensed
under
<a
href="https://github.com/JokeNetwork/vegancheck.me/blob/main/LICENSE"
>MIT</a
>
</p>
</footer>
</div>
<script src="assets/prism.js"></script>
</body>
</html>