mozilla

Revision 332493 of Implementing Pontoon in a Mozilla website

  • Revision slug: Implementing_Pontoon_Mozilla
  • Revision title: Implementing Pontoon in a Mozilla website
  • Revision id: 332493
  • Created:
  • Creator: jbeatty
  • Is current revision? No
  • Comment
Tags: 

Revision Content

{{draft}}

Pontoon is a web-based, What-You-See-Is-What-You-Get (WYSIWYG), localization (l10n) tool used to localize web content. At Mozilla, we currently use Pontoon to localize various Mozilla websites and the Firefox OS app interface, known as Gaia. Pontoon is a very simple and intuitive tool that requires little to no technical skill for localizers to use, which will decrease your time-to-publish for localized versions of your web project. Here we'll discuss how you can add Pontoon to your Mozilla web project.

Initial setup

We realize that these are already considered to be standard best practices for developing web projects at Mozilla, but we feel it's good to add them here as a little reminder.

  1. Ensure that your web project supports one or all of the following frameworks:
    1. gettext
    2. webL10n
    3. l20n
  2. Extract your localizable strings into the appropriate resource file. For django projects, learn how to do that here. For gettext projects, learn how to do that here.
  3. Add that resource file to the project's repo (e.g., SVN, hg, Transifex, etc.).

Adding Pontoon to your code

Now that setup is out of the way, let's talk about injecting Pontoon into your web project's code using the Pontoon hook (pontoon.js). The approach to doing this depends on your web project's infrastructure. Below you'll find instructions for Django, PHP, and web10n frameworks.

Django

  1. You can find the Pontoon hook on github here.
  2. To install the hook, run this command in your terminal: pip install -e git+git://github.com/rtnpro/django-pontoon-hook.git@master#egg=django_pontoon_hook
  3. Add pontoon_hook to your settings.INSTALLED_APPS setting.
  4. Add pontoon_hook.middleware.PontoonMiddleware to your settings.MIDDLEWARE_CLASSES setting, preferably as the last item.

PHP

 

 

Adding your project to Pontoon

 

 

Outline

 
  • webL10n: include pontoon.js (see Pontoon home page)
  • Admin: add project
  • mandatory: name, URL, locales, SVN/HG/Transifex repo
  • optional: checkboxes, subpages, general info
 
Remove the database and create the new one:
./manage.py sqlclear base | ./manage.py dbshell && ./manage.py syncdb
  • Does not remove User, but removes UserProfile -> recreate users
 
Install requirements in VM (requirements dev file?):
sudo apt-get install python-svn mercurial

 

Revision Source

<p>{{draft}}</p>
<p><a class="external" href="http://pontoon-dev.mozillalabs.com" title="http://pontoon-dev.mozillalabs.com">Pontoon</a> is a web-based, What-You-See-Is-What-You-Get (WYSIWYG), localization (l10n) tool used to localize web content. At Mozilla, we currently use Pontoon to localize various Mozilla websites and the Firefox OS app interface, known as Gaia. Pontoon is a very simple and intuitive tool that requires little to no technical skill for localizers to use, which will decrease your time-to-publish for localized versions of your web project. Here we'll discuss how you can add Pontoon to your Mozilla web project.</p>
<h2 id="Initial_setup">Initial setup</h2>
<p>We realize that these are already considered to be standard best practices for developing web projects at Mozilla, but we feel it's good to add them here as a little reminder.</p>
<ol>
  <li>Ensure that your web project supports one or all of the following frameworks:
    <ol>
      <li>gettext</li>
      <li>webL10n</li>
      <li>l20n</li>
    </ol>
  </li>
  <li>Extract your localizable strings into the appropriate resource file. For django projects, learn how to do that <a href="/en-US/docs/http://playdoh.readthedocs.org/en/latest/userguide/l10n.html" title="/en-US/docs/http://playdoh.readthedocs.org/en/latest/userguide/l10n.html">here</a>. For gettext projects, learn how to do that <a href="/en-US/docs/http://mozweb.readthedocs.org/en/latest/l10n.html" title="/en-US/docs/http://mozweb.readthedocs.org/en/latest/l10n.html">here</a>.</li>
  <li>Add that resource file to the project's repo (e.g., SVN, hg, Transifex, etc.).</li>
