Toggle improvements (#17)

* Toggle improvements

* Fix tests

src/custom/content.js

@@ -0,0 +1,16 @@
+var fs = require('fs');
+
+/**
+ * This file exports the content of your website, as a bunch of concatenated
+ * Markdown files. By doing this explicitly, you can control the order
+ * of content without any level of abstraction.
+ *
+ * Using the brfs module, fs.readFileSync calls in this file are translated
+ * into strings of those files' content before the file is delivered to a
+ * browser: the content is read ahead-of-time and included in bundle.js.
+ */
+module.exports =
+  '# Introduction\n' +
+  fs.readFileSync('./content/introduction.md', 'utf8') + '\n' +
+  '# Example\n' +
+  fs.readFileSync('./content/example.md', 'utf8') + '\n';

src/custom/index.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/**
+ * Brand names, in order to decreasing length, for different
+ * media queries.
+ */
+module.exports.brandNames = {
+  desktop: 'Wobble API Documentation',
+  tablet: 'Wobble API Docs',
+  mobile: 'API Docs'
+};
+
+/**
+ * Classes that define the top-left brand box.
+ */
+module.exports.brandClasses = 'fill-red';
+
+
+/**
+ * Text for the link back to the linking website.
+ */
+module.exports.backLink = 'Back to wobbles.com';
+
+/**
+ * Runs after highlighting code samples. You can use this
+ * hook to, for instance, highlight a token and link it
+ * to some canonical part of documentation.
+ */
+module.exports.postHighlight = function(html) {
+  return html;
+};
+
+/**
+ * Highlight tokens in endpoint URLs, optionally linking to documentation
+ * or adding detail. This is the equivalent of postHighlight but it
+ * operates on endpoint URLs only.
+ */
+function highlightTokens(str) {
+  return str.replace(/{[\w_]+}/g,
+    (str) => '<span class="strong">' + str + '</span>');
+}
+
+/**
+ * Transform endpoints given as strings in a highlighted block like
+ *
+ *     ```endpoint
+ *     GET /foo/bar
+ *     ```
+ *
+ * Into HTML nodes that format those endpoints in nice ways.
+ */
+module.exports.transformURL = function(value) {
+  let parts = value.split(/\s+/);
+  return {
+    type: 'html',
+    value: `<div class='endpoint dark fill-dark round '>
+      <div class='round-left pad0y pad1x fill-lighten0 code small endpoint-method'>${parts[0]}</div>
+      <div class='pad0 code small endpoint-url'>${highlightTokens(parts[1])}</div>
+    </div>`
+  };
+};
+
+module.exports.remarkPlugins = [];