Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate /tutorial/part-1/reusable-components.md, Ember 5.11 #267

Open
BlueCutOfficial opened this issue Oct 4, 2024 · 0 comments
Open
Labels
Guides FR trad File from the Ember Guides to translate in French

Comments

@BlueCutOfficial
Copy link
Member

Please assign yourself to the issue or let a comment at the very moment you start the translation.

File: guides/tutorial/part-1/reusable-components.md
From Ember: 5.4
To Ember: 5.11

In the snippet below, you can see what changes were done in the latest English documentation. The purpose of this issue is to adjust the French translation to match the new version:

diff --git a/guides/tutorial/part-1/reusable-components.md b/guides/tutorial/part-1/reusable-components.md
index 3b653370a..b77bcc284 100644
--- a/guides/tutorial/part-1/reusable-components.md
+++ b/guides/tutorial/part-1/reusable-components.md
@@ -2,7 +2,7 @@
 
 The last missing feature for the `<Rental>` component is a map to show the location of the rental, which is what we're going to work on next:
 
-<img src="/images/tutorial/part-1/reusable-components/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="1129">
+<img src="/images/tutorial/part-1/reusable-components/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="1130">
 
 While adding the map, you will learn about:
 
@@ -24,17 +24,18 @@ If you're curious, you can explore the options available on Mapbox by using the
 
 Once you have signed up for the service, grab your _[default public token](https://account.mapbox.com/access-tokens/)_ and paste it into `config/environment.js`:
 
-js { data-filename="config/environment.js" data-diff="+47,+48" }
+js { data-filename="config/environment.js" data-diff="+48,+49" }
 'use strict';
 
 module.exports = function (environment) {
-  let ENV = {
+  const ENV = {
     modulePrefix: 'super-rentals',
     environment,
     rootURL: '/',
     locationType: 'history',
     EmberENV: {
       RAISE_ON_DEPRECATION: true,
+      EXTEND_PROTOTYPES: false,
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
         // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
@@ -95,10 +96,14 @@ After saving the changes to our configuration file, we will need to restart our
 
 <!-- TODO: https://github.com/ember-cli/ember-cli/issues/8782 -->
 
-You can stop the server by finding the terminal window where `ember server` is running, then type `Ctrl + C`. That is, typing the "C" key on your keyboard _while_ holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `ember server` command.
+You can stop the server by finding the terminal window where `npm start` is running, then type `Ctrl + C`. That is, typing the "C" key on your keyboard _while_ holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `npm start` command.
 
 shell
-$ ember server
+$ npm start
+
+> [email protected] start
+> ember serve
+
 building... 
 
 Build successful (13286ms) – Serving on http://localhost:4200/
@@ -115,6 +120,8 @@ installing component
   create app/components/map.hbs
 installing component-test
   create tests/integration/components/map-test.js
+
+Running "lint:fix" script...
 
 
 Since not every component will necessarily have some defined behavior associated with it, the component generator does not generate a JavaScript file for us by default. As we saw earlier, we can always use the `component-class` generator to add a JavaScript file for a component later on.
@@ -141,15 +148,15 @@ Let's start with our JavaScript file:
 import Component from '@glimmer/component';
 import ENV from 'super-rentals/config/environment';
 
-export default class MapComponent extends Component {}
-export default class MapComponent extends Component {
+export default class Map extends Component {}
+export default class Map extends Component {
   get token() {
     return encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
   }
 }
 
 
-Here, we import the access token from the config file and return it from a `token` _[getter](https://javascript.info/property-accessors)_. This allows us to access our token as `this.token` both inside the `MapComponent` class body, as well as the component's template. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
+Here, we import the access token from the config file and return it from a `token` _[getter](https://javascript.info/property-accessors)_. This allows us to access our token as `this.token` both inside the `Map` class body, as well as the component's template. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
 
 ## Interpolating Values in Templates
 
@@ -223,7 +230,7 @@ module('Integration | Component | map', function (hooks) {
       .hasAttribute('width', '150')
       .hasAttribute('height', '120');
 
-    assert.dom(this.element).hasText('');
+    assert.dom().hasText('');
     let { src } = find('.map img');
     let token = encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
 
@@ -235,23 +242,23 @@ module('Integration | Component | map', function (hooks) {
     `);
     assert.ok(
       src.startsWith('https://api.mapbox.com/'),
-      'the src starts with "https://api.mapbox.com/"'
+      'the src starts with "https://api.mapbox.com/"',
     );
 
-    assert.dom(this.element).hasText('template block text');
+    assert.dom().hasText('template block text');
     assert.ok(
       src.includes('-122.4184,37.7797,10'),
-      'the src should include the lng,lat,zoom parameter'
+      'the src should include the lng,lat,zoom parameter',
     );
 
     assert.ok(
       src.includes('150x120@2x'),
-      'the src should include the width,height and @2x parameter'
+      'the src should include the width,height and @2x parameter',
     );
 
     assert.ok(
       src.includes(`access_token=${token}`),
-      'the src should include the escaped access token'
+      'the src should include the escaped access token',
     );
   });
 
@@ -331,7 +338,7 @@ Hey, all the tests passed! But does that mean it actually works in practice? Let
 
 Hey! That's a map!
 
-<img src="/images/tutorial/part-1/reusable-components/[email protected]" alt="Three Grand Old Mansions" width="1024" height="1129">
+<img src="/images/tutorial/part-1/reusable-components/[email protected]" alt="Three Grand Old Mansions" width="1024" height="1130">
 
 <!-- TODO: https://github.com/ember-cli/ember-cli/issues/8782 -->
 
@@ -397,7 +404,7 @@ import ENV from 'super-rentals/config/environment';
 
 const MAPBOX_API = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static';
 
-export default class MapComponent extends Component {
+export default class Map extends Component {
   get src() {
     let { lng, lat, width, height, zoom } = this.args;
 
@@ -472,22 +479,22 @@ module('Integration | Component | map', function (hooks) {
 
     assert.ok(
       src.startsWith('https://api.mapbox.com/'),
-      'the src starts with "https://api.mapbox.com/"'
+      'the src starts with "https://api.mapbox.com/"',
     );
 
     assert.ok(
       src.includes('-122.4184,37.7797,10'),
-      'the src should include the lng,lat,zoom parameter'
+      'the src should include the lng,lat,zoom parameter',
     );
 
     assert.ok(
       src.includes('150x120@2x'),
-      'the src should include the width,height and @2x parameter'
+      'the src should include the width,height and @2x parameter',
     );
 
     assert.ok(
       src.includes(`access_token=${token}`),
-      'the src should include the escaped access token'
+      'the src should include the escaped access token',
     );
   });
 
@@ -512,12 +519,12 @@ module('Integration | Component | map', function (hooks) {
 
     assert.ok(
       img.src.includes('-122.4194,37.7749,10'),
-      'the src should include the lng,lat,zoom parameter'
+      'the src should include the lng,lat,zoom parameter',
     );
 
     assert.ok(
       img.src.includes('150x120@2x'),
-      'the src should include the width,height and @2x parameter'
+      'the src should include the width,height and @2x parameter',
     );
 
     this.setProperties({
@@ -528,12 +535,12 @@ module('Integration | Component | map', function (hooks) {
 
     assert.ok(
       img.src.includes('-122.4194,37.7749,12'),
-      'the src should include the lng,lat,zoom parameter'
+      'the src should include the lng,lat,zoom parameter',
     );
 
     assert.ok(
       img.src.includes('300x200@2x'),
-      'the src should include the width,height and @2x parameter'
+      'the src should include the width,height and @2x parameter',
     );
 
     this.setProperties({
@@ -543,12 +550,12 @@ module('Integration | Component | map', function (hooks) {
 
     assert.ok(
       img.src.includes('-122.3321,47.6062,12'),
-      'the src should include the lng,lat,zoom parameter'
+      'the src should include the lng,lat,zoom parameter',
     );
 
     assert.ok(
       img.src.includes('300x200@2x'),
-      'the src should include the width,height and @2x parameter'
+      'the src should include the width,height and @2x parameter',
     );
   });
 
@BlueCutOfficial BlueCutOfficial added the Guides FR trad File from the Ember Guides to translate in French label Oct 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Guides FR trad File from the Ember Guides to translate in French
Projects
None yet
Development

No branches or pull requests

1 participant