Merge new tutorial into master

.eslintrc.js

@@ -1,11 +1,12 @@
 module.exports = {
-  globals: {
-    server: true
-  },
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 2017,
-    sourceType: 'module'
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember'
@@ -18,6 +19,7 @@ module.exports = {
     browser: true
   },
   rules: {
+    'ember/no-jquery': 'error'
   },
   overrides: [
     // node files
@@ -33,13 +35,20 @@ module.exports = {
         'server/**/*.js'
       ],
       parserOptions: {
-        sourceType: 'script',
-        ecmaVersion: 2015
+        sourceType: 'script'
       },
       env: {
         browser: false,
         node: true
-      }
+      },
+      plugins: ['node'],
+      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
+        // add your custom rules and overrides for node files here
+
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off'
+      })
     }
   ]
 };

.gitignore

@@ -18,7 +18,6 @@
 /npm-debug.log*
 /testem.log
 /yarn-error.log
-/.projectile
 
 # ember-try
 /.node_modules.ember-try/

.template-lintrc.js

@@ -1,8 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended',
-  rules: {
-    'no-implicit-this': true,
-  },
+  extends: 'octane'
 };

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   - "8"
 
-sudo: required
+sudo: false
 dist: trusty
 
 addons:
@@ -17,10 +17,18 @@ env:
     # See https://git.io/vdao3 for details.
     - JOBS=1
 
+branches:
+  only:
+    - master
+
 before_install:
-  - npm config set spin false
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+
+install:
+  - yarn install --non-interactive
 
 script:
-  - npm run lint:hbs
-  - npm run lint:js
-  - npm test
+  - yarn lint:hbs
+  - yarn lint:js
+  - yarn test

README.md

@@ -3,7 +3,7 @@
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
 
 This is a working repository for the Super Rentals tutorial,
-which you can check out at https://guides.emberjs.com/current/tutorial/ember-cli/.
+which you can check out at https://guides.emberjs.com/release/tutorial/.
 
 ## Prerequisites
 
