feat(docs): bootstrap v2 docs

Author: Alexandre Stanislawski

.gitignore

@@ -1,5 +1,8 @@
+/docs/
+/docs-production/
 node_modules/
 dist/
 dist-es5-module/
 npm-debug.log
 .DS_Store
+.happypack/

docgen/.eslintrc.js

@@ -0,0 +1,12 @@
+var join = require('path').join;
+
+module.exports = {
+  "extends": join(__dirname, "../.eslintrc.js"),
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": join(__dirname, "webpack.config.babel.js")
+      }
+    }
+  },
+};

docgen/assets/data/community-projects.json

@@ -0,0 +1,38 @@
+[
+	{
+		"name":"places.js",
+		"url":"https://community.algolia.com/places/",
+		"logo":"https://community.algolia.com/places/images/svg/places-illustration-65745839.svg",
+		"backgroundColor": "#3a5395"
+	},
+	{
+		"name":"wordpress",
+		"url":"https://community.algolia.com/wordpress",
+		"logo":"https://community.algolia.com/wordpress/img/icons/wp-icon.svg",
+		"backgroundColor": "linear-gradient(to bottom right, #4041B2, #516ED1)"
+	},
+	{
+		"name":"Autocomplete.js",
+		"url":"https://github.com/algolia/autocomplete.js",
+		"logo":"https://community.algolia.com/img/illus-autocomplete.svg",
+		"backgroundColor": "#00587f"
+	},
+	{
+		"name":"instantsearch.js",
+		"url":"https://community.algolia.com/instantsearch.js/",
+		"logo":"https://community.algolia.com/img/logo-is.svg",
+		"backgroundColor": "#385D72"
+	},
+	{
+		"name":"Helper.js",
+		"url":"https://community.algolia.com/algoliasearch-helper-js/",
+		"logo":"https://community.algolia.com/img/logo-helper.svg",
+		"backgroundColor": "#FDBD57"
+	},
+	{
+		"name":"magento",
+		"url":"https://community.algolia.com/magento/",
+		"logo":"http://res.cloudinary.com/hilnmyskv/image/upload/v1477318624/magento-icon-white.svg",
+		"backgroundColor": "linear-gradient(to bottom right, #ed9259, #e76d22)"
+	}
+]

docgen/assets/img/material-ui.gif

@@ -0,0 +1,33 @@
+import Clipboard from 'clipboard';
+
+export default function activateClipboard(codeSamples) {
+  codeSamples.forEach(codeSample => {
+    const cleanAfter = 500;
+    let timeout;
+    const copyToClipboard = document.createElement('span');
+
+    const setup = () => {
+      clearTimeout(timeout);
+      copyToClipboard.textContent = 'Copy to clipboard';
+      copyToClipboard.classList.remove('clipboard-done');
+      copyToClipboard.classList.add('clipboard');
+    };
+
+    const done = () => {
+      copyToClipboard.classList.add('clipboard-done');
+      copyToClipboard.textContent = 'Copied!';
+    };
+
+    const clipboard = new Clipboard(copyToClipboard, {
+      text: () => codeSample.querySelector('code').textContent,
+    });
+
+    setup();
+    codeSample.querySelector('.heading').appendChild(copyToClipboard);
+    copyToClipboard.addEventListener('mouseleave', setup, true);
+    clipboard.on('success', () => {
+      done();
+      timeout = setTimeout(setup, cleanAfter);
+    });
+  });
+}

docgen/assets/img/react-instant-favicon.png

@@ -0,0 +1,3 @@
+/* eslint-disable no-console */
+
+console.log('api');

docgen/assets/js/activateClipboard.js

@@ -0,0 +1,31 @@
+import projects from '../data/community-projects.json';
+
+function init() {
+  const list = [];
+  const target = document.querySelector('[data-inject-community]');
+
+  projects.forEach(e => {
+    list.push({
+      name: e.name,
+      url: e.url,
+      logo: e.logo,
+      backgroundColor: e.backgroundColor ? e.backgroundColor : 'transparent',
+    });
+  });
+
+  list.forEach(t => {
+    const tpl = `
+      <div class="dropdown-item">
+        <a href="${t.url}">
+          <span class="item-icon" style="background: ${t.backgroundColor}">
+            <img src="${t.logo}" />
+          </span>
+          <h4>${t.name}</h4>
+        </a>
+      </div>`;
+    target.innerHTML += tpl;
+  });
+}
+
+export default init;
+

docgen/assets/js/api.js

@@ -0,0 +1,39 @@
+function dropdowns() {
+  const openDropdown = document.querySelectorAll('[data-toggle-dropdown]');
+  const otherDropdown = document.querySelectorAll('.simple-dropdown');
+
+  for (let i = 0; i < openDropdown.length; i++) {
+    toggleDropdown(openDropdown[i]);
+  }
+
+  function toggleDropdown(element) {
+    const dropdown = element.getAttribute('data-toggle-dropdown');
+    const theDropdown = document.getElementById(dropdown);
+    element.addEventListener('click', () => {
+      if (!theDropdown.classList.contains('opened')) {
+        for (let i = 0; i < otherDropdown.length; i++) {
+          otherDropdown[i].classList.remove('opened');
+        }
+
+        theDropdown.classList.add('opened');
+        theDropdown.setAttribute('aria-expanded', 'true');
+        theDropdown.setAttribute('aria-expanded', 'true');
+      } else {
+        theDropdown.classList.remove('opened');
+        theDropdown.setAttribute('aria-expanded', 'false');
+        theDropdown.setAttribute('aria-expanded', 'false');
+      }
+    });
+
+    // When there is a click event
+    // Check if the clicked element is the
+    // dropdown toggler, if not, close the dropdown
+    document.body.addEventListener('click', e => {
+      if (!element.contains(e.target)) {
+        theDropdown.classList.remove('opened');
+      }
+    });
+  }
+}
+
+export default dropdowns;

docgen/assets/js/communityProjects.js

@@ -0,0 +1,28 @@
+if (document.querySelector('.documentation-container')) {
+  const $edit = document.createElement('a');
+  $edit.classList.add('editThisPage');
+  $edit.textContent = 'Edit this page';
+
+  let href = 'https://github.com/algolia/instantsearch.js/edit/v2/';
+  const doc = 'docgen/src';
+  const api = 'packages/react-instantsearch/src';
+
+  let pathname = document.location.pathname.replace(
+    '/instantsearch.js/react',
+    '',
+  );
+
+  if (/^\/(?:widgets|connectors)\/.+/.test(pathname)) {
+    href += `${api}${pathname.replace('.html', '.js')}`;
+    if (pathname === '/widgets/InstantSearch.html') {
+      href = href.replace('/widgets/', '/core/');
+    }
+  } else {
+    if (/\/$/.test(pathname)) pathname += 'index.html';
+    href += `${doc}${pathname.replace('.html', '.md')}`;
+  }
+
+  pathname = pathname.replace('.html', '.md');
+  $edit.href = href;
+  document.querySelector('.documentation-container').appendChild($edit);
+}