Skip to content

Commit 866ffbb

Browse files
rwjbluerwjblue
authored
Merge pull request #81 from ijlee2/update-readme-for-Octane
2 parents fd6f33a + c351830 commit 866ffbb

1 file changed

Lines changed: 75 additions & 67 deletions

File tree

‎README.md‎

Lines changed: 75 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,152 @@
1-
# ember-cli-head [![Build Status](https://github.com/ronco/ember-cli-head/workflows/Build/badge.svg?branch=master)](https://github.com/ronco/ember-cli-head/actions?query=branch%3Amaster+workflow%3A%22Build%22)
1+
[![Build Status](https://github.com/ronco/ember-cli-head/workflows/Build/badge.svg?branch=master)](https://github.com/ronco/ember-cli-head/actions?query=branch%3Amaster+workflow%3A%22Build%22)
22

3-
This addon adds easy population of head tags from your Ember code
4-
without any direct hacky DOM manipulation. This addon also provides
5-
[ember-cli-fastboot](https://github.com/tildeio/ember-cli-fastboot)
6-
compatibility for generating head tags in server-rendered apps.
3+
# ember-cli-head
4+
5+
This addon lets you populate `<head>` tag from your Ember code without any direct hacky DOM manipulation. It also provides [ember-cli-fastboot](https://github.com/ember-fastboot/ember-cli-fastboot) compatibility for generating head tags in server-rendered apps.
6+
7+
The hope is that, in the future, Ember will provide a mechanism for populating `<head>` tag from your app. Until then, this addon provides that functionality.
78

8-
The hope is that Ember itself will provide a mechanism for populating
9-
head tags from your app at some time in the future. Until then this
10-
addon provides that functionality.
119

1210
## Compatibility
1311

1412
* Ember.js v2.18 or above
1513
* Ember CLI v2.13 or above
1614
* Node.js v10 or above
1715

16+
1817
## Installation
1918

2019
Install by running
2120

22-
```
21+
```bash
2322
ember install ember-cli-head
2423
```
2524

26-
And add `{{head-layout}}` to the top of your application template.
25+
Then, add `<HeadLayout />` to the top of your application template.
26+
27+
```handlebars
28+
{{!-- app/templates/application.hbs --}}
29+
30+
<HeadLayout />
31+
32+
{{outlet}}
33+
```
34+
35+
36+
### Version
37+
38+
Take into account that version >= 0.3 of this addon require Ember 2.10+ and fastboot >=1.0.rc1. Please use 0.2.X if you don't fulfill both requirements.
2739

28-
#### Version
29-
Take into account that version >= 0.3 of this addon require Ember 2.10+ and fastboot >=1.0.rc1
30-
Please use 0.2.X if you don't fulfill both requirements.
3140

3241
## Usage
3342

34-
#### Template
43+
### Head template
3544

36-
By installing this addon you will find a new template added to your
37-
app:
45+
By installing this addon, you will find a new template added to your app, called `head`:
3846

3947
```
4048
app/templates/head.hbs
4149
```
4250

43-
The contents of this template will be inserted into the `<head>`
44-
element of the page.
51+
The contents of this template will be inserted into the `<head>` element of the page.
52+
53+
54+
### Head data service
4555

56+
The addon provides `model` that is scoped to the `head` template. The `model` is actually an alias of the `head-data` service. You can set whatever data you want to be available to the `head` template on this service.
4657

47-
#### Service
58+
⚠️ Warning for Octane apps
4859

49-
There will be a `model` in the rendering scope of this template. This
50-
model is actually an alias for the `head-data` service. You can set
51-
whatever data you want to be available in the template directly on
52-
that service.
60+
Because `model` refers to the `head-data` service (and not what a route's `model` hook returns), it is important to use `this.model` (not `@model`) in the `head` template.
5361

54-
### Example
5562

56-
#### Setting content data in route
63+
## Example
64+
65+
### Setting content data in route
5766

5867
```javascript
5968
// app/routes/application.js
6069

61-
import Route from '@ember/routing/route'
62-
import { inject } from '@ember/service';
63-
import { set } from '@ember/object';
70+
import Route from '@ember/routing/route';
71+
import { inject as service } from '@ember/service';
72+
73+
export default class ApplicationRoute extends Route {
74+
@service headData;
6475

65-
export default Route.extend({
66-
// inject the head data service
67-
headData: inject(),
6876
afterModel() {
69-
set(this, 'headData.title', 'Demo App');
77+
this.headData.title = 'Demo App';
7078
}
71-
});
79+
}
7280
```
7381

74-
#### Using the service as model in head.hbs
7582

76-
```javascript
77-
<meta property="og:title" content={{model.title}} />
83+
### Using the service in head template
84+
85+
```handlebars
86+
{{!-- app/templates/head.hbs --}}
87+
88+
<meta property="og:title" content={{this.model.title}} />
7889
```
7990

80-
#### Resulting head
91+
92+
### Checking head tag
8193

8294
This will result in a document along the lines of:
8395

8496
```html
8597
<html data-ember-extension="1">
86-
<head>
87-
<meta charset="utf-8">
88-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
89-
<title>My Ember App</title>
90-
<meta name="description" content="">
91-
<meta name="viewport" content="width=device-width, initial-scale=1">
92-
93-
<base href="/">
94-
95-
<link rel="stylesheet" href="assets/vendor.css">
96-
<link rel="stylesheet" href="assets/my-app.css">
97-
98+
<head>
99+
...
100+
<meta name="ember-cli-head-start" content>
98101
<meta property="og:title" content="Demo App">
102+
<meta name="ember-cli-head-end" content>
99103
</head>
100104
<body class="ember-application">
101-
102-
103-
<script src="assets/vendor.js"></script>
104-
<script src="assets/my-app.js"></script>
105-
<div id="ember383" class="ember-view"><h2 id="title">Welcome to Ember</h2>
106-
107-
</div>
105+
...
108106
</body>
109107
</html>
110108
```
111109

112-
### Fastboot Only
113110

114-
The primary need for this library is to support various bots and web crawlers. To that end the head content is only truly needed in a server rendered (i.e. FastBoot) environment. However, by default the library will keep the head content in sync with any transitions/data changes that occur in your Ember App while running in the browser. This can be useful for development and/or debugging.
111+
## FastBoot-Only Use
115112

116-
If you do not wish to have the head content "live" while running in browser you can restrict this library to only work in FastBoot by adding the following to your `config/environment.js`:
113+
The primary need for this addon is to support various bots and web crawlers. To that end, the head content is only truly needed in a server-rendered environment like FastBoot.
114+
115+
By default, the addon will keep the head content in sync with any route transitions and data changes that occur when your Ember app runs in the browser. This can be useful for development and debugging.
116+
117+
If you don't wish the head content to be "live" when the app runs in browser, you can restrict this addon to run only in FastBoot:
117118

118119
```javascript
120+
// config/environment.js
121+
119122
module.exports = function(environment) {
120-
var ENV = {
123+
let ENV = {
121124
'ember-cli-head': {
122-
suppressBrowserRender: true
125+
suppressBrowserRender: true
123126
}
124127
};
125-
}
128+
129+
return ENV;
130+
};
126131
```
127132

128-
### Upgrade to 0.4.x
133+
If you use `suppressBrowserRender`, the content of `<head>` will be the static FastBoot-rendered content throughout your app's lifecycle.
134+
129135

130-
As mentioned above you need to add the `{{head-layout}}` component once and only once in an application wide template. This template is usually `app/templates/application.hbs`, but could be different in your case. Previously, in ember-cli-head 0.3.x and below the component was appended to the document inside an instance initializer. This prevented the need for the `{{head-layout}}` component as it was automatically injected and used inside that initializer. Unfortunately, this approach needed to change so that we could render the component with the rest of the application rendering.
136+
## Upgrade to 0.4.x
131137

132-
If you care to read more about the details of render please see the PR that introduced these changes https://github.com/ronco/ember-cli-head/pull/37
138+
As previously mentioned, you need to add the `<HeadLayout />` component once and only once in an application-wide template. This template is usually `app/templates/application.hbs` but may be different in your case.
133139

134-
But for now, if you are upgrading to 0.4.x, you simply need to add `{{head-layout}}` component to your application wide template.
140+
Prior to 0.4, the component was appended to the document inside an instance initializer. This prevented the need for the `<HeadLayout />` component as it was automatically injected and used inside that initializer. This approach [needed to change](https://github.com/ronco/ember-cli-head/pull/37) so that we could render the component with the rest of the application rendering.
141+
142+
In short, if you are upgrading to 0.4.x, you simply add the `<HeadLayout />` component to your application-wide template.
135143

136-
If you make use of this mode the content of `<head>` will be the static FastBoot rendered content through the life of your App.
137144

138145
## Contributing
139146

140147
See the [Contributing](CONTRIBUTING.md) guide for details.
141148

149+
142150
## License
143151

144152
This project is licensed under the [MIT License](LICENSE.md).

0 commit comments

Comments
 (0)