mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-30 03:03:06 -05:00
feat: add docs for News launches (#48025)
Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com> Co-authored-by: Sem Bauke <semboot699@gmail.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
This commit is contained in:
Kristofer Koishigawa
committed by
GitHub
GitHub
parent
2f841a56db
commit
382717cce4
@@ -281,3 +281,138 @@ Once these are in place, you should be able to run `npm run develop` to view you
|
||||
|
||||
> [!ATTENTION]
|
||||
> While you may perform translations locally for the purpose of testing, we remind everyone that translations should _not_ be submitted through GitHub and should only be done through Crowdin. Be sure to reset your local codebase after you are done testing.
|
||||
|
||||
# Deploying New Languages on `/news`
|
||||
|
||||
To deploy News for a new language, you'll need to create two PRs. One PR will be to the [CDN repo](https://github.com/freeCodeCamp/cdn), and the other will be to the [News repo](https://github.com/freeCodeCamp/news).
|
||||
|
||||
## Prep the CDN Repo for the New Language
|
||||
|
||||
News sources trending links and article titles from our CDN during the build and adds them to the footer. News also fetches Day.js files from the CDN during the build to localize dates and times for each language.
|
||||
|
||||
### Add a YAML File for Trending Articles
|
||||
|
||||
Clone the [CDN repo](https://github.com/freeCodeCamp/cdn) and create a new branch.
|
||||
|
||||
In the [`build/universal/trending`](https://github.com/freeCodeCamp/cdn/tree/main/build/universal/trending) directory, create a new file and name it `language.yaml`. For example, if you are launching Dothraki News, name the file `dothraki.yaml`.
|
||||
|
||||
Then copy the contents of the [`english.yaml`](https://github.com/freeCodeCamp/cdn/blob/main/build/universal/trending/english.yaml) trending file and paste it into the new YAML file you just created.
|
||||
|
||||
The contents will look something like this:
|
||||
|
||||
```yaml
|
||||
article0title: 'Learn JavaScript'
|
||||
article0link: 'https://www.freecodecamp.org/news/learn-javascript-free-js-courses-for-beginners/'
|
||||
article1title: 'Linux ln Example'
|
||||
article1link: 'https://www.freecodecamp.org/news/linux-ln-how-to-create-a-symbolic-link-in-linux-example-bash-command'
|
||||
article2title: 'JS document.ready()'
|
||||
article2link: 'https://www.freecodecamp.org/news/javascript-document-ready-jquery-example/'
|
||||
article3title: ...
|
||||
article3link: ...
|
||||
...
|
||||
```
|
||||
|
||||
### Add a Day.js Locale File for the New Language
|
||||
|
||||
By default, Day.js only includes English as a locale. To enable it to work with other languages, you need to add a new Day.js locale file to the CDN.
|
||||
|
||||
In the [`build/news-assets/dayjs/<version>/locale`](https://github.com/freeCodeCamp/cdn/tree/main/build/news-assets/dayjs/1.10.4/locale) directory, create a new file and name it `isocode.min.js`. For example, if you are launching Dothraki News, name the file `mis.min.js`.
|
||||
|
||||
> [!NOTE]
|
||||
> The version number will change as the dependencies are updated.
|
||||
|
||||
Then, visit [this page on cdnjs](https://cdnjs.com/libraries/dayjs/1.10.4) with all available Day.js files for the version we're using, find the `https://cdnjs.cloudflare.com/ajax/libs/dayjs/<version>/locale/isocode.min.js` link for the new language, and open it in a new tab.
|
||||
|
||||
> [!NOTE]
|
||||
> You only need to add the .../dayjs/\<version\>/_locale_/isocode.min.js locale file. You do not need to add any other Day.js files.
|
||||
|
||||
Copy the Day.js locale code from the new tab into the new file you created. For example, here is an un-minified version of the English locale code for Day.js:
|
||||
|
||||
```js
|
||||
!(function (e, n) {
|
||||
'object' == typeof exports && 'undefined' != typeof module
|
||||
? (module.exports = n())
|
||||
: 'function' == typeof define && define.amd
|
||||
? define(n)
|
||||
: (e.dayjs_locale_en = n());
|
||||
})(this, function () {
|
||||
'use strict';
|
||||
return {
|
||||
name: 'en',
|
||||
weekdays: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split(
|
||||
'_'
|
||||
),
|
||||
months:
|
||||
'January_February_March_April_May_June_July_August_September_October_November_December'.split(
|
||||
'_'
|
||||
)
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
Then open a PR to the CDN repo to add both the YAML and Day.js files for review.
|
||||
|
||||
## Prep the News Repo for the New Language
|
||||
|
||||
The [News repo](https://github.com/freeCodeCamp/news) pulls data from a Ghost instance, the files you added to the CDN, builds News, and deploys it.
|
||||
|
||||
> [!WARN]
|
||||
> Pull requests to the news repo _must_ come from the same repo. You should not work off of a fork for this step.
|
||||
|
||||
### Modify the Main Config File
|
||||
|
||||
Clone the News repo and create a new branch.
|
||||
|
||||
Open the `config/index.js` file to add the new language and configure the necessary values. There are a few objects and arrays to modify:
|
||||
|
||||
- `locales`: This array contains the active and upcoming News languages. These are the values that are used in the `.env` file to choose the Ghost instance and UI to use for each build. Add the text name of the new language in lowercase to this array.
|
||||
- `localeCodes`: This object is a map of ISO codes for each language, and is used to configure i18next before building the UI. To add a new language, use the lowercase language name as the _key_ and the ISO 639-1 language code as the _value_.
|
||||
- `algoliaIndices`: This object is a map of Algolia indices for each language. To add a new language, use the lowercase language name as the _key_, and `news-` followed by the lowercase ISO 639-1 language code as the _value_.
|
||||
|
||||
> [!NOTE]
|
||||
> If you are unsure about the string to use while setting `algoliaIndices`, send a message to Kris (@scissorsneedfoodtoo), or someone else with access to Algolia, and ask them to check.
|
||||
|
||||
For example, if you are launching Dothraki News, here are what the objects / arrays above should look like:
|
||||
|
||||
```js
|
||||
const locales = ['arabic', 'bengali', 'chinese', 'english', 'dothraki'];
|
||||
|
||||
const localeCodes = {
|
||||
arabic: 'ar',
|
||||
bengali: 'bn',
|
||||
chinese: 'zh',
|
||||
english: 'en',
|
||||
dothraki: 'mis'
|
||||
};
|
||||
|
||||
const algoliaIndices = {
|
||||
arabic: 'news-ar',
|
||||
bengali: 'news-bn',
|
||||
chinese: 'news-zh',
|
||||
english: 'news',
|
||||
dothraki: 'news-mis'
|
||||
};
|
||||
```
|
||||
|
||||
### 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`.
|
||||
|
||||
Then copy the JSON files from the `english` directory to your new folder.
|
||||
|
||||
In your new folder, open the `serve.json` file and replace its contents with the following:
|
||||
|
||||
```json
|
||||
{
|
||||
"redirects": []
|
||||
}
|
||||
```
|
||||
|
||||
Then commit and push your branch directly to the News repo.
|
||||
|
||||
> [!NOTE]
|
||||
> You need to be on one of the teams with access to the News repo to push branches directly to News. Currently, only the dev, i18n, and staff teams are allowed to do this.
|
||||
|
||||
Finally, open a PR for review.
|
||||
|
||||
Once both your PRs to the CDN and News repo have been approved, they can be merged. Deployment will be handled subsequently by the staff.
|
||||
|
||||
Reference in New Issue
Block a user