~cadence/bibliogram-docs: docs/Translating.md

#Translating Bibliogram

Scroll to the bottom of this document for context of which string corresponds to which part of the page.

#Creating a new translation

#The easy way: just translate the file

In the Bibliogram code repository, copy /src/lang/en.js (or another existing language that you know well) to a new file. Translate all the parts. Paste the result into the body of an email, and send it to the bibliogram-devel mailing list.

Make sure to also include the name of the language that should be displayed in the settings menu. This should be written in its own language. For example, the listing for French would be français, since that is the French word for the French language.

Reminder: scroll to the bottom of this document to see the context for all the strings.

You won't be able to actually test your changes with this. If you want to test, you must follow the next section, "the complete way".

#The complete way: create a patch to add the language

Before you can start, get set up with the submitting a patchset guide.

Then edit /config.js to have these contents, which will enable more obvious warnings if you forget to translate something.

module.exports = {
    language_dev: true
}

Then copy /src/lang/en.js (or another existing language that you know well) to a new file, saving it as the two letter code of your language with the .js extension in the same folder.

If it doesn't already exist, add this code snippet to the top of the file, as lines 3-4. This will make the language use English as a fallback in future if Bibliogram is updated and your language file is not immediately updated with it. (If you want, you can change en.js to another language, if you think a different fallback is appropriate.)

const constants = require("../lib/constants")
if (!constants.language_dev) Object.assign(data, require("./en.js"))

Finally, you're on to the interesting part!

Translate the contents of the new file to your language. While working on the translation, you may wish to comment out lines that you haven't translated yet using // at the start of the line. This way, things that you haven't translated will be syntax highlighted in your editor, and they will show as MISSING STRING on the webpage.

Open /src/lang/index.js and inside the Lang constructor, find the array of language codes (at time of writing, it's on line 10 with contents like ["en", "en-us", "es", "fa",...) and add your new language code to that array.

Open /src/site/pug/settings.pug and find the +select language mixin. Add your new language to that list, with the country code as value, and the name (e.g. Français) as text.

Save all the files, start Bibliogram, go to the settings page, select the language, and make sure everything works as intended. If it doesn't, go back and edit the files. At the time of writing this document, you will need to restart Bibliogram to apply changes to language strings.

Once everything works properly, create and send a patchset as described in the patchset guide. Thank you for contributing!!

If you like, you can examine these translation patches as a reference:

#String prefix reference

html_ means the contents must be HTML text. You can either write HTML directly, or invoke the Pug compiler to produce it.
pug_ means the contents must be a Pug template function. You must use the Pug compiler.
fn_ means the contents must be a JavaScript function. Arrow functions => are suggested.
meta_ is for internal use and manages data about that language. It is not displayed directly, but it is used by code related to displaying the language. For example, meta_direction can be ltr or rtl to specify which direction the language script is written in.
All other prefixes: a normal string, which will be displayed in one specific place within Bibliogram.
t_ is also a normal string, but it has semantic meaning: ideally, the text enclosed should be a translation of just a word or concept, which could be added to multiple places within Bibliogram.

When in doubt, just style the content like whatever en.js is doing.

#String location reference

These images show where strings are located on pages so that you can easily find the context for what you're translating, without having to run Bibliogram yourself to test.