Add heading anchors to allow deep-linking

closes #494
- adds `id` attributes to headings so they can be linked to with #anchor URLs
- utilises the same "anchorable" markup and image as used in the Ember guides to show a 🔗 icon next to headings on hover

Author: kevinansfield

app/helpers/function-heading-id.js

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+import { A } from '@ember/array';
+
+export function functionHeadingId([heading]/*, hash*/) {
+  return `functions-${A(heading.split('/')).get('lastObject')}`;
+}
+
+export default helper(functionHeadingId);

app/templates/project-version/modules/module.hbs

@@ -15,7 +15,10 @@
 
   {{#if submodules}}
     <section>
-      <h2>Submodules</h2>
+      <h2 id="submodules" class="anchorable-toc">
+        <a href="#submodules" class="toc-anchor"></a>
+        Submodules
+      </h2>
       <ul class="spec-method-list">
         {{#each submodules as |module|}}
           <li>
@@ -30,7 +33,10 @@
 
   {{#if classesAndNamespaces}}
     <section>
-      <h2>Classes</h2>
+      <h2 id="classes" class="anchorable-toc">
+        <a href="#classes" class="toc-anchor"></a>
+        Classes
+      </h2>
       <ul class="spec-property-list">
         {{#each classesAndNamespaces as |klass|}}
           {{#if (not (and (eq model.name "ember-data") (eq klass "Ember")))}}
@@ -47,9 +53,15 @@
 
   {{#if (and functionHeadings (gt functionHeadings.length 0)) }}
 
-    <h2>Functions</h2>
+    <h2 id="functions" class="anchorable-toc">
+      <a href="#functions" class="toc-anchor"></a>
+      Functions
+    </h2>
     {{#each functionHeadings as |funcHeading|}}
-      <h4>{{funcHeading}}</h4>
+      <h4 id="{{function-heading-id funcHeading}}" class="anchorable-toc">
+        <a href="#{{function-heading-id funcHeading}}" class="toc-anchor"></a>
+        {{funcHeading}}
+      </h4>
       <ul class="spec-method-list">
         {{#each (better-get functions funcHeading) as |method|}}
           <li>

public/assets/images/link.png

@@ -0,0 +1,15 @@
+
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('function-heading-id', 'helper:function-heading-id', {
+  integration: true
+});
+
+test('should transform nested package to id', function(assert) {
+  this.set('inputValue', '@ember/object/computed');
+
+  this.render(hbs`{{function-heading-id inputValue}}`);
+
+  assert.equal(this.$().text().trim(), 'functions-computed');
+});