</ol>
<h2 id="Adding_Pontoon_to_your_code">Adding Pontoon to your code</h2>
<p>Now that setup is out of the way, let's talk about injecting Pontoon into your web project's code using the Pontoon hook (pontoon.js). The approach to doing this depends on your web project's infrastructure. Below you'll find instructions for Django, PHP, and web10n frameworks.</p>
<h4 id="Django">Django</h4>
<ol>
  <li>You can find the Pontoon hook on <a href="https://github.com/rtnpro/django-pontoon-hook" title="https://github.com/rtnpro/django-pontoon-hook">github here</a>.</li>
  <li>To install the hook, run this command in your terminal: <code>pip install -e git+git://github.com/rtnpro/django-pontoon-hook.git@master#egg=django_pontoon_hook</code></li>
  <li>Add <code>pontoon_hook</code> to your <code>settings.INSTALLED_APPS</code> setting.</li>
  <li>Add <code>pontoon_hook.middleware.PontoonMiddleware</code> to your <code>settings.MIDDLEWARE_CLASSES</code> setting, preferably as the last item.</li>
</ol>
<h4>PHP</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 id="Adding_your_project_to_Pontoon">Adding your project to Pontoon</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Outline</p>
<div id="magicdomid17">
  &nbsp;</div>
<div id="magicdomid18">
  <ul class="list-bullet2">
    <li><span class="author-g-nwdfet2mddohhflo">Django</span><span class="author-g-evt20vnn5scs77er">: </span><span class="author-g-evt20vnn5scs77er url"><a href="https://github.com/rtnpro/django-pontoon-hook">https://github.com/rtnpro/django-pontoon-hook</a></span></li>
  </ul>
</div>
<div id="magicdomid19">
  <ul class="list-bullet2">
    <li><span class="author-g-evt20vnn5scs77er">PHP: </span><span class="author-g-evt20vnn5scs77er url"><a href="https://github.com/mathjazz/pontoon/blob/master/hooks/php/pontoon.php">https://github.com/mathjazz/pontoon/blob/master/hooks/php/pontoon.php</a></span></li>
  </ul>
</div>
<div id="magicdomid20">
  <ul class="list-bullet2">
    <li><span class="author-g-evt20vnn5scs77er">webL10n: include pontoon.js</span><span class="author-g-nwdfet2mddohhflo"> (see Pontoon home page)</span></li>
  </ul>
</div>
<div id="magicdomid21">
  <ul class="list-bullet1">
    <li><span>Admin: add project</span></li>
  </ul>
</div>
<div id="magicdomid22">
  <ul class="list-bullet2">
    <li><span class="author-g-evt20vnn5scs77er">mandatory: </span><span>name, URL, locales, SVN/</span><span class="author-g-evt20vnn5scs77er">HG/</span><span>Transifex repo</span></li>
  </ul>
</div>
<div id="magicdomid23">
  <ul class="list-bullet2">
    <li><span class="author-g-evt20vnn5scs77er">optional: checkboxes, </span><span>subpages, </span><span class="author-g-evt20vnn5scs77er">general </span><span>info</span></li>
  </ul>
</div>
<div id="magicdomid24">
  &nbsp;</div>
<div id="magicdomid25">
  <span class="b"><b>Remove the database and create the new one:</b></span></div>
<div id="magicdomid26">
  <span>./manage.py sqlclear base | ./manage.py dbshell &amp;&amp; ./manage.py syncdb</span></div>
<div id="magicdomid27">
  <ul class="list-bullet1">
    <li><span class="author-g-evt20vnn5scs77er">D</span><span>oes not remove User, but removes UserProfile</span><span class="author-g-evt20vnn5scs77er"> -&gt;</span><span> recreate users</span></li>
  </ul>
</div>
<div id="magicdomid28">
  &nbsp;</div>
<div id="magicdomid29">
  <span class="b"><b>Install requirements in VM (requirements dev file?):</b></span></div>
<div id="magicdomid30">
  <span>sudo apt-get install python-svn mercurial</span></div>
<p>&nbsp;</p>
Revert to this revision