Skip to content

Apply the changes to the tutorial for the gjs branch #2151

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Sep 18, 2025
Merged

Apply the changes to the tutorial for the gjs branch #2151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion guides/release/tutorial/part-1/automated-testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Heads up! This is a generated file, do not edit directly. You can find the source at https://github.com/ember-learn/super-rentals-tutorial/blob/master/src/markdown/tutorial/part-1/03-automated-testing.md -->

Check failure on line 1 in guides/release/tutorial/part-1/automated-testing.md

View workflow job for this annotation

GitHub Actions / Do Not Edit Generated Files 

This is a generated file, do not edit directly. Follow the URL above to edit the source file instead.

In this chapter, you will use Ember's built-in testing framework to write some automated tests for your app. By the end of this chapter, we will have an automated test suite that we can run to ensure our app is working correctly:

Expand Down Expand Up @@ -125,7 +125,7 @@

It happens really quickly though—blink and you might miss it! In fact, I had to slow this animation down by a hundred times just so you can see it in action. I told you the robot has really, really fast hands!

As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has _passed_, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.hbs`, delete the `<LinkTo>` component and see what things look like when we have _a failing test_.
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has _passed_, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.gjs`, delete the `<LinkTo>` component and see what things look like when we have _a failing test_.

<img src="/images/tutorial/part-1/automated-testing/[email protected]" alt="A failing test" width="1024" height="768">

Expand Down
148 changes: 82 additions & 66 deletions guides/release/tutorial/part-1/building-pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Heads up! This is a generated file, do not edit directly. You can find the source at https://github.com/ember-learn/super-rentals-tutorial/blob/master/src/markdown/tutorial/part-1/02-building-pages.md -->

Check failure on line 1 in guides/release/tutorial/part-1/building-pages.md

View workflow job for this annotation

GitHub Actions / Do Not Edit Generated Files 

This is a generated file, do not edit directly. Follow the URL above to edit the source file instead.

In this chapter, you will build the first few pages of your Ember app and set up links between them. By the end of this chapter, you should have two new pages – an about page and a contact page. These pages will be linked to from your landing page:

Expand Down Expand Up @@ -43,18 +43,20 @@

## Using Route Templates

With that in place, we can create a new `app/templates/about.hbs` template with the following content:

```handlebars { data-filename="app/templates/about.hbs" }
<div class="jumbo">
<div class="right tomster"></div>
<h2>About Super Rentals</h2>
<p>
The Super Rentals website is a delightful project created to explore Ember.
By building a property rental site, we can simultaneously imagine traveling
AND building Ember applications.
</p>
</div>
With that in place, we can create a new `app/templates/about.gjs` template with the following content:

```gjs { data-filename="app/templates/about.gjs" }
<template>
<div class="jumbo">
<div class="right tomster"></div>
<h2>About Super Rentals</h2>
<p>
The Super Rentals website is a delightful project created to explore Ember.
By building a property rental site, we can simultaneously imagine traveling
AND building Ember applications.
</p>
</div>
</template>
```

To see this in action, navigate to `http://localhost:4200/about`.
Expand Down Expand Up @@ -86,26 +88,28 @@

Here, we added the `contact` route, but explicitly specified a path for the route. This allows us to keep the legacy URL, but use the new, shorter name for the route, as well as the template filename.

Speaking of the template, let's create that as well. We'll add a `app/templates/contact.hbs` file:

