Skip to content

Commit

Permalink
Merge branch 'i18next'
Browse files Browse the repository at this point in the history
  • Loading branch information
ricktu288 committed Dec 11, 2024
2 parents eaa2adf + 3c5b777 commit c16d6f9
Show file tree
Hide file tree
Showing 467 changed files with 12,817 additions and 73,887 deletions.
4 changes: 3 additions & 1 deletion .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ jobs:
steps:
- name: Checkout code
uses: actions/checkout@v2
with:
fetch-depth: 0

- name: Install system dependencies
run: |
Expand All @@ -29,7 +31,7 @@ jobs:
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
node-version: '22'

- name: Install dependencies
run: npm install
Expand Down
7 changes: 7 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"i18n-ally.localesPaths": ["locales"],
"i18n-ally.namespace": true,
"i18n-ally.enabledFrameworks": ["i18next"],
"i18n-ally.pathMatcher": "{locale}/{namespace}.json",
"i18n-ally.keystyle": "nested",
}
72 changes: 25 additions & 47 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,61 +17,41 @@ For direct contributions, see the following guidelines.

1. Fork this repo and clone locally. If you have forked previously, sync to get the latest changes.

2. Add the JSON file in `src/webpages/gallery/` (follow the naming convention there).
2. Run `npm install` (you don't need to run build).

3. If the work contains a background image, put it also in `src/webpages/gallery/`, and edit the `.json` file to include <code>backgroundImage": "<var>IMAGE_FILENAME</var>"</code>.
3. Run `npm run add-to-gallery` and follow the instructions there.

4. Commit your changes, push to your fork, and create a pull request.

## Contributing translations

You can submit a complete or partial translation for a new language, make progress to an incomplete language, or improve translation for an existing language. You don't need to understand the code to do the translation. Currently, the translation of the Gallery can only be done manually.
1. Download the target locale file:
- German: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/de.json
- Spanish: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/es.json
- French: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/fr.json
- Japanese: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/ja.json
- Korean: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/ko.json
- Dutch: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/nl.json
- Polish: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/pl.json
- Brazilian Portuguese: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/pt_BR.json
- Russian: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/ru.json
- Sinhala: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/si.json
- Traditional Chinese: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/zh_TW.json
- Simplified Chinese: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/zh_CN.json
- Template for a new language: https://raw.githubusercontent.com/ricktu288/ray-optics/master/locales/template.json

_NOTE: If it is indicated above (or in some PR) that some update for a language has been submitted but not yet merged, please wait until it is merged to avoid repeated translation._
2. Translate the phrase/sentence in the quotation after `"message":` to the target language. If you encounter `<` and `>`, leave the text between them untouched; `&amp;` means the "&" symbol; `\"` means a quote, and `&nbsp;` means an extra space. If the translation of an item is completed, remove the line `"incomplete": true,`. For example,
```javascript
"welcome": {
"incomplete": true,
"message": "<span style=\"font-size:22pt\">Welcome to Ray Optics Simulation</span><br>To add an optical component, select a tool and click the blank space.<br>To load an example, please <a href=\"https://phydemo.app/ray-optics/gallery/\">go to the Gallery page</a>."
},
```
becomes (for Traditional Chinese)
```javascript
"welcome": {
"message": "<span style=\"font-size:22pt\">歡迎使用「線光學模擬」</span><br>若要加入光學元件,請選擇工具並點擊空白處。<br>若要載入範例,<a href=\"https://phydemo.app/ray-optics/gallery/\">請前往「作品集」頁面</a>。"
},

```
After that, you can submit the translated file with either method below:
> [!NOTE]
> There will likely be an online collaboration tool for translation in the near future.
You can submit a complete or partial translation for a new language, make progress to an incomplete language, or improve translation for an existing language. The locale strings are in the `locales/` folder and is in the json format of i18next. Currently the best way to do the translation is to use an offline translation editor such as the i18n Ally extension for VSCode.

For each language, there are four json files:

- `main.json`: The strings for the homepage and the "Tools" and "View" toolbar of the simulator.
- `simulator.json`: The resto of the strings for the simulator.
- `gallery.json`: The strings for the Gallery page and of all the items in the Gallery.
- `modules.json`: The strings for the modules page, the module items, and the module tutorial page.

The `main.json` and `simulator.json` are the most important ones, and should be translated first.

If you already started the translation with the old json format before Dec 11, 2024, you can still submit that (which will be converted to the new format by some automatic script). But please do not start a new translation with the old format.

You can submit the translated file with either method below:

**Method 1: By e-mail**

3. Send the resulting file to [email protected]. Include the name of the language and your name to appear on the [list of contributors](https://phydemo.app/ray-optics/about).
Send the resulting files to [email protected]. Include the name of the language and your name to appear on the [list of contributors](https://phydemo.app/ray-optics/about).

**Method 2: Via GitHub** (preferred if you use GitHub)

3. Fork this repo and clone locally. If you have forked previously, sync to get the latest changes.

4. Save/replace the file as <code><var>LOCALE_ID</var>.json</code> in `locales/`.
5. _(optional)_ If it is a new language, modify the locale list in `locales/sync.js`.
6. _(optional)_ Add/modify the translation of the welcome messages in `src/simulator/index.html`.
7. _(optional)_ Add/modify <code>src/webpages/<var>LOCALE_ID</var>/index.html</code>.
8. _(optional)_ Add/modify the language-related metadata and the language dropdowns of the homepages in all locales and the simulator for the new locale.
9. Commit your changes, push to your fork, and create a pull request.
1. Fork this repo and clone locally. If you have forked previously, sync to get the latest changes.
2. Save/replace the locale files. If it is a new language, just create the new folder in `locales/` with the locale ID as the name.
3. Commit your changes, push to your fork, and create a pull request.

## Contributing modules

Expand All @@ -86,11 +66,9 @@ See Tools -> Others -> Import Modules for more information about modules. See [t

1. Fork this repo and clone locally. If you have forked previously, sync to get the latest changes.

2. Add the JSON file in `src/webpages/modules/` (follow the naming convention there).

3. _(optional)_ Take a PNG screenshot for the thumbnail.
2. Run `npm install` (you don't need to run build).

4. _(optional)_ Edit `src/webpages/modules/data.json` with a text editor. This file contains the metadata for all the modules. The ID of an item is the JSON file name without the `.json`. If you replace an existing items, you can change the title but not the ID, and you should append you name in the list of contributors.
3. Run `npm run add-to-modules` and follow the instructions there.

5. Commit your changes, push to your fork, and create a pull request.

Expand Down
43 changes: 21 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,37 +52,40 @@ To contribute code, you need to have some knowledge of JavaScript and module bun
# Installation

> [!NOTE]
> The following instructions are for developers. If you just want to use the simulator, you can launch the web app directly from [here](https://phydemo.app/ray-optics/simulator/).
> The following instructions are for those who want to install the project locally. If you just want to use the web app, you can launch it directly from [here](https://phydemo.app/ray-optics/simulator/).
To install the project locally, you need to have Node.js installed. Then, run the following commands in the terminal:
To run the web app locally, you need to have Node.js installed. Then, run the following commands in the terminal:
```bash
git clone https://github.com/ricktu288/ray-optics.git
cd ray-optics
npm install --no-optional
npm run start
```
After that, the simulator web app should be running at `http://localhost:8080/simulator/`. Note however that some links and the "import module" window will not work because the other part of the project is not built.

If you want to build the entire project, including the home pages, gallery, modules, documentation, and the node version of the simulator, you can run the following command:
```bash
npm install
npm run build
```
After that, the entire content for the [https://phydemo.app/ray-optics](https://phydemo.app/ray-optics) website will be in the `dist` folder. For example, you can open the `dist/simulator/index.html` file in your browser to run the simulator.
After that, the entire content for the [https://phydemo.app/ray-optics](https://phydemo.app/ray-optics) website will be in the `dist` folder.

If an error occurs during the installation, some common reasons are:
- The version of Node.js is too old. You can update Node.js to version 18 or later.
- Some system dependencies for node-canvas are missing. You can find the instructions for installing the dependencies in the [node-canvas repository](https://github.com/Automattic/node-canvas).

The full build may takes about half an hour to complete due to the generation of the large numbers of images for the gallery. See the following section if you only want to build the simulator.
The full build may takes about half an hour to complete due to the generation of the large numbers of images for the gallery.

## Development

For development, you don't need to build the entire website every time some code is changed. Instead, you can run the following command to start a local server:
```bash
npm run start
```
which serves the simulator web app at `http://localhost:8080`, and is automatically reloaded when some code for the simulator is modified. However, this does not include other part of this project such as the home pages, gallery and documentation. The separate build commands are available for these pages:
For development of the web app, you can just use `npm run start`, and the web app will be automatically reloaded when some code for the simulator is modified. However, to rebuild some other part of this project, you need to run the following commands:
```bash
# build translations
npm run build-translations

# build home pages, about pages, gallery (not including image generation), and modules pages.
# build home pages, about pages, gallery, and modules pages (not including scenes and image generation).
npm run build-webpages

# build the scenes for the gallery and modules pages.
npm run build-scenes

# build the node module version of the simulator, which is required for the image generation.
npm run build-node

Expand All @@ -97,18 +100,14 @@ npm run build-docs
```
Note that `npm run build` is equivalent to running all the above commands.

If you add new translatable strings to `src/translations/en.json`, you can run the following command to synchronize the strings to other languages so that translators can see the new strings to translate:
```bash
npm run sync-translations
```

## Project structure

- `src` contains the source code for the project.
- `src/simulator` contains the source code for the simulator app. To understand the structure of the code, see the [documentation](https://phydemo.app/ray-optics/docs/) for more information. The documentation is generated from the jsdoc comments in the code.
- `src/simulator` contains the source code for the simulator app, which is to be built by webpack. To understand the structure of the code, see the [documentation](https://phydemo.app/ray-optics/docs/) for more information. The documentation is generated from the jsdoc comments in the code.
- `src/simulator-node` contains the source code for the node module version of the simulator.
- `src/webpages` contains the code for the home pages, about pages, templates for gallery and module pages, and the JSON files for the gallery and modules.
- `locales` contains the translations for the project. Currently it is only automatically built for the simulator app. The translations for the webpages, gallery, and modules pages are manually built.
- `src/webpages` contains the handlebars templates for the home, about, gallery and module pages, to be built by `scripts/buildWebpages.mjs`.
- `data` contains the data for gallery, modules, and the list of contributors.
- `locales` contains the translations for the project in i18next format.
- `scripts` contains the scripts for custom build steps.
- `dist` contains the built files for the project (the entire content for the [https://phydemo.app/ray-optics](https://phydemo.app/ray-optics) website).
- `dist-node` contains the built files for the node module version of the simulator, which is required for the image generation, and can also be used in your own project.
Expand All @@ -124,7 +123,7 @@ After that, you can use the simulator in your own project by importing the modul
const { Scene, Simulator, sceneObjs, geometry } = require('path/to/ray-optics/dist-node/main.js');
```

See the [documentation](https://phydemo.app/ray-optics/docs/) for more information about the API. For a usage example, see the [image generation script](https://github.com/ricktu288/ray-optics/blob/master/scripts/buildImages.js).
See the [documentation](https://phydemo.app/ray-optics/docs/) for more information about the API. For a usage example, see the [image generation script](https://github.com/ricktu288/ray-optics/blob/master/scripts/buildImages.mjs).


# License
Expand Down
Loading

0 comments on commit c16d6f9

Please sign in to comment.