Merged Guides content from https://github.com/emberjs/website/pull/1956

.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - "1.9.3"
+script: bundle exec rspec spec && bundle exec middleman build

Gemfile

@@ -27,6 +27,7 @@ group :test do
   gem "rspec"
   gem "capybara"
   gem "poltergeist"
+  gem "hashie"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -60,6 +60,7 @@ GEM
     ffi (1.9.6-x86-mingw32)
     haml (4.0.6)
       tilt
+    hashie (3.4.0)
     highline (1.6.21)
     hike (1.2.3)
     hitimes (1.2.2)
@@ -203,6 +204,7 @@ DEPENDENCIES
   builder
   capybara
   coderay!
+  hashie
   highline
   listen
   middleman (~> 3.0)

data/guides.yml

@@ -5,6 +5,14 @@
       url: ""
       skip_sidebar: true
 
+- title: "Getting Started"
+  url: 'ember-cli'
+  chapters:
+    - title: "Installing Ember"
+      url: "index"
+    - title: "Glossary"
+      url: "glossary"
+
 - title: "Getting Ember"
   url: 'getting-ember'
   chapters:
@@ -198,8 +206,6 @@
       url: "built-in-views"
     - title: "Manually Managing View Hierarchy"
       url: "manually-managing-view-hierarchy"
-    #- title: "Building Reusable Views"
-      #url: "building-reusable-views"
 
 - title: "Enumerables"
   url: 'enumerables'
@@ -375,12 +381,6 @@
     #   url: "debugging_and_configuration/setting_ember_global_flags"
     #   skip_sidebar_item: true
 
-- title: "Deprecations"
-  url: 'deprecations'
-  chapters:
-    - title: "Deprecations"
-      url: "index"
-
 - title: "Understanding Ember.js"
   url: 'understanding-ember'
   chapters:

lib/highlighter.rb

@@ -2,6 +2,7 @@
 require "coderay"
 
 module Highlighter
+  class MissingLanguageError < StandardError; end
   class << self
     def registered(app)
       app.helpers Helpers
@@ -11,6 +12,11 @@ def registered(app)
 
   module Helpers
     def _highlight(string, language, class_name=nil)
+      error_message = "Code blocks must be fenced with proper language designated. If you don't know what language to use, specify ```text.\n\n"
+      error_message << "Offending Code Block:\n\n#{string}"
+
+      raise MissingLanguageError, error_message if language.nil?
+
       language, file_name = _detect_language_and_filename(language)
 
       result = %Q{<div class="highlight #{language} #{class_name}">}
@@ -23,6 +29,7 @@ def _highlight(string, language, class_name=nil)
     end
 
     def _detect_language_and_filename(language)
+
       file_name = nil
       bare_language_regex = /\A\w+\z/
 

lib/toc.rb

@@ -57,19 +57,13 @@ def toc_for(guides)
     end
 
     def page_title
-      buffer = ""
-
-      if current_guide
-        buffer << current_guide.title
-        if current_chapter
-          buffer << ": "
-          buffer << current_chapter.title
-        end
+      if current_guide && current_chapter
+        "#{current_guide.title}: #{current_chapter.title}"
+      elsif current_guide
+        current_guide.title
       else
-        buffer << "Guides"
+        "Guides"
       end
-
-      buffer
     end
 
     def guide_name
@@ -78,9 +72,9 @@ def guide_name
 
     def chapter_name
       if current_chapter
-        return current_chapter.title
+        current_chapter.title
       else
-        return ""
+        ""
       end
     end
 
@@ -111,6 +105,10 @@ def current_guide
       end
     end
 
+    def current_guide_index
+      data.guides.find_index(current_guide)
+    end
+
     def current_chapter
       return unless current_guide
 
@@ -123,6 +121,11 @@ def current_chapter
       end
     end
 