@@ -14,6 +14,7 @@ You will need the following things properly installed on your computer.
 * [Yarn](https://yarnpkg.com/)
 * [Ember CLI](https://ember-cli.com/)
 * [Google Chrome](https://google.com/chrome/)
+* A [Mapbox API token](https://account.mapbox.com/access-tokens/) (with the "styles:tiles" scope)
 
 ## Installation
 
@@ -23,7 +24,7 @@ You will need the following things properly installed on your computer.
 
 ## Running / Development
 
-* `ember serve`
+* `MAPBOX_ACCESS_TOKEN=YOUR_TOKEN ember serve`
 * Visit your app at [http://localhost:4200](http://localhost:4200).
 * Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
 
@@ -38,14 +39,14 @@ Make use of the many generators for code, try `ember help generate` for more det
 
 ### Linting
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn lint:hbs`
+* `yarn lint:js`
+* `yarn lint:js --fix`
 
 ### Building
 
-* `ember build` (development)
-* `ember build --environment production` (production)
+* `MAPBOX_ACCESS_TOKEN=YOUR_TOKEN ember build` (development)
+* `MAPBOX_ACCESS_TOKEN=YOUR_TOKEN ember build --environment production` (production)
 
 ### Deploying
 

app.json

@@ -9,8 +9,8 @@
     }
   ],
   "env": {
-    "GOOGLE_MAPS_API_KEY": {
-      "description": "Google API KEY for Google Maps, https://developers.google.com/maps/documentation/javascript/get-api-key",
+    "MAPBOX_ACCESS_TOKEN": {
+      "description": "API KEY for Mapbox with \"styles:tiles\" scope, https://account.mapbox.com/access-tokens/",
       "required": true
     }
   }

app/adapters/application.js

@@ -1,5 +1,9 @@
-import DS from 'ember-data';
+import JSONAPIAdapter from '@ember-data/adapter/json-api';
 
-export default DS.JSONAPIAdapter.extend({
-  namespace: 'api'
-});
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  namespace = 'api';
+
+  buildURL(...args) {
+    return `${super.buildURL(...args)}.json`;
+  }
+}

app/app.js

@@ -1,14 +1,12 @@
 import Application from '@ember/application';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-const App = Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver
-});
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

app/components/jumbo.hbs

@@ -0,0 +1,4 @@
+<div class="jumbo">
+  <div class="right tomster"></div>
+  {{yield}}
+</div>

app/components/map.hbs

@@ -0,0 +1,8 @@
+<div class="map">
+  <img
+    alt="Map image at coordinates {{@lat}},{{@lng}}"
+    ...attributes
+    src={{this.src}}
+    width={{@width}} height={{@height}}
+  >
+</div>

app/components/map.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+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 {
+  get src() {
+    let { lng, lat, width, height, zoom } = this.args;
+
+    let coordinates = `${lng},${lat},${zoom}`;
+    let dimensions  = `${width}x${height}`;
+    let accessToken = `access_token=${this.token}`;
+
+    return `${MAPBOX_API}/${coordinates}/${dimensions}@2x?${accessToken}`;
+  }
+
+  get token() {
+    return encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
+  }
+}

app/components/nav-bar.hbs

@@ -0,0 +1,13 @@
+<nav class="menu">
+  <LinkTo @route="index" class="menu-index">
+    <h1>SuperRentals</h1>
+  </LinkTo>
+  <div class="links">
+    <LinkTo @route="about" class="menu-about">
+      About
+    </LinkTo>
+    <LinkTo @route="contact" class="menu-contact">
+      Contact
+    </LinkTo>
+  </div>
+</nav>

app/components/rental.hbs

@@ -0,0 +1,33 @@
+<article class="rental">
+  <Rental::Image
+    src={{@rental.image}}
+    alt="A picture of {{@rental.title}}"
+  />
+  <div class="details">
+    <h3>
+      <LinkTo @route="rental" @model={{@rental}}>
+        {{@rental.title}}
+      </LinkTo>
+    </h3>
+    <div class="detail owner">
+      <span>Owner:</span> {{@rental.owner}}
+    </div>
+    <div class="detail type">
+      <span>Type:</span> {{@rental.type}}
+    </div>
+    <div class="detail location">
+      <span>Location:</span> {{@rental.city}}
+    </div>
+    <div class="detail bedrooms">
+      <span>Number of bedrooms:</span> {{@rental.bedrooms}}
+    </div>
+  </div>
+  <Map
+    @lat={{@rental.location.lat}}
+    @lng={{@rental.location.lng}}
+    @zoom="9"
+    @width="150"
+    @height="150"
+    alt="A map of {{@rental.title}}"
+  />
+</article>

app/components/rental/detailed.hbs

@@ -0,0 +1,48 @@
+<Jumbo>
+  <h2>{{@rental.title}}</h2>
+  <p>Nice find! This looks like a nice place to stay near {{@rental.city}}.</p>
+  <ShareButton
+    @text="Check out {{@rental.title}} on Super Rentals!"
+    @hashtags="vacation,travel,authentic,blessed,superrentals"
+    @via="emberjs"
+  >
+    Share on Twitter
+  </ShareButton>
+</Jumbo>
+
+<article class="rental detailed">
+  <Rental::Image
+    src={{@rental.image}}
+    alt="A picture of {{@rental.title}}"
+  />
+
+  <div class="details">
+    <h3>About {{@rental.title}}</h3>
+
+    <div class="detail owner">
+      <span>Owner:</span> {{@rental.owner}}
+    </div>
+    <div class="detail type">
+      <span>Type:</span> {{@rental.type}} – {{@rental.category}}
+    </div>
+    <div class="detail location">
+      <span>Location:</span> {{@rental.city}}
+    </div>
+    <div class="detail bedrooms">
+      <span>Number of bedrooms:</span> {{@rental.bedrooms}}
+    </div>
+    <div class="detail description">
+      <p>{{@rental.description}}</p>
+    </div>
+  </div>
+
+  <Map
+    @lat={{@rental.location.lat}}
+    @lng={{@rental.location.lng}}
+    @zoom="12"
+    @width="894"
+    @height="600"
+    alt="A map of {{@rental.title}}"
+    class="large"
+  />
+</article>

app/components/rental/image.hbs

@@ -0,0 +1,4 @@
+<button type="button" class="image {{if this.isLarge "large"}}" {{on "click" this.toggleSize}}>
+  <img ...attributes>
+  <small>View {{if this.isLarge "Smaller" "Larger"}}</small>
+</button>

app/components/rental/image.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class RentalImageComponent extends Component {
+  @tracked isLarge = false;
+
+  @action toggleSize() {
+    this.isLarge = !this.isLarge;
+  }
+}