apply changes from review

Author: mansona

guides/release/components/block-content.md

@@ -3,7 +3,7 @@ These are called blocks.
 Here's an example that provides a component with the implicit default block.
 
 ```gjs
-import ExampleComponent from './example-component.gjs';
+import ExampleComponent from 'my-app/components/example-component';
 
 <template>
   <ExampleComponent>
@@ -17,7 +17,7 @@ import ExampleComponent from './example-component.gjs';
 This is equivalent to explicitly naming the default block using the named block syntax.
 
 ```gjs
-import ExampleComponent from './example-component.gjs';
+import ExampleComponent from 'my-app/components/example-component';
 
 <template>
   <ExampleComponent>
@@ -103,8 +103,8 @@ and conditionals to handle the differences in content between them (see the
 previous chapters for details on how to do this).
 
 ```gjs {data-filename="app/components/message.gjs"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 
 <template>
   <MessageAvatar
@@ -132,8 +132,8 @@ supplied by the `<Message>` tag.
 The way to do this in Ember is by using the `{{yield}}` syntax.
 
 ```gjs {data-filename="app/components/message.gjs"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 
 <template>
   <MessageAvatar
@@ -174,7 +174,7 @@ You can think of using `{{yield}}` as leaving a placeholder for the content of t
 `<Message>` tag.
 
 ```gjs {data-filename="app/components/received-message.gjs"}
-import Message from './message.gjs';
+import Message from 'my-app/components/message';
 
 <template>
   <Message
@@ -194,7 +194,7 @@ import Message from './message.gjs';
 ```
 
 ```gjs {data-filename="app/components/sent-message.gjs"}
-import Message from './message.gjs';
+import Message from 'my-app/components/message';
 
 <template>
   <Message
@@ -276,7 +276,7 @@ Now, if we use our `ErrorDialog` component without a block, we'll get the
 default message.
 
 ```gjs
-import ErrorDialog from './error-dialog.gjs';
+import ErrorDialog from 'my-app/components/error-dialog';
 
 <template>
   <ErrorDialog/>
@@ -293,8 +293,8 @@ If we had a more detailed message, though, we could use the block to pass it to
 the dialog.
 
 ```gjs
-import ErrorDialog from './error-dialog.gjs';
-import Icon from './icon.gjs';
+import ErrorDialog from 'my-app/components/error-dialog';
+import Icon from 'my-app/components/icon';
 
 <template>
   <ErrorDialog>
@@ -319,7 +319,7 @@ function in JavaScript. Consider for instance a simple `BlogPost` component.
 ```
 
 ```gjs
-import BlogPost from './blog-post.gjs';
+import BlogPost from 'my-app/components/blog-post';
 
 <template>
   <!-- usage -->
@@ -342,8 +342,8 @@ to them.
 ```
 
 ```gjs
-import BlogPost from './blog-post.gjs';
-import AuthorBio from './author-bio.gjs';
+import BlogPost from 'my-app/components/blog-post';
+import AuthorBio from 'my-app/components/author-bio';
 
 <template>
   <!-- usage -->
@@ -366,8 +366,8 @@ We can yield back multiple values as well, separated by spaces.
 ```
 
 ```gjs
-import BlogPost from './blog-post.gjs';
-import AuthorBio from './author-bio.gjs';
+import BlogPost from 'my-app/components/blog-post';
+import AuthorBio from 'my-app/components/author-bio';
 
 <template>
   <!-- usage -->
@@ -415,7 +415,7 @@ Without named blocks, we would certainly have to pass components as `args` to th
 Here’s how we would call our named blocks as a consumer:
 
 ```gjs
-import Popover from './popover.gjs';
+import Popover from 'my-app/components/popover';
 
 <template>
   <Popover>
@@ -465,7 +465,7 @@ Don't worry, you can also still use `yield` by itself, and mix it with named blo
 A yielded block without a name is called `default`. So to access it, it’s like any other named blocks.
 
 ```gjs
-import Card from './card.gjs';
+import Card from 'my-app/components/card';
 
 <template>
   <Card>
@@ -482,7 +482,7 @@ import Card from './card.gjs';
 The title being optional when you create a card, you can use the `(has-block)` helper with the named block by adding its name as a first parameter. That means you could also create this card:
 
 ```gjs
-import Card from './card.gjs';
+import Card from 'my-app/components/card';
 
 <template>
   <Card>

guides/release/components/built-in-components.md

@@ -37,7 +37,7 @@ When Ember renders this component, you will see the following HTML code:
 
 Every input should be associated with a label. In HTML, there are a few ways to do this. With the built-in `<Input>` component,
 
-#### 1. You can nest the input inside the label.
+1. You can nest the input inside the label.
 
 ```gjs
 import Component from "@glimmer/component";
@@ -60,7 +60,7 @@ export default class Example extends Component {
 }
 ```
 
-#### 2. You can create an ID (globally unique within the webpage), then associate the label to the input with `for` attribute and `id` attribute.
+2. You can create an ID (globally unique within the webpage), then associate the label to the input with `for` attribute and `id` attribute.
 
 ```gjs
 import Component from "@glimmer/component";
@@ -85,7 +85,7 @@ export default class Example extends Component {
 }
 ```
 
-#### 3. You can use the `aria-label` attribute to label the input with a string that is visually hidden but still available to assistive technology. 
+3. You can use the `aria-label` attribute to label the input with a string that is visually hidden but still available to assistive technology. 
 
   ```gjs
 import Component from "@glimmer/component";

guides/release/components/component-arguments-and-html-attributes.md

@@ -56,7 +56,7 @@ and will be specified in the same way. We can now replace the received message
 avatar by using the `<Avatar>` tag and providing it with some arguments.
 
 ```gjs {data-filename="app/components/received-message/avatar.gjs"}
-import Avatar from "../avatar.gjs";
+import Avatar from "my-app/components/avatar";
 
 <template>
   <Avatar @title="Tomster's avatar" @initial="T" />
@@ -91,7 +91,7 @@ the _browser_ what to do, it's telling your custom tag what to do.
 Let's try to use our `<Avatar>` component for the sent message avatar.
 
 ```gjs {data-filename="app/components/sent-message/avatar.gjs"}
-import Avatar from "../avatar.gjs";
+import Avatar from "my-app/components/avatar";
 
 <template>
   <Avatar @title="Zoey's avatar" @initial="Z" />
@@ -111,7 +111,7 @@ We're just missing the `current-user` class on the HTML `<aside>` element. To
 make that work, we'll specify the HTML attribute `class` on the `<Avatar>` tag.
 
 ```gjs {data-filename="app/components/sent-message/avatar.gjs"}
-import Avatar from "../avatar.gjs";
+import Avatar from "my-app/components/avatar";
 
 <template>
   <Avatar

guides/release/components/component-state-and-actions.md

@@ -6,7 +6,7 @@ JavaScript to make your application interactive.
     <div class="cta-note-body">
       <div class="cta-note-heading">Zoey says...</div>
       <div class="cta-note-message">
-        Until now, we've been using template-only components. That is, our `.gjs` component files have consisted of a single `&lt;template&gt;` tag with our markup inside. Now, we're going to add a class. For a more thorough discussion of how `.gjs` files define components, see the section on <strong>template tag format</strong>.
+        Until now, we've been using template-only components. That is, our `.gjs` component files have consisted of a single `&lt;template&gt;` tag with our markup inside. Now, we're going to add a class. For a more thorough discussion of how `.gjs` files define components, see the section on <a href="../template-tag-format/">template tag format</a>.
       </div>
     </div>
     <img src="/images/mascots/zoey.png" role="presentation" alt="">
@@ -64,14 +64,14 @@ property that we defined in the JavaScript class.
 The output looks the same as before, but now the `0` comes from JavaScript, and
 after some more work, we can change its value with the buttons.
 
-## HTML Modifiers and Actions
+## Modifiers and Actions
 
 Next, we want to wire up the buttons. When the user presses `+1`, we want
 `this.count` to go up by 1. When the user presses `-1`, we want it to go down
 by 1.
 
-To attach an event handler to an HTML tag, we use the `on` HTML modifier. HTML
-modifiers are an Ember syntax that allow us to attach logic to a tag.
+To attach an event handler to an HTML tag, we use the `on` modifier. Modifiers
+are an Ember syntax that allow us to attach logic to a tag.
 
 To make those event handlers do something, we will need to define those methods in the component class. These are sometime referred to as actions.
 

guides/release/components/conditional-content.md

@@ -99,7 +99,7 @@ We can do this with an `if`.
 Now we can use this component like so:
 
 ```gjs
-import Username from './components/username.gjs';
+import Username from 'my-app/components/username';
 
 <template>
   {{!-- call it with @localTime  --}}
@@ -230,7 +230,7 @@ The component uses an inline `if` to conditionally apply the `is-active` class.
 Afterwards, we can refactor the initial components.
 
 ```gjs {data-filename="app/components/received-message/avatar.gjs"}
-import Avatar from '../avatar.gjs';
+import Avatar from 'my-app/components/avatar';
 
 <template>
   <Avatar
@@ -242,7 +242,7 @@ import Avatar from '../avatar.gjs';
 ```
 
 ```gjs {data-filename="app/components/sent-message/avatar.gjs"}
-import Avatar from '../avatar.gjs';
+import Avatar from 'my-app/components/avatar';
 
 <template>
   <Avatar

guides/release/components/helper-functions.md

@@ -5,8 +5,8 @@ Ember's template syntax limits what you can express to keep the structure of you
 Let's take a look at a generic message component from a messaging app.
 
 ```gjs {data-filename="app/components/message.gjs"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 
 <template>
   <MessageAvatar
@@ -27,7 +27,7 @@ import MessageUsername from './message/username.gjs';
 ```
 
 ```gjs
-import Message from './message.gjs';
+import Message from 'my-app/components/message';
 
 <template>
   <Message
@@ -52,8 +52,8 @@ Let's update the component to do that. It'll take a `@username` argument and cal
 Since the title is just the `@username` plus some extra stuff, we can replace `@avatarTitle` by _interpolating_ the `@username` argument in a string literal passed to `<Message::Avatar>`.
 
 ```gjs {data-filename="app/components/message.gjs" data-diff="-6,+7"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 
 <template>
   <MessageAvatar
@@ -85,8 +85,8 @@ It's possible to use plain functions for helpers and modifiers. A plain helper f
 We can then use this helper in the component's template to get the first letter of the username.
 
 ```gjs {data-filename="app/components/message.gjs" data-diff="+4,+5,+6,+7,-12,+13"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 
 // Regular JavaScript function to exctract a substring
 function substring(string, start, end) {
@@ -121,8 +121,8 @@ Using named arguments, we could make our template a lot clearer.
 Helpers take _named arguments_ as a JavaScript object. All named arguments are grouped into an "options object" as the last parameter.
 
 ```gjs {data-filename="app/components/message.gjs" data-diff="-5,-6,+7,+8,-14,+15"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 
 // Regular JavaScript function to exctract a substring
 function substring(string, start, end) {
@@ -215,8 +215,8 @@ export default function substring(string, start, end) {
 We can then import this helper and use it in the component's template to get the first letter of the username.
 
 ```gjs {data-filename="app/components/message.gjs" data-diff="+3,-8,+9"}
-import MessageAvatar from './message/avatar.gjs';
-import MessageUsername from './message/username.gjs';
+import MessageAvatar from 'my-app/components/message/avatar';
+import MessageUsername from 'my-app/components/message/username';
 import substring from '../helpers/substring.js';
 
 <template>
@@ -446,7 +446,7 @@ you can pass arrays directly from the template as an argument to your components
 
 ```gjs
 import { array } from '@ember/helper';
-import MyComponent from './my-component.gjs';
+import MyComponent from 'my-app/components/my-component';
 
 const myOtherPerson = 'George Washington';
 
@@ -481,7 +481,7 @@ components.
 
 ```gjs
 import { hash } from '@ember/helper';
-import Greeting from './greeting.gjs';
+import Greeting from 'my-app/components/greeting';
 
 <template>
   <Greeting