mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(i18n,docs): processed translations (#51536)
This commit is contained in:
camperbot
@@ -10,6 +10,7 @@
|
||||
- [Follow best-practices](codebase-best-practices.md)
|
||||
- [Work on Codebase](how-to-contribute-to-the-codebase.md)
|
||||
- [Work on Coding Challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Use the Curriculum Helpers](curriculum-help.md)
|
||||
- [Work on Component Library](how-to-work-on-the-component-library.md)
|
||||
- [Work on Practice Projects](how-to-work-on-practice-projects.md)
|
||||
- [Work on Mobile app](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ When renaming a certification, you will likely want to rename the associated sup
|
||||
1. Optionally, update the `certSlug` for the superblock in the same file. **Note** that renaming a `certSlug` will change the URL for certifications and should only be done with careful consideration.
|
||||
1. Update the `title` in `client/src/resources/cert-and-project-map.ts` to the new value. **Note** that changing the `title` here **will break** the superBlock page for the associated certification. It relies on the superBlock title to match the certification title. You will likely want to rename the superBlock at the same time.
|
||||
1. If you renamed the `certSlug` in step 7, change it here for the cert and all the nested `projects` values.
|
||||
1. In `config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. In `shared/config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. If you renamed the `certSlug` in step 7, update the key of `certSlugTypeMap` in the same file.
|
||||
1. Update the certificate name in the `legacyCerts` array of the `client/src/client-only-routes/show-project-links.tsx` if needed.
|
||||
1. Update the main `README.md` file to the new name.
|
||||
@@ -69,10 +69,10 @@ Also, you will likely want to rename the certificate and the `{superBlock}-proje
|
||||
1. Update the `index.md` file in the above folder, changing the `title` and `superBlock` values to the new name.
|
||||
1. For each block folder within the above, update the `index.md` to use the correct `superBlock` value.
|
||||
1. In the `client/src/resources/cert-and-project-map.ts` file, update the path for the cert at the top of the file, and the `title` value for that superBlock. **Note** that changing the `title` here **will break** the ability to view the actual certification for this superBlock. It relies on the superBlock title to match the certification title. You will likely want to rename the certification at the same time.
|
||||
1. Update the `superBlockCertTypeMap` key in `config/certification-settings.js` to the new superBlock name.
|
||||
1. Update the `superBlockCertTypeMap` key in `shared/config/certification-settings.js` to the new superBlock name.
|
||||
1. Update the path value in `client/src/assets/icons/index.tsx`.
|
||||
1. For each language in `client/i18n/locales`, update the `intro.json` file to use the new superBlock `dashedName`. In the English file, also update the `title`.
|
||||
1. Check the `config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Update all the values where it is used.
|
||||
1. Check the `shared/config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Update all the values where it is used.
|
||||
1. Update the main `README.md` file to the new name.
|
||||
|
||||
### Renaming a Block
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Using the Curriculum Helpers
|
||||
|
||||
The test runner has access to a few helpers that can assist with testing campers' code.
|
||||
|
||||
## CSS Helper
|
||||
|
||||
To instantiate the helper within a test block, use this:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
In that example, the `document` variable refers to the document object of the test runner's iframe.
|
||||
|
||||
### Methods
|
||||
|
||||
There are a few methods available for parsing and testing CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
The `.getStyle()` method takes a CSS selector and returns a CSS style declaration object.
|
||||
|
||||
For example, if the camper has written the following CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
You would get an object that looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This method allows you to test that specific properties have been set:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
The helper attaches a `.getPropVal()` method to the style declaration object that allows you to get the value of a specific property:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
The `.getCSSRules()` takes an at-rule type from the union `media | fontface | import | keyframes`, and returns an array of CSS rules matching that at-rule.
|
||||
|
||||
For example, if the camper has written the following code:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then the returned value of `helper.getCSSRules('media')` would be this array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can then test that the camper has written the correct media query:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
The `.getRuleListsWithinMedia()` method takes a media text (e.g. `("max-width: 200")`) and returns the CSS rules within that media query.
|
||||
|
||||
The return result is the equivalent of that media rule's `cssRules` property from the return value of `.getCSSRules("media")`.
|
||||
|
||||
### Less Frequent Methods
|
||||
|
||||
These methods are not as commonly used, but are available if needed.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
The `.getStyleDeclarations()` method takes a CSS selector and returns an array of CSS style declaration objects (from the `.getStyle()` method).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
The `.isPropertyUsed()` method takes a CSS **property** and checks if it has been set/used anywhere in the camper's CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
The `.getStyleRule()` method takes a CSS selector and returns the CSS Style Declaration, much like `.getStyle()`. However, the declaration returned from this method includes an additional `.isDeclaredAfter()` method which takes a selector and returns whether this rule is declared after the selector passed in.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
The `.getStyleSheet()` method returns the camper's CSS, parsed into a CSS Style Sheet object.
|
||||
|
||||
## Strip Content
|
||||
|
||||
There are a few methods on the `__helpers` object to remove content from the camper's code.
|
||||
|
||||
These do NOT need to be instantiated they are static methods.
|
||||
|
||||
### Removing Comments
|
||||
|
||||
Using `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()`, or `__helpers.removeJSComments()` allows you to pass the camper's code (through the `code` variable) to remove comments matching the language's comment syntax.
|
||||
|
||||
### Removing Whitespace
|
||||
|
||||
Using `__helpers.removeWhitespace()` allows you to pass the camper's code (through the `code` variable) to remove all whitespace.
|
||||
@@ -58,7 +58,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
@@ -163,7 +163,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
|
||||
- Create a config file.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
@@ -191,4 +191,4 @@ To run all Playwright tests, run the following command:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Note that the `download_language` key needs to be set to the language code displ
|
||||
|
||||
There are a few steps to take in order to allow the codebase to build in your desired language.
|
||||
|
||||
First, visit the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. There are several objects here.
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. There are several objects here.
|
||||
|
||||
- `Languages`: Add the new language to `Languages` enum, similar to the others. The string value here will be used in the `.env` file to set a build language later.
|
||||
- `availableLangs`: Add the new property from the `Languages` enum to both the `client` and `curriculum` arrays.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Set Translated SuperBlocks
|
||||
|
||||
In the [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
In the [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Once these are in place, you should be able to run `pnpm run develop` to view yo
|
||||
|
||||
When your prior PR is merged and the VM for your language is ready, make another PR to show your language in the navigation menu.
|
||||
|
||||
In [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove your language from the array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Add the i18next JSON Files for the New Language
|
||||
|
||||
Next, go to the `config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
Next, go to the `shared/config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
|
||||
Then copy the JSON files from the `english` directory to your new folder.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Some examples of good PR titles would be:
|
||||
|
||||
- This is very important when making changes that are not just edits to text content like documentation or a challenge description. Examples of changes that need local testing include JavaScript, CSS, or HTML, which could change the functionality or layout of a page.
|
||||
|
||||
- If your PR affects the behaviour of a page it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
- If your PR affects the behaviour of a page, it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
|
||||
## Feedback on Pull Requests
|
||||
|
||||
@@ -107,7 +107,7 @@ And as always, feel free to ask questions on the ['Contributors' category on our
|
||||
|
||||
Conflicts can arise because many contributors work on the repository, and changes can break your PR which is pending a review and merge.
|
||||
|
||||
More often than not you may not require a rebase, because we squash all commits, however, if a rebase is requested, here is what you should do.
|
||||
Since we squash all commits, you may not need to do a rebase. However, if a rebase is requested, check our [For Usual Bug Fixes and Features](#for-usual-bug-fixes-and-features) or [For Upcoming Curriculum and Features](#for-upcoming-curriculum-and-features) guides to learn how to do this process for your corresponding PR.
|
||||
|
||||
### For Usual Bug Fixes and Features
|
||||
|
||||
@@ -185,7 +185,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
git cherry-pick <commit-hash>
|
||||
```
|
||||
|
||||
4. Resolve any conflicts, cleanup, install dependencies and run tests
|
||||
4. Resolve any conflicts, cleanup, and install dependencies and run tests
|
||||
|
||||
```console
|
||||
pnpm run clean
|
||||
@@ -199,7 +199,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
|
||||
```
|
||||
|
||||
5. If everything looks good push back to the PR
|
||||
5. If everything looks good, push back to the PR
|
||||
|
||||
```console
|
||||
git push --force origin <pr-branch-name>
|
||||
|
||||
@@ -233,7 +233,7 @@ The keys in the `.env` file are _not_ required to be changed to run the app loca
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Step 3: Start MongoDB and Seed the Database
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Install the dependencies for the freeCodeCamp repo:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Generate the challenge data JSON file:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Some of these files are translated on our translation platform (Crowdin) and som
|
||||
|
||||
## Testing the Client App in a World Language
|
||||
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
If you are testing a new language, create a folder with the language name as the title next to the other languages and copy the JSON files from another language into your new folder.
|
||||
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file.
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file.
|
||||
|
||||
Next, follow the instructions in the comments in the same file to add/update the rest of the variables as needed.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ You will want to [build the translated client locally](how-to-enable-new-languag
|
||||
|
||||
1. Update your `.env` file to use your language for `CLIENT_LOCALE` and `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Run `pnpm run create:config`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
2. Run `pnpm run create:shared`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
|
||||
3. Start the server by running `pnpm run develop:server` in one terminal window.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Follow best-practices](codebase-best-practices.md)
|
||||
- [Work on Codebase](how-to-contribute-to-the-codebase.md)
|
||||
- [Work on Coding Challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Use the Curriculum Helpers](curriculum-help.md)
|
||||
- [Work on Component Library](how-to-work-on-the-component-library.md)
|
||||
- [Work on Practice Projects](how-to-work-on-practice-projects.md)
|
||||
- [Work on Mobile app](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ When renaming a certification, you will likely want to rename the associated sup
|
||||
1. Optionally, update the `certSlug` for the superblock in the same file. **Note** that renaming a `certSlug` will change the URL for certifications and should only be done with careful consideration.
|
||||
1. Update the `title` in `client/src/resources/cert-and-project-map.ts` to the new value. **Note** that changing the `title` here **will break** the superBlock page for the associated certification. It relies on the superBlock title to match the certification title. You will likely want to rename the superBlock at the same time.
|
||||
1. If you renamed the `certSlug` in step 7, change it here for the cert and all the nested `projects` values.
|
||||
1. In `config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. In `shared/config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. If you renamed the `certSlug` in step 7, update the key of `certSlugTypeMap` in the same file.
|
||||
1. Update the certificate name in the `legacyCerts` array of the `client/src/client-only-routes/show-project-links.tsx` if needed.
|
||||
1. Update the main `README.md` file to the new name.
|
||||
@@ -69,10 +69,10 @@ Also, you will likely want to rename the certificate and the `{superBlock}-proje
|
||||
1. Update the `index.md` file in the above folder, changing the `title` and `superBlock` values to the new name.
|
||||
1. For each block folder within the above, update the `index.md` to use the correct `superBlock` value.
|
||||
1. In the `client/src/resources/cert-and-project-map.ts` file, update the path for the cert at the top of the file, and the `title` value for that superBlock. **Note** that changing the `title` here **will break** the ability to view the actual certification for this superBlock. It relies on the superBlock title to match the certification title. You will likely want to rename the certification at the same time.
|
||||
1. Update the `superBlockCertTypeMap` key in `config/certification-settings.js` to the new superBlock name.
|
||||
1. Update the `superBlockCertTypeMap` key in `shared/config/certification-settings.js` to the new superBlock name.
|
||||
1. Update the path value in `client/src/assets/icons/index.tsx`.
|
||||
1. For each language in `client/i18n/locales`, update the `intro.json` file to use the new superBlock `dashedName`. In the English file, also update the `title`.
|
||||
1. Check the `config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Update all the values where it is used.
|
||||
1. Check the `shared/config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Update all the values where it is used.
|
||||
1. Update the main `README.md` file to the new name.
|
||||
|
||||
### Renaming a Block
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Using the Curriculum Helpers
|
||||
|
||||
The test runner has access to a few helpers that can assist with testing campers' code.
|
||||
|
||||
## CSS Helper
|
||||
|
||||
To instantiate the helper within a test block, use this:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
In that example, the `document` variable refers to the document object of the test runner's iframe.
|
||||
|
||||
### Methods
|
||||
|
||||
There are a few methods available for parsing and testing CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
The `.getStyle()` method takes a CSS selector and returns a CSS style declaration object.
|
||||
|
||||
For example, if the camper has written the following CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
You would get an object that looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This method allows you to test that specific properties have been set:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
The helper attaches a `.getPropVal()` method to the style declaration object that allows you to get the value of a specific property:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
The `.getCSSRules()` takes an at-rule type from the union `media | fontface | import | keyframes`, and returns an array of CSS rules matching that at-rule.
|
||||
|
||||
For example, if the camper has written the following code:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then the returned value of `helper.getCSSRules('media')` would be this array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can then test that the camper has written the correct media query:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
The `.getRuleListsWithinMedia()` method takes a media text (e.g. `("max-width: 200")`) and returns the CSS rules within that media query.
|
||||
|
||||
The return result is the equivalent of that media rule's `cssRules` property from the return value of `.getCSSRules("media")`.
|
||||
|
||||
### Less Frequent Methods
|
||||
|
||||
These methods are not as commonly used, but are available if needed.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
The `.getStyleDeclarations()` method takes a CSS selector and returns an array of CSS style declaration objects (from the `.getStyle()` method).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
The `.isPropertyUsed()` method takes a CSS **property** and checks if it has been set/used anywhere in the camper's CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
The `.getStyleRule()` method takes a CSS selector and returns the CSS Style Declaration, much like `.getStyle()`. However, the declaration returned from this method includes an additional `.isDeclaredAfter()` method which takes a selector and returns whether this rule is declared after the selector passed in.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
The `.getStyleSheet()` method returns the camper's CSS, parsed into a CSS Style Sheet object.
|
||||
|
||||
## Strip Content
|
||||
|
||||
There are a few methods on the `__helpers` object to remove content from the camper's code.
|
||||
|
||||
These do NOT need to be instantiated they are static methods.
|
||||
|
||||
### Removing Comments
|
||||
|
||||
Using `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()`, or `__helpers.removeJSComments()` allows you to pass the camper's code (through the `code` variable) to remove comments matching the language's comment syntax.
|
||||
|
||||
### Removing Whitespace
|
||||
|
||||
Using `__helpers.removeWhitespace()` allows you to pass the camper's code (through the `code` variable) to remove all whitespace.
|
||||
@@ -58,7 +58,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
|
||||
@@ -163,7 +163,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
|
||||
- Create a config file.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
@@ -191,4 +191,4 @@ To run all Playwright tests, run the following command:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Note that the `download_language` key needs to be set to the language code displ
|
||||
|
||||
There are a few steps to take in order to allow the codebase to build in your desired language.
|
||||
|
||||
First, visit the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. There are several objects here.
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. There are several objects here.
|
||||
|
||||
- `Languages`: Add the new language to `Languages` enum, similar to the others. The string value here will be used in the `.env` file to set a build language later.
|
||||
- `availableLangs`: Add the new property from the `Languages` enum to both the `client` and `curriculum` arrays.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Set Translated SuperBlocks
|
||||
|
||||
In the [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
In the [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Once these are in place, you should be able to run `pnpm run develop` to view yo
|
||||
|
||||
When your prior PR is merged and the VM for your language is ready, make another PR to show your language in the navigation menu.
|
||||
|
||||
In [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove your language from the array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Add the i18next JSON Files for the New Language
|
||||
|
||||
Next, go to the `config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
Next, go to the `shared/config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
|
||||
Then copy the JSON files from the `english` directory to your new folder.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Some examples of good PR titles would be:
|
||||
|
||||
- This is very important when making changes that are not just edits to text content like documentation or a challenge description. Examples of changes that need local testing include JavaScript, CSS, or HTML, which could change the functionality or layout of a page.
|
||||
|
||||
- If your PR affects the behaviour of a page it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
- If your PR affects the behaviour of a page, it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
|
||||
## Feedback on Pull Requests
|
||||
|
||||
@@ -107,7 +107,7 @@ And as always, feel free to ask questions on the ['Contributors' category on our
|
||||
|
||||
Conflicts can arise because many contributors work on the repository, and changes can break your PR which is pending a review and merge.
|
||||
|
||||
More often than not you may not require a rebase, because we squash all commits, however, if a rebase is requested, here is what you should do.
|
||||
Since we squash all commits, you may not need to do a rebase. However, if a rebase is requested, check our [For Usual Bug Fixes and Features](#for-usual-bug-fixes-and-features) or [For Upcoming Curriculum and Features](#for-upcoming-curriculum-and-features) guides to learn how to do this process for your corresponding PR.
|
||||
|
||||
### For Usual Bug Fixes and Features
|
||||
|
||||
@@ -185,7 +185,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
git cherry-pick <commit-hash>
|
||||
```
|
||||
|
||||
4. Resolve any conflicts, cleanup, install dependencies and run tests
|
||||
4. Resolve any conflicts, cleanup, and install dependencies and run tests
|
||||
|
||||
```console
|
||||
pnpm run clean
|
||||
@@ -199,7 +199,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
|
||||
```
|
||||
|
||||
5. If everything looks good push back to the PR
|
||||
5. If everything looks good, push back to the PR
|
||||
|
||||
```console
|
||||
git push --force origin <pr-branch-name>
|
||||
|
||||
@@ -233,7 +233,7 @@ The keys in the `.env` file are _not_ required to be changed to run the app loca
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Step 3: Start MongoDB and Seed the Database
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Install the dependencies for the freeCodeCamp repo:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Generate the challenge data JSON file:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Some of these files are translated on our translation platform (Crowdin) and som
|
||||
|
||||
## Testing the Client App in a World Language
|
||||
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
If you are testing a new language, create a folder with the language name as the title next to the other languages and copy the JSON files from another language into your new folder.
|
||||
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file.
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file.
|
||||
|
||||
Next, follow the instructions in the comments in the same file to add/update the rest of the variables as needed.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ You will want to [build the translated client locally](how-to-enable-new-languag
|
||||
|
||||
1. Update your `.env` file to use your language for `CLIENT_LOCALE` and `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Run `pnpm run create:config`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
2. Run `pnpm run create:shared`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
|
||||
3. Start the server by running `pnpm run develop:server` in one terminal window.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Seguir las mejores prácticas de código](codebase-best-practices.md)
|
||||
- [Work on Codebase](how-to-contribute-to-the-codebase.md)
|
||||
- [Work on Coding Challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Use the Curriculum Helpers](curriculum-help.md)
|
||||
- [Work on Component Library](how-to-work-on-the-component-library.md)
|
||||
- [Work on Practice Projects](how-to-work-on-practice-projects.md)
|
||||
- [Work on Mobile app](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ Al renombrar una certificación, es probable que desees renombrar el súper bloq
|
||||
1. Como alternativa, actualiza el `certSlug` para el súper bloque en el mismo archivo. **Ten en cuenta** que renombrar un `certSlug` cambiará el URL para las certificaciones y solo debe hacerse con consideración.
|
||||
1. Actualiza el `title` en `client/src/resources/cert-and-project-map.ts` por el nuevo valor. **Ten en cuenta que** cambiar el `title` aquí **romperá** la página del súper bloque asociada a la certificación. Depende del título del súper Bloque para que coincida con el título de la certificación. Es probable que desees renombrar el súper bloque al mismo tiempo.
|
||||
1. Si renombraste `certSlug` en el paso 7, cámbialo aquí para el "cert" y todos los valores de `projects` anidados.
|
||||
1. En `config/certification-settings.js`, actualiza el valor de `certTypeTitleMap` al nuevo nombre.
|
||||
1. In `shared/config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. Si renombraste el `certSlug` en el paso 7, actualiza la clave de `certSlugTypeMap` en el mismo archivo.
|
||||
1. Actualiza el nombre del certificado en el arreglo `legacyCerts` dentro del `client/src/client-only-routes/show-project-links.tsx` si es necesario.
|
||||
1. Actualiza el archivo principal `README.md` al nuevo nombre.
|
||||
@@ -69,10 +69,10 @@ Además, es probable que desees renombrar el certificado y el bloque `{superBlo
|
||||
1. Actualiza el archivo `index.md` en la carpeta superior, cambiado los valores de `title` y `superBlock` al nuevo nombre.
|
||||
1. Para cada carpeta de bloque dentro de la superior, actualiza el `index.md` para que utilice el valor de `superBlock` correcto.
|
||||
1. En el archivo `cliente/src/recursos/cert-and-project-map.ts`, actualiza la ruta para certificado en la parte superior del archivo y el valor `title` para ese súper bloque. **Ten en cuenta** que cambiar el `title` aquí **interrumpirá** la capacidad de ver la certificación real para este súper bloque. Depende del título del súper Bloque para que coincida con el título de la certificación. Es probable que desees renombrar la certificación al mismo tiempo.
|
||||
1. Actualiza la clave `superBlockCertTypeMap` en `config/certification-settings.js` al nuevo nombre del súper Bloque.
|
||||
1. Update the `superBlockCertTypeMap` key in `shared/config/certification-settings.js` to the new superBlock name.
|
||||
1. Actualiza el valor de la ruta en `client/src/assets/icons/index.tsx`.
|
||||
1. Para cada idioma en `client/i18n/locales`, actualiza el archivo `intro.json` para que utilice el nuevo `dashedName` (nombre con guiones) del súper Bloque. En el archivo en inglés, actualiza también el `title`.
|
||||
1. Verifique el archivo `config/i18n/all-langs.js` para ver si el súper Bloque está habilitado en las compilaciones de i18n. Actualiza todos los valores donde sea usado.
|
||||
1. Check the `shared/config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Actualiza todos los valores donde sea usado.
|
||||
1. Actualiza el archivo principal `README.md` al nuevo nombre.
|
||||
|
||||
### Renombrando un bloque
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Using the Curriculum Helpers
|
||||
|
||||
The test runner has access to a few helpers that can assist with testing campers' code.
|
||||
|
||||
## CSS Helper
|
||||
|
||||
To instantiate the helper within a test block, use this:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
In that example, the `document` variable refers to the document object of the test runner's iframe.
|
||||
|
||||
### Methods
|
||||
|
||||
There are a few methods available for parsing and testing CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
The `.getStyle()` method takes a CSS selector and returns a CSS style declaration object.
|
||||
|
||||
For example, if the camper has written the following CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
You would get an object that looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This method allows you to test that specific properties have been set:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
The helper attaches a `.getPropVal()` method to the style declaration object that allows you to get the value of a specific property:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
The `.getCSSRules()` takes an at-rule type from the union `media | fontface | import | keyframes`, and returns an array of CSS rules matching that at-rule.
|
||||
|
||||
For example, if the camper has written the following code:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then the returned value of `helper.getCSSRules('media')` would be this array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can then test that the camper has written the correct media query:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
The `.getRuleListsWithinMedia()` method takes a media text (e.g. `("max-width: 200")`) and returns the CSS rules within that media query.
|
||||
|
||||
The return result is the equivalent of that media rule's `cssRules` property from the return value of `.getCSSRules("media")`.
|
||||
|
||||
### Less Frequent Methods
|
||||
|
||||
These methods are not as commonly used, but are available if needed.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
The `.getStyleDeclarations()` method takes a CSS selector and returns an array of CSS style declaration objects (from the `.getStyle()` method).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
The `.isPropertyUsed()` method takes a CSS **property** and checks if it has been set/used anywhere in the camper's CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
The `.getStyleRule()` method takes a CSS selector and returns the CSS Style Declaration, much like `.getStyle()`. However, the declaration returned from this method includes an additional `.isDeclaredAfter()` method which takes a selector and returns whether this rule is declared after the selector passed in.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
The `.getStyleSheet()` method returns the camper's CSS, parsed into a CSS Style Sheet object.
|
||||
|
||||
## Strip Content
|
||||
|
||||
There are a few methods on the `__helpers` object to remove content from the camper's code.
|
||||
|
||||
These do NOT need to be instantiated they are static methods.
|
||||
|
||||
### Removing Comments
|
||||
|
||||
Using `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()`, or `__helpers.removeJSComments()` allows you to pass the camper's code (through the `code` variable) to remove comments matching the language's comment syntax.
|
||||
|
||||
### Removing Whitespace
|
||||
|
||||
Using `__helpers.removeWhitespace()` allows you to pass the camper's code (through the `code` variable) to remove all whitespace.
|
||||
@@ -58,7 +58,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Propaga la base de datos
|
||||
|
||||
@@ -163,7 +163,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
|
||||
- Create a config file.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
@@ -191,4 +191,4 @@ To run all Playwright tests, run the following command:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Ten en cuenta que la opción `download_language` deberá corresponder al código
|
||||
|
||||
Hay algunos pasos a seguir para permitirle a la base de código compilarse a tu idioma de preferencia.
|
||||
|
||||
First, visit the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. Aquí hay varios objetos.
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. Aquí hay varios objetos.
|
||||
|
||||
- `Languages`: Add the new language to `Languages` enum, similar to the others. The string value here will be used in the `.env` file to set a build language later.
|
||||
- `availableLangs`: Add the new property from the `Languages` enum to both the `client` and `curriculum` arrays.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Set Translated SuperBlocks
|
||||
|
||||
In the [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
In the [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Once these are in place, you should be able to run `pnpm run develop` to view yo
|
||||
|
||||
When your prior PR is merged and the VM for your language is ready, make another PR to show your language in the navigation menu.
|
||||
|
||||
In [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove your language from the array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Add the i18next JSON Files for the New Language
|
||||
|
||||
Next, go to the `config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
Next, go to the `shared/config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
|
||||
Then copy the JSON files from the `english` directory to your new folder.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Some examples of good PR titles would be:
|
||||
|
||||
- Esto es muy importante cuando se hagan cambios que no sean solo ediciones del contenido de texto como documentación o una descripción de un desafío. Examples of changes that need local testing include JavaScript, CSS, or HTML, which could change the functionality or layout of a page.
|
||||
|
||||
- Si tu PR afecta el comportamiento de una página, debe ir acompañada de la correspondiente [pruebas de integración de Cypress](how-to-add-cypress-tests.md).
|
||||
- If your PR affects the behaviour of a page, it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
|
||||
## Feedback on Pull Requests
|
||||
|
||||
@@ -107,7 +107,7 @@ And as always, feel free to ask questions on the ['Contributors' category on our
|
||||
|
||||
Conflicts can arise because many contributors work on the repository, and changes can break your PR which is pending a review and merge.
|
||||
|
||||
More often than not you may not require a rebase, because we squash all commits, however, if a rebase is requested, here is what you should do.
|
||||
Since we squash all commits, you may not need to do a rebase. However, if a rebase is requested, check our [For Usual Bug Fixes and Features](#for-usual-bug-fixes-and-features) or [For Upcoming Curriculum and Features](#for-upcoming-curriculum-and-features) guides to learn how to do this process for your corresponding PR.
|
||||
|
||||
### For Usual Bug Fixes and Features
|
||||
|
||||
@@ -185,7 +185,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
git cherry-pick <commit-hash>
|
||||
```
|
||||
|
||||
4. Resolve any conflicts, cleanup, install dependencies and run tests
|
||||
4. Resolve any conflicts, cleanup, and install dependencies and run tests
|
||||
|
||||
```console
|
||||
pnpm run clean
|
||||
@@ -199,7 +199,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
|
||||
```
|
||||
|
||||
5. If everything looks good push back to the PR
|
||||
5. If everything looks good, push back to the PR
|
||||
|
||||
```console
|
||||
git push --force origin <pr-branch-name>
|
||||
|
||||
@@ -233,7 +233,7 @@ The keys in the `.env` file are _not_ required to be changed to run the app loca
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Step 3: Start MongoDB and Seed the Database
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Install the dependencies for the freeCodeCamp repo:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Generate the challenge data JSON file:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Some of these files are translated on our translation platform (Crowdin) and som
|
||||
|
||||
## Testing the Client App in a World Language
|
||||
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
Si estas probando un nuevo idioma, crea una carpeta con el nombre del idioma como titulo junto al otro idioma y copia los archivos JSON desde el otro idioma dentro de la nueva carpeta.
|
||||
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file.
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file.
|
||||
|
||||
A continuación, sigue las instrucciones en los comentarios en el mismo archivo para agregar/actualizar el resto de las variables tanto como se necesite.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ You will want to [build the translated client locally](how-to-enable-new-languag
|
||||
|
||||
1. Update your `.env` file to use your language for `CLIENT_LOCALE` and `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Run `pnpm run create:config`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
2. Run `pnpm run create:shared`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
|
||||
3. Start the server by running `pnpm run develop:server` in one terminal window.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Follow best-practices](codebase-best-practices.md)
|
||||
- [Work on Codebase](how-to-contribute-to-the-codebase.md)
|
||||
- [Work on Coding Challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Use the Curriculum Helpers](curriculum-help.md)
|
||||
- [Work on Component Library](how-to-work-on-the-component-library.md)
|
||||
- [Work on Practice Projects](how-to-work-on-practice-projects.md)
|
||||
- [Work on Mobile app](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ Wenn du eine Zertifizierung umbenennst, willst du wahrscheinlich auch den zugeh
|
||||
1. Optional aktualisiere den `certSlug` für den superblock in der gleichen Datei. **Beachte**, dass das Umbenennen eines `certSlug` die URL für die Zertifizierung ändern wird und sollte deshalb nur nach sorgfältiger Überlegung durchgeführt werden.
|
||||
1. Aktualisiere den `title` in `client/src/resources/cert-and-project-map.ts` auf den neuen Wert. **Beachte**, dass das Ändern des `title` hier **die SuperBlock-Seite für die zugehörige Zertifizierung unterbricht**. Er ist darauf angewiesen, dass der SuperBlock-Titel mit dem Titel der Zertifizierung übereinstimmt. Wahrscheinlich willst du den SuperBlock gleichzeitig umbenennen.
|
||||
1. Wenn du den `certSlug` in Schritt 7 umbenannt hast, ändere ihn hier für das cert und alle verschachtelten `projects`-Werte.
|
||||
1. Aktualisiere in `config/certification-settings.js` den Wert von `certTypeTitleMap` auf den neuen Namen.
|
||||
1. In `shared/config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. Wenn du den `certSlug` in Schritt 7 umbenannt hast, aktualisiere den key von`certSlugTypeMap` in derselben Datei.
|
||||
1. Aktualisiere bei Bedarf den Zertifikatsnamen im `legacyCerts`-Array von `client/src/client-only-routes/show-project-links.tsx`.
|
||||
1. Aktualisiere die Hauptdatei `README.md` auf den neuen Namen.
|
||||
@@ -69,10 +69,10 @@ Außerdem wirst du wahrscheinlich das Zertifikat und den `{superBlock}-projects`
|
||||
1. Aktualisiere die Datei `index.md` im oben genannten Ordner und ändere die Werte für `title` und `superBlock` auf den neuen Namen.
|
||||
1. Aktualisiere die `index.md` für jeden Blockordner, um den richtigen `superBlock`-Wert zu verwenden.
|
||||
1. In der Datei `client/src/resources/cert-and-project-map.ts` aktualisierst du den Pfad für das Zertifikat(cert) am Anfang der Datei und den `title`-Wert für diesen SuperBlock. **Beachte**, dass das Ändern des `title` hier **die Möglichkeit zerstört,** die eigentliche Zertifizierung für diesen SuperBlock anzuzeigen. Er ist darauf angewiesen, dass der SuperBlock-Titel mit dem Titel der Zertifizierung übereinstimmt. Wahrscheinlich möchtest du die Zertifizierung gleichzeitig umbenennen.
|
||||
1. Aktualisiere den `superBlockCertTypeMap` Schlüssel(key) in `config/certification-settings.js` auf den neuen SuperBlock-Namen.
|
||||
1. Update the `superBlockCertTypeMap` key in `shared/config/certification-settings.js` to the new superBlock name.
|
||||
1. Aktualisiere den Pfadwert in `client/src/assets/icons/index.tsx`.
|
||||
1. Aktualisiere für jede Sprache in `client/i18n/locales` die Datei `intro.json`, um den neuen SuperBlock `dashedName` zu verwenden. In der englischen Datei aktualisierst du auch den `title`.
|
||||
1. Überprüfe die Datei `config/i18n/all-langs.js`, um zu sehen, ob der SuperBlock in i18n-Builds aktiviert ist. Aktualisiere alle Werte, in denen er verwendet wird.
|
||||
1. Check the `shared/config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Aktualisiere alle Werte, in denen er verwendet wird.
|
||||
1. Aktualisiere die Hauptdatei `README.md` auf den neuen Namen.
|
||||
|
||||
### Umbenennen eines Blocks
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Using the Curriculum Helpers
|
||||
|
||||
The test runner has access to a few helpers that can assist with testing campers' code.
|
||||
|
||||
## CSS Helper
|
||||
|
||||
To instantiate the helper within a test block, use this:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
In that example, the `document` variable refers to the document object of the test runner's iframe.
|
||||
|
||||
### Methods
|
||||
|
||||
There are a few methods available for parsing and testing CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
The `.getStyle()` method takes a CSS selector and returns a CSS style declaration object.
|
||||
|
||||
For example, if the camper has written the following CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
You would get an object that looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This method allows you to test that specific properties have been set:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
The helper attaches a `.getPropVal()` method to the style declaration object that allows you to get the value of a specific property:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
The `.getCSSRules()` takes an at-rule type from the union `media | fontface | import | keyframes`, and returns an array of CSS rules matching that at-rule.
|
||||
|
||||
For example, if the camper has written the following code:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then the returned value of `helper.getCSSRules('media')` would be this array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can then test that the camper has written the correct media query:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
The `.getRuleListsWithinMedia()` method takes a media text (e.g. `("max-width: 200")`) and returns the CSS rules within that media query.
|
||||
|
||||
The return result is the equivalent of that media rule's `cssRules` property from the return value of `.getCSSRules("media")`.
|
||||
|
||||
### Less Frequent Methods
|
||||
|
||||
These methods are not as commonly used, but are available if needed.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
The `.getStyleDeclarations()` method takes a CSS selector and returns an array of CSS style declaration objects (from the `.getStyle()` method).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
The `.isPropertyUsed()` method takes a CSS **property** and checks if it has been set/used anywhere in the camper's CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
The `.getStyleRule()` method takes a CSS selector and returns the CSS Style Declaration, much like `.getStyle()`. However, the declaration returned from this method includes an additional `.isDeclaredAfter()` method which takes a selector and returns whether this rule is declared after the selector passed in.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
The `.getStyleSheet()` method returns the camper's CSS, parsed into a CSS Style Sheet object.
|
||||
|
||||
## Strip Content
|
||||
|
||||
There are a few methods on the `__helpers` object to remove content from the camper's code.
|
||||
|
||||
These do NOT need to be instantiated they are static methods.
|
||||
|
||||
### Removing Comments
|
||||
|
||||
Using `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()`, or `__helpers.removeJSComments()` allows you to pass the camper's code (through the `code` variable) to remove comments matching the language's comment syntax.
|
||||
|
||||
### Removing Whitespace
|
||||
|
||||
Using `__helpers.removeWhitespace()` allows you to pass the camper's code (through the `code` variable) to remove all whitespace.
|
||||
@@ -58,7 +58,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Richte die Datenbank ein
|
||||
|
||||
@@ -163,7 +163,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
|
||||
- Create a config file.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
@@ -191,4 +191,4 @@ To run all Playwright tests, run the following command:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Beachte, dass der Schlüssel `download_language` auf den Sprachcode festgelegt w
|
||||
|
||||
Es gibt ein paar Schritte, die du unternehmen musst, damit die Codebasis in deiner gewünschten Sprache erstellt werden kann.
|
||||
|
||||
First, visit the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. Hier gibt es mehrere Objekte.
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. Hier gibt es mehrere Objekte.
|
||||
|
||||
- `Languages`: Add the new language to `Languages` enum, similar to the others. The string value here will be used in the `.env` file to set a build language later.
|
||||
- `availableLangs`: Add the new property from the `Languages` enum to both the `client` and `curriculum` arrays.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Set Translated SuperBlocks
|
||||
|
||||
In the [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
In the [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Once these are in place, you should be able to run `pnpm run develop` to view yo
|
||||
|
||||
When your prior PR is merged and the VM for your language is ready, make another PR to show your language in the navigation menu.
|
||||
|
||||
In [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove your language from the array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Add the i18next JSON Files for the New Language
|
||||
|
||||
Als nächstes gehst du in das Verzeichnis `config/i18n/locales`, erstellst einen neuen Ordner und gibst ihm den Namen der neuen Sprache, die du hinzufügst. Wenn du zum Beispiel Dothraki News startest, erstelle einen neuen Ordner namens `dothraki`.
|
||||
Next, go to the `shared/config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. Wenn du zum Beispiel Dothraki News startest, erstelle einen neuen Ordner namens `dothraki`.
|
||||
|
||||
Kopiere dann die JSON-Dateien aus dem Verzeichnis `english` in deinen neuen Ordner.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Einige Beispiele für gute PR-Titel wären:
|
||||
|
||||
- Das ist sehr wichtig, wenn du Änderungen vornimmst, die nicht nur Textinhalte wie die Dokumentation oder eine Aufgabenbeschreibung betreffen. Examples of changes that need local testing include JavaScript, CSS, or HTML, which could change the functionality or layout of a page.
|
||||
|
||||
- Wenn dein PR das Verhalten einer Seite beeinflusst, sollte er von entsprechenden [Cypress Integrationstests](how-to-add-cypress-tests.md) begleitet werden.
|
||||
- If your PR affects the behaviour of a page, it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
|
||||
## Feedback on Pull Requests
|
||||
|
||||
@@ -107,7 +107,7 @@ Und wie immer kannst du deine Fragen in der [Kategorie "Contributors" in unserem
|
||||
|
||||
Es kann zu Konflikten kommen, weil viele Mitwirkende an dem Repository arbeiten und Änderungen deinen PR zerstören können, der noch auf eine Überprüfung und Zusammenführung wartet.
|
||||
|
||||
In den meisten Fällen brauchst du keinen Rebase, da wir alle Commits vernichten. Wenn jedoch ein Rebase verlangt wird, solltest du wie folgt vorgehen.
|
||||
Since we squash all commits, you may not need to do a rebase. However, if a rebase is requested, check our [For Usual Bug Fixes and Features](#for-usual-bug-fixes-and-features) or [For Upcoming Curriculum and Features](#for-upcoming-curriculum-and-features) guides to learn how to do this process for your corresponding PR.
|
||||
|
||||
### For Usual Bug Fixes and Features
|
||||
|
||||
@@ -185,7 +185,7 @@ Wenn du an Funktionen für unseren kommenden `next-*`-Branch arbeitest, musst du
|
||||
git cherry-pick <commit-hash>
|
||||
```
|
||||
|
||||
4. Behebe alle Konflikte, bereinige, installiere Abhängigkeiten und führe Tests durch
|
||||
4. Resolve any conflicts, cleanup, and install dependencies and run tests
|
||||
|
||||
```console
|
||||
pnpm run clean
|
||||
@@ -199,7 +199,7 @@ Wenn du an Funktionen für unseren kommenden `next-*`-Branch arbeitest, musst du
|
||||
|
||||
```
|
||||
|
||||
5. Wenn alles gut aussieht, schickst du es zurück an den PR
|
||||
5. If everything looks good, push back to the PR
|
||||
|
||||
```console
|
||||
git push --force origin <pr-branch-name>
|
||||
|
||||
@@ -233,7 +233,7 @@ The keys in the `.env` file are _not_ required to be changed to run the app loca
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Step 3: Start MongoDB and Seed the Database
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Install the dependencies for the freeCodeCamp repo:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Generate the challenge data JSON file:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Some of these files are translated on our translation platform (Crowdin) and som
|
||||
|
||||
## Testing the Client App in a World Language
|
||||
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
Wenn du eine neue Sprache testest, erstelle einen Ordner mit dem Namen der Sprache als Titel neben den anderen Sprachen und kopiere die JSON-Dateien aus einer anderen Sprache in deinen neuen Ordner.
|
||||
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file.
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file.
|
||||
|
||||
Befolge dann die Anweisungen in den Kommentaren in derselben Datei, um die restlichen Variablen nach Bedarf hinzuzufügen/zu aktualisieren.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ Du solltest [den übersetzten Client lokal einrichten](how-to-enable-new-languag
|
||||
|
||||
1. Update your `.env` file to use your language for `CLIENT_LOCALE` and `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Run `pnpm run create:config`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
2. Run `pnpm run create:shared`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
|
||||
3. Start the server by running `pnpm run develop:server` in one terminal window.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Seguire le migliori pratiche](codebase-best-practices.md)
|
||||
- [Work on Codebase](how-to-contribute-to-the-codebase.md)
|
||||
- [Work on Coding Challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Use the Curriculum Helpers](curriculum-help.md)
|
||||
- [Work on Component Library](how-to-work-on-the-component-library.md)
|
||||
- [Work on Practice Projects](how-to-work-on-practice-projects.md)
|
||||
- [Work on Mobile app](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ Quando rinomini una certificazione, vorrai probabilmente rinominare il superbloc
|
||||
1. Facoltativamente, aggiorna il `certSlug` per il superblocco nello stesso file. **Nota** che rinominare un `certSlug` cambia l'URL della certificazione ed è da fare con attenta considerazione.
|
||||
1. Aggiorna il `title` in `client/src/resources/cert-and-project-map.ts` al nuovo valore. **Nota** che cambiare `title` qui **romperà** la pagina superBlock per la certificazione associata. Fa affidamento sul titolo del superblocco per combaciare il titolo del certificato. Vorrai probabilmente rinominare il superblocco allo stesso tempo.
|
||||
1. Se hai rinominato `certSlug` allo step 7, cambialo qui per il certificato e tutti i valori dei progetti annidati `projects`.
|
||||
1. In `config/certification-settings.js`, aggiorna il valore di `certTypeTitleMap` al nuovo nome.
|
||||
1. In `shared/config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. Se hai rinominato `certSlug` allo step 7, aggiorna la key di `certSlugTypeMap` nello stesso file.
|
||||
1. Se necessario aggiorna il nome del certificato nell'array `legacyCerts` di `client/src/client-only-routes/show-project-links.tsx`.
|
||||
1. Aggiorna il file `README.md` principale al nuovo nome.
|
||||
@@ -69,10 +69,10 @@ Inoltre, probabilmente vorrai rinominare il certificato e il blocco `{superBlock
|
||||
1. Aggiorna il file `index.md` nella cartella qui sopra, cambiando i valori `title` e `superBlock` al nuovo nome.
|
||||
1. Per ogni cartella di un blocco all'interno della precedente, aggiorna `index.md` affinché usi il valore corretto di `superBlock`.
|
||||
1. Nel file `client/src/resources/cert-and-project-map.ts`, aggiorna il percorso per il certificato in cima al file, e il valore di `title` per quel superblocco. **Nota** che cambiare `title` qui **romperà** l'abilità di vedere la certificazione per questo superblocco. Fa affidamento sul titolo del superblocco per abbinare il titolo del certificato. Vorrai probabilmente rinominare la certificazione allo stesso tempo.
|
||||
1. Aggiorna la key `superBlockCertTypeMap` in `config/certification-settings.js` al nuovo nome di superblocco.
|
||||
1. Update the `superBlockCertTypeMap` key in `shared/config/certification-settings.js` to the new superBlock name.
|
||||
1. Aggiorna il valore del percorso in `client/src/assets/icons/index.tsx`.
|
||||
1. Per ogni lingua in `client/i18n/locales`, aggiorna il file `intro.json` file affinché usi il nuovo `dashedName` del superblocco. Nel file inglese aggiorna anche `title`.
|
||||
1. Controlla `config/i18n/all-langs.js` per vedere se il superblocco è abilitato nelle build in altre lingue. Aggiorna il valore dove è usato.
|
||||
1. Check the `shared/config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. Aggiorna il valore dove è usato.
|
||||
1. Aggiorna il file principale `README.md` con il nuovo nome.
|
||||
|
||||
### Rinominare un blocco
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Using the Curriculum Helpers
|
||||
|
||||
The test runner has access to a few helpers that can assist with testing campers' code.
|
||||
|
||||
## CSS Helper
|
||||
|
||||
To instantiate the helper within a test block, use this:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
In that example, the `document` variable refers to the document object of the test runner's iframe.
|
||||
|
||||
### Methods
|
||||
|
||||
There are a few methods available for parsing and testing CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
The `.getStyle()` method takes a CSS selector and returns a CSS style declaration object.
|
||||
|
||||
For example, if the camper has written the following CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
You would get an object that looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This method allows you to test that specific properties have been set:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
The helper attaches a `.getPropVal()` method to the style declaration object that allows you to get the value of a specific property:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
The `.getCSSRules()` takes an at-rule type from the union `media | fontface | import | keyframes`, and returns an array of CSS rules matching that at-rule.
|
||||
|
||||
For example, if the camper has written the following code:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then the returned value of `helper.getCSSRules('media')` would be this array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can then test that the camper has written the correct media query:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
The `.getRuleListsWithinMedia()` method takes a media text (e.g. `("max-width: 200")`) and returns the CSS rules within that media query.
|
||||
|
||||
The return result is the equivalent of that media rule's `cssRules` property from the return value of `.getCSSRules("media")`.
|
||||
|
||||
### Less Frequent Methods
|
||||
|
||||
These methods are not as commonly used, but are available if needed.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
The `.getStyleDeclarations()` method takes a CSS selector and returns an array of CSS style declaration objects (from the `.getStyle()` method).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
The `.isPropertyUsed()` method takes a CSS **property** and checks if it has been set/used anywhere in the camper's CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
The `.getStyleRule()` method takes a CSS selector and returns the CSS Style Declaration, much like `.getStyle()`. However, the declaration returned from this method includes an additional `.isDeclaredAfter()` method which takes a selector and returns whether this rule is declared after the selector passed in.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
The `.getStyleSheet()` method returns the camper's CSS, parsed into a CSS Style Sheet object.
|
||||
|
||||
## Strip Content
|
||||
|
||||
There are a few methods on the `__helpers` object to remove content from the camper's code.
|
||||
|
||||
These do NOT need to be instantiated they are static methods.
|
||||
|
||||
### Removing Comments
|
||||
|
||||
Using `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()`, or `__helpers.removeJSComments()` allows you to pass the camper's code (through the `code` variable) to remove comments matching the language's comment syntax.
|
||||
|
||||
### Removing Whitespace
|
||||
|
||||
Using `__helpers.removeWhitespace()` allows you to pass the camper's code (through the `code` variable) to remove all whitespace.
|
||||
@@ -58,7 +58,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Fai il seed del database
|
||||
|
||||
@@ -163,7 +163,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
|
||||
- Create a config file.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
@@ -191,4 +191,4 @@ To run all Playwright tests, run the following command:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Nota che la chiave `download_language` deve essere impostata sul codice della li
|
||||
|
||||
Ci sono alcuni step da svolgere per consentire il build del codebase nella lingua scelta.
|
||||
|
||||
First, visit the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. Qui ci sono diversi oggetti.
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. Qui ci sono diversi oggetti.
|
||||
|
||||
- `Languages`: Aggiunge la nuova lingua all'enum `Languages` simile agli altri. Il valore della stringa qui sarà usato nel file `.env` per impostare un build della lingua in seguito.
|
||||
- `availableLangs`: Aggiunge la nuova proprietà dall'enum `Languages` a entrambi gli array `client` e `curriculum`.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Set Translated SuperBlocks
|
||||
|
||||
In the [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
In the [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Una volta che questi saranno in posizione, dovresti essere in grado di eseguire
|
||||
|
||||
When your prior PR is merged and the VM for your language is ready, make another PR to show your language in the navigation menu.
|
||||
|
||||
In [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove your language from the array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Add the i18next JSON Files for the New Language
|
||||
|
||||
Successivamente, vai nella cartella `config/i18n/locales`, crea una nuova cartella e dalle il nome della nuova lingua che stai aggiungendo. Ad esempio, se stai lanciando le News in Dothraki, crea una nuova cartella chiamata `dothraki`.
|
||||
Next, go to the `shared/config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. Ad esempio, se stai lanciando le News in Dothraki, crea una nuova cartella chiamata `dothraki`.
|
||||
|
||||
Quindi copia i file JSON dalla cartella `english` nella tua nuova cartella.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Alcuni esempi di buoni titoli di PR sono:
|
||||
|
||||
- Questo è molto importante quando si fanno cambiamenti che non sono solo modifiche a contenuto testuale come documentazione o descrizioni di sfide. Examples of changes that need local testing include JavaScript, CSS, or HTML, which could change the functionality or layout of a page.
|
||||
|
||||
- Se la tua PR ha effetto sul comportamento di una pagina dovrebbe essere accompagnato da corrispondenti [test di integrazione di Cypress](how-to-add-cypress-tests.md).
|
||||
- If your PR affects the behaviour of a page, it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
|
||||
## Feedback on Pull Requests
|
||||
|
||||
@@ -107,7 +107,7 @@ E come sempre, poni liberamente le tue domande [nella categoria 'Contributors' s
|
||||
|
||||
I conflitti possono sorgere perché molti contributori lavorano sul repository e le modifiche possono interrompere la tua PR in attesa di una revisione e di un merge.
|
||||
|
||||
Spesso potresti non aver bisogno di un rebase, perché schiacciamo tutti i commit, tuttavia se è richiesto un rebase, ecco quello che dovresti fare.
|
||||
Since we squash all commits, you may not need to do a rebase. However, if a rebase is requested, check our [For Usual Bug Fixes and Features](#for-usual-bug-fixes-and-features) or [For Upcoming Curriculum and Features](#for-upcoming-curriculum-and-features) guides to learn how to do this process for your corresponding PR.
|
||||
|
||||
### For Usual Bug Fixes and Features
|
||||
|
||||
@@ -185,7 +185,7 @@ Quando stai lavorando su funzionalità dei rami `next-*` del nuovo curriculum, d
|
||||
git cherry-pick <commit-hash>
|
||||
```
|
||||
|
||||
4. Risolvi eventuali conflitti, fai pulizia, installa le dipendenze ed esegui i test
|
||||
4. Resolve any conflicts, cleanup, and install dependencies and run tests
|
||||
|
||||
```console
|
||||
pnpm run clean
|
||||
@@ -199,7 +199,7 @@ Quando stai lavorando su funzionalità dei rami `next-*` del nuovo curriculum, d
|
||||
|
||||
```
|
||||
|
||||
5. Se tutto sembra funzionare fai un push alla PR
|
||||
5. If everything looks good, push back to the PR
|
||||
|
||||
```console
|
||||
git push --force origin <pr-branch-name>
|
||||
|
||||
@@ -233,7 +233,7 @@ The keys in the `.env` file are _not_ required to be changed to run the app loca
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Step 3: Start MongoDB and Seed the Database
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Install the dependencies for the freeCodeCamp repo:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Generate the challenge data JSON file:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Some of these files are translated on our translation platform (Crowdin) and som
|
||||
|
||||
## Testing the Client App in a World Language
|
||||
|
||||
Puoi testare la app client in ogni lingua disponibile nell'[elenco `availableLangs` qui](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
Se stai testando una nuova lingua, crea una cartella con il nome della lingua come titolo accanto alle altre lingue e copia i file JSON da un'altra lingua alla tua cartella.
|
||||
|
||||
Aggiungi una nuova lingua all'enum `Languages` e all'array `client` in cima al file [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file.
|
||||
|
||||
Successivamente, segui le istruzioni nei commenti nello stesso file per aggiungere/aggiornare il resto delle variabili secondo necessità.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ Dovrai [fare il build in locale del client tradotto](how-to-enable-new-languages
|
||||
|
||||
1. Update your `.env` file to use your language for `CLIENT_LOCALE` and `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Run `pnpm run create:config`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
2. Run `pnpm run create:shared`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
|
||||
3. Start the server by running `pnpm run develop:server` in one terminal window.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Follow best-practices](codebase-best-practices.md)
|
||||
- [Work on Codebase](how-to-contribute-to-the-codebase.md)
|
||||
- [Work on Coding Challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Use the Curriculum Helpers](curriculum-help.md)
|
||||
- [Work on Component Library](how-to-work-on-the-component-library.md)
|
||||
- [Work on Practice Projects](how-to-work-on-practice-projects.md)
|
||||
- [Work on Mobile app](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ curriculum/
|
||||
1. 必要に応じて、同じファイル内のスーパーブロックの `certSlug` を更新します。**注:** `certSlug` 名を変更すると、認定講座の URL が変更されるため、慎重に変更します。
|
||||
1. `client/src/resources/cert-and-project-map.ts` 内の `title` を新しい値に更新してください。**注:** ここで `title` を変更すると、関連する認定講座のスーパーブロックのページ が **壊れます**。 そのページは、スーパーブロックのタイトルに依存しており、認定講座タイトルと一致します。 スーパーブロック名も同時に変更したい場合があるからです。
|
||||
1. 手順 7 で、`certSlug` 名を変更した場合は、認定講座とネストされた `projects` の値を変更します。
|
||||
1. `config/certification-settings.js` で、`certTypeTitleMap` の値を新しい名前に更新します。
|
||||
1. In `shared/config/certification-settings.js`, update the value of `certTypeTitleMap` to the new name.
|
||||
1. 手順 7 で `certSlug` を変更した場合、同じファイル内の `certSlugTypeMap` のキーを更新します。
|
||||
1. 必要に応じて、`client/src/client-only-routes/show-project-links.tsx` の `legacyCerts` 配列内の認定講座名を更新します。
|
||||
1. メイン `README.md` ファイル名を新しい名前に更新します。
|
||||
@@ -69,10 +69,10 @@ Also, you will likely want to rename the certificate and the `{superBlock}-proje
|
||||
1. 上記フォルダの `index.md` ファイルを更新し、`title` と `superBlock` の値を新しい名前に変更します。
|
||||
1. 上記の各ブロックフォルダで、`index.md` を更新して、正しい `superBlock` の値を使用します。
|
||||
1. `client/src/resources/cert-and-project-map.ts` ファイルで、ファイルの先頭にある認定講座パスと、スーパーブロックの `title` 値を更新します。**注:** ここで `title` を変更すると、スーパーブロックの実際の認定講座を表示する機能が **壊れます**。 表示機能は、スーパーブロックのタイトルに依存しており、認定講座タイトルと一致します。 認定講座名も同時に変更したいものです。
|
||||
1. `config/certification-settings.js` の `superBlockCertTypeMap` キーを新しいスーパーブロック名に更新します。
|
||||
1. Update the `superBlockCertTypeMap` key in `shared/config/certification-settings.js` to the new superBlock name.
|
||||
1. `client/src/assets/icons/index.tsx` のパス値を更新します。
|
||||
1. `client/i18n/locales` の言語ごとに、`intro.json` ファイルを更新して新しいスーパーブロック `dashedName` を使用します。英語のファイルの `title` も更新します。
|
||||
1. i18n ビルドでスーパーブロックが使用可能かどうかを確認するには、`config/i18n/all-langs.js` ファイルを確認します。 使用しているすべての値を更新します。
|
||||
1. Check the `shared/config/i18n/all-langs.js` file to see if the superBlock is enabled in i18n builds. 使用しているすべての値を更新します。
|
||||
1. メイン `README.md` ファイルを新しい名前に更新します。
|
||||
|
||||
### ブロック名を変更する
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Using the Curriculum Helpers
|
||||
|
||||
The test runner has access to a few helpers that can assist with testing campers' code.
|
||||
|
||||
## CSS Helper
|
||||
|
||||
To instantiate the helper within a test block, use this:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
In that example, the `document` variable refers to the document object of the test runner's iframe.
|
||||
|
||||
### Methods
|
||||
|
||||
There are a few methods available for parsing and testing CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
The `.getStyle()` method takes a CSS selector and returns a CSS style declaration object.
|
||||
|
||||
For example, if the camper has written the following CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
You would get an object that looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This method allows you to test that specific properties have been set:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
The helper attaches a `.getPropVal()` method to the style declaration object that allows you to get the value of a specific property:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
The `.getCSSRules()` takes an at-rule type from the union `media | fontface | import | keyframes`, and returns an array of CSS rules matching that at-rule.
|
||||
|
||||
For example, if the camper has written the following code:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then the returned value of `helper.getCSSRules('media')` would be this array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can then test that the camper has written the correct media query:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
The `.getRuleListsWithinMedia()` method takes a media text (e.g. `("max-width: 200")`) and returns the CSS rules within that media query.
|
||||
|
||||
The return result is the equivalent of that media rule's `cssRules` property from the return value of `.getCSSRules("media")`.
|
||||
|
||||
### Less Frequent Methods
|
||||
|
||||
These methods are not as commonly used, but are available if needed.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
The `.getStyleDeclarations()` method takes a CSS selector and returns an array of CSS style declaration objects (from the `.getStyle()` method).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
The `.isPropertyUsed()` method takes a CSS **property** and checks if it has been set/used anywhere in the camper's CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
The `.getStyleRule()` method takes a CSS selector and returns the CSS Style Declaration, much like `.getStyle()`. However, the declaration returned from this method includes an additional `.isDeclaredAfter()` method which takes a selector and returns whether this rule is declared after the selector passed in.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
The `.getStyleSheet()` method returns the camper's CSS, parsed into a CSS Style Sheet object.
|
||||
|
||||
## Strip Content
|
||||
|
||||
There are a few methods on the `__helpers` object to remove content from the camper's code.
|
||||
|
||||
These do NOT need to be instantiated they are static methods.
|
||||
|
||||
### Removing Comments
|
||||
|
||||
Using `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()`, or `__helpers.removeJSComments()` allows you to pass the camper's code (through the `code` variable) to remove comments matching the language's comment syntax.
|
||||
|
||||
### Removing Whitespace
|
||||
|
||||
Using `__helpers.removeWhitespace()` allows you to pass the camper's code (through the `code` variable) to remove all whitespace.
|
||||
@@ -58,7 +58,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
- Create a config file.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- データベースをシードします。
|
||||
|
||||
@@ -163,7 +163,7 @@ If starting the Gitpod environment did not automatically develop the environment
|
||||
|
||||
- Create a config file.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Seed the database
|
||||
@@ -191,4 +191,4 @@ To run all Playwright tests, run the following command:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Note that the `download_language` key needs to be set to the language code displ
|
||||
|
||||
There are a few steps to take in order to allow the codebase to build in your desired language.
|
||||
|
||||
First, visit the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. There are several objects here.
|
||||
First, visit the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file to add the language to the list of available languages and configure the values. There are several objects here.
|
||||
|
||||
- `Languages`: Add the new language to `Languages` enum, similar to the others. The string value here will be used in the `.env` file to set a build language later.
|
||||
- `availableLangs`: Add the new property from the `Languages` enum to both the `client` and `curriculum` arrays.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Set Translated SuperBlocks
|
||||
|
||||
In the [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
In the [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts) file, add the new language to the `notAuditedSuperBlocks` object. This lists all the superblocks which are not fully translated. Add an array of superblocks which have not been fully translated to it. For example:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Once these are in place, you should be able to run `pnpm run develop` to view yo
|
||||
|
||||
When your prior PR is merged and the VM for your language is ready, make another PR to show your language in the navigation menu.
|
||||
|
||||
In [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
In [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file, you have included your language in `hiddenLangs` array in the prior PR. Remove it from the array now.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove your language from the array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Add the i18next JSON Files for the New Language
|
||||
|
||||
Next, go to the `config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
Next, go to the `shared/config/i18n/locales` directory, create a new folder, and give it the name of the new language you're adding. For example, if you're launching Dothraki News, create a new folder named `dothraki`.
|
||||
|
||||
Then copy the JSON files from the `english` directory to your new folder.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Some examples of good PR titles would be:
|
||||
|
||||
- これは、ドキュメントやチャレンジの説明のようなテキストコンテンツを編集するだけでなく、変更を加える場合に、非常に重要です。 Examples of changes that need local testing include JavaScript, CSS, or HTML, which could change the functionality or layout of a page.
|
||||
|
||||
- PR がページの動作に影響を与える場合は、対応する [Cypress 統合テスト](how-to-add-cypress-tests.md) も追加する必要があります。
|
||||
- If your PR affects the behaviour of a page, it should be accompanied by corresponding [Cypress integration tests](how-to-add-cypress-tests.md).
|
||||
|
||||
## Feedback on Pull Requests
|
||||
|
||||
@@ -107,7 +107,7 @@ And as always, feel free to ask questions on the ['Contributors' category on our
|
||||
|
||||
Conflicts can arise because many contributors work on the repository, and changes can break your PR which is pending a review and merge.
|
||||
|
||||
More often than not you may not require a rebase, because we squash all commits, however, if a rebase is requested, here is what you should do.
|
||||
Since we squash all commits, you may not need to do a rebase. However, if a rebase is requested, check our [For Usual Bug Fixes and Features](#for-usual-bug-fixes-and-features) or [For Upcoming Curriculum and Features](#for-upcoming-curriculum-and-features) guides to learn how to do this process for your corresponding PR.
|
||||
|
||||
### For Usual Bug Fixes and Features
|
||||
|
||||
@@ -185,7 +185,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
git cherry-pick <commit-hash>
|
||||
```
|
||||
|
||||
4. Resolve any conflicts, cleanup, install dependencies and run tests
|
||||
4. Resolve any conflicts, cleanup, and install dependencies and run tests
|
||||
|
||||
```console
|
||||
pnpm run clean
|
||||
@@ -199,7 +199,7 @@ When you are working on features for our upcoming curriculum `next-*` branches,
|
||||
|
||||
```
|
||||
|
||||
5. If everything looks good push back to the PR
|
||||
5. If everything looks good, push back to the PR
|
||||
|
||||
```console
|
||||
git push --force origin <pr-branch-name>
|
||||
|
||||
@@ -233,7 +233,7 @@ The keys in the `.env` file are _not_ required to be changed to run the app loca
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Step 3: Start MongoDB and Seed the Database
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Install the dependencies for the freeCodeCamp repo:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Generate the challenge data JSON file:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Some of these files are translated on our translation platform (Crowdin) and som
|
||||
|
||||
## Testing the Client App in a World Language
|
||||
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
You can test the client app in any language available in the [list of `availableLangs` here](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
新しい言語をテストするには、言語名をタイトルとしたフォルダを他の言語の隣に作成し、JSON ファイルを別の言語から新しいフォルダにコピーします。
|
||||
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) file.
|
||||
Add the new language to the `Languages` enum and the `client` array at the top of the [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts) file.
|
||||
|
||||
次に、同じファイルのコメント指示に従って、必要に応じて残りの変数を追加 / 更新します。
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ You will want to [build the translated client locally](how-to-enable-new-languag
|
||||
|
||||
1. Update your `.env` file to use your language for `CLIENT_LOCALE` and `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Run `pnpm run create:config`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
2. Run `pnpm run create:shared`. This will automatically generate the `trending.json` file for your language under the `/client/i18n/locales/` directory.
|
||||
|
||||
3. Start the server by running `pnpm run develop:server` in one terminal window.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Seguir as melhores práticas](codebase-best-practices.md)
|
||||
- [Trabalhar na base de código](how-to-contribute-to-the-codebase.md)
|
||||
- [Trabalhar em desafios de programação](how-to-work-on-coding-challenges.md)
|
||||
- [Usar os auxiliares do currículo](curriculum-help.md)
|
||||
- [Trabalhar na biblioteca de componentes](how-to-work-on-the-component-library.md)
|
||||
- [Trabalhar em projetos práticos](how-to-work-on-practice-projects.md)
|
||||
- [Trabalhar na aplicação para dispositivos móveis](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ Ao renomear uma certificação, você provavelmente vai querer renomear o superb
|
||||
1. Como opção, atualize o `certSlug` para o superbloco do mesmo arquivo. **Note** que renomear um `certSlug` mudará o URL para as certificações e somente deverá ser feito depois de se pensar muito sobre o assunto.
|
||||
1. Atualize o `title` em `client/src/resources/cert-and-project-map.ts` com o novo valor. **Note** que mudar o `title` aqui **quebrará** a página do superbloco da certificação associada. Ela depende do título do superbloco para encontrar fazer a correspondência com o título da certificação. Você provavelmente vai querer renomear o superbloco ao mesmo tempo.
|
||||
1. Se você renomeou o `certSlug` na etapa 7, altere aqui para o cert e para todos os valores de `projects` aninhados.
|
||||
1. Em `config/certification-settings.js`, atualize o valor de `certTypeTitleMap` para o novo nome.
|
||||
1. Em `shared/config/certification-settings.js`, atualize o valor de `certTypeTitleMap` para o novo nome.
|
||||
1. Se você renomeou o `certSlug` na etapa 7, atualize a chave de `certSlugTypeMap` no mesmo arquivo.
|
||||
1. Atualize o nome do certificado no array `legacyCerts` de `client/src/client-only-routes/show-project-links.tsx`, se necessário.
|
||||
1. Atualize o arquivo `README.md` principal com o novo nome.
|
||||
@@ -69,10 +69,10 @@ Além disso, você provavelmente vai querer renomear o certificado e o bloco `{s
|
||||
1. Atualize o arquivo `index.md` na pasta acima, alterando os valores de `title` e `superBlock` com o novo nome.
|
||||
1. Para cada pasta de bloco que estiver dentro daquela citada acima, atualize o `index.md` para que use o valor `superBlock` correto.
|
||||
1. No arquivo `client/src/resources/cert-and-project-map.ts`, atualize o caminho para a certificação na parte superior do arquivo, bem como o valor de `title` para aquele superbloco. **Note** que mudar o `title` aqui **quebrará** a capacidade de ver a certificação real deste superbloco. Ela depende do título do superbloco para fazer a correspondência com o título da certificação. Você provavelmente vai querer renomear a certificação ao mesmo tempo.
|
||||
1. Atualize a chave `superBlockCertTypeMap` em `config/certification-settings.js` para o novo nome do superbloco.
|
||||
1. Atualize a chave `superBlockCertTypeMap` em `shared/config/certification-settings.js` para o novo nome do superbloco.
|
||||
1. Atualize o valor do caminho em `client/src/assets/icons/index.tsx`.
|
||||
1. Para cada idioma em `client/i18n/locales`, atualize o arquivo `intro.json` para que use o novo `dashedName` do superbloco. No arquivo em inglês, atualize também o `title`.
|
||||
1. Verifique o arquivo `config/i18n/all-langs.js` para ver se o superbloco está habilitado para as builds do i18n. Atualize todos os valores onde ele for utilizado.
|
||||
1. Verifique o arquivo `shared/config/i18n/all-langs.js` para ver se o superbloco está habilitado para as builds do i18n. Atualize todos os valores onde ele for utilizado.
|
||||
1. Atualize o arquivo `README.md` principal com o novo nome.
|
||||
|
||||
### Renomear um bloco
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Usar os auxiliares do currículo
|
||||
|
||||
O executor dos testes tem acesso a alguns auxiliares que podem ajudar com o código dos campers.
|
||||
|
||||
## Auxiliar do CSS
|
||||
|
||||
Para instanciar o auxiliar dentro de um bloco de teste, use isto:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
Nesse exemplo, a variável `document` refere-se ao objeto do documento do iframe do executor do teste.
|
||||
|
||||
### Métodos
|
||||
|
||||
Existem alguns métodos disponíveis para analisar e testar o CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
O método `.getStyle()` recebe um seletor do CSS e retorna um objeto de declaração de estilo do CSS.
|
||||
|
||||
Por exemplo, se o camper escreveu o seguinte CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
Você receberá um objeto que se parece com isto:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Esse método permite testar se as propriedades específicas foram definidas:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
O auxiliar atribui um método `.getPropVal()` ao objeto de declaração de estilo que permite que você obtenha o valor de uma propriedade específica:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
O método `.getCSSRules()` recebe um tipo de regra da união entre `media | fontface | import | keyframes` e retorna um array de regras do CSS correspondentes a essa regra.
|
||||
|
||||
Por exemplo, se o camper escreveu o seguinte código:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
O valor retornado por `helper.getCSSRules('media')` seria este array:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Você, então, pode testar se o camper escreveu a media query correta:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
O método `.getRuleListsWithinMedia()` recebe um texto de mídia (por exemplo, `("max-width: 200")`) e retorna as regras de CSS dentro dessa media query.
|
||||
|
||||
O resultado retornado é o equivalente da propriedade da regra de mídia `cssRules` a partir do valor de retorno de `.getCSSRules("media")`.
|
||||
|
||||
### Métodos menos frequentes
|
||||
|
||||
Estes métodos não são tão comumente utilizados, mas estão disponíveis, se forem necessários.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
O método `.getStyleDeclarations()` recebe um seletor de CSS e retorna um array de objetos de declaração de estilo do CSS (vindos do método `.getStyle()`).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
O método `.isPropertyUsed()` recebe uma **propriedade** do CSS e confere se ela foi definida/usada em algum lugar do CSS do camper.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
O método `.getStyleRule()` recebe um seletor do CSS e retorna a declaração do estilo em CSS, de modo semelhante a `.getStyle()`. No entanto, a declaração retornada desse método inclui um método `.isDeclaredAfter()` adicional, que recebe um seletor e retorna se essa regra é declarada após o seletor ter sido passado.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
O método `.getStyleSheet()` retorna o CSS do camper analisado em uma folha de estilo do CSS.
|
||||
|
||||
## Remover conteúdo
|
||||
|
||||
Existem alguns métodos no objeto `__helpers` para remover conteúdo do código do camper.
|
||||
|
||||
Eles NÃO precisam ser instanciados. Eles são métodos estáticos.
|
||||
|
||||
### Removendo comentários
|
||||
|
||||
Usar `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()` ou `__helpers.removeJSComments()` permite a você passar o código do camper (por meio da variável `code`) para remover comentários correspondentes à sintaxe de comentário da linguagem.
|
||||
|
||||
### Removendo os espaços em branco
|
||||
|
||||
Usar `__helpers.removeWhitespace()` permite que você passe o código do camper (através da variável `código`) para remover todos os espaços em branco.
|
||||
@@ -58,7 +58,7 @@ Se o ambiente Gitpod não foi criado automaticamente:
|
||||
- Crie um arquivo de configuração.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Crie a base de dados
|
||||
|
||||
@@ -163,7 +163,7 @@ Se, ao iniciar o ambiente do Gitpod, o ambiente não foi desenvolvido automatica
|
||||
|
||||
- Crie um arquivo de configuração.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Crie o banco de dados
|
||||
@@ -191,4 +191,4 @@ Para executar todos os testes do Playwright, execute o seguinte comando:
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@ Observe que a chave `download_language` precisa ser definida como código do idi
|
||||
|
||||
Existem algumas etapas a serem seguidas para permitir que a base de código seja compilada no idioma desejado.
|
||||
|
||||
Primeiro, visite o arquivo [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) para adicionar o idioma à lista de idiomas disponíveis e configurar os valores. Existem vários objetos aqui.
|
||||
Primeiro, visite o arquivo [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) para adicionar o idioma à lista de idiomas disponíveis e configurar os valores. Existem vários objetos aqui.
|
||||
|
||||
- `Languages`: adiciona o novo idioma no enum `Languages`, do mesmo modo que com os outros. O valor da string aqui será usado no arquivo `.env` para definir o idioma da build posteriormente.
|
||||
- `availableLangs`: adiciona a nova propriedade do enum `Languages` aos dois arrays, `client` e `curriculum`.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Configuração dos superblocos traduzidos
|
||||
|
||||
No arquivo [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts), adicione o novo idioma ao objeto `notAuditedSuperBlocks`. Isso lista todos os superblocos que não estão totalmente traduzidos. Adicione um array de superblocos que não foram totalmente traduzidos a ele. Por exemplo:
|
||||
No arquivo [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts), adicione o novo idioma ao objeto `notAuditedSuperBlocks`. Isso lista todos os superblocos que não estão totalmente traduzidos. Adicione um array de superblocos que não foram totalmente traduzidos a ele. Por exemplo:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ Quando estes arquivos estiverem no local certo, você deve poder usar `pnpm run
|
||||
|
||||
Quando seu PR anterior for mesclado e sua VM para seu idioma estiver pronta, faça outro PR para mostrar seu idioma no menu de navegação.
|
||||
|
||||
No arquivo [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts), você incluiu seu idioma no array `hiddenLangs` no PR anterior. Retire-o do array agora.
|
||||
No arquivo [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts), você incluiu seu idioma no array `hiddenLangs` no PR anterior. Retire-o do array agora.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // Remove seu idioma do array
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Adicionar os arquivos em JSON do i18next para o novo idioma
|
||||
|
||||
Em seguida, vá para o diretório `config/i18n/locales`, crie uma pasta e informe o nome do novo idioma que você está adicionando. Por exemplo, se você estiver lançando News em dothraki, crie uma pasta chamada `dothraki`.
|
||||
Em seguida, vá para o diretório `shared/config/i18n/locales`, crie uma pasta e informe o nome do novo idioma que você está adicionando. Por exemplo, se você estiver lançando News em dothraki, crie uma pasta chamada `dothraki`.
|
||||
|
||||
Em seguida, copie os arquivos JSON do diretório `english` para a sua nova pasta.
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@ Alguns exemplos de bons títulos de PRs seriam:
|
||||
|
||||
- Isso é muito importante quando se está fazendo mudanças que não são apenas edições no conteúdo do texto como a documentação ou descrição de um desafio. Exemplos de mudanças que precisam ser testadas localmente incluem JavaScript, CSS ou HTML que podem mudar a funcionalidade ou aparência de uma página.
|
||||
|
||||
- Se seu PR afeta o comportamento de uma página ele deve estar acompanhado pelo correspondente [teste de integração Cypress](how-to-add-cypress-tests.md).
|
||||
- Se seu PR afeta o comportamento de uma página, ele deve estar acompanhado pelo correspondente [teste de integração Cypress](how-to-add-cypress-tests.md).
|
||||
|
||||
## Comentários nos pull requests
|
||||
|
||||
@@ -107,7 +107,7 @@ E como sempre, fique à vontade em perguntar na [categoria 'Contributors' (colab
|
||||
|
||||
Conflitos podem surgir porque muitos colaboradores trabalham no repositório, e as alterações podem afetar o seu PR, que está aguardando uma revisão e mesclagem.
|
||||
|
||||
Na maioria das vezes, você pode não precisar de um rebase, porque nós comprimimos todos os commits. No entanto, se for solicitada uma rebase, é isso que você deve fazer.
|
||||
Como fazemos o squash de todos os commits, você pode não precisar fazer o rebase. Porém, se um rebase for solicitado, verifique nossos guias [Para os consertos de bugs e recursos comuns](#for-usual-bug-fixes-and-features) ou [Para o currículo futuro e recursos](#for-upcoming-curriculum-and-features) para saber como fazer esse processo para seu PR correspondente.
|
||||
|
||||
### Para funcionalidades e correções de erros comuns
|
||||
|
||||
|
||||
@@ -233,7 +233,7 @@ As chaves no arquivo `.env` _não_ precisam ser alteradas para executar o aplica
|
||||
Esta etapa vai instalar as dependências necessárias para a execução da aplicação:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Passo 3: Inicie o MongoDB e crie o banco de dados
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Instale as dependências para o repositório do freeCodeCamp:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Gere o arquivo JSON dos dados de desafio:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@ Alguns desses arquivos estão traduzidos na nossa plataforma de tradução (Crow
|
||||
|
||||
## Teste da aplicação do client em um idioma mundial
|
||||
|
||||
Você pode testar a aplicação do client em qualquer idioma disponível na [lista de idiomas disponíveis, `availableLangs`, aqui](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
Você pode testar a aplicação do client em qualquer idioma disponível na [lista de idiomas disponíveis, `availableLangs`, aqui](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
Se você estiver testando um idioma novo, crie uma pasta com o nome do idioma como título próximo dos outros idiomas e copie os arquivos JSON de outro idioma para a sua pasta.
|
||||
|
||||
Adicione o novo idioma ao enum `Languages` e ao array `client` no topo do arquivo [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
Adicione o novo idioma ao enum `Languages` e ao array `client` no topo do arquivo [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
A seguir, siga as instruções nos comentários dentro do mesmo arquivo para adicionar/atualizar o rest das variáveis se necessário.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ Você vai querer [fazer a build do client traduzido localmente](how-to-enable-ne
|
||||
|
||||
1. Atualize o arquivo `.env` para usar seu idioma em `CLIENT_LOCALE` e `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Execute `pnpm run create:config`. Isso gerará automaticamente o arquivo `trending.json` para o seu idioma no diretório `/client/i18n/locales/`.
|
||||
2. Execute `pnpm run create:shared`. Isso gerará automaticamente o arquivo `trending.json` para o seu idioma no diretório `/client/i18n/locales/`.
|
||||
|
||||
3. Inicie o servidor executando `pnpm run develop:server` em uma janela do terminal.
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
- [Передові практики написання коду](codebase-best-practices.md)
|
||||
- [Робота над кодовою базою](how-to-contribute-to-the-codebase.md)
|
||||
- [Робота над завданнями з кодом](how-to-work-on-coding-challenges.md)
|
||||
- [Допомога з навчальної програми](curriculum-help.md)
|
||||
- [Робота над компонентною бібліотекою](how-to-work-on-the-component-library.md)
|
||||
- [Робота над практичними проєктами](how-to-work-on-practice-projects.md)
|
||||
- [Робота над мобільним застосунком](how-to-setup-freecodecamp-mobile-app-locally.md)
|
||||
|
||||
@@ -51,7 +51,7 @@ curriculum/
|
||||
1. За бажанням оновіть і `certSlug` для суперблока у цьому ж файлі. **Зауважте**, що перейменування `certSlug` змінить URL-адресу для сертифікацій, тому це варто робити обережно.
|
||||
1. Оновіть `title` у `client/src/resources/cert-and-project-map.ts` на нові значення. **Зверніть увагу**, що ця зміна `title` **зруйнує** сторінку superBlock для відповідної сертифікації. Це пов’язано із тим, що назва суперблоку повинна відповідати назві сертифікації. Бажано одночасно змінити й назву суперблоку.
|
||||
1. Якщо ви перейменували `certSlug` у сьомому кроці, змініть його для сертифікації та усіх вкладених значень `projects`.
|
||||
1. Оновіть значення `certTypeTitleMap` у `config/certification-settings.js` на нову назву.
|
||||
1. Оновіть значення `certTypeTitleMap` в `shared/config/certification-settings.js` на нову назву.
|
||||
1. Якщо ви перейменували `certSlug` у сьомому кроці, оновіть ключ `certSlugTypeMap` у цьому ж файлі.
|
||||
1. В разі потреби оновіть назву сертифікації у масиві `legacyCerts` у `client/src/client-only-routes/show-project-links.tsx`.
|
||||
1. Змініть основний файл `README.md` на нову назву.
|
||||
@@ -65,14 +65,14 @@ curriculum/
|
||||
1. Перейменуйте папку superBlock у каталозі `curriculum/challenges/english`.
|
||||
1. Перейменуйте папку superBlock у _всіх_ інших каталогах `curriculum/challenges/{language}`.
|
||||
1. Для кожного блоку у цьому суперблоці оновіть значення `superBlock` у файлі `meta.json` на його dashedName. Наразі вам не потрібно перейменовувати папки. Зробіть це при перейменуванні блоку.
|
||||
1. Перейменуйте папку superblock у `client/src/pages/learn`.
|
||||
1. Перейменуйте папку суперблоку в `client/src/pages/learn`.
|
||||
1. Оновіть файл `index.md` у вищевказаній папці, змінивши значення `title` та `superBlock` на нову назву.
|
||||
1. Для кожної вищезазначеної папки у блоці оновіть `index.md` для роботи з правильним значенням `superBlock`.
|
||||
1. Оновіть шлях сертифікації зверху файлу `client/src/resources/cert-and-project-map.ts`, а також оновіть значення `title` цього суперблоку. **Зверніть увагу**, що змінивши `title` **зникне** можливість переглядати сертифікацію цього суперблоку. Це пов’язано з тим, що назва суперблоку повинна відповідати назві сертифікації. Бажано одночасно змінити й назву сертифікації.
|
||||
1. Оновіть ключ `superBlockCertTypeMap` у `config/certification-settings.js` на нову назву суперблоку.
|
||||
1. Оновіть ключ `superBlockCertTypeMap` в `shared/config/certification-settings.js` на нову назву суперблоку.
|
||||
1. Оновіть значення шляху в `client/src/assets/icons/index.tsx`.
|
||||
1. Оновіть файл `intro.json` для кожної мови в `client/i18n/locales` для роботи з новим суперблоком `dashedName`. В англійському файлі також оновіть `title`.
|
||||
1. Перевірте файл `config/i18n/all-langs.js`, щоб дізнатись чи суперблок активний у збірках i18n. Оновіть усі значення, де він використовується.
|
||||
1. Перевірте файл `shared/config/i18n/all-langs.js`, щоб дізнатись чи суперблок активний у збірках i18n. Оновіть усі значення, де він використовується.
|
||||
1. Оновіть назву головного файлу `README.md`.
|
||||
|
||||
### Перейменування блоку
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
# Помічники з навчальної програми
|
||||
|
||||
Тестувальник має доступ до декількох помічників, які можуть допомогти з тестуванням коду кемпера.
|
||||
|
||||
## Помічник CSS
|
||||
|
||||
Щоб створити екземпляр помічника в межах тестового блоку, використайте:
|
||||
|
||||
```js
|
||||
const helper = new __helpers.CSSHelp(document);
|
||||
```
|
||||
|
||||
У цьому прикладі змінна `document` посилається на об’єкт-документ вбудованого фрейму тестувальника.
|
||||
|
||||
### Методи
|
||||
|
||||
Існує декілька доступних методів для парсингу та тестування CSS.
|
||||
|
||||
#### `.getStyle()`
|
||||
|
||||
Метод `.getStyle()` приймає селектор CSS та повертає об’єкт оголошення стилю CSS.
|
||||
|
||||
Наприклад, якщо кемпер написав такий CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
Ви отримаєте такий об’єкт:
|
||||
|
||||
```js
|
||||
{
|
||||
0: "background-image",
|
||||
1: "background-position-x",
|
||||
2: "background-position-y",
|
||||
3: "background-size",
|
||||
4: "background-repeat-x",
|
||||
5: "background-repeat-y",
|
||||
6: "background-attachment",
|
||||
7: "background-origin",
|
||||
8: "background-clip",
|
||||
9: "background-color",
|
||||
10: "margin-top",
|
||||
11: "margin-right",
|
||||
12: "margin-bottom",
|
||||
13: "margin-left",
|
||||
14: "padding-top",
|
||||
15: "padding-right",
|
||||
16: "padding-bottom",
|
||||
17: "padding-left",
|
||||
18: "width",
|
||||
19: "height",
|
||||
20: "overflow-x",
|
||||
21: "overflow-y",
|
||||
"accentColor": "",
|
||||
"additiveSymbols": "",
|
||||
"alignContent": "",
|
||||
"alignItems": "",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
Цей метод дозволяє перевірити, що були встановлені конкретні властивості:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
Помічник прикріплює метод `.getPropVal()` до об’єкта оголошення стилю, що дозволяє отримати значення конкретної властивості:
|
||||
|
||||
```js
|
||||
assert.strictEqual(helper.getStyle('body').getPropVal('width'), '100%');
|
||||
```
|
||||
|
||||
#### `.getCSSRules()`
|
||||
|
||||
Метод `.getCSSRules()` приймає в-правило з `media | fontface | import | keyframes` та повертає масив правил CSS, що відповідають цьому в-правилу.
|
||||
|
||||
Наприклад, якщо кемпер написав такий код:
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) {
|
||||
body {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Поверненим значенням `helper.getCSSRules('media')` буде цей масив:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
conditionText: "(max-width: 100px)",
|
||||
cssRules: [
|
||||
selectorText: 'body',
|
||||
style: CSSStyleDeclaration,
|
||||
styleMap: StylePropertyMap,
|
||||
cssRules: CSSRuleList,
|
||||
type: 1,
|
||||
...
|
||||
],
|
||||
cssText: "@media (max-width: 100px) {\n body { background-color: green; }\n}",
|
||||
...
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Потім ви можете перевірити, чи кемпер написав правильний медіазапит:
|
||||
|
||||
```js
|
||||
const hasCorrectHeight = helper.getCSSRules('media').some(x => x.style.height === '3px');;
|
||||
assert.isTrue(hasCorrectHeight);
|
||||
```
|
||||
|
||||
#### `.getRuleListsWithinMedia()`
|
||||
|
||||
Метод `.getRuleListsWithinMedia()` приймає медіатекст (наприклад, `("max-width: 200")`) та повертає правила CSS в межах цього медіазапиту.
|
||||
|
||||
Повернений результат дорівнює властивості медіаправила `cssRules` з поверненого значення `.getCSSRules("media")`.
|
||||
|
||||
### Менш поширені методи
|
||||
|
||||
Ці методи не настільки поширені, але доступні за необхідності.
|
||||
|
||||
#### `.getStyleDeclarations()`
|
||||
|
||||
Метод `.getStyleDeclarations()` приймає селектор CSS та повертає масив об’єктів оголошення стилю CSS (з методу `.getStyle()`).
|
||||
|
||||
#### `.isPropertyUsed()`
|
||||
|
||||
Метод `.isPropertyUsed()` приймає **властивість** CSS та перевіряє, чи її встановлено/використано в CSS.
|
||||
|
||||
#### `.getStyleRule()`
|
||||
|
||||
Метод `.getStyleRule()` приймає селектор CSS та повертає оголошення стилю CSS, схоже до `.getStyle()`. Однак оголошення, повернене з цього методу, містить додатковий метод `.isDeclaredAfter()`, який приймає селектор та повертає інформацію, чи це правило оголошене після передачі селектора.
|
||||
|
||||
#### `.getStyleSheet()`
|
||||
|
||||
Метод `.getStyleSheet()` повертає CSS кемпера, проаналізований в об’єкт таблиці стилів CSS.
|
||||
|
||||
## Вилучення змісту
|
||||
|
||||
До об’єкта `__helpers` можна застосувати декілька методів, щоб вилучити вміст з коду кемпера.
|
||||
|
||||
Для них НЕ потрібно створювати екземпляри, оскільки це статичні методи.
|
||||
|
||||
### Видалення коментарів
|
||||
|
||||
Методи `__helpers.removeCssComments()`, `__helpers.removeHTMLComments()` та `__helpers.removeJSComments()` дозволяють передати код кемпера (через змінну `code`), щоб вилучити коментарі, які відповідають синтаксису коментарів мови.
|
||||
|
||||
### Видалення пробілів
|
||||
|
||||
Метод `__helpers.removeWhitespace()` дозволяє передати код кемпера (через змінну `code`), щоб видалити всі пробіли.
|
||||
@@ -58,7 +58,7 @@
|
||||
- Створіть конфігураційний файл.
|
||||
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Заповніть базу даних
|
||||
|
||||
@@ -163,7 +163,7 @@ Playwright, як правило, є інструментом з дуже мал
|
||||
|
||||
- Створіть конфігураційний файл.
|
||||
```console
|
||||
pnpm run create:config
|
||||
pnpm run create:shared
|
||||
```
|
||||
|
||||
- Заповніть базу даних
|
||||
@@ -191,4 +191,4 @@ pnpm run playwright:install-build-tools
|
||||
|
||||
```console
|
||||
npx playwright test
|
||||
```
|
||||
```
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
Щоб дозволити кодовій базі функціонувати на обраній вами мові, потрібно зробити декілька кроків.
|
||||
|
||||
Спочатку відвідайте файл [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts), щоб додати мову до списку доступних мов та налаштувати значення. У ньому розміщено декілька об’єктів.
|
||||
Спочатку відвідайте файл [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts), щоб додати мову до списку доступних мов та налаштувати значення. У ньому розміщено декілька об’єктів.
|
||||
|
||||
- `Languages`: додайте нову мову до запису `Languages`, схоже до інших. Значення рядка пізніше буде використане у файлі `.env`, щоб налаштувати збірку мови.
|
||||
- `availableLangs`: додайте нову властивість із запису `Languages` до масивів `client` та `curriculum`.
|
||||
@@ -142,7 +142,7 @@ export const rtlLangs = [''];
|
||||
|
||||
### Налаштуйте перекладені суперблоки
|
||||
|
||||
У файлі [config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/superblocks.ts) додайте нову мову до об’єкту `notAuditedSuperBlocks`. Це виведе список усіх суперблоків, які не повністю перекладені. Додайте сюди масив суперблоків, які не повністю перекладені. Наприклад:
|
||||
Додайте нову мову до об’єкта `notAuditedSuperBlocks` у файлі [shared/config/superblocks.ts](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/superblocks.ts). Це виведе список усіх суперблоків, які не повністю перекладені. Додайте сюди масив суперблоків, які не повністю перекладені. Наприклад:
|
||||
|
||||
```js
|
||||
export const notAuditedSuperBlocks: NotAuditedSuperBlocks = {
|
||||
@@ -319,7 +319,7 @@ videoLocaleIds: Joi.when('challengeType', {
|
||||
|
||||
Як тільки попередній PR буде об’єднаний, а VM для вашої мови буде готовою, створіть ще один PR, щоб додати нову мову до навігаційного меню.
|
||||
|
||||
У файлі [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) ви додали мову до масиву `hiddenLangs` у попередньому PR. Тепер видаліть її з масиву.
|
||||
У файлі [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts) ви додали мову до масиву `hiddenLangs` у попередньому PR. Тепер видаліть її з масиву.
|
||||
|
||||
```js
|
||||
export const hiddenLangs = []; // видаліть свою мову з масиву
|
||||
@@ -437,7 +437,7 @@ const algoliaIndices = {
|
||||
|
||||
### Додайте файли JSON i18next для нової мови
|
||||
|
||||
Перейдіть до каталогу `config/i18n/locales`, створіть нову папку та надайте їй назву мови, яку додаєте. Наприклад, якщо ви додаєте новини дотракійською мовою, створіть папку під назвою `dothraki`.
|
||||
Перейдіть до каталогу `shared/config/i18n/locales`, створіть нову папку та надайте їй назву мови, яку додаєте. Наприклад, якщо ви додаєте новини дотракійською мовою, створіть папку під назвою `dothraki`.
|
||||
|
||||
Потім скопіюйте файли JSON з каталогу `english` до нової папки.
|
||||
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
|
||||
Конфлікти можуть виникнути, якщо над репозиторієм працює багато помічників. Зміни можуть вплинути на PR, який очікує на перегляд та злиття.
|
||||
|
||||
Зазвичай у перебазовуванні немає потреби, оскільки ми стискаємо всі коміти. Однак, якщо перебазовування потрібне, ось що потрібно робити.
|
||||
Оскільки ми об’єднуємо всі затвердження, можливо, вам не знадобиться перебазовування. Якщо перебазовування обов’язкове, див. розділи [«Звичайні помилки та функціональності»](#for-usual-bug-fixes-and-features) або [«Майбутня навчальна програма та функціональності»](#for-upcoming-curriculum-and-features), щоб дізнатись процес для відповідного PR.
|
||||
|
||||
### Звичайні помилки та функціональності
|
||||
|
||||
|
||||
@@ -233,7 +233,7 @@ copy sample.env .env
|
||||
У цьому кроці буде встановлено залежності, необхідні для запуску застосунку:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
#### Крок 3: запустіть MongoDB та додайте базу даних
|
||||
|
||||
@@ -399,7 +399,7 @@ copy sample.env .env
|
||||
4. Встановіть залежності для репозиторію freeCodeCamp:
|
||||
|
||||
```console
|
||||
pnpm install && pnpm run create:config
|
||||
pnpm install && pnpm run create:shared
|
||||
```
|
||||
|
||||
5. Створіть файл JSON з даними завдань:
|
||||
@@ -415,7 +415,7 @@ copy sample.env .env
|
||||
#### **macOS/Linux**
|
||||
|
||||
```console
|
||||
cp ./config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
cp ./shared/config/curriculum.json ../mobile/mobile-app/curriculum.json
|
||||
```
|
||||
|
||||
#### **Windows**
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
|
||||
## Тестування клієнтського застосунку світовою мовою
|
||||
|
||||
Ви можете протестувати клієнтський застосунок будь-якою мовою [ зі списку `availableLangs`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
Ви можете протестувати клієнтський застосунок будь-якою мовою [зі списку `availableLangs`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
```js
|
||||
export const availableLangs = {
|
||||
@@ -97,7 +97,7 @@ export const availableLangs = {
|
||||
|
||||
Якщо ви тестуєте нову мову, створіть папку під назвою мови поряд з іншими мовами та скопіюйте файли JSON з іншої мови до нової папки.
|
||||
|
||||
Додайте нову мову до запису `Languages` та масиву `client` зверху файлу [`config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n.ts).
|
||||
Додайте нову мову до запису `Languages` та масиву `client` зверху файлу [`shared/config/i18n.ts`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/shared/config/i18n.ts).
|
||||
|
||||
Потім дотримуйтесь інструкцій з коментарів того ж файлу, щоб при потребі додати/оновити решту змінних.
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@ article5link: 'https://www.freecodecamp.org/italian/news/cose-un-api-in-italiano
|
||||
|
||||
1. Оновіть файл `.env` так, щоб він використовував вашу мову для `CLIENT_LOCALE` та `CURRICULUM_LOCALE`.
|
||||
|
||||
2. Запустіть `pnpm run create:config`. Це автоматично згенерує файл `trending.json` для вашої мови у каталозі `/client/i18n/locales/`.
|
||||
2. Запустіть `pnpm run create:shared`. Це автоматично згенерує файл `trending.json` для вашої мови у каталозі `/client/i18n/locales/`.
|
||||
|
||||
3. Запустіть сервер, виконавши `pnpm run develop:server` у вікні терміналу.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user