merge and fix conflicts

app/components/chapter-nav.hbs

@@ -1,5 +1,6 @@
 <Scrollmenu @visible={{@visible}}>
   <span class="label">Chapters:</span>
+  <LinkTo @route="commentary-intro" @model={{@book.name}}>Intro</LinkTo>
   {{#each @book.chapters as |chapter|}}
     <Chapter @book={{@book}} @chapter={{chapter}} @active={{this.isChapterActive}} @showVerses={{this.showVerses}} />
   {{/each}}

app/components/lexicon/entry.hbs

@@ -1,3 +1,3 @@
 <h4>Lexicon Entry</h4>
 <h5>{{@model.id}}: {{@model.lemma}}</h5>
-<p>{{markdown-to-html @model.commentary}}</p>
+<p>{{{@model.commentary}}}</p>

app/components/words/greek-text.hbs

@@ -1,5 +1,5 @@
 <div class="verse-greek-text">
-  {{#each @model as |word|}}
+  {{#each this.sortedWords as |word|}}
     <Words::GreekWord @model={{word}} />
   {{/each}}
 </div>

app/components/words/greek-text.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+import { sort } from '@ember/object/computed';
+
+export default class WordsGreekTextComponent extends Component {
+  sortDefinition = ['ogntSort'];
+  @sort('args.model', 'sortDefinition') sortedWords;
+}

app/components/words/ulb-text.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+import { sort } from '@ember/object/computed';
+
+export default class WordsUlbTextComponent extends Component {
+  sortDefinition = ['ulbSort'];
+  @sort('args.model', 'sortDefinition') sortedWords;
+}

app/router.js

@@ -16,4 +16,5 @@ Router.map(function() {
   this.route('site-purpose');
   this.route('contact-us');
   this.route('morph-legend');
+  this.route('commentary-intro', { path: '/commentary/:book_id' });
 });

app/routes/commentary-intro.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import fetch from 'fetch';
+import { htmlSafe } from '@ember/template';
+
+export default class CommentaryIntroRoute extends Route {
+  async model(params) {
+    const response = await fetch('http://gwt.api/api/v1/commentary/' + params.book_id + '/chapter/intro');
+    const body = await response.text().then(function(text){
+      return new htmlSafe(text);
+    });
+    return { body };
+  }
+}

app/styles/app.scss

@@ -11,4 +11,8 @@
 
 @import "components/footer";
 
-@import "components/verse";
+<<<<<<< HEAD
+@import "components/verse";
+=======
+@import "components/user-guide"
+>>>>>>> master

app/styles/components/user-guide.scss

@@ -0,0 +1,11 @@
+.help-video
+{
+  max-width: 90%;
+  height: auto;
+  max-height: 75%;
+  text-align:center;
+}
+
+.help-img {
+    border: 2px solid grey;
+}

app/templates/application.hbs

@@ -11,9 +11,6 @@
       <li class="nav-item active">
         <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
       </li>
-      <li class="nav-item">
-        <LinkTo @route="contact-us" class="nav-link">Contact Us</LinkTo>
-      </li>
       <li class="nav-item">
         <LinkTo @route="site-purpose" class="nav-link">About</LinkTo>
       </li>
@@ -21,18 +18,16 @@
         <LinkTo @route="user-guide" class="nav-link">How to Use the Site</LinkTo>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="/contact-us">Contact Us</a>
+        <LinkTo @route="contact-us" class="nav-link">Contact Us</LinkTo>
       </li>
     </ul>
-    <a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-desktop" title="Get Help">?</div></a>
+    <LinkTo @route="user-guide"><div id="help-button-desktop" title="Get Help">?</div></LinkTo>
   </div>
 </nav>
 
 <ScriptureNavBar/>
 
-<a href="#" data-toggle="modal" data-target="#helpModal"><div id="help-button-mobile" title="Get Help">?</div></a>
-
-<HelpModal/>
+<LinkTo @route="user-guide"><div id="help-button-mobile" title="Get Help">?</div></LinkTo>
 
 {{outlet}}
 

app/templates/commentary-intro.hbs

@@ -0,0 +1,7 @@
+{{page-title "Book Introduction"}}
+
+<div class="container pt-4">
+  {{{@model.body}}}
+</div>
+
+{{outlet}}

app/templates/user-guide.hbs

@@ -0,0 +1,17 @@
+<div class="container-sm mt-3">
+    <div class="alert alert-info" role="alert">
+    This site is still under construction, so don't be surprised if things look a little different from the examples below. 
+    </div>
+  <h2 class="mt-4">How to Use This Site</h2>
+  <p class="mt-4">Here are a few visual aids to help you learn the basics of using this site.</p>
+  <h3>Screenshots</h3>
+  <p>(Click the image to open large in a new tab.)</p>
+  <a href="/assets/images/desk.jpg" target="_blank"><img src="/assets/images/desk.jpg" class="help-img img-fluid"></a>
+
+  <h3 class="mt-4">Video tutorial</h3>
+    <video controls="controls" src="//btr.mrgreekgeek.com/btr_getting_started.mp4" class="help-video" poster="/assets/images/vid-thumb.jpg">
+    Your browser does not support the HTML5 Video element.
+    </video>
+
+
+</div>

tests/unit/routes/commentary-intro-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | commentary-intro', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:commentary-intro');
+    assert.ok(route);
+  });
+});