Get links to components working

client/character.html

@@ -1,7 +1,11 @@
 <template name="decomposition">
   <div class="decomposition">
     <div class="header"><div class="value">{{value}}</div> -</div>
+    {{#if link}}
+      <a class="text link" href="{{link}}">{{label}}</a>
+    {{else}}
       <div class="text">{{label}}</div>
+    {{/if}}
     {{#each children}}
       {{> decomposition this}}
     {{/each}}
@@ -49,7 +53,7 @@
           {{#each metadata}}
             <div class="field">
               <label class="control-label">{{format label}}</label>
-              <div class="value">{{value}}</div>
+              <div class="value">{{{linkify value}}}</div>
             </div>
           {{/each}}
         </div>

client/character.js

@@ -18,6 +18,9 @@ const augmentTreeWithLabels = (node, dependencies) => {
     node.children.map((child) => augmentTreeWithLabels(child, dependencies));
   } else {
     node.label = dependencies[node.value] || '(unknown)';
+    if (dependencies[node.value]) {
+      node.link = `#/codepoint/${node.value.charCodeAt(0)}`;
+    }
   }
 }
 
@@ -122,11 +125,26 @@ const resize = () => {
 
 // Meteor template bindings.
 
+const linkify = (value) => {
+  const result = [];
+  for (let character of value) {
+    if (character.match(/[\u3400-\u9FBF]/)) {
+      result.push(`<a href="#/codepoint/${character.charCodeAt(0)}" ` +
+                     `class="link">${character}</a>`);
+    } else {
+      result.push(character);
+    }
+  }
+  return result.join('');
+}
+
 Template.character.helpers({
   character: () => character.get(),
   metadata: () => metadata.get(),
   tree: () => tree.get(),
 
+  linkify: linkify,
+
   orientation: () => orientation.get(),
   short: () => short.get(),
 
@@ -137,7 +155,7 @@ Template.character.helpers({
 
 Template.order.helpers({
   animations: () => animations.get(),
-  strokes: () => strokes.get().slice().reverse(),
+  strokes: () => (strokes.get() || []).slice().reverse(),
 });
 
 Meteor.startup(() => {

client/style.less

@@ -88,6 +88,7 @@ body {
           }
 
           .text {
+            display: block;
             margin-left: 31px;
           }
         }