fix(doc): All wigdets in docs are not anymore linked together #fix #446

Author: ElPicador

docs/documentation.md

@@ -95,7 +95,7 @@ If you already have a JavaScript build system, you can use **instantsearch.js**
 ### Initialization
 
 <div class="code-box">
-  <div class="code-sample-snippet">
+  <div class="code-sample-snippet config">
 {% highlight javascript %}
 var search = instantsearch({
   appId: '$appId',
@@ -171,7 +171,7 @@ Most widgets requires you to configure the DOM element they will use to display
 ### Start
 
 <div class="code-box">
-  <div class="code-sample-snippet last">
+  <div class="code-sample-snippet start">
 {% highlight javascript %}
 search.start();
 {% endhighlight %}

docs/js/doc.js

@@ -6,7 +6,7 @@
   function search() {
     function t(tmpl, vars) {
       Object.keys(vars).forEach(function(k) {
-        tmpl = tmpl.replace('$' + k, vars[k]);
+        tmpl = tmpl.replace(new RegExp('\\$' + k, 'g'), vars[k]);
       });
       return tmpl;
     }
@@ -15,11 +15,17 @@
       apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
       indexName: 'instant_search'
     };
-    var codeSnippets = q('.code-sample-snippet:not(.last):not(.ignore)');
-    var lastSnippets = q('.code-sample-snippet.last');
-    var source = codeSnippets
-      .concat(lastSnippets)
-      .map(function(d) {return d.textContent;});
+    var codeSnippets = q('.code-sample-snippet:not(.start):not(.config):not(.ignore)');
+    var configSnippet = q('.code-sample-snippet.config')[0]; 
+    var startSnippet = q('.code-sample-snippet.start')[0];
+
+    var source = codeSnippets.map(function(snippet) {
+      var functionBody = [configSnippet, snippet, startSnippet]
+          .map(function(e) { return e.textContent; })
+          .join(';');
+      return "(function() {" + functionBody + "})();";
+    });
+
     source = t(source.join('\n'), constants);
     eval(source);
   }