```handlebars { data-filename="app/templates/contact.hbs" }
<div class="jumbo">
<div class="right tomster"></div>
<h2>Contact Us</h2>
<p>
Super Rentals Representatives would love to help you<br>
choose a destination or answer any questions you may have.
</p>
<address>
Super Rentals HQ
Speaking of the template, let's create that as well. We'll add a `app/templates/contact.gjs` file:

```gjs { data-filename="app/templates/contact.gjs" }
<template>
<div class="jumbo">
<div class="right tomster"></div>
<h2>Contact Us</h2>
<p>
1212 Test Address Avenue<br>
Testington, OR 97233
Super Rentals Representatives would love to help you<br>
choose a destination or answer any questions you may have.
</p>
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
<a href="mailto:[email protected]">[email protected]</a>
</address>
</div>
<address>
Super Rentals HQ
<p>
1212 Test Address Avenue<br>
Testington, OR 97233
</p>
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
<a href="mailto:[email protected]">[email protected]</a>
</address>
</div>
</template>
```

Ember comes with strong _conventions_ and sensible defaults—if we were starting from scratch, we wouldn't mind the default `/contact` URL. However, if the defaults don't work for us, it is no problem at all to customize Ember for our needs!
Expand All @@ -122,52 +126,64 @@

With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Ember provides an alternative called `<LinkTo>`. For example, here is how you would use it on the pages we just created:

```handlebars { data-filename="app/templates/index.hbs" data-diff="+5" }
<div class="jumbo">
<div class="right tomster"></div>
<h2>Welcome to Super Rentals!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
<LinkTo @route="about" class="button">About Us</LinkTo>
</div>
```gjs { data-filename="app/templates/index.gjs" data-diff="+1,+2,+8" }
import { LinkTo } from '@ember/routing';

<template>
<div class="jumbo">
<div class="right tomster"></div>
<h2>Welcome to Super Rentals!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
<LinkTo @route="about" class="button">About Us</LinkTo>
</div>
</template>
```

```handlebars { data-filename="app/templates/about.hbs" data-diff="+9" }
<div class="jumbo">
<div class="right tomster"></div>
<h2>About Super Rentals</h2>
<p>
The Super Rentals website is a delightful project created to explore Ember.
By building a property rental site, we can simultaneously imagine traveling
AND building Ember applications.
</p>
<LinkTo @route="contact" class="button">Contact Us</LinkTo>
</div>
```gjs { data-filename="app/templates/about.gjs" data-diff="+1,+2,+12" }
import { LinkTo } from '@ember/routing';

<template>
<div class="jumbo">
<div class="right tomster"></div>
<h2>About Super Rentals</h2>
<p>
The Super Rentals website is a delightful project created to explore Ember.
By building a property rental site, we can simultaneously imagine traveling
AND building Ember applications.
</p>
<LinkTo @route="contact" class="button">Contact Us</LinkTo>
</div>
</template>
```

```handlebars { data-filename="app/templates/contact.hbs" data-diff="+17" }
<div class="jumbo">
<div class="right tomster"></div>
<h2>Contact Us</h2>
<p>
Super Rentals Representatives would love to help you<br>
choose a destination or answer any questions you may have.
</p>
<address>
Super Rentals HQ
```gjs { data-filename="app/templates/contact.gjs" data-diff="+1,+2,+20" }
import { LinkTo } from '@ember/routing';

<template>
<div class="jumbo">
<div class="right tomster"></div>
<h2>Contact Us</h2>
<p>
1212 Test Address Avenue<br>
Testington, OR 97233
Super Rentals Representatives would love to help you<br>
choose a destination or answer any questions you may have.
</p>
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
<a href="mailto:[email protected]">[email protected]</a>
</address>
<LinkTo @route="about" class="button">About</LinkTo>
</div>
<address>
Super Rentals HQ
<p>
1212 Test Address Avenue<br>
Testington, OR 97233
</p>
<a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
<a href="mailto:[email protected]">[email protected]</a>
</address>
<LinkTo @route="about" class="button">About</LinkTo>
</div>
</template>
```

There is quite a bit going on here, so let's break it down.

`<LinkTo>` is an example of a _[component](../../../components/introducing-components/)_ in Ember—you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
`<LinkTo>` is an example of a _[component](../../../components/introducing-components/)_ in Ember. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. Unlike regular HTML tags, components need to be imported before they can be used. In this case, `<LinkTo>` is imported from the `@ember/routing` package that is part of Ember.

We have a lot more to say about components later, but for now, you can think of them as a way to provide _custom tags_ to supplement the built-in ones that came with the browser.

Expand Down
Loading