+    def current_chapter_index
+      return unless current_guide
+      current_guide.chapters.find_index(current_chapter)
+   end
+
     def chapter_links
       %Q{
       <footer>

source/components/customizing-a-components-element.md

@@ -18,14 +18,13 @@ To use a tag other than `div`, subclass `Ember.Component` and assign it
 a `tagName` property. This property can be any valid HTML5 tag name as a
 string.
 
-```js
-App.NavigationBarComponent = Ember.Component.extend({
+```app/components/navigation-bar.js
+export default Ember.Component.extend({
   tagName: 'nav'
 });
 ```
 
-```handlebars
-{{! templates/components/navigation-bar }}
+```templates/components/navigation-bar.hbs
 <ul>
   <li>{{#link-to 'home'}}Home{{/link-to}}</li>
   <li>{{#link-to 'about'}}About{{/link-to}}</li>
@@ -37,8 +36,8 @@ App.NavigationBarComponent = Ember.Component.extend({
 You can also specify which class names are applied to the component's
 element by setting its `classNames` property to an array of strings:
 
-```javascript
-App.NavigationBarComponent = Ember.Component.extend({
+```app/components/navigation-bar.js
+export default Ember.Component.extend({
   classNames: ['primary']
 });
 ```
@@ -47,8 +46,8 @@ If you want class names to be determined by properties of the component,
 you can use class name bindings. If you bind to a Boolean property, the
 class name will be added or removed depending on the value:
 
-```js
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isUrgent'],
   isUrgent: true
 });
@@ -65,8 +64,8 @@ If `isUrgent` is changed to `false`, then the `is-urgent` class name will be rem
 By default, the name of the Boolean property is dasherized. You can customize the class name
 applied by delimiting it with a colon:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isUrgent:urgent'],
   isUrgent: true
 });
@@ -80,8 +79,8 @@ This would render this HTML:
 
 Besides the custom class name for the value being `true`, you can also specify a class name which is used when the value is `false`:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isEnabled:enabled:disabled'],
   isEnabled: false
 });
@@ -96,8 +95,8 @@ This would render this HTML:
 You can also specify a class which should only be added when the property is
 `false` by declaring `classNameBindings` like this:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['isEnabled::disabled'],
   isEnabled: false
 });
@@ -118,8 +117,8 @@ If the `isEnabled` property is set to `true`, no class name is added:
 If the bound property's value is a string, that value will be added as a class name without
 modification:
 
-```javascript
-App.TodoItemComponent = Ember.Component.extend({
+```app/components/todo-item.js
+export default Ember.Component.extend({
   classNameBindings: ['priority'],
   priority: 'highestPriority'
 });
@@ -136,8 +135,8 @@ This would render this HTML:
 You can bind attributes to the DOM element that represents a component
 by using `attributeBindings`:
 
-```javascript
-App.LinkItemComponent = Ember.Component.extend({
+```app/components/link-item.js
+export default Ember.Component.extend({
   tagName: 'a',
   attributeBindings: ['href'],
   href: "http://emberjs.com"
@@ -146,20 +145,20 @@ App.LinkItemComponent = Ember.Component.extend({
 
 You can also bind these attributes to differently named properties:
 
-```javascript
-App.LinkItemComponent = Ember.Component.extend({
+```app/components/link-item.js
+export default Ember.Component.extend({
   tagName: 'a',
   attributeBindings: ['customHref:href'],
   customHref: "http://emberjs.com"
 });
 ```
 
-### Example
+<!-- ### Example
 
 Here is an example todo application that shows completed todos with a
 red background:
 
-<a class="jsbin-embed" href="http://jsbin.com/duzala/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+<a class="jsbin-embed" href="http://jsbin.com/nefisejade/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
 
 **Note:** The binding functionality in this very simple example could also be implemented without
-the use of `Ember.Component` but by simply [binding element attributes](../../templates/binding-element-attributes) or [binding element class names](../../templates/binding-element-class-names).
+the use of `Ember.Component` but by simply [binding element attributes](../../templates/binding-element-attributes) or [binding element class names](../../templates/binding-element-class-names). -->

source/components/defining-a-component.md

@@ -6,31 +6,56 @@ create a `components/blog-post` template.
 but `post` is not. This prevents clashes with current or future HTML element names, and
 ensures Ember picks up the components automatically.
 
-If you are including your Handlebars templates inside an HTML file via
-`<script>` tags, it would look like this:
-
-```handlebars
-<script type="text/x-handlebars" id="components/blog-post">
-  <h1>Blog Post</h1>
-  <p>Lorem ipsum dolor sit amet.</p>
-</script>
-```
+A sample component template would look like this:
 
-If you're using build tools, create a Handlebars file at
-`templates/components/blog-post.handlebars`.
+```app/templates/components/blog-post.hbs
+<h1>Blog Post</h1>
+<p>Lorem ipsum dolor sit amet.</p>
+```
 
 Having a template whose name starts with `components/` creates a
 component of the same name. Given the above template, you can now use the
 `{{blog-post}}` custom element:
 
-```handlebars
-<h1>My Blog</h1>
-{{#each post in model}}
-  {{blog-post}}
+<!--- <a class="jsbin-embed" href="http://jsbin.com/tikenoniku/1/edit?output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script> -->
+<!--- The example above uses `<script>` tags to work inside of JSBin.-->
+```app/templates/index.hbs
+{{#each}}
+  {{#blog-post title=title}}
+    {{body}}
+  {{/blog-post}}
 {{/each}}
 ```
 
-<a class="jsbin-embed" href="http://jsbin.com/juvic/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+```app/templates/components/blog-post.hbs
+<article class="blog-post">
+  <h1>{{title}}</h1>
+  <p>{{yield}}</p>
+  <p>Edit title: {{input type="text" value=title}}</p>
+</article>
+```
+
+```app/routes/index.js
+var posts = [{
+    title: "Rails is omakase",
+    body: "There are lots of à la carte software environments in this world."
+  }, {
+    title: "Broken Promises",
+    body: "James Coglan wrote a lengthy article about Promises in node.js."
+}];
+
+export default Ember.Route.extend({
+  model: function() {
+    return posts;
+  }
+});
+```
+
+```app/components/blog-post.js
+export default Ember.Component.extend({
+
+});
+```
 
 Each component, under the hood, is backed by an element. By default
 Ember will use a `<div>` element to contain your component's template.
@@ -55,9 +80,9 @@ changes to the component's element using JavaScript.
 
 Ember knows which subclass powers a component based on its name. For
 example, if you have a component called `blog-post`, you would create a
-subclass called `App.BlogPostComponent`. If your component was called
-`audio-player-controls`, the class name would be
-`App.AudioPlayerControlsComponent`.
+file at `app/components/blog-post.js`. If your component was called
+`audio-player-controls`, the file name would be at 
+`app/components/audio-player-controls.js`
 
 In other words, Ember will look for a class with the camelized name of
 the component, followed by `Component`.

source/components/handling-user-interaction-with-actions.md

@@ -18,25 +18,24 @@ bubble.
 For example, imagine the following component that shows a post's title.
 When the title is clicked, the entire post body is shown:
 
-```handlebars
-<script type="text/x-handlebars" id="components/post-summary">
-  <h3 {{action "toggleBody"}}>{{title}}</h3>
-  {{#if isShowingBody}}
-    <p>{{{body}}}</p>
-  {{/if}}
-</script>
+```app/templates/components/post-summary.hbs
+<h3 {{action "toggleBody"}}>{{title}}</h3>
+{{#if isShowingBody}}
+  <p>{{{body}}}</p>
+{{/if}}
 ```
 
-```js
-App.PostSummaryComponent = Ember.Component.extend({
+```app/components/post-summary.js
+export default Ember.Component.extend({
   actions: {
     toggleBody: function() {
       this.toggleProperty('isShowingBody');
     }
   }
 });
 ```
-<a class="jsbin-embed" href="http://jsbin.com/yuzena/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
+
+<!---<a class="jsbin-embed" href="http://jsbin.com/ciwenemedi/1/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>-->
 
 The `{{action}}` helper can accept arguments, listen for different event
 types, control how action bubbling occurs, and more.