feat(docs): bootstrap v2 docs

.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/js/activateClipboard.js

@@ -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/js/api.js

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

docgen/assets/js/communityProjects.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/dropdowns.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/editThisPage.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);
+}

docgen/assets/js/header.js

@@ -0,0 +1,171 @@
+export default function initHeader() {
+  const cmSearch = function () {
+    const searchIcon = document.querySelector('#search');
+    const cancelIcon = document.querySelector('#cancel');
+    const searchContainer = document.querySelector('.cm-search__input');
+    const searchInput = document.querySelector('#searchbox');
+
+    function openSearchInput () {
+      searchContainer.classList.add('open');
+      searchInput.focus();
+    }
+
+    function closeSearchInput () {
+      searchContainer.classList.remove('open');
+    }
+
+    function emptySearchInput () {
+      if (searchInput.value !== '') {
+        searchInput.value = '';
+      } else {
+        closeSearchInput();
+      }
+    }
+
+    searchIcon.addEventListener('click', openSearchInput);
+    cancelIcon.addEventListener('click', emptySearchInput);
+
+    window.onresize = function () {
+      emptySearchInput();
+      closeSearchInput();
+    };
+
+    return cmSearch;
+  };
+
+  const toggleMobileMenu = function(args) {
+    const trigger = args.trigger || '#open-menu';
+    let opened = false;
+    const target = args.target || '.cm-navigation__menu';
+    const openedClass = args.openedClass || 'opened';
+
+    document.querySelector(trigger).addEventListener('click', toggleMenu);
+
+    function toggleMenu() {
+      /* eslint-disable no-undef */
+      docsearch({
+        apiKey: '5cb6763f264e31381e18639a1147634c',
+        indexName: 'react-instantsearch',
+        inputSelector: '#mobile-searchbox',
+        debug: true,
+      });
+
+      if (document.body.clientWidth < 768) {
+        if (opened === false) {
+          opened = true;
+          document.querySelector('#menu-wrapper').classList.add(openedClass);
+        } else {
+          opened = false;
+          document.querySelector('#menu-wrapper').classList.remove(openedClass);
+        }
+      } else if (opened === false) {
+        opened = true;
+        document.querySelector(target).classList.add(openedClass);
+      } else {
+        opened = false;
+        document.querySelector(target).classList.remove(openedClass);
+      }
+
+      const cancelIconMobile = document.querySelector('#cancel-mobile');
+      cancelIconMobile.addEventListener('click', mobileSearchBla);
+
+      function mobileSearchBla() {
+        document.querySelector('#searchbox-mobile').value = '';
+      }
+    }
+  };
+
+  function wrapMenuOnMobile() {
+    const container = document.querySelector('.cm-navigation');
+    const wrapper = document.createElement('div');
+    wrapper.id = 'menu-wrapper';
+    wrapper.classList.add('cm-navigation__menu');
+    wrapper.classList.add('mobile-navigation-wrapper');
+    const innerMenu = document.querySelector('.cm-navigation__menu').innerHTML;
+
+    if (!document.getElementById('menu-wrapper')) {
+      wrapper.innerHTML = innerMenu;
+
+      container.appendChild(wrapper);
+      setTimeout(() => {
+        document.querySelector('#menu-wrapper .cm-menu__list:first-of-type').style.display = 'none';
+        const links = document.querySelectorAll('#menu-wrapper a');
+        const linksArray = [];
+        let linksTpl = '';
+        const inm = document.querySelector('.mobile-navigation-wrapper input');
+        const searchButton = document.querySelector('.mobile-navigation-wrapper button#search');
+        const cancelButton = document.querySelector('.mobile-navigation-wrapper button#cancel');
+        inm.id = 'mobile-searchbox';
+        searchButton.id = 'search-mobile';
+        cancelButton.id = 'cancel-mobile';
+
+        links.forEach(e => {
+          if (e.getAttribute('data-link')) {
+            linksArray.push({
+              link: e.href,
+              name: e.textContent,
+            });
+          }
+        });
+
+        linksArray.forEach(e => {
+          linksTpl += `<li class="cm-menu__list__item"><a href="${e.link}">${e.name}</a></li>`;
+        });
+        wrapper.innerHTML += `<ul class="cm-menu__list">${linksTpl}</ul>`;
+      });
+    }
+  }
+
+  function displayDropdown() {
+    let active = false;
+    const trigger = document.querySelector('.cm-navigation__brands--community');
+    document.querySelector('body').addEventListener('click', () => {
+      if (active) {
+        toggle();
+      }
+    });
+
+    trigger.addEventListener('click', e => {
+      e.stopPropagation();
+      e.preventDefault();
+      toggle();
+    });
+
+    function toggle() {
+      active = !active;
+      trigger.classList.toggle('dropdownActive');
+    }
+  }
+
+  // If the user type :"s" or "/", open the searchbox
+  function catchCmdF() {
+    document.addEventListener('keyup', maybeOpenSearchBox);
+
+    function maybeOpenSearchBox(e) {
+      if (e.target.tagName !== 'INPUT' && e.keyCode === 83 || e.keyCode === 191) {
+        document.querySelector('.cm-search__input').classList.add('open');
+        document.querySelector('#searchbox').focus();
+      } else if (e.keyCode === 27) {
+        document.querySelector('.cm-search__input').classList.remove('open');
+        document.querySelector('#searchbox').blur();
+      }
+    }
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    cmSearch();
+    toggleMobileMenu({
+      trigger: '#open-menu',
+    });
+
+    wrapMenuOnMobile();
+    displayDropdown();
+    catchCmdF();
+  });
+
+  window.addEventListener('resize', () => {
+    if (document.body.clientWidth < 768) {
+      wrapMenuOnMobile();
+    }
+  });
+}

docgen/assets/js/main.js

@@ -0,0 +1,22 @@
+import sidebar from './sidebar.js';
+import header from './header.js';
+import communityProjects from './communityProjects.js';
+import dropdowns from './dropdowns.js';
+import './editThisPage.js';
+import activateClipboard from './activateClipboard.js';
+
+const container = document.querySelector('.documentation-container');
+const sidebarContainer = document.querySelector('.sidebar');
+
+if (sidebarContainer) {
+  sidebar({
+    headersContainer: container,
+    sidebarContainer,
+    headerStartLevel: 2,
+  });
+}
+
+header();
+communityProjects();
+dropdowns();
+activateClipboard([...document.querySelectorAll('.code-sample')]);