Improve the chat guide

- Fix the messages code so if there are no messages, the “no messages” text is shown
- Change links to be https
- Fix the size of some images
- Update some old images

docs/features.md

@@ -909,7 +909,7 @@ When server-side updates are sent to the client, items are automatically removed
 All of this happens with about 4 lines of code.
 
 ```
-const socket = io('http://chat.donejs.com');
+const socket = io('https://chat.donejs.com');
 socket.on('messages created',
   order => messageConnection.createInstance(order));
 socket.on('messages updated',

docs/guides/guide.md

@@ -146,7 +146,7 @@ Later we will update the generated files with the chat messages functionality.
 First, let’s update `src/home.component` with the original content from the homepage and a link to the chat messages page:
 
 @sourceref ../../guides/guide/steps/7-navigate/home.component
-@highlight 4,7-17
+@highlight 5,8-18
 
 > New APIs Used:
 > - [<can-component>](https://github.com/donejs/done-component#done-component) — a [StealJS](https://stealjs.com/) plugin for CanJS [components](https://canjs.com/doc/can-component.html) that allows you to define a component completely within a  _.component_ file.
@@ -185,7 +185,7 @@ Update `src/index.stache` to:
 
 Now each component is being dynamically loaded while navigating between the home and messages page.  You should see the changes already in your browser.
 
-<img src="static/img/donejs-chat1.png" alt="chat.donejs.com" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
+<img src="static/img/donejs-chat1.png" alt="chat.donejs.com" height="302" width="400" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
 
 Also, everything is [rendered on the server](Features.html#section=section_ServerSideRendered). If you reload the homepage at [localhost:8080](http://localhost:8080) you'll see the page’s content right away, while the JavaScript is loading in the background. Viewing the source will show the dynamically inserted styles and the corresponding HTML.
 
@@ -467,7 +467,7 @@ donejs build cordova
 
 If everything went well, we should see the emulator running our application.
 
-<img src="static/img/donejs-ios.png" alt="ios build" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
+<img src="static/img/donejs-ios.png" alt="ios build" height="590" width="320" style="box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px #E7E7E7 solid;" />
 
 Windows users will get instructions to download the latest version of the platform and to create a Virtual Device. Follow the instructions and then re-do the build. This will only happen the first time you build for Cordova.
 

docs/guides/guides.md

@@ -13,7 +13,7 @@ whistles a modern developer needs, we created the following guides.
 ## [Quick start: donejs-chat](./Guide.html)
 <a href="./Guide.html"><img class="app-thumbs" src="static/img/donejs-chat.gif" width="500" style="border: 1px solid #000"></a>
 
-In the [quick start guide](./Guide.html), we will build a small chat application - [http://chat.donejs.com/](http://chat.donejs.com/).  You'll learn about:
+In the [quick start guide](./Guide.html), we will build a small chat application - [https://chat.donejs.com/](https://chat.donejs.com/).  You'll learn about:
 
 - Hot Module Swapping
 - Server-side rendering

guides/guide/steps/10-use-connection/messages.stache

@@ -7,9 +7,9 @@
       <h4 class="list-group-item-heading">{{name}}</h4>
       <p class="list-group-item-text">{{body}}</p>
     </div>
+  {{else}}
+    <div class="list-group-item">
+      <h4 class="list-group-item-heading">No messages</h4>
+    </div>
   {{/each}}
-{{else}}
-  <div class="list-group-item">
-    <h4 class="list-group-item-heading">No messages</h4>
-  </div>
 {{/if}}

guides/guide/steps/11-create-messages/messages.stache

@@ -7,11 +7,11 @@
       <h4 class="list-group-item-heading">{{name}}</h4>
       <p class="list-group-item-text">{{body}}</p>
     </div>
+  {{else}}
+    <div class="list-group-item">
+      <h4 class="list-group-item-heading">No messages</h4>
+    </div>
   {{/each}}
-{{else}}
-  <div class="list-group-item">
-    <h4 class="list-group-item-heading">No messages</h4>
-  </div>
 {{/if}}
 
 <form class="row" ($submit)="send(%event)">

guides/guide/steps/4-bootstrap/index.stache

@@ -11,7 +11,7 @@
       <div class="row">
         <div class="col-sm-8 col-sm-offset-2">
           <h1 class="page-header text-center">
-            <img src="http://donejs.com/static/img/donejs-logo-white.svg"
+            <img src="https://donejs.com/static/img/donejs-logo-white.svg"
                 alt="DoneJS logo" style="width: 100%;" />
             <br>Chat
           </h1>

guides/guide/steps/7-navigate/home.component

@@ -1,12 +1,13 @@
 <can-component tag="chat-home">
   <style type="less">
     display: block;
+
     h1.page-header { margin-top: 0; }
   </style>
   <view>
     <can-import from="can-stache/helpers/route" />
     <h1 class="page-header text-center">
-      <img src="http://donejs.com/static/img/donejs-logo-white.svg"
+      <img src="https://donejs.com/static/img/donejs-logo-white.svg"
            alt="DoneJS logo" style="width: 100%;" />
       <br>Chat
     </h1>

guides/guide/steps/8-bit-tabs/home.component

@@ -10,7 +10,7 @@
     <can-import from="can-stache/helpers/route" />
     <can-import from="bit-tabs/unstyled" />
     <h1 class="page-header text-center">
-      <img src="http://donejs.com/static/img/donejs-logo-white.svg"
+      <img src="https://donejs.com/static/img/donejs-logo-white.svg"
         alt="DoneJS logo" style="width: 100%;" />
       <br>Chat
     </h1>

guides/guide/test.js

@@ -186,7 +186,7 @@ guide.step("Generate the Message model", function(){
 	var supermodel = guide.answerPrompts("donejs", ["add", "supermodel", "message"]);
 	var answer = supermodel.answer;
 
-	answer(/URL endpoint/, "http://chat.donejs.com/api/messages\n");
+	answer(/URL endpoint/, "https://chat.donejs.com/api/messages\n");
 	answer(/property name/, "\n");
   answer(/service URL/, "Yes\n");