diff --git a/_includes/overview/top.html b/_includes/overview/top.html
index f5ea7042b..b08c38b4a 100644
--- a/_includes/overview/top.html
+++ b/_includes/overview/top.html
@@ -7,15 +7,15 @@ <h1 class="c-heading -h3">LoopBack</h1>
           <nav class="_nav js-masthead-nav">
             <ul class="_nav-list js-nav-list">
               <li class="_nav-item {% if page.item == 'getting-started' %}-active{% endif %}">
-                <a href="/getting-started">Getting started</a></li>
+                <a href="/lb3/getting-started">Getting started</a></li>
               <li class="_nav-item {% if page.item == 'examples' %}-active{% endif %}">
-                <a href="/examples">Examples</a></li>
+                <a href="/lb3/examples">Examples</a></li>
               <li class="_nav-item {% if page.item == 'docs' %}-active{% endif %}">
                 <a href="/doc">Docs</a></li>
               <li class="_nav-item {% if page.item == 'resources' %}-active{% endif %}">
-                <a href="/resources">Resources</a></li>
+                <a href="/lb3/resources">Resources</a></li>
               <li class="_nav-item {% if page.item == 'contributing' %}-active{% endif %}">
-                <a href="/contributing">Contributing</a></li>
+                <a href="/lb3/contributing">Contributing</a></li>
               <li class="_nav-item">
                 <a href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
               </li>
diff --git a/contribute.html b/contribute.html
new file mode 100644
index 000000000..9d8555a03
--- /dev/null
+++ b/contribute.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <!-- not working -->
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+    <title>LoopBack 4</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
+    <link href="css/loopback.css" rel="stylesheet">
+    <link href="css/contribute.css" rel="stylesheet">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <!-- Site Analytics -->
+    <script type="text/javascript">
+        /* Define digital data object based on _appInfo object */
+        window.digitalData = {
+            page: {
+                category: {
+                    primaryCategory: 'IBM_Cloud_GlobalMarketing',
+                },
+                pageInfo: {
+                    ibm: {
+                        siteID: 'Cloud',
+                    }
+                },
+            }
+        };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ida_stats.js" type="text/javascript"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <a class="navbar-brand" href="index.html">
+            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="getting-started.html">Getting Started</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link highlighted" href="contribute.html">Contribute</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="resources.html">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="oasgraph.html">GraphQL</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank">Test Your APIs</a>
+                </li>
+            </ul>
+        </div>
+    </nav> 
+
+    <div class="r-masthead">
+        <div class="container-fluid"></div>
+        <div class="header-space"></div>
+        <h2>Help us make an impact.</h2>
+        <br>
+        <h5 style="font-weight: normal">LoopBack has an active and growing open-source community.</h5>
+        <div class="header-space"></div>
+    </div>
+    <hr class="hairline">
+
+    <!-- Contribute to LoopBack section -->
+    <section class="odd-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h3 class="section-heading" style="padding-top: 48px;">Contribute to LoopBack</h3>
+                    <p>How do you wish to contribute?</p>
+                    <p style="height:24px"></p>
+                </div>
+            </div>
+    
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href=" doc/en/contrib/Reporting-issues.html">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/contribute/issue-icon-1x.png" alt="Issues icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Report an issue</h5>
+                            <p class="regular text-gray">A relatively easy way to contribute is by reporting new issues. 
+                                See our general guidelines for reporting.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+        
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="doc/en/contrib/code-contrib.html">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/contribute/devgroup-icon-1x.png" alt="Contribute icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Contribute to code</h5>
+                            <p class="regular text-gray">If you're interested in contribuing to the code, be sure to read 
+                                the code contribution guidelines first.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+            </div>
+    
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="doc/en/contrib/doc-contrib.html">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/contribute/contribute-icon-1x.png" alt="Contribute icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Contribute to documentation</h5>
+                            <p class="regular text-gray">We welcome input and help with documentation. 
+                                Check out the documentation sources.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+        
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="https://groups.google.com/forum/#!forum/loopbackjs" target="_blank">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/contribute/devchat-icon-1x.png" alt="Chat icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Participate in the community</h5>
+                            <p class="regular text-gray">The LoopBack community carries on lively discussions in several places. 
+                                Feel free to learn and participate.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+
+    <!-- Governance section -->
+    <section class="even-section">
+        <div class="container text-center">
+            <h3 class="section-heading" style="padding-top: 48px;">Governance</h3>
+            <p class="regular text-center">The LoopBack project governance model follows the sprint and tradition of open source.</p>
+            <p class="large" style="padding-left:190px;padding-right:190px;padding-top:32px;padding-bottom:24px;">
+                LoopBack is an open, inclusive, and tolerant community of people working together to build 
+                a world-class Node framework and tools. We value diversity of individuals and opinions, and seek to operate on
+                consensus whenever possible. We strive to maintain a welcoming, inclusive, and harassment-free environment, 
+                regardless of the form of communication. When consensus is not achievable, we defer to the owners of each 
+                individual module; the powers of the individual owner are kept in check by the ability of the community to 
+                fork and replace dependencies on the individual module and maintainer.</p>
+                <a class="btn btn-primary" role="button" style="padding-left:60px; padding-right:60px" 
+                href="doc/en/contrib/Governance.html">See more details</a>
+        </div>
+    </section>
+    <hr class="hairline">
+
+    <!-- footer -->
+    <footer>
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <img src="images/global/loopback-mark-frame-white.svg" width=40px/>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Product</p>
+                    <p class="regular">
+                        <a href="getting-started.html">Getting Started</a>
+                    </p>
+                    <p class="regular">
+                        <a href="doc/en/lb4/Tutorials.html">Tutorials</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase" >Documentation</p>
+                    <p class="regular">
+                        <a href="/doc">Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="resources.html">Resources</a>
+                    </p>
+                    <p class="regular">
+                        <a href="contribute.html">Contribute</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Support</p>
+                    <p class="regular">
+                        <a href="/doc/en/lb4">LoopBack 4 Documentation</a>
+                    </p>
+                    <p class="regular">
+                        <a href="http://apidocs.loopback.io/@loopback%2fdocs/apidocs.html" target="_blank">API Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="https://strongloop.com/strongblog/" target="_blank">StrongLoop Blog</a>
+                    </p> 
+                    <p class="regular">
+                        <a href="https://www.ibm.com/marketplace/api-management" target="_blank">API Connect</a>
+                    </p>
+                </div>
+            </div>
+            <hr class="hairline-footer">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="regular"> @ Copyright 2018 StrongLoop, an IBM company</p>
+                </div>
+                <div class="col-md-6">
+                    <p style="float:right">
+                        <a class="twitter-share-button"
+                            href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url= dloopback.io">
+                            Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
+                        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+
+    <!-- GitHub button -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+
+</body>
+
+</html>
diff --git a/contributing/index.html b/contributing/index.html
index 698b9c44b..7585f58cc 100644
--- a/contributing/index.html
+++ b/contributing/index.html
@@ -2,6 +2,7 @@
 layout: overview
 title: Contributing
 item: contributing
+permalink: /lb3/contributing
 ---
 <main class="c-content">
   <section class="c-section">
diff --git a/css/loopback.css b/css/loopback.css
index dcf8fab94..79159b467 100644
--- a/css/loopback.css
+++ b/css/loopback.css
@@ -138,6 +138,21 @@ p.centered-regular {
   top: 50%;
 }
 
+.btn-main {
+  background-color: transparent;
+  border: solid 2px var(--color-white);
+  border-radius: 10px;
+  margin-left: 10px;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.btn-main:focus,
+.btn-main:hover {
+  background-color: var(--color-white);
+  color: var(--color-blue-xd);
+}
+
 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
@@ -347,3 +362,17 @@ footer a:hover {
   top: 30%;
   white-space: pre-wrap;
 }
+
+/* Button on the main page */
+.main-btn-text {
+  margin-bottom: 1px;
+}
+.main-btn-text {
+  margin-bottom: 0.5px;
+}
+a.main-btn-link {
+  color: var(--color-white);
+}
+.btn-main:hover a.main-btn-link {
+  color: var(--color-blue-xd);
+}
diff --git a/dist/popper/1.14.0/umd/popper.min.js.map b/dist/popper/1.14.0/umd/popper.min.js.map
new file mode 100644
index 000000000..7061ea55e
--- /dev/null
+++ b/dist/popper/1.14.0/umd/popper.min.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"popper.min.js","sources":["../../src/utils/isFunction.js","../../src/utils/getStyleComputedProperty.js","../../src/utils/getParentNode.js","../../src/utils/getScrollParent.js","../../src/utils/getOffsetParent.js","../../src/utils/isOffsetContainer.js","../../src/utils/getRoot.js","../../src/utils/findCommonOffsetParent.js","../../src/utils/getScroll.js","../../src/utils/includeScroll.js","../../src/utils/getBordersSize.js","../../src/utils/getWindowSizes.js","../../src/utils/getClientRect.js","../../src/utils/getBoundingClientRect.js","../../src/utils/getOffsetRectRelativeToArbitraryNode.js","../../src/utils/getViewportOffsetRectRelativeToArtbitraryNode.js","../../src/utils/isFixed.js","../../src/utils/getFixedPositionOffsetParent.js","../../src/utils/getBoundaries.js","../../src/utils/computeAutoPlacement.js","../../src/utils/getReferenceOffsets.js","../../src/utils/getOuterSizes.js","../../src/utils/getOppositePlacement.js","../../src/utils/getPopperOffsets.js","../../src/utils/find.js","../../src/utils/findIndex.js","../../src/utils/runModifiers.js","../../src/methods/update.js","../../src/utils/isModifierEnabled.js","../../src/utils/getSupportedPropertyName.js","../../src/methods/destroy.js","../../src/utils/getWindow.js","../../src/utils/setupEventListeners.js","../../src/methods/enableEventListeners.js","../../src/utils/removeEventListeners.js","../../src/methods/disableEventListeners.js","../../src/utils/isNumeric.js","../../src/utils/setStyles.js","../../src/utils/setAttributes.js","../../src/utils/isModifierRequired.js","../../src/utils/getOppositeVariation.js","../../src/utils/clockwise.js","../../src/modifiers/offset.js","../../src/utils/debounce.js","../../src/modifiers/arrow.js","../../src/modifiers/computeStyle.js","../../src/utils/isIE.js","../../src/modifiers/flip.js","../../src/index.js","../../src/methods/defaults.js","../../src/modifiers/index.js","../../src/modifiers/shift.js","../../src/modifiers/preventOverflow.js","../../src/modifiers/keepTogether.js","../../src/modifiers/inner.js","../../src/modifiers/hide.js","../../src/modifiers/applyStyle.js"],"sourcesContent":["/**\n * Check if the given variable is a function\n * @method\n * @memberof Popper.Utils\n * @argument {Any} functionToCheck - variable to check\n * @returns {Boolean} answer to: is a function?\n */\nexport default function isFunction(functionToCheck) {\n  const getType = {};\n  return (\n    functionToCheck &&\n    getType.toString.call(functionToCheck) === '[object Function]'\n  );\n}\n","/**\n * Get CSS computed property of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Eement} element\n * @argument {String} property\n */\nexport default function getStyleComputedProperty(element, property) {\n  if (element.nodeType !== 1) {\n    return [];\n  }\n  // NOTE: 1 DOM access here\n  const css = getComputedStyle(element, null);\n  return property ? css[property] : css;\n}\n","/**\n * Returns the parentNode or the host of the element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} parent\n */\nexport default function getParentNode(element) {\n  if (element.nodeName === 'HTML') {\n    return element;\n  }\n  return element.parentNode || element.host;\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport getParentNode from './getParentNode';\n\n/**\n * Returns the scrolling parent of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} scroll parent\n */\nexport default function getScrollParent(element) {\n  // Return body, `getScroll` will take care to get the correct `scrollTop` from it\n  if (!element) {\n    return document.body\n  }\n\n  switch (element.nodeName) {\n    case 'HTML':\n    case 'BODY':\n      return element.ownerDocument.body\n    case '#document':\n      return element.body\n  }\n\n  // Firefox want us to check `-x` and `-y` variations as well\n  const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);\n  if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {\n    return element;\n  }\n\n  return getScrollParent(getParentNode(element));\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport isIE from './isIE';\n/**\n * Returns the offset parent of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} offset parent\n */\nexport default function getOffsetParent(element) {\n  if (!element) {\n    return document.documentElement;\n  }\n\n  const noOffsetParent = isIE(10) ? document.body : null;\n\n  // NOTE: 1 DOM access here\n  let offsetParent = element.offsetParent;\n  // Skip hidden elements which don't have an offsetParent\n  while (offsetParent === noOffsetParent && element.nextElementSibling) {\n    offsetParent = (element = element.nextElementSibling).offsetParent;\n  }\n\n  const nodeName = offsetParent && offsetParent.nodeName;\n\n  if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {\n    return element ? element.ownerDocument.documentElement : document.documentElement;\n  }\n\n  // .offsetParent will return the closest TD or TABLE in case\n  // no offsetParent is present, I hate this job...\n  if (\n    ['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&\n    getStyleComputedProperty(offsetParent, 'position') === 'static'\n  ) {\n    return getOffsetParent(offsetParent);\n  }\n\n  return offsetParent;\n}\n","import getOffsetParent from './getOffsetParent';\n\nexport default function isOffsetContainer(element) {\n  const { nodeName } = element;\n  if (nodeName === 'BODY') {\n    return false;\n  }\n  return (\n    nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element\n  );\n}\n","/**\n * Finds the root node (document, shadowDOM root) of the given element\n * @method\n * @memberof Popper.Utils\n * @argument {Element} node\n * @returns {Element} root node\n */\nexport default function getRoot(node) {\n  if (node.parentNode !== null) {\n    return getRoot(node.parentNode);\n  }\n\n  return node;\n}\n","import isOffsetContainer from './isOffsetContainer';\nimport getRoot from './getRoot';\nimport getOffsetParent from './getOffsetParent';\n\n/**\n * Finds the offset parent common to the two provided nodes\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element1\n * @argument {Element} element2\n * @returns {Element} common offset parent\n */\nexport default function findCommonOffsetParent(element1, element2) {\n  // This check is needed to avoid errors in case one of the elements isn't defined for any reason\n  if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {\n    return document.documentElement;\n  }\n\n  // Here we make sure to give as \"start\" the element that comes first in the DOM\n  const order =\n    element1.compareDocumentPosition(element2) &\n    Node.DOCUMENT_POSITION_FOLLOWING;\n  const start = order ? element1 : element2;\n  const end = order ? element2 : element1;\n\n  // Get common ancestor container\n  const range = document.createRange();\n  range.setStart(start, 0);\n  range.setEnd(end, 0);\n  const { commonAncestorContainer } = range;\n\n  // Both nodes are inside #document\n  if (\n    (element1 !== commonAncestorContainer &&\n      element2 !== commonAncestorContainer) ||\n    start.contains(end)\n  ) {\n    if (isOffsetContainer(commonAncestorContainer)) {\n      return commonAncestorContainer;\n    }\n\n    return getOffsetParent(commonAncestorContainer);\n  }\n\n  // one of the nodes is inside shadowDOM, find which one\n  const element1root = getRoot(element1);\n  if (element1root.host) {\n    return findCommonOffsetParent(element1root.host, element2);\n  } else {\n    return findCommonOffsetParent(element1, getRoot(element2).host);\n  }\n}\n","/**\n * Gets the scroll value of the given element in the given side (top and left)\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @argument {String} side `top` or `left`\n * @returns {number} amount of scrolled pixels\n */\nexport default function getScroll(element, side = 'top') {\n  const upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';\n  const nodeName = element.nodeName;\n\n  if (nodeName === 'BODY' || nodeName === 'HTML') {\n    const html = element.ownerDocument.documentElement;\n    const scrollingElement = element.ownerDocument.scrollingElement || html;\n    return scrollingElement[upperSide];\n  }\n\n  return element[upperSide];\n}\n","import getScroll from './getScroll';\n\n/*\n * Sum or subtract the element scroll values (left and top) from a given rect object\n * @method\n * @memberof Popper.Utils\n * @param {Object} rect - Rect object you want to change\n * @param {HTMLElement} element - The element from the function reads the scroll values\n * @param {Boolean} subtract - set to true if you want to subtract the scroll values\n * @return {Object} rect - The modifier rect object\n */\nexport default function includeScroll(rect, element, subtract = false) {\n  const scrollTop = getScroll(element, 'top');\n  const scrollLeft = getScroll(element, 'left');\n  const modifier = subtract ? -1 : 1;\n  rect.top += scrollTop * modifier;\n  rect.bottom += scrollTop * modifier;\n  rect.left += scrollLeft * modifier;\n  rect.right += scrollLeft * modifier;\n  return rect;\n}\n","/*\n * Helper to detect borders of a given element\n * @method\n * @memberof Popper.Utils\n * @param {CSSStyleDeclaration} styles\n * Result of `getStyleComputedProperty` on the given element\n * @param {String} axis - `x` or `y`\n * @return {number} borders - The borders size of the given axis\n */\n\nexport default function getBordersSize(styles, axis) {\n  const sideA = axis === 'x' ? 'Left' : 'Top';\n  const sideB = sideA === 'Left' ? 'Right' : 'Bottom';\n\n  return (\n    parseFloat(styles[`border${sideA}Width`], 10) +\n    parseFloat(styles[`border${sideB}Width`], 10)\n  );\n}\n","import isIE from './isIE';\n\nfunction getSize(axis, body, html, computedStyle) {\n  return Math.max(\n    body[`offset${axis}`],\n    body[`scroll${axis}`],\n    html[`client${axis}`],\n    html[`offset${axis}`],\n    html[`scroll${axis}`],\n    isIE(10)\n      ? html[`offset${axis}`] +\n        computedStyle[`margin${axis === 'Height' ? 'Top' : 'Left'}`] +\n        computedStyle[`margin${axis === 'Height' ? 'Bottom' : 'Right'}`]\n      : 0\n  );\n}\n\nexport default function getWindowSizes() {\n  const body = document.body;\n  const html = document.documentElement;\n  const computedStyle = isIE(10) && getComputedStyle(html);\n\n  return {\n    height: getSize('Height', body, html, computedStyle),\n    width: getSize('Width', body, html, computedStyle),\n  };\n}\n","/**\n * Given element offsets, generate an output similar to getBoundingClientRect\n * @method\n * @memberof Popper.Utils\n * @argument {Object} offsets\n * @returns {Object} ClientRect like output\n */\nexport default function getClientRect(offsets) {\n  return {\n    ...offsets,\n    right: offsets.left + offsets.width,\n    bottom: offsets.top + offsets.height,\n  };\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport getBordersSize from './getBordersSize';\nimport getWindowSizes from './getWindowSizes';\nimport getScroll from './getScroll';\nimport getClientRect from './getClientRect';\nimport isIE from './isIE';\n\n/**\n * Get bounding client rect of given element\n * @method\n * @memberof Popper.Utils\n * @param {HTMLElement} element\n * @return {Object} client rect\n */\nexport default function getBoundingClientRect(element) {\n  let rect = {};\n\n  // IE10 10 FIX: Please, don't ask, the element isn't\n  // considered in DOM in some circumstances...\n  // This isn't reproducible in IE10 compatibility mode of IE11\n  try {\n    if (isIE(10)) {\n      rect = element.getBoundingClientRect();\n      const scrollTop = getScroll(element, 'top');\n      const scrollLeft = getScroll(element, 'left');\n      rect.top += scrollTop;\n      rect.left += scrollLeft;\n      rect.bottom += scrollTop;\n      rect.right += scrollLeft;\n    }\n    else {\n      rect = element.getBoundingClientRect();\n    }\n  }\n  catch(e){}\n\n  const result = {\n    left: rect.left,\n    top: rect.top,\n    width: rect.right - rect.left,\n    height: rect.bottom - rect.top,\n  };\n\n  // subtract scrollbar size from sizes\n  const sizes = element.nodeName === 'HTML' ? getWindowSizes() : {};\n  const width =\n    sizes.width || element.clientWidth || result.right - result.left;\n  const height =\n    sizes.height || element.clientHeight || result.bottom - result.top;\n\n  let horizScrollbar = element.offsetWidth - width;\n  let vertScrollbar = element.offsetHeight - height;\n\n  // if an hypothetical scrollbar is detected, we must be sure it's not a `border`\n  // we make this check conditional for performance reasons\n  if (horizScrollbar || vertScrollbar) {\n    const styles = getStyleComputedProperty(element);\n    horizScrollbar -= getBordersSize(styles, 'x');\n    vertScrollbar -= getBordersSize(styles, 'y');\n\n    result.width -= horizScrollbar;\n    result.height -= vertScrollbar;\n  }\n\n  return getClientRect(result);\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport includeScroll from './includeScroll';\nimport getScrollParent from './getScrollParent';\nimport getBoundingClientRect from './getBoundingClientRect';\nimport runIsIE from './isIE';\nimport getClientRect from './getClientRect';\n\nexport default function getOffsetRectRelativeToArbitraryNode(children, parent, fixedPosition = false) {\n  const isIE10 = runIsIE(10);\n  const isHTML = parent.nodeName === 'HTML';\n  const childrenRect = getBoundingClientRect(children);\n  const parentRect = getBoundingClientRect(parent);\n  const scrollParent = getScrollParent(children);\n\n  const styles = getStyleComputedProperty(parent);\n  const borderTopWidth = parseFloat(styles.borderTopWidth, 10);\n  const borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);\n\n  // In cases where the parent is fixed, we must ignore negative scroll in offset calc\n  if(fixedPosition && parent.nodeName === 'HTML') {\n    parentRect.top = Math.max(parentRect.top, 0);\n    parentRect.left = Math.max(parentRect.left, 0);\n  }\n  let offsets = getClientRect({\n    top: childrenRect.top - parentRect.top - borderTopWidth,\n    left: childrenRect.left - parentRect.left - borderLeftWidth,\n    width: childrenRect.width,\n    height: childrenRect.height,\n  });\n  offsets.marginTop = 0;\n  offsets.marginLeft = 0;\n\n  // Subtract margins of documentElement in case it's being used as parent\n  // we do this only on HTML because it's the only element that behaves\n  // differently when margins are applied to it. The margins are included in\n  // the box of the documentElement, in the other cases not.\n  if (!isIE10 && isHTML) {\n    const marginTop = parseFloat(styles.marginTop, 10);\n    const marginLeft = parseFloat(styles.marginLeft, 10);\n\n    offsets.top -= borderTopWidth - marginTop;\n    offsets.bottom -= borderTopWidth - marginTop;\n    offsets.left -= borderLeftWidth - marginLeft;\n    offsets.right -= borderLeftWidth - marginLeft;\n\n    // Attach marginTop and marginLeft because in some circumstances we may need them\n    offsets.marginTop = marginTop;\n    offsets.marginLeft = marginLeft;\n  }\n\n  if (\n    isIE10 && !fixedPosition\n      ? parent.contains(scrollParent)\n      : parent === scrollParent && scrollParent.nodeName !== 'BODY'\n  ) {\n    offsets = includeScroll(offsets, parent);\n  }\n\n  return offsets;\n}\n","import getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';\nimport getScroll from './getScroll';\nimport getClientRect from './getClientRect';\n\nexport default function getViewportOffsetRectRelativeToArtbitraryNode(element, excludeScroll = false) {\n  const html = element.ownerDocument.documentElement;\n  const relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);\n  const width = Math.max(html.clientWidth, window.innerWidth || 0);\n  const height = Math.max(html.clientHeight, window.innerHeight || 0);\n\n  const scrollTop = !excludeScroll ? getScroll(html) : 0;\n  const scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;\n\n  const offset = {\n    top: scrollTop - relativeOffset.top + relativeOffset.marginTop,\n    left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,\n    width,\n    height,\n  };\n\n  return getClientRect(offset);\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport getParentNode from './getParentNode';\n\n/**\n * Check if the given element is fixed or is inside a fixed parent\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @argument {Element} customContainer\n * @returns {Boolean} answer to \"isFixed?\"\n */\nexport default function isFixed(element) {\n  const nodeName = element.nodeName;\n  if (nodeName === 'BODY' || nodeName === 'HTML') {\n    return false;\n  }\n  if (getStyleComputedProperty(element, 'position') === 'fixed') {\n    return true;\n  }\n  return isFixed(getParentNode(element));\n}\n","import getStyleComputedProperty from './getStyleComputedProperty';\nimport isIE from './isIE';\n/**\n * Finds the first parent of an element that has a transformed property defined\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Element} first transformed parent or documentElement\n */\n\nexport default function getFixedPositionOffsetParent(element) {\n  // This check is needed to avoid errors in case one of the elements isn't defined for any reason\n   if (!element || !element.parentElement || isIE()) {\n    return document.documentElement;\n  }\n  let el = element.parentElement;\n  while (el && getStyleComputedProperty(el, 'transform') === 'none') {\n    el = el.parentElement;\n  }\n  return el || document.documentElement;\n\n}\n","import getScrollParent from './getScrollParent';\nimport getParentNode from './getParentNode';\nimport findCommonOffsetParent from './findCommonOffsetParent';\nimport getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';\nimport getViewportOffsetRectRelativeToArtbitraryNode from './getViewportOffsetRectRelativeToArtbitraryNode';\nimport getWindowSizes from './getWindowSizes';\nimport isFixed from './isFixed';\nimport getFixedPositionOffsetParent from './getFixedPositionOffsetParent';\n\n/**\n * Computed the boundaries limits and return them\n * @method\n * @memberof Popper.Utils\n * @param {HTMLElement} popper\n * @param {HTMLElement} reference\n * @param {number} padding\n * @param {HTMLElement} boundariesElement - Element used to define the boundaries\n * @param {Boolean} fixedPosition - Is in fixed position mode\n * @returns {Object} Coordinates of the boundaries\n */\nexport default function getBoundaries(\n  popper,\n  reference,\n  padding,\n  boundariesElement,\n  fixedPosition = false\n) {\n  // NOTE: 1 DOM access here\n\n  let boundaries = { top: 0, left: 0 };\n  const offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);\n\n  // Handle viewport case\n  if (boundariesElement === 'viewport' ) {\n    boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);\n  }\n\n  else {\n    // Handle other cases based on DOM element used as boundaries\n    let boundariesNode;\n    if (boundariesElement === 'scrollParent') {\n      boundariesNode = getScrollParent(getParentNode(reference));\n      if (boundariesNode.nodeName === 'BODY') {\n        boundariesNode = popper.ownerDocument.documentElement;\n      }\n    } else if (boundariesElement === 'window') {\n      boundariesNode = popper.ownerDocument.documentElement;\n    } else {\n      boundariesNode = boundariesElement;\n    }\n\n    const offsets = getOffsetRectRelativeToArbitraryNode(\n      boundariesNode,\n      offsetParent,\n      fixedPosition\n    );\n\n    // In case of HTML, we need a different computation\n    if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {\n      const { height, width } = getWindowSizes();\n      boundaries.top += offsets.top - offsets.marginTop;\n      boundaries.bottom = height + offsets.top;\n      boundaries.left += offsets.left - offsets.marginLeft;\n      boundaries.right = width + offsets.left;\n    } else {\n      // for all the other DOM elements, this one is good\n      boundaries = offsets;\n    }\n  }\n\n  // Add paddings\n  boundaries.left += padding;\n  boundaries.top += padding;\n  boundaries.right -= padding;\n  boundaries.bottom -= padding;\n\n  return boundaries;\n}\n","import getBoundaries from '../utils/getBoundaries';\n\nfunction getArea({ width, height }) {\n  return width * height;\n}\n\n/**\n * Utility used to transform the `auto` placement to the placement with more\n * available space.\n * @method\n * @memberof Popper.Utils\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function computeAutoPlacement(\n  placement,\n  refRect,\n  popper,\n  reference,\n  boundariesElement,\n  padding = 0\n) {\n  if (placement.indexOf('auto') === -1) {\n    return placement;\n  }\n\n  const boundaries = getBoundaries(\n    popper,\n    reference,\n    padding,\n    boundariesElement\n  );\n\n  const rects = {\n    top: {\n      width: boundaries.width,\n      height: refRect.top - boundaries.top,\n    },\n    right: {\n      width: boundaries.right - refRect.right,\n      height: boundaries.height,\n    },\n    bottom: {\n      width: boundaries.width,\n      height: boundaries.bottom - refRect.bottom,\n    },\n    left: {\n      width: refRect.left - boundaries.left,\n      height: boundaries.height,\n    },\n  };\n\n  const sortedAreas = Object.keys(rects)\n    .map(key => ({\n      key,\n      ...rects[key],\n      area: getArea(rects[key]),\n    }))\n    .sort((a, b) => b.area - a.area);\n\n  const filteredAreas = sortedAreas.filter(\n    ({ width, height }) =>\n      width >= popper.clientWidth && height >= popper.clientHeight\n  );\n\n  const computedPlacement = filteredAreas.length > 0\n    ? filteredAreas[0].key\n    : sortedAreas[0].key;\n\n  const variation = placement.split('-')[1];\n\n  return computedPlacement + (variation ? `-${variation}` : '');\n}\n","import findCommonOffsetParent from './findCommonOffsetParent';\nimport getOffsetRectRelativeToArbitraryNode from './getOffsetRectRelativeToArbitraryNode';\nimport getFixedPositionOffsetParent from './getFixedPositionOffsetParent';\n\n/**\n * Get offsets to the reference element\n * @method\n * @memberof Popper.Utils\n * @param {Object} state\n * @param {Element} popper - the popper element\n * @param {Element} reference - the reference element (the popper will be relative to this)\n * @param {Element} fixedPosition - is in fixed position mode\n * @returns {Object} An object containing the offsets which will be applied to the popper\n */\nexport default function getReferenceOffsets(state, popper, reference, fixedPosition = null) {\n  const commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, reference);\n  return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);\n}\n","/**\n * Get the outer sizes of the given element (offset size + margins)\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element\n * @returns {Object} object containing width and height properties\n */\nexport default function getOuterSizes(element) {\n  const styles = getComputedStyle(element);\n  const x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);\n  const y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n  const result = {\n    width: element.offsetWidth + y,\n    height: element.offsetHeight + x,\n  };\n  return result;\n}\n","/**\n * Get the opposite placement of the given one\n * @method\n * @memberof Popper.Utils\n * @argument {String} placement\n * @returns {String} flipped placement\n */\nexport default function getOppositePlacement(placement) {\n  const hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };\n  return placement.replace(/left|right|bottom|top/g, matched => hash[matched]);\n}\n","import getOuterSizes from './getOuterSizes';\nimport getOppositePlacement from './getOppositePlacement';\n\n/**\n * Get offsets to the popper\n * @method\n * @memberof Popper.Utils\n * @param {Object} position - CSS position the Popper will get applied\n * @param {HTMLElement} popper - the popper element\n * @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)\n * @param {String} placement - one of the valid placement options\n * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper\n */\nexport default function getPopperOffsets(popper, referenceOffsets, placement) {\n  placement = placement.split('-')[0];\n\n  // Get popper node sizes\n  const popperRect = getOuterSizes(popper);\n\n  // Add position, width and height to our offsets object\n  const popperOffsets = {\n    width: popperRect.width,\n    height: popperRect.height,\n  };\n\n  // depending by the popper placement we have to compute its offsets slightly differently\n  const isHoriz = ['right', 'left'].indexOf(placement) !== -1;\n  const mainSide = isHoriz ? 'top' : 'left';\n  const secondarySide = isHoriz ? 'left' : 'top';\n  const measurement = isHoriz ? 'height' : 'width';\n  const secondaryMeasurement = !isHoriz ? 'height' : 'width';\n\n  popperOffsets[mainSide] =\n    referenceOffsets[mainSide] +\n    referenceOffsets[measurement] / 2 -\n    popperRect[measurement] / 2;\n  if (placement === secondarySide) {\n    popperOffsets[secondarySide] =\n      referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];\n  } else {\n    popperOffsets[secondarySide] =\n      referenceOffsets[getOppositePlacement(secondarySide)];\n  }\n\n  return popperOffsets;\n}\n","/**\n * Mimics the `find` method of Array\n * @method\n * @memberof Popper.Utils\n * @argument {Array} arr\n * @argument prop\n * @argument value\n * @returns index or -1\n */\nexport default function find(arr, check) {\n  // use native find if supported\n  if (Array.prototype.find) {\n    return arr.find(check);\n  }\n\n  // use `filter` to obtain the same behavior of `find`\n  return arr.filter(check)[0];\n}\n","import find from './find';\n\n/**\n * Return the index of the matching object\n * @method\n * @memberof Popper.Utils\n * @argument {Array} arr\n * @argument prop\n * @argument value\n * @returns index or -1\n */\nexport default function findIndex(arr, prop, value) {\n  // use native findIndex if supported\n  if (Array.prototype.findIndex) {\n    return arr.findIndex(cur => cur[prop] === value);\n  }\n\n  // use `find` + `indexOf` if `findIndex` isn't supported\n  const match = find(arr, obj => obj[prop] === value);\n  return arr.indexOf(match);\n}\n","import isFunction from './isFunction';\nimport findIndex from './findIndex';\nimport getClientRect from '../utils/getClientRect';\n\n/**\n * Loop trough the list of modifiers and run them in order,\n * each of them will then edit the data object.\n * @method\n * @memberof Popper.Utils\n * @param {dataObject} data\n * @param {Array} modifiers\n * @param {String} ends - Optional modifier name used as stopper\n * @returns {dataObject}\n */\nexport default function runModifiers(modifiers, data, ends) {\n  const modifiersToRun = ends === undefined\n    ? modifiers\n    : modifiers.slice(0, findIndex(modifiers, 'name', ends));\n\n  modifiersToRun.forEach(modifier => {\n    if (modifier['function']) { // eslint-disable-line dot-notation\n      console.warn('`modifier.function` is deprecated, use `modifier.fn`!');\n    }\n    const fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation\n    if (modifier.enabled && isFunction(fn)) {\n      // Add properties to offsets to make them a complete clientRect object\n      // we do this before each modifier to make sure the previous one doesn't\n      // mess with these values\n      data.offsets.popper = getClientRect(data.offsets.popper);\n      data.offsets.reference = getClientRect(data.offsets.reference);\n\n      data = fn(data, modifier);\n    }\n  });\n\n  return data;\n}\n","import computeAutoPlacement from '../utils/computeAutoPlacement';\nimport getReferenceOffsets from '../utils/getReferenceOffsets';\nimport getPopperOffsets from '../utils/getPopperOffsets';\nimport runModifiers from '../utils/runModifiers';\n\n/**\n * Updates the position of the popper, computing the new offsets and applying\n * the new style.<br />\n * Prefer `scheduleUpdate` over `update` because of performance reasons.\n * @method\n * @memberof Popper\n */\nexport default function update() {\n  // if popper is destroyed, don't perform any further update\n  if (this.state.isDestroyed) {\n    return;\n  }\n\n  let data = {\n    instance: this,\n    styles: {},\n    arrowStyles: {},\n    attributes: {},\n    flipped: false,\n    offsets: {},\n  };\n\n  // compute reference element offsets\n  data.offsets.reference = getReferenceOffsets(\n    this.state,\n    this.popper,\n    this.reference,\n    this.options.positionFixed\n  );\n\n  // compute auto placement, store placement inside the data object,\n  // modifiers will be able to edit `placement` if needed\n  // and refer to originalPlacement to know the original value\n  data.placement = computeAutoPlacement(\n    this.options.placement,\n    data.offsets.reference,\n    this.popper,\n    this.reference,\n    this.options.modifiers.flip.boundariesElement,\n    this.options.modifiers.flip.padding\n  );\n\n  // store the computed placement inside `originalPlacement`\n  data.originalPlacement = data.placement;\n\n  data.positionFixed = this.options.positionFixed;\n\n  // compute the popper offsets\n  data.offsets.popper = getPopperOffsets(\n    this.popper,\n    data.offsets.reference,\n    data.placement\n  );\n  data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';\n\n  // run the modifiers\n  data = runModifiers(this.modifiers, data);\n\n  // the first `update` will call `onCreate` callback\n  // the other ones will call `onUpdate` callback\n  if (!this.state.isCreated) {\n    this.state.isCreated = true;\n    this.options.onCreate(data);\n  } else {\n    this.options.onUpdate(data);\n  }\n}\n","/**\n * Helper used to know if the given modifier is enabled.\n * @method\n * @memberof Popper.Utils\n * @returns {Boolean}\n */\nexport default function isModifierEnabled(modifiers, modifierName) {\n  return modifiers.some(\n    ({ name, enabled }) => enabled && name === modifierName\n  );\n}\n","/**\n * Get the prefixed supported property name\n * @method\n * @memberof Popper.Utils\n * @argument {String} property (camelCase)\n * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)\n */\nexport default function getSupportedPropertyName(property) {\n  const prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];\n  const upperProp = property.charAt(0).toUpperCase() + property.slice(1);\n\n  for (let i = 0; i < prefixes.length; i++) {\n    const prefix = prefixes[i];\n    const toCheck = prefix ? `${prefix}${upperProp}` : property;\n    if (typeof document.body.style[toCheck] !== 'undefined') {\n      return toCheck;\n    }\n  }\n  return null;\n}\n","import isModifierEnabled from '../utils/isModifierEnabled';\nimport getSupportedPropertyName from '../utils/getSupportedPropertyName';\n\n/**\n * Destroy the popper\n * @method\n * @memberof Popper\n */\nexport default function destroy() {\n  this.state.isDestroyed = true;\n\n  // touch DOM only if `applyStyle` modifier is enabled\n  if (isModifierEnabled(this.modifiers, 'applyStyle')) {\n    this.popper.removeAttribute('x-placement');\n    this.popper.style.position = '';\n    this.popper.style.top = '';\n    this.popper.style.left = '';\n    this.popper.style.right = '';\n    this.popper.style.bottom = '';\n    this.popper.style.willChange = '';\n    this.popper.style[getSupportedPropertyName('transform')] = '';\n  }\n\n  this.disableEventListeners();\n\n  // remove the popper if user explicity asked for the deletion on destroy\n  // do not use `remove` because IE11 doesn't support it\n  if (this.options.removeOnDestroy) {\n    this.popper.parentNode.removeChild(this.popper);\n  }\n  return this;\n}\n","/**\n * Get the window associated with the element\n * @argument {Element} element\n * @returns {Window}\n */\nexport default function getWindow(element) {\n  const ownerDocument = element.ownerDocument;\n  return ownerDocument ? ownerDocument.defaultView : window;\n}\n","import getScrollParent from './getScrollParent';\nimport getWindow from './getWindow';\n\nfunction attachToScrollParents(scrollParent, event, callback, scrollParents) {\n  const isBody = scrollParent.nodeName === 'BODY';\n  const target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;\n  target.addEventListener(event, callback, { passive: true });\n\n  if (!isBody) {\n    attachToScrollParents(\n      getScrollParent(target.parentNode),\n      event,\n      callback,\n      scrollParents\n    );\n  }\n  scrollParents.push(target);\n}\n\n/**\n * Setup needed event listeners used to update the popper position\n * @method\n * @memberof Popper.Utils\n * @private\n */\nexport default function setupEventListeners(\n  reference,\n  options,\n  state,\n  updateBound\n) {\n  // Resize event listener on window\n  state.updateBound = updateBound;\n  getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });\n\n  // Scroll event listener on scroll parents\n  const scrollElement = getScrollParent(reference);\n  attachToScrollParents(\n    scrollElement,\n    'scroll',\n    state.updateBound,\n    state.scrollParents\n  );\n  state.scrollElement = scrollElement;\n  state.eventsEnabled = true;\n\n  return state;\n}\n","import setupEventListeners from '../utils/setupEventListeners';\n\n/**\n * It will add resize/scroll events and start recalculating\n * position of the popper element when they are triggered.\n * @method\n * @memberof Popper\n */\nexport default function enableEventListeners() {\n  if (!this.state.eventsEnabled) {\n    this.state = setupEventListeners(\n      this.reference,\n      this.options,\n      this.state,\n      this.scheduleUpdate\n    );\n  }\n}\n","import getWindow from './getWindow';\n\n/**\n * Remove event listeners used to update the popper position\n * @method\n * @memberof Popper.Utils\n * @private\n */\nexport default function removeEventListeners(reference, state) {\n  // Remove resize event listener on window\n  getWindow(reference).removeEventListener('resize', state.updateBound);\n\n  // Remove scroll event listener on scroll parents\n  state.scrollParents.forEach(target => {\n    target.removeEventListener('scroll', state.updateBound);\n  });\n\n  // Reset state\n  state.updateBound = null;\n  state.scrollParents = [];\n  state.scrollElement = null;\n  state.eventsEnabled = false;\n  return state;\n}\n","import removeEventListeners from '../utils/removeEventListeners';\n\n/**\n * It will remove resize/scroll events and won't recalculate popper position\n * when they are triggered. It also won't trigger onUpdate callback anymore,\n * unless you call `update` method manually.\n * @method\n * @memberof Popper\n */\nexport default function disableEventListeners() {\n  if (this.state.eventsEnabled) {\n    cancelAnimationFrame(this.scheduleUpdate);\n    this.state = removeEventListeners(this.reference, this.state);\n  }\n}\n","/**\n * Tells if a given input is a number\n * @method\n * @memberof Popper.Utils\n * @param {*} input to check\n * @return {Boolean}\n */\nexport default function isNumeric(n) {\n  return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);\n}\n","import isNumeric from './isNumeric';\n\n/**\n * Set the style to the given popper\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element - Element to apply the style to\n * @argument {Object} styles\n * Object with a list of properties and values which will be applied to the element\n */\nexport default function setStyles(element, styles) {\n  Object.keys(styles).forEach(prop => {\n    let unit = '';\n    // add unit if the value is numeric and is one of the following\n    if (\n      ['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !==\n        -1 &&\n      isNumeric(styles[prop])\n    ) {\n      unit = 'px';\n    }\n    element.style[prop] = styles[prop] + unit;\n  });\n}\n","/**\n * Set the attributes to the given popper\n * @method\n * @memberof Popper.Utils\n * @argument {Element} element - Element to apply the attributes to\n * @argument {Object} styles\n * Object with a list of properties and values which will be applied to the element\n */\nexport default function setAttributes(element, attributes) {\n  Object.keys(attributes).forEach(function(prop) {\n    const value = attributes[prop];\n    if (value !== false) {\n      element.setAttribute(prop, attributes[prop]);\n    } else {\n      element.removeAttribute(prop);\n    }\n  });\n}\n","import find from './find';\n\n/**\n * Helper used to know if the given modifier depends from another one.<br />\n * It checks if the needed modifier is listed and enabled.\n * @method\n * @memberof Popper.Utils\n * @param {Array} modifiers - list of modifiers\n * @param {String} requestingName - name of requesting modifier\n * @param {String} requestedName - name of requested modifier\n * @returns {Boolean}\n */\nexport default function isModifierRequired(\n  modifiers,\n  requestingName,\n  requestedName\n) {\n  const requesting = find(modifiers, ({ name }) => name === requestingName);\n\n  const isRequired =\n    !!requesting &&\n    modifiers.some(modifier => {\n      return (\n        modifier.name === requestedName &&\n        modifier.enabled &&\n        modifier.order < requesting.order\n      );\n    });\n\n  if (!isRequired) {\n    const requesting = `\\`${requestingName}\\``;\n    const requested = `\\`${requestedName}\\``;\n    console.warn(\n      `${requested} modifier is required by ${requesting} modifier in order to work, be sure to include it before ${requesting}!`\n    );\n  }\n  return isRequired;\n}\n","/**\n * Get the opposite placement variation of the given one\n * @method\n * @memberof Popper.Utils\n * @argument {String} placement variation\n * @returns {String} flipped placement variation\n */\nexport default function getOppositeVariation(variation) {\n  if (variation === 'end') {\n    return 'start';\n  } else if (variation === 'start') {\n    return 'end';\n  }\n  return variation;\n}\n","import placements from '../methods/placements';\n\n// Get rid of `auto` `auto-start` and `auto-end`\nconst validPlacements = placements.slice(3);\n\n/**\n * Given an initial placement, returns all the subsequent placements\n * clockwise (or counter-clockwise).\n *\n * @method\n * @memberof Popper.Utils\n * @argument {String} placement - A valid placement (it accepts variations)\n * @argument {Boolean} counter - Set to true to walk the placements counterclockwise\n * @returns {Array} placements including their variations\n */\nexport default function clockwise(placement, counter = false) {\n  const index = validPlacements.indexOf(placement);\n  const arr = validPlacements\n    .slice(index + 1)\n    .concat(validPlacements.slice(0, index));\n  return counter ? arr.reverse() : arr;\n}\n","import isNumeric from '../utils/isNumeric';\nimport getClientRect from '../utils/getClientRect';\nimport find from '../utils/find';\n\n/**\n * Converts a string containing value + unit into a px value number\n * @function\n * @memberof {modifiers~offset}\n * @private\n * @argument {String} str - Value + unit string\n * @argument {String} measurement - `height` or `width`\n * @argument {Object} popperOffsets\n * @argument {Object} referenceOffsets\n * @returns {Number|String}\n * Value in pixels, or original string if no values were extracted\n */\nexport function toValue(str, measurement, popperOffsets, referenceOffsets) {\n  // separate value from unit\n  const split = str.match(/((?:\\-|\\+)?\\d*\\.?\\d*)(.*)/);\n  const value = +split[1];\n  const unit = split[2];\n\n  // If it's not a number it's an operator, I guess\n  if (!value) {\n    return str;\n  }\n\n  if (unit.indexOf('%') === 0) {\n    let element;\n    switch (unit) {\n      case '%p':\n        element = popperOffsets;\n        break;\n      case '%':\n      case '%r':\n      default:\n        element = referenceOffsets;\n    }\n\n    const rect = getClientRect(element);\n    return rect[measurement] / 100 * value;\n  } else if (unit === 'vh' || unit === 'vw') {\n    // if is a vh or vw, we calculate the size based on the viewport\n    let size;\n    if (unit === 'vh') {\n      size = Math.max(\n        document.documentElement.clientHeight,\n        window.innerHeight || 0\n      );\n    } else {\n      size = Math.max(\n        document.documentElement.clientWidth,\n        window.innerWidth || 0\n      );\n    }\n    return size / 100 * value;\n  } else {\n    // if is an explicit pixel unit, we get rid of the unit and keep the value\n    // if is an implicit unit, it's px, and we return just the value\n    return value;\n  }\n}\n\n/**\n * Parse an `offset` string to extrapolate `x` and `y` numeric offsets.\n * @function\n * @memberof {modifiers~offset}\n * @private\n * @argument {String} offset\n * @argument {Object} popperOffsets\n * @argument {Object} referenceOffsets\n * @argument {String} basePlacement\n * @returns {Array} a two cells array with x and y offsets in numbers\n */\nexport function parseOffset(\n  offset,\n  popperOffsets,\n  referenceOffsets,\n  basePlacement\n) {\n  const offsets = [0, 0];\n\n  // Use height if placement is left or right and index is 0 otherwise use width\n  // in this way the first offset will use an axis and the second one\n  // will use the other one\n  const useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;\n\n  // Split the offset string to obtain a list of values and operands\n  // The regex addresses values with the plus or minus sign in front (+10, -20, etc)\n  const fragments = offset.split(/(\\+|\\-)/).map(frag => frag.trim());\n\n  // Detect if the offset string contains a pair of values or a single one\n  // they could be separated by comma or space\n  const divider = fragments.indexOf(\n    find(fragments, frag => frag.search(/,|\\s/) !== -1)\n  );\n\n  if (fragments[divider] && fragments[divider].indexOf(',') === -1) {\n    console.warn(\n      'Offsets separated by white space(s) are deprecated, use a comma (,) instead.'\n    );\n  }\n\n  // If divider is found, we divide the list of values and operands to divide\n  // them by ofset X and Y.\n  const splitRegex = /\\s*,\\s*|\\s+/;\n  let ops = divider !== -1\n    ? [\n        fragments\n          .slice(0, divider)\n          .concat([fragments[divider].split(splitRegex)[0]]),\n        [fragments[divider].split(splitRegex)[1]].concat(\n          fragments.slice(divider + 1)\n        ),\n      ]\n    : [fragments];\n\n  // Convert the values with units to absolute pixels to allow our computations\n  ops = ops.map((op, index) => {\n    // Most of the units rely on the orientation of the popper\n    const measurement = (index === 1 ? !useHeight : useHeight)\n      ? 'height'\n      : 'width';\n    let mergeWithPrevious = false;\n    return (\n      op\n        // This aggregates any `+` or `-` sign that aren't considered operators\n        // e.g.: 10 + +5 => [10, +, +5]\n        .reduce((a, b) => {\n          if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {\n            a[a.length - 1] = b;\n            mergeWithPrevious = true;\n            return a;\n          } else if (mergeWithPrevious) {\n            a[a.length - 1] += b;\n            mergeWithPrevious = false;\n            return a;\n          } else {\n            return a.concat(b);\n          }\n        }, [])\n        // Here we convert the string values into number values (in px)\n        .map(str => toValue(str, measurement, popperOffsets, referenceOffsets))\n    );\n  });\n\n  // Loop trough the offsets arrays and execute the operations\n  ops.forEach((op, index) => {\n    op.forEach((frag, index2) => {\n      if (isNumeric(frag)) {\n        offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);\n      }\n    });\n  });\n  return offsets;\n}\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @argument {Number|String} options.offset=0\n * The offset value as described in the modifier description\n * @returns {Object} The data object, properly modified\n */\nexport default function offset(data, { offset }) {\n  const { placement, offsets: { popper, reference } } = data;\n  const basePlacement = placement.split('-')[0];\n\n  let offsets;\n  if (isNumeric(+offset)) {\n    offsets = [+offset, 0];\n  } else {\n    offsets = parseOffset(offset, popper, reference, basePlacement);\n  }\n\n  if (basePlacement === 'left') {\n    popper.top += offsets[0];\n    popper.left -= offsets[1];\n  } else if (basePlacement === 'right') {\n    popper.top += offsets[0];\n    popper.left += offsets[1];\n  } else if (basePlacement === 'top') {\n    popper.left += offsets[0];\n    popper.top -= offsets[1];\n  } else if (basePlacement === 'bottom') {\n    popper.left += offsets[0];\n    popper.top += offsets[1];\n  }\n\n  data.popper = popper;\n  return data;\n}\n","const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';\nconst longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];\nlet timeoutDuration = 0;\nfor (let i = 0; i < longerTimeoutBrowsers.length; i += 1) {\n  if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {\n    timeoutDuration = 1;\n    break;\n  }\n}\n\nexport function microtaskDebounce(fn) {\n  let called = false\n  return () => {\n    if (called) {\n      return\n    }\n    called = true\n    window.Promise.resolve().then(() => {\n      called = false\n      fn()\n    })\n  }\n}\n\nexport function taskDebounce(fn) {\n  let scheduled = false;\n  return () => {\n    if (!scheduled) {\n      scheduled = true;\n      setTimeout(() => {\n        scheduled = false;\n        fn();\n      }, timeoutDuration);\n    }\n  };\n}\n\nconst supportsMicroTasks = isBrowser && window.Promise\n\n\n/**\n* Create a debounced version of a method, that's asynchronously deferred\n* but called in the minimum time possible.\n*\n* @method\n* @memberof Popper.Utils\n* @argument {Function} fn\n* @returns {Function}\n*/\nexport default (supportsMicroTasks\n  ? microtaskDebounce\n  : taskDebounce);\n","import getClientRect from '../utils/getClientRect';\nimport getOuterSizes from '../utils/getOuterSizes';\nimport isModifierRequired from '../utils/isModifierRequired';\nimport getStyleComputedProperty from '../utils/getStyleComputedProperty';\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function arrow(data, options) {\n  // arrow depends on keepTogether in order to work\n  if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {\n    return data;\n  }\n\n  let arrowElement = options.element;\n\n  // if arrowElement is a string, suppose it's a CSS selector\n  if (typeof arrowElement === 'string') {\n    arrowElement = data.instance.popper.querySelector(arrowElement);\n\n    // if arrowElement is not found, don't run the modifier\n    if (!arrowElement) {\n      return data;\n    }\n  } else {\n    // if the arrowElement isn't a query selector we must check that the\n    // provided DOM node is child of its popper node\n    if (!data.instance.popper.contains(arrowElement)) {\n      console.warn(\n        'WARNING: `arrow.element` must be child of its popper element!'\n      );\n      return data;\n    }\n  }\n\n  const placement = data.placement.split('-')[0];\n  const { popper, reference } = data.offsets;\n  const isVertical = ['left', 'right'].indexOf(placement) !== -1;\n\n  const len = isVertical ? 'height' : 'width';\n  const sideCapitalized = isVertical ? 'Top' : 'Left';\n  const side = sideCapitalized.toLowerCase();\n  const altSide = isVertical ? 'left' : 'top';\n  const opSide = isVertical ? 'bottom' : 'right';\n  const arrowElementSize = getOuterSizes(arrowElement)[len];\n\n  //\n  // extends keepTogether behavior making sure the popper and its\n  // reference have enough pixels in conjuction\n  //\n\n  // top/left side\n  if (reference[opSide] - arrowElementSize < popper[side]) {\n    data.offsets.popper[side] -=\n      popper[side] - (reference[opSide] - arrowElementSize);\n  }\n  // bottom/right side\n  if (reference[side] + arrowElementSize > popper[opSide]) {\n    data.offsets.popper[side] +=\n      reference[side] + arrowElementSize - popper[opSide];\n  }\n  data.offsets.popper = getClientRect(data.offsets.popper);\n\n  // compute center of the popper\n  const center = reference[side] + reference[len] / 2 - arrowElementSize / 2;\n\n  // Compute the sideValue using the updated popper offsets\n  // take popper margin in account because we don't have this info available\n  const css = getStyleComputedProperty(data.instance.popper);\n  const popperMarginSide = parseFloat(css[`margin${sideCapitalized}`], 10);\n  const popperBorderSide = parseFloat(css[`border${sideCapitalized}Width`], 10);\n  let sideValue =\n    center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;\n\n  // prevent arrowElement from being placed not contiguously to its popper\n  sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);\n\n  data.arrowElement = arrowElement;\n  data.offsets.arrow = {\n    [side]: Math.round(sideValue),\n    [altSide]: '', // make sure to unset any eventual altSide value from the DOM node\n  };\n\n  return data;\n}\n","import getSupportedPropertyName from '../utils/getSupportedPropertyName';\nimport find from '../utils/find';\nimport getOffsetParent from '../utils/getOffsetParent';\nimport getBoundingClientRect from '../utils/getBoundingClientRect';\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function computeStyle(data, options) {\n  const { x, y } = options;\n  const { popper } = data.offsets;\n\n  // Remove this legacy support in Popper.js v2\n  const legacyGpuAccelerationOption = find(\n    data.instance.modifiers,\n    modifier => modifier.name === 'applyStyle'\n  ).gpuAcceleration;\n  if (legacyGpuAccelerationOption !== undefined) {\n    console.warn(\n      'WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!'\n    );\n  }\n  const gpuAcceleration =\n    legacyGpuAccelerationOption !== undefined\n      ? legacyGpuAccelerationOption\n      : options.gpuAcceleration;\n\n  const offsetParent = getOffsetParent(data.instance.popper);\n  const offsetParentRect = getBoundingClientRect(offsetParent);\n\n  // Styles\n  const styles = {\n    position: popper.position,\n  };\n\n  // floor sides to avoid blurry text\n  const offsets = {\n    left: Math.floor(popper.left),\n    top: Math.floor(popper.top),\n    bottom: Math.floor(popper.bottom),\n    right: Math.floor(popper.right),\n  };\n\n  const sideA = x === 'bottom' ? 'top' : 'bottom';\n  const sideB = y === 'right' ? 'left' : 'right';\n\n  // if gpuAcceleration is set to `true` and transform is supported,\n  //  we use `translate3d` to apply the position to the popper we\n  // automatically use the supported prefixed version if needed\n  const prefixedProperty = getSupportedPropertyName('transform');\n\n  // now, let's make a step back and look at this code closely (wtf?)\n  // If the content of the popper grows once it's been positioned, it\n  // may happen that the popper gets misplaced because of the new content\n  // overflowing its reference element\n  // To avoid this problem, we provide two options (x and y), which allow\n  // the consumer to define the offset origin.\n  // If we position a popper on top of a reference element, we can set\n  // `x` to `top` to make the popper grow towards its top instead of\n  // its bottom.\n  let left, top;\n  if (sideA === 'bottom') {\n    top = -offsetParentRect.height + offsets.bottom;\n  } else {\n    top = offsets.top;\n  }\n  if (sideB === 'right') {\n    left = -offsetParentRect.width + offsets.right;\n  } else {\n    left = offsets.left;\n  }\n  if (gpuAcceleration && prefixedProperty) {\n    styles[prefixedProperty] = `translate3d(${left}px, ${top}px, 0)`;\n    styles[sideA] = 0;\n    styles[sideB] = 0;\n    styles.willChange = 'transform';\n  } else {\n    // othwerise, we use the standard `top`, `left`, `bottom` and `right` properties\n    const invertTop = sideA === 'bottom' ? -1 : 1;\n    const invertLeft = sideB === 'right' ? -1 : 1;\n    styles[sideA] = top * invertTop;\n    styles[sideB] = left * invertLeft;\n    styles.willChange = `${sideA}, ${sideB}`;\n  }\n\n  // Attributes\n  const attributes = {\n    'x-placement': data.placement,\n  };\n\n  // Update `data` attributes, styles and arrowStyles\n  data.attributes = { ...attributes, ...data.attributes };\n  data.styles = { ...styles, ...data.styles };\n  data.arrowStyles = { ...data.offsets.arrow, ...data.arrowStyles };\n\n  return data;\n}\n","/**\n * Tells if you are running Internet Explorer\n * @method\n * @memberof Popper.Utils\n * @argument {number} version to check\n * @returns {Boolean} isIE\n */\nconst cache = {};\n\nexport default function (version = 'all') {\n  version = version.toString();\n  if(cache.hasOwnProperty(version)){\n    return cache[version];\n  }\n  switch (version) {\n    case '11':\n      cache[version] = navigator.userAgent.indexOf('Trident') !== -1;\n      break;\n    case '10':\n      cache[version] = navigator.appVersion.indexOf('MSIE 10') !== -1;\n      break;\n    case 'all':\n      cache[version] = navigator.userAgent.indexOf('Trident') !== -1 || navigator.userAgent.indexOf('MSIE') !== -1;\n      break;\n  }\n\n  //Set IE\n  cache.all = cache.all || Object.keys(cache).some(key => cache[key]);\n  return cache[version];\n}\n","import getOppositePlacement from '../utils/getOppositePlacement';\nimport getOppositeVariation from '../utils/getOppositeVariation';\nimport getPopperOffsets from '../utils/getPopperOffsets';\nimport runModifiers from '../utils/runModifiers';\nimport getBoundaries from '../utils/getBoundaries';\nimport isModifierEnabled from '../utils/isModifierEnabled';\nimport clockwise from '../utils/clockwise';\n\nconst BEHAVIORS = {\n  FLIP: 'flip',\n  CLOCKWISE: 'clockwise',\n  COUNTERCLOCKWISE: 'counterclockwise',\n};\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function flip(data, options) {\n  // if `inner` modifier is enabled, we can't use the `flip` modifier\n  if (isModifierEnabled(data.instance.modifiers, 'inner')) {\n    return data;\n  }\n\n  if (data.flipped && data.placement === data.originalPlacement) {\n    // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides\n    return data;\n  }\n\n  const boundaries = getBoundaries(\n    data.instance.popper,\n    data.instance.reference,\n    options.padding,\n    options.boundariesElement,\n    data.positionFixed\n  );\n\n  let placement = data.placement.split('-')[0];\n  let placementOpposite = getOppositePlacement(placement);\n  let variation = data.placement.split('-')[1] || '';\n\n  let flipOrder = [];\n\n  switch (options.behavior) {\n    case BEHAVIORS.FLIP:\n      flipOrder = [placement, placementOpposite];\n      break;\n    case BEHAVIORS.CLOCKWISE:\n      flipOrder = clockwise(placement);\n      break;\n    case BEHAVIORS.COUNTERCLOCKWISE:\n      flipOrder = clockwise(placement, true);\n      break;\n    default:\n      flipOrder = options.behavior;\n  }\n\n  flipOrder.forEach((step, index) => {\n    if (placement !== step || flipOrder.length === index + 1) {\n      return data;\n    }\n\n    placement = data.placement.split('-')[0];\n    placementOpposite = getOppositePlacement(placement);\n\n    const popperOffsets = data.offsets.popper;\n    const refOffsets = data.offsets.reference;\n\n    // using floor because the reference offsets may contain decimals we are not going to consider here\n    const floor = Math.floor;\n    const overlapsRef =\n      (placement === 'left' &&\n        floor(popperOffsets.right) > floor(refOffsets.left)) ||\n      (placement === 'right' &&\n        floor(popperOffsets.left) < floor(refOffsets.right)) ||\n      (placement === 'top' &&\n        floor(popperOffsets.bottom) > floor(refOffsets.top)) ||\n      (placement === 'bottom' &&\n        floor(popperOffsets.top) < floor(refOffsets.bottom));\n\n    const overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);\n    const overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);\n    const overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);\n    const overflowsBottom =\n      floor(popperOffsets.bottom) > floor(boundaries.bottom);\n\n    const overflowsBoundaries =\n      (placement === 'left' && overflowsLeft) ||\n      (placement === 'right' && overflowsRight) ||\n      (placement === 'top' && overflowsTop) ||\n      (placement === 'bottom' && overflowsBottom);\n\n    // flip the variation if required\n    const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;\n    const flippedVariation =\n      !!options.flipVariations &&\n      ((isVertical && variation === 'start' && overflowsLeft) ||\n        (isVertical && variation === 'end' && overflowsRight) ||\n        (!isVertical && variation === 'start' && overflowsTop) ||\n        (!isVertical && variation === 'end' && overflowsBottom));\n\n    if (overlapsRef || overflowsBoundaries || flippedVariation) {\n      // this boolean to detect any flip loop\n      data.flipped = true;\n\n      if (overlapsRef || overflowsBoundaries) {\n        placement = flipOrder[index + 1];\n      }\n\n      if (flippedVariation) {\n        variation = getOppositeVariation(variation);\n      }\n\n      data.placement = placement + (variation ? '-' + variation : '');\n\n      // this object contains `position`, we want to preserve it along with\n      // any additional property we may add in the future\n      data.offsets.popper = {\n        ...data.offsets.popper,\n        ...getPopperOffsets(\n          data.instance.popper,\n          data.offsets.reference,\n          data.placement\n        ),\n      };\n\n      data = runModifiers(data.instance.modifiers, data, 'flip');\n    }\n  });\n  return data;\n}\n","// Utils\nimport debounce from './utils/debounce';\nimport isFunction from './utils/isFunction';\n\n// Methods\nimport update from './methods/update';\nimport destroy from './methods/destroy';\nimport enableEventListeners from './methods/enableEventListeners';\nimport disableEventListeners from './methods/disableEventListeners';\nimport Defaults from './methods/defaults';\nimport placements from './methods/placements';\n\nexport default class Popper {\n  /**\n   * Create a new Popper.js instance\n   * @class Popper\n   * @param {HTMLElement|referenceObject} reference - The reference element used to position the popper\n   * @param {HTMLElement} popper - The HTML element used as popper.\n   * @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)\n   * @return {Object} instance - The generated Popper.js instance\n   */\n  constructor(reference, popper, options = {}) {\n    // make update() debounced, so that it only runs at most once-per-tick\n    this.update = debounce(this.update.bind(this));\n\n    // with {} we create a new object with the options inside it\n    this.options = { ...Popper.Defaults, ...options };\n\n    // init state\n    this.state = {\n      isDestroyed: false,\n      isCreated: false,\n      scrollParents: [],\n    };\n\n    // get reference and popper elements (allow jQuery wrappers)\n    this.reference = reference && reference.jquery ? reference[0] : reference;\n    this.popper = popper && popper.jquery ? popper[0] : popper;\n\n    // Deep merge modifiers options\n    this.options.modifiers = {};\n    Object.keys({\n      ...Popper.Defaults.modifiers,\n      ...options.modifiers,\n    }).forEach(name => {\n      this.options.modifiers[name] = {\n        // If it's a built-in modifier, use it as base\n        ...(Popper.Defaults.modifiers[name] || {}),\n        // If there are custom options, override and merge with default ones\n        ...(options.modifiers ? options.modifiers[name] : {}),\n      };\n    });\n\n    // Refactoring modifiers' list (Object => Array)\n    this.modifiers = Object.keys(this.options.modifiers)\n      .map(name => ({\n        name,\n        ...this.options.modifiers[name],\n      }))\n      // sort the modifiers by order\n      .sort((a, b) => a.order - b.order);\n\n    // modifiers have the ability to execute arbitrary code when Popper.js get inited\n    // such code is executed in the same order of its modifier\n    // they could add new properties to their options configuration\n    // BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!\n    this.modifiers.forEach(modifierOptions => {\n      if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {\n        modifierOptions.onLoad(\n          this.reference,\n          this.popper,\n          this.options,\n          modifierOptions,\n          this.state\n        );\n      }\n    });\n\n    // fire the first update to position the popper in the right place\n    this.update();\n\n    const eventsEnabled = this.options.eventsEnabled;\n    if (eventsEnabled) {\n      // setup event listeners, they will take care of update the position in specific situations\n      this.enableEventListeners();\n    }\n\n    this.state.eventsEnabled = eventsEnabled;\n  }\n\n  // We can't use class properties because they don't get listed in the\n  // class prototype and break stuff like Sinon stubs\n  update() {\n    return update.call(this);\n  }\n  destroy() {\n    return destroy.call(this);\n  }\n  enableEventListeners() {\n    return enableEventListeners.call(this);\n  }\n  disableEventListeners() {\n    return disableEventListeners.call(this);\n  }\n\n  /**\n   * Schedule an update, it will run on the next UI update available\n   * @method scheduleUpdate\n   * @memberof Popper\n   */\n  scheduleUpdate = () => requestAnimationFrame(this.update);\n\n  /**\n   * Collection of utilities useful when writing custom modifiers.\n   * Starting from version 1.7, this method is available only if you\n   * include `popper-utils.js` before `popper.js`.\n   *\n   * **DEPRECATION**: This way to access PopperUtils is deprecated\n   * and will be removed in v2! Use the PopperUtils module directly instead.\n   * Due to the high instability of the methods contained in Utils, we can't\n   * guarantee them to follow semver. Use them at your own risk!\n   * @static\n   * @private\n   * @type {Object}\n   * @deprecated since version 1.8\n   * @member Utils\n   * @memberof Popper\n   */\n  static Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;\n\n  static placements = placements;\n\n  static Defaults = Defaults;\n}\n\n/**\n * The `referenceObject` is an object that provides an interface compatible with Popper.js\n * and lets you use it as replacement of a real DOM node.<br />\n * You can use this method to position a popper relatively to a set of coordinates\n * in case you don't have a DOM node to use as reference.\n *\n * ```\n * new Popper(referenceObject, popperNode);\n * ```\n *\n * NB: This feature isn't supported in Internet Explorer 10\n * @name referenceObject\n * @property {Function} data.getBoundingClientRect\n * A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.\n * @property {number} data.clientWidth\n * An ES6 getter that will return the width of the virtual reference element.\n * @property {number} data.clientHeight\n * An ES6 getter that will return the height of the virtual reference element.\n */\n","import modifiers from '../modifiers/index';\n\n/**\n * Default options provided to Popper.js constructor.<br />\n * These can be overriden using the `options` argument of Popper.js.<br />\n * To override an option, simply pass as 3rd argument an object with the same\n * structure of this object, example:\n * ```\n * new Popper(ref, pop, {\n *   modifiers: {\n *     preventOverflow: { enabled: false }\n *   }\n * })\n * ```\n * @type {Object}\n * @static\n * @memberof Popper\n */\nexport default {\n  /**\n   * Popper's placement\n   * @prop {Popper.placements} placement='bottom'\n   */\n  placement: 'bottom',\n\n  /**\n   * Set this to true if you want popper to position it self in 'fixed' mode\n   * @prop {Boolean} positionFixed=false\n   */\n  positionFixed: false,\n\n  /**\n   * Whether events (resize, scroll) are initially enabled\n   * @prop {Boolean} eventsEnabled=true\n   */\n  eventsEnabled: true,\n\n  /**\n   * Set to true if you want to automatically remove the popper when\n   * you call the `destroy` method.\n   * @prop {Boolean} removeOnDestroy=false\n   */\n  removeOnDestroy: false,\n\n  /**\n   * Callback called when the popper is created.<br />\n   * By default, is set to no-op.<br />\n   * Access Popper.js instance with `data.instance`.\n   * @prop {onCreate}\n   */\n  onCreate: () => {},\n\n  /**\n   * Callback called when the popper is updated, this callback is not called\n   * on the initialization/creation of the popper, but only on subsequent\n   * updates.<br />\n   * By default, is set to no-op.<br />\n   * Access Popper.js instance with `data.instance`.\n   * @prop {onUpdate}\n   */\n  onUpdate: () => {},\n\n  /**\n   * List of modifiers used to modify the offsets before they are applied to the popper.\n   * They provide most of the functionalities of Popper.js\n   * @prop {modifiers}\n   */\n  modifiers,\n};\n\n/**\n * @callback onCreate\n * @param {dataObject} data\n */\n\n/**\n * @callback onUpdate\n * @param {dataObject} data\n */\n","import applyStyle, { applyStyleOnLoad } from './applyStyle';\nimport computeStyle from './computeStyle';\nimport arrow from './arrow';\nimport flip from './flip';\nimport keepTogether from './keepTogether';\nimport offset from './offset';\nimport preventOverflow from './preventOverflow';\nimport shift from './shift';\nimport hide from './hide';\nimport inner from './inner';\n\n/**\n * Modifier function, each modifier can have a function of this type assigned\n * to its `fn` property.<br />\n * These functions will be called on each update, this means that you must\n * make sure they are performant enough to avoid performance bottlenecks.\n *\n * @function ModifierFn\n * @argument {dataObject} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {dataObject} The data object, properly modified\n */\n\n/**\n * Modifiers are plugins used to alter the behavior of your poppers.<br />\n * Popper.js uses a set of 9 modifiers to provide all the basic functionalities\n * needed by the library.\n *\n * Usually you don't want to override the `order`, `fn` and `onLoad` props.\n * All the other properties are configurations that could be tweaked.\n * @namespace modifiers\n */\nexport default {\n  /**\n   * Modifier used to shift the popper on the start or end of its reference\n   * element.<br />\n   * It will read the variation of the `placement` property.<br />\n   * It can be one either `-end` or `-start`.\n   * @memberof modifiers\n   * @inner\n   */\n  shift: {\n    /** @prop {number} order=100 - Index used to define the order of execution */\n    order: 100,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: shift,\n  },\n\n  /**\n   * The `offset` modifier can shift your popper on both its axis.\n   *\n   * It accepts the following units:\n   * - `px` or unitless, interpreted as pixels\n   * - `%` or `%r`, percentage relative to the length of the reference element\n   * - `%p`, percentage relative to the length of the popper element\n   * - `vw`, CSS viewport width unit\n   * - `vh`, CSS viewport height unit\n   *\n   * For length is intended the main axis relative to the placement of the popper.<br />\n   * This means that if the placement is `top` or `bottom`, the length will be the\n   * `width`. In case of `left` or `right`, it will be the height.\n   *\n   * You can provide a single value (as `Number` or `String`), or a pair of values\n   * as `String` divided by a comma or one (or more) white spaces.<br />\n   * The latter is a deprecated method because it leads to confusion and will be\n   * removed in v2.<br />\n   * Additionally, it accepts additions and subtractions between different units.\n   * Note that multiplications and divisions aren't supported.\n   *\n   * Valid examples are:\n   * ```\n   * 10\n   * '10%'\n   * '10, 10'\n   * '10%, 10'\n   * '10 + 10%'\n   * '10 - 5vh + 3%'\n   * '-10px + 5vh, 5px - 6%'\n   * ```\n   * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap\n   * > with their reference element, unfortunately, you will have to disable the `flip` modifier.\n   * > More on this [reading this issue](https://github.com/FezVrasta/popper.js/issues/373)\n   *\n   * @memberof modifiers\n   * @inner\n   */\n  offset: {\n    /** @prop {number} order=200 - Index used to define the order of execution */\n    order: 200,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: offset,\n    /** @prop {Number|String} offset=0\n     * The offset value as described in the modifier description\n     */\n    offset: 0,\n  },\n\n  /**\n   * Modifier used to prevent the popper from being positioned outside the boundary.\n   *\n   * An scenario exists where the reference itself is not within the boundaries.<br />\n   * We can say it has \"escaped the boundaries\" — or just \"escaped\".<br />\n   * In this case we need to decide whether the popper should either:\n   *\n   * - detach from the reference and remain \"trapped\" in the boundaries, or\n   * - if it should ignore the boundary and \"escape with its reference\"\n   *\n   * When `escapeWithReference` is set to`true` and reference is completely\n   * outside its boundaries, the popper will overflow (or completely leave)\n   * the boundaries in order to remain attached to the edge of the reference.\n   *\n   * @memberof modifiers\n   * @inner\n   */\n  preventOverflow: {\n    /** @prop {number} order=300 - Index used to define the order of execution */\n    order: 300,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: preventOverflow,\n    /**\n     * @prop {Array} [priority=['left','right','top','bottom']]\n     * Popper will try to prevent overflow following these priorities by default,\n     * then, it could overflow on the left and on top of the `boundariesElement`\n     */\n    priority: ['left', 'right', 'top', 'bottom'],\n    /**\n     * @prop {number} padding=5\n     * Amount of pixel used to define a minimum distance between the boundaries\n     * and the popper this makes sure the popper has always a little padding\n     * between the edges of its container\n     */\n    padding: 5,\n    /**\n     * @prop {String|HTMLElement} boundariesElement='scrollParent'\n     * Boundaries used by the modifier, can be `scrollParent`, `window`,\n     * `viewport` or any DOM element.\n     */\n    boundariesElement: 'scrollParent',\n  },\n\n  /**\n   * Modifier used to make sure the reference and its popper stay near eachothers\n   * without leaving any gap between the two. Expecially useful when the arrow is\n   * enabled and you want to assure it to point to its reference element.\n   * It cares only about the first axis, you can still have poppers with margin\n   * between the popper and its reference element.\n   * @memberof modifiers\n   * @inner\n   */\n  keepTogether: {\n    /** @prop {number} order=400 - Index used to define the order of execution */\n    order: 400,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: keepTogether,\n  },\n\n  /**\n   * This modifier is used to move the `arrowElement` of the popper to make\n   * sure it is positioned between the reference element and its popper element.\n   * It will read the outer size of the `arrowElement` node to detect how many\n   * pixels of conjuction are needed.\n   *\n   * It has no effect if no `arrowElement` is provided.\n   * @memberof modifiers\n   * @inner\n   */\n  arrow: {\n    /** @prop {number} order=500 - Index used to define the order of execution */\n    order: 500,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: arrow,\n    /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */\n    element: '[x-arrow]',\n  },\n\n  /**\n   * Modifier used to flip the popper's placement when it starts to overlap its\n   * reference element.\n   *\n   * Requires the `preventOverflow` modifier before it in order to work.\n   *\n   * **NOTE:** this modifier will interrupt the current update cycle and will\n   * restart it if it detects the need to flip the placement.\n   * @memberof modifiers\n   * @inner\n   */\n  flip: {\n    /** @prop {number} order=600 - Index used to define the order of execution */\n    order: 600,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: flip,\n    /**\n     * @prop {String|Array} behavior='flip'\n     * The behavior used to change the popper's placement. It can be one of\n     * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid\n     * placements (with optional variations).\n     */\n    behavior: 'flip',\n    /**\n     * @prop {number} padding=5\n     * The popper will flip if it hits the edges of the `boundariesElement`\n     */\n    padding: 5,\n    /**\n     * @prop {String|HTMLElement} boundariesElement='viewport'\n     * The element which will define the boundaries of the popper position,\n     * the popper will never be placed outside of the defined boundaries\n     * (except if keepTogether is enabled)\n     */\n    boundariesElement: 'viewport',\n  },\n\n  /**\n   * Modifier used to make the popper flow toward the inner of the reference element.\n   * By default, when this modifier is disabled, the popper will be placed outside\n   * the reference element.\n   * @memberof modifiers\n   * @inner\n   */\n  inner: {\n    /** @prop {number} order=700 - Index used to define the order of execution */\n    order: 700,\n    /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */\n    enabled: false,\n    /** @prop {ModifierFn} */\n    fn: inner,\n  },\n\n  /**\n   * Modifier used to hide the popper when its reference element is outside of the\n   * popper boundaries. It will set a `x-out-of-boundaries` attribute which can\n   * be used to hide with a CSS selector the popper when its reference is\n   * out of boundaries.\n   *\n   * Requires the `preventOverflow` modifier before it in order to work.\n   * @memberof modifiers\n   * @inner\n   */\n  hide: {\n    /** @prop {number} order=800 - Index used to define the order of execution */\n    order: 800,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: hide,\n  },\n\n  /**\n   * Computes the style that will be applied to the popper element to gets\n   * properly positioned.\n   *\n   * Note that this modifier will not touch the DOM, it just prepares the styles\n   * so that `applyStyle` modifier can apply it. This separation is useful\n   * in case you need to replace `applyStyle` with a custom implementation.\n   *\n   * This modifier has `850` as `order` value to maintain backward compatibility\n   * with previous versions of Popper.js. Expect the modifiers ordering method\n   * to change in future major versions of the library.\n   *\n   * @memberof modifiers\n   * @inner\n   */\n  computeStyle: {\n    /** @prop {number} order=850 - Index used to define the order of execution */\n    order: 850,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: computeStyle,\n    /**\n     * @prop {Boolean} gpuAcceleration=true\n     * If true, it uses the CSS 3d transformation to position the popper.\n     * Otherwise, it will use the `top` and `left` properties.\n     */\n    gpuAcceleration: true,\n    /**\n     * @prop {string} [x='bottom']\n     * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.\n     * Change this if your popper should grow in a direction different from `bottom`\n     */\n    x: 'bottom',\n    /**\n     * @prop {string} [x='left']\n     * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.\n     * Change this if your popper should grow in a direction different from `right`\n     */\n    y: 'right',\n  },\n\n  /**\n   * Applies the computed styles to the popper element.\n   *\n   * All the DOM manipulations are limited to this modifier. This is useful in case\n   * you want to integrate Popper.js inside a framework or view library and you\n   * want to delegate all the DOM manipulations to it.\n   *\n   * Note that if you disable this modifier, you must make sure the popper element\n   * has its position set to `absolute` before Popper.js can do its work!\n   *\n   * Just disable this modifier and define you own to achieve the desired effect.\n   *\n   * @memberof modifiers\n   * @inner\n   */\n  applyStyle: {\n    /** @prop {number} order=900 - Index used to define the order of execution */\n    order: 900,\n    /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */\n    enabled: true,\n    /** @prop {ModifierFn} */\n    fn: applyStyle,\n    /** @prop {Function} */\n    onLoad: applyStyleOnLoad,\n    /**\n     * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier\n     * @prop {Boolean} gpuAcceleration=true\n     * If true, it uses the CSS 3d transformation to position the popper.\n     * Otherwise, it will use the `top` and `left` properties.\n     */\n    gpuAcceleration: undefined,\n  },\n};\n\n/**\n * The `dataObject` is an object containing all the informations used by Popper.js\n * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.\n * @name dataObject\n * @property {Object} data.instance The Popper.js instance\n * @property {String} data.placement Placement applied to popper\n * @property {String} data.originalPlacement Placement originally defined on init\n * @property {Boolean} data.flipped True if popper has been flipped by flip modifier\n * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.\n * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier\n * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)\n * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)\n * @property {Object} data.boundaries Offsets of the popper boundaries\n * @property {Object} data.offsets The measurements of popper, reference and arrow elements.\n * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values\n * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values\n * @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0\n */\n","/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function shift(data) {\n  const placement = data.placement;\n  const basePlacement = placement.split('-')[0];\n  const shiftvariation = placement.split('-')[1];\n\n  // if shift shiftvariation is specified, run the modifier\n  if (shiftvariation) {\n    const { reference, popper } = data.offsets;\n    const isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;\n    const side = isVertical ? 'left' : 'top';\n    const measurement = isVertical ? 'width' : 'height';\n\n    const shiftOffsets = {\n      start: { [side]: reference[side] },\n      end: {\n        [side]: reference[side] + reference[measurement] - popper[measurement],\n      },\n    };\n\n    data.offsets.popper = { ...popper, ...shiftOffsets[shiftvariation] };\n  }\n\n  return data;\n}\n","import getOffsetParent from '../utils/getOffsetParent';\nimport getBoundaries from '../utils/getBoundaries';\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function preventOverflow(data, options) {\n  let boundariesElement =\n    options.boundariesElement || getOffsetParent(data.instance.popper);\n\n  // If offsetParent is the reference element, we really want to\n  // go one step up and use the next offsetParent as reference to\n  // avoid to make this modifier completely useless and look like broken\n  if (data.instance.reference === boundariesElement) {\n    boundariesElement = getOffsetParent(boundariesElement);\n  }\n\n  const boundaries = getBoundaries(\n    data.instance.popper,\n    data.instance.reference,\n    options.padding,\n    boundariesElement,\n    data.positionFixed\n  );\n  options.boundaries = boundaries;\n\n  const order = options.priority;\n  let popper = data.offsets.popper;\n\n  const check = {\n    primary(placement) {\n      let value = popper[placement];\n      if (\n        popper[placement] < boundaries[placement] &&\n        !options.escapeWithReference\n      ) {\n        value = Math.max(popper[placement], boundaries[placement]);\n      }\n      return { [placement]: value };\n    },\n    secondary(placement) {\n      const mainSide = placement === 'right' ? 'left' : 'top';\n      let value = popper[mainSide];\n      if (\n        popper[placement] > boundaries[placement] &&\n        !options.escapeWithReference\n      ) {\n        value = Math.min(\n          popper[mainSide],\n          boundaries[placement] -\n            (placement === 'right' ? popper.width : popper.height)\n        );\n      }\n      return { [mainSide]: value };\n    },\n  };\n\n  order.forEach(placement => {\n    const side = ['left', 'top'].indexOf(placement) !== -1\n      ? 'primary'\n      : 'secondary';\n    popper = { ...popper, ...check[side](placement) };\n  });\n\n  data.offsets.popper = popper;\n\n  return data;\n}\n","/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function keepTogether(data) {\n  const { popper, reference } = data.offsets;\n  const placement = data.placement.split('-')[0];\n  const floor = Math.floor;\n  const isVertical = ['top', 'bottom'].indexOf(placement) !== -1;\n  const side = isVertical ? 'right' : 'bottom';\n  const opSide = isVertical ? 'left' : 'top';\n  const measurement = isVertical ? 'width' : 'height';\n\n  if (popper[side] < floor(reference[opSide])) {\n    data.offsets.popper[opSide] =\n      floor(reference[opSide]) - popper[measurement];\n  }\n  if (popper[opSide] > floor(reference[side])) {\n    data.offsets.popper[opSide] = floor(reference[side]);\n  }\n\n  return data;\n}\n","import getClientRect from '../utils/getClientRect';\nimport getOppositePlacement from '../utils/getOppositePlacement';\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function inner(data) {\n  const placement = data.placement;\n  const basePlacement = placement.split('-')[0];\n  const { popper, reference } = data.offsets;\n  const isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;\n\n  const subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;\n\n  popper[isHoriz ? 'left' : 'top'] =\n    reference[basePlacement] -\n    (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);\n\n  data.placement = getOppositePlacement(placement);\n  data.offsets.popper = getClientRect(popper);\n\n  return data;\n}\n","import isModifierRequired from '../utils/isModifierRequired';\nimport find from '../utils/find';\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by update method\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The data object, properly modified\n */\nexport default function hide(data) {\n  if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {\n    return data;\n  }\n\n  const refRect = data.offsets.reference;\n  const bound = find(\n    data.instance.modifiers,\n    modifier => modifier.name === 'preventOverflow'\n  ).boundaries;\n\n  if (\n    refRect.bottom < bound.top ||\n    refRect.left > bound.right ||\n    refRect.top > bound.bottom ||\n    refRect.right < bound.left\n  ) {\n    // Avoid unnecessary DOM access if visibility hasn't changed\n    if (data.hide === true) {\n      return data;\n    }\n\n    data.hide = true;\n    data.attributes['x-out-of-boundaries'] = '';\n  } else {\n    // Avoid unnecessary DOM access if visibility hasn't changed\n    if (data.hide === false) {\n      return data;\n    }\n\n    data.hide = false;\n    data.attributes['x-out-of-boundaries'] = false;\n  }\n\n  return data;\n}\n","import setStyles from '../utils/setStyles';\nimport setAttributes from '../utils/setAttributes';\nimport getReferenceOffsets from '../utils/getReferenceOffsets';\nimport computeAutoPlacement from '../utils/computeAutoPlacement';\n\n/**\n * @function\n * @memberof Modifiers\n * @argument {Object} data - The data object generated by `update` method\n * @argument {Object} data.styles - List of style properties - values to apply to popper element\n * @argument {Object} data.attributes - List of attribute properties - values to apply to popper element\n * @argument {Object} options - Modifiers configuration and options\n * @returns {Object} The same data object\n */\nexport default function applyStyle(data) {\n  // any property present in `data.styles` will be applied to the popper,\n  // in this way we can make the 3rd party modifiers add custom styles to it\n  // Be aware, modifiers could override the properties defined in the previous\n  // lines of this modifier!\n  setStyles(data.instance.popper, data.styles);\n\n  // any property present in `data.attributes` will be applied to the popper,\n  // they will be set as HTML attributes of the element\n  setAttributes(data.instance.popper, data.attributes);\n\n  // if arrowElement is defined and arrowStyles has some properties\n  if (data.arrowElement && Object.keys(data.arrowStyles).length) {\n    setStyles(data.arrowElement, data.arrowStyles);\n  }\n\n  return data;\n}\n\n/**\n * Set the x-placement attribute before everything else because it could be used\n * to add margins to the popper margins needs to be calculated to get the\n * correct popper offsets.\n * @method\n * @memberof Popper.modifiers\n * @param {HTMLElement} reference - The reference element used to position the popper\n * @param {HTMLElement} popper - The HTML element used as popper\n * @param {Object} options - Popper.js options\n */\nexport function applyStyleOnLoad(\n  reference,\n  popper,\n  options,\n  modifierOptions,\n  state\n) {\n  // compute reference element offsets\n  const referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);\n\n  // compute auto placement, store placement inside the data object,\n  // modifiers will be able to edit `placement` if needed\n  // and refer to originalPlacement to know the original value\n  const placement = computeAutoPlacement(\n    options.placement,\n    referenceOffsets,\n    popper,\n    reference,\n    options.modifiers.flip.boundariesElement,\n    options.modifiers.flip.padding\n  );\n\n  popper.setAttribute('x-placement', placement);\n\n  // Apply `position` to popper before anything else because\n  // without the position applied we can't guarantee correct computations\n  setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });\n\n  return options;\n}\n"],"names":["functionToCheck","getType","toString","call","element","nodeType","css","getComputedStyle","property","nodeName","parentNode","host","document","body","ownerDocument","getStyleComputedProperty","overflow","overflowX","overflowY","test","getScrollParent","getParentNode","documentElement","noOffsetParent","isIE","offsetParent","nextElementSibling","indexOf","getOffsetParent","firstElementChild","node","getRoot","element1","element2","order","compareDocumentPosition","Node","DOCUMENT_POSITION_FOLLOWING","start","end","range","createRange","setStart","setEnd","commonAncestorContainer","contains","isOffsetContainer","element1root","findCommonOffsetParent","side","upperSide","html","scrollingElement","subtract","scrollTop","getScroll","scrollLeft","modifier","top","bottom","left","right","sideA","axis","sideB","parseFloat","styles","Math","computedStyle","getSize","offsets","width","height","rect","getBoundingClientRect","result","sizes","getWindowSizes","clientWidth","clientHeight","horizScrollbar","offsetWidth","vertScrollbar","offsetHeight","getBordersSize","getClientRect","fixedPosition","isIE10","runIsIE","isHTML","parent","childrenRect","parentRect","scrollParent","borderTopWidth","borderLeftWidth","marginTop","marginLeft","includeScroll","excludeScroll","relativeOffset","getOffsetRectRelativeToArbitraryNode","window","innerWidth","innerHeight","offset","isFixed","parentElement","el","boundaries","getFixedPositionOffsetParent","boundariesElement","getViewportOffsetRectRelativeToArtbitraryNode","boundariesNode","popper","padding","placement","getBoundaries","rects","refRect","sortedAreas","Object","keys","map","getArea","sort","b","area","a","filteredAreas","filter","computedPlacement","length","key","variation","split","commonOffsetParent","x","marginBottom","y","marginRight","hash","replace","popperRect","getOuterSizes","popperOffsets","isHoriz","mainSide","secondarySide","measurement","secondaryMeasurement","referenceOffsets","getOppositePlacement","Array","prototype","find","arr","findIndex","cur","match","obj","modifiersToRun","ends","modifiers","slice","forEach","warn","fn","enabled","isFunction","data","reference","state","isDestroyed","getReferenceOffsets","options","positionFixed","computeAutoPlacement","flip","originalPlacement","getPopperOffsets","position","runModifiers","isCreated","onUpdate","onCreate","some","name","prefixes","upperProp","charAt","toUpperCase","i","prefix","toCheck","style","isModifierEnabled","removeAttribute","willChange","getSupportedPropertyName","disableEventListeners","removeOnDestroy","removeChild","defaultView","isBody","target","addEventListener","passive","push","updateBound","scrollElement","scrollParents","eventsEnabled","setupEventListeners","scheduleUpdate","removeEventListener","removeEventListeners","n","isNaN","isFinite","unit","isNumeric","value","attributes","setAttribute","requesting","isRequired","requested","counter","index","validPlacements","concat","reverse","str","size","useHeight","fragments","frag","trim","divider","search","splitRegex","ops","mergeWithPrevious","op","reduce","toValue","index2","basePlacement","parseOffset","min","floor","max","isBrowser","longerTimeoutBrowsers","timeoutDuration","navigator","userAgent","supportsMicroTasks","Promise","called","resolve","then","scheduled","cache","version","hasOwnProperty","appVersion","all","placements","BEHAVIORS","Popper","requestAnimationFrame","update","debounce","bind","Defaults","jquery","modifierOptions","onLoad","enableEventListeners","destroy","Utils","global","PopperUtils","shiftvariation","isVertical","shiftOffsets","instance","priority","check","escapeWithReference","opSide","isModifierRequired","arrowElement","querySelector","len","sideCapitalized","toLowerCase","altSide","arrowElementSize","center","popperMarginSide","popperBorderSide","sideValue","arrow","round","flipped","placementOpposite","flipOrder","behavior","FLIP","CLOCKWISE","clockwise","COUNTERCLOCKWISE","refOffsets","overlapsRef","overflowsLeft","overflowsRight","overflowsTop","overflowsBottom","overflowsBoundaries","flippedVariation","flipVariations","getOppositeVariation","subtractLength","bound","hide","legacyGpuAccelerationOption","gpuAcceleration","offsetParentRect","prefixedProperty","invertTop","invertLeft","arrowStyles"],"mappings":"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"}
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index 8a5c690bc..dae1c0bd8 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -2,6 +2,7 @@
 layout: overview
 title: Examples
 item: examples
+permalink: /lb3/examples
 ---
       <main class="c-content">
         <section class="c-section">
diff --git a/favicon.ico b/favicon.ico
index f53f76f7f..a3b956f33 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/getting-started-oasgraph.html b/getting-started-oasgraph.html
new file mode 100644
index 000000000..c8a97c628
--- /dev/null
+++ b/getting-started-oasgraph.html
@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <!-- not working -->
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+    <title>LoopBack 4</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
+    <link href="css/loopback.css" rel="stylesheet">
+    <link href="css/getting-started.css" rel="stylesheet">
+    <link href="css/oasgraph.css" rel="stylesheet">
+
+    <!-- Site Analytics -->
+    <script type="text/javascript">
+        /* Define digital data object based on _appInfo object */
+        window.digitalData = {
+            page: {
+                category: {
+                    primaryCategory: 'IBM_Cloud_GlobalMarketing',
+                },
+                pageInfo: {
+                    ibm: {
+                        siteID: 'Cloud',
+                    }
+                },
+            }
+        };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ida_stats.js" type="text/javascript"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <a class="navbar-brand" href="index.html">
+            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="getting-started.html">Getting Started</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contribute.html">Contribute</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="resources.html">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="oasgraph.html">GraphQL</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank">Test Your APIs</a>
+                </li>
+            </ul>
+
+        </div>
+    </nav>
+    <!-- Header -->
+    <div class="oasgraph-masthead">
+        <h2>Ready to translate REST to GraphQL?</h2>
+        <br/>
+        <h5 style="font-weight: normal">Let's get you equipped.</h5>
+    </div>
+
+
+    <section class="odd-section">
+      <div class="container">
+        <div class="row text-center">
+          <div class="col-md-12">
+            <button class="steptag text-uppercase">Step 1</button>
+          </div>
+          <div class="col-md-6">
+            <h3 class="feature-heading">Have you installed Node.js?</h3>
+            <p class="p large step">Before you install OASGraph, make sure to download and install Node.js (version 8.9.x or higher), a JavaScript runtime.</p>
+          </div>
+          <div class="col-md-6">
+            <div class="col-md-6">
+              <a class="btn btn-secondary" style="padding-left:60px; padding-right:60px; top: 20%" role="button" href="https://nodejs.org/en/download/" target="_blank">Install Node.js</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="hairline">
+
+    <section id="step2" class="even-section">
+      <div class="container">
+        <div class="row text-center">
+          <div class="col-md-12">
+            <button class="steptag text-uppercase">Step 2</button>
+          </div>
+          <div class="col-md-6">
+            <h3 class="feature-heading">Install OASGraph</h3>
+            <p class="p large step">OASGraph can be used either as a library, or via its Command Line Interface (CLI) to quickly get started. To install the OASGraph CLI, simply run the indicated command.</p>
+          </div>
+          <div class="col-md-6">
+            <pre class="code-snippet">
+<code-blue>$</code-blue> npm i -g oasgraph-cli
+            </pre>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="hairline">
+
+    <section id="step3" class="odd-section">
+      <div class="container">
+        <div class="row text-center">
+          <div class="col-md-12">
+            <button class="steptag text-uppercase">Step 3</button>
+          </div>
+          <div class="col-md-12">
+            <h3 class="feature-heading">Save OAS</h3>
+            <p class="p large step">OASGraph relies on the OpenAPI Specification (OAS) of an existing API to create a GraphQL interface around that API.</p>
+          </div>
+          <div class="col-md-6" style="padding-top: 30px;">
+            <p class="p large step">If you use LoopBack, start your API server in the LoopBack project folder, and access the API's OAS at <a class="link" href="http://127.0.0.1:3000/openapi.json">http://127.0.0.1:3000/openapi.json</a>. Save the OAS to disk.</p>
+          </div>
+          <div class="col-md-6">
+            <pre class="code-snippet">
+<span class="text-secondary"># in the LoopBack project folder:</span>
+<code-blue>$</code-blue> npm start
+            </pre>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <hr class="hairline"/>
+        <div class="row text-center">
+          <div class="col-md-12">
+            <p class="p large step">If you want to generate a GraphQL interface for another API, make sure that API is running and save its OAS.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="hairline">
+
+    <section id="step4" class="even-section">
+      <div class="container">
+        <div class="row text-center">
+          <div class="col-md-12">
+            <button class="steptag text-uppercase">Step 4</button>
+          </div>
+          <div class="col-md-6">
+            <h3 class="feature-heading">Start GraphQL server</h3>
+            <p class="p large step">Once OASGraph is installed and the OAS is obtained, you can create and start the GraphQL server from the folder in which OASGraph is installed. The created GraphQL server is then accessible at <a class="link" href="http://127.0.0.1:3001/graphql">http://127.0.0.1:3001/graphql</a>.</p>
+          </div>
+          <div class="col-md-6">
+            <pre class="code-snippet">
+<span class="text-secondary"># in the OASGraph folder:</span>
+<code-blue>$</code-blue> oasgraph [path to saved OAS]
+            </pre>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- footer -->
+    <footer>
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <img src="images/global/loopback-mark-frame-white.svg" width=40px/>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Product</p>
+                    <p class="regular">
+                        <a href="getting-started.html">Getting Started</a>
+                    </p>
+                    <p class="regular">
+                        <a href="doc/en/lb4/Tutorials.html">Tutorials</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase" >Documentation</p>
+                    <p class="regular">
+                        <a href="/doc">Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="resources.html">Resources</a>
+                    </p>
+                    <p class="regular">
+                        <a href="contribute.html">Contribute</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Support</p>
+                    <p class="regular">
+                        <a href="/doc/en/lb4">LoopBack 4 Documentation</a>
+                    </p>
+                    <p class="regular">
+                        <a href="http://apidocs.loopback.io/@loopback%2fdocs/apidocs.html" target="_blank">API Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="https://strongloop.com/strongblog/" target="_blank">StrongLoop Blog</a>
+                    </p> 
+                    <p class="regular">
+                        <a href="https://www.ibm.com/marketplace/api-management" target="_blank">API Connect</a>
+                    </p>
+                </div>
+            </div>
+            <hr class="hairline-footer">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="regular"> &copy; Copyright 2018-2019 StrongLoop, an IBM company</p>
+                </div>
+                <div class="col-md-6">
+                    <p style="float:right">
+                        <a class="twitter-share-button"
+                            href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io">
+                          Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
+                        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+    <!-- GitHub button -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+
+</body>
diff --git a/getting-started.html b/getting-started.html
new file mode 100644
index 000000000..3819c6338
--- /dev/null
+++ b/getting-started.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <!-- not working -->
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+    <title>LoopBack 4</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
+    <link href="css/loopback.css" rel="stylesheet">
+    <link href="css/getting-started.css" rel="stylesheet">
+
+    <!-- Site Analytics -->
+    <script type="text/javascript">
+        /* Define digital data object based on _appInfo object */
+        window.digitalData = {
+            page: {
+                category: {
+                    primaryCategory: 'IBM_Cloud_GlobalMarketing',
+                },
+                pageInfo: {
+                    ibm: {
+                        siteID: 'Cloud',
+                    }
+                },
+            }
+        };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ida_stats.js" type="text/javascript"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <a class="navbar-brand" href="index.html">
+            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link highlighted" href="getting-started.html">Getting Started</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contribute.html">Contribute</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="resources.html">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="oasgraph.html">GraphQL</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank">Test Your APIs</a>
+                </li>
+            </ul>
+
+        </div>
+    </nav>
+    <!-- Header -->
+    <div class="gs-masthead">
+        <div class="container-fluid"></div>
+        <div class="header-space"></div>
+        <h2>Ready to build with LoopBack?</h2>
+        <br>
+        <h5 style="font-weight: normal">Let's get you equipped.</h5>
+        <div class="header-space"></div>
+    </div>
+
+    <!-- Getting Started Steps section -->
+    <section class="odd-section">
+        <!-- Install Node subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <button class="steptag text-uppercase">Step 1</button>
+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Have you installed Node.js?</h3>
+                    <p class="p large step">Before you install LoopBack, make sure to download and install Node.js (version 8.9.x or higher), a JavaScript
+                        runtime. </p>
+                </div>
+                <div class="col-md-6">
+                    <a class="btn btn-secondary" style="padding-left:60px; padding-right:60px; top: 20%" role="button" href="https://nodejs.org/en/download/" target="_blank">Install Node.js</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+
+    <section id="step2" class="even-section">
+        <!-- Install LB4 CLI subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <button class="steptag text-uppercase">Step 2</button>
+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Install LoopBack 4 CLI</h3>
+                    <p class="p large step">The LoopBack 4 CLI is a command-line interface that can scaffold a project or extension. The CLI provides
+                        the fastest way to get started with a LoopBack 4 project that adheres to best practices.
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <pre class="code-snippet">
+<code-blue>$</code-blue> npm install -g @loopback/cli
+                    </pre>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+    <section id="step3" class="odd-section">
+        <!-- create new project subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <button class="steptag text-uppercase">Step 3</button>
+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Create a new project</h3>
+                    <p class="p large step">To create a new project, run the CLI as follows.
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <pre class="code-snippet">
+<code-blue>$</code-blue> lb4 app
+                    </pre>
+                </div>
+            </div>
+        </div>
+
+
+
+        <!-- answer the prompt subsection -->
+        <div class="container">
+            <hr class="hairline">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="p large" style="position:relative; top:60%">Answer the prompts as follows.
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <pre class="code-snippet">
+<code-blue>[?]</code-blue> Project name: getting-started
+<code-blue>[?]</code-blue> Project description: Getting started tutorial
+<code-blue>[?]</code-blue> Project root directory: (getting-started)
+<code-blue>[?]</code-blue> Application class name: StarterApplication
+<code-blue>[?]</code-blue> Select project build settings: Enable tslint, Enable prettier, Enable mocha, Enable loopbackBuild
+                    </pre>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+    <section id="step4" class="even-section">
+        <!-- Starting the project-->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <button class="steptag text-uppercase">Step 4</button>
+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Starting the project</h3>
+                    <p class="p large step">The project comes with a "ping" route to test the project. Let's try it out by running the projects.
+                    </p>
+                    <p class="p large">In a browser, visit
+                        <a class="link" href="http://127.0.0.1:3000/ping">http://127.0.0.1:3000/ping</a>
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <pre class="code-snippet">
+<code-blue>$</code-blue> cd getting-started
+<code-blue>$</code-blue> npm start
+                    </pre>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+    <section id="step5" class="odd-section">
+        <!-- add controller subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <button class="steptag text-uppercase">Step 5</button>
+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Add your own controller</h3>
+                    <p class="p large step">Now that we have a basic project created, it’s time to add our own controller. Let’s add a simple “Hello
+                        World” controller as follows.
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <pre class="code-snippet" style="top:10%">
+<code-blue> $</code-blue> lb4 controller
+<code-blue>[?]</code-blue> Controller class name: hello
+<code-blue>[?]</code-blue> What kind of controller would you like to generate? Empty Controller
+    create src/controllers/hello.controller.ts
+    update src/controllers/index.ts
+Controller Hello was now created in src/controllers/
+                    </pre>
+                </div>
+            </div>
+        </div>
+
+        <!-- Edit controller subsection -->
+        <div class="container">
+            <hr class="hairline">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="p large" style="position:relative;top:55%">Paste the following contents into the file <code>/src/controllers/hello.controller.ts</code>.
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    <pre class="code-snippet">
+<code-blue>import</code-blue> {<code-blue>get</code-blue>} <code-blue>from</code-blue> '@loopback/rest';
+<code-blue>export class </code-blue>HelloController {
+  @get('/hello')
+  hello(): string {
+    <code-blue>return</code-blue> 'Hello world!';
+  }
+}
+                    </pre>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+    <section id="step6" class="even-section">
+        <!-- Test your application -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-12">
+                    <button class="steptag text-uppercase">Step 6</button>
+                </div>
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Test your application</h3>
+                    <p class="p large step">Start the application using <code>npm start</code>.
+                    </p>
+                </div>
+                <div class="col-md-6">
+                    Visit <a class="link" href="http://127.0.0.1:3000/hello" target="_blank">http://127.0.0.1:3000/hello</a> to see <code>Hello world!</code>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="action">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-8">
+                    <h3 style="color:white">Ready to continue your journey?
+                        <p class="p large">Follow the tutorial to create a real-world application with LoopBack 4.</h3>
+                </div>
+                <div class="col-md-4">
+                    <a class="btn btn-primary" role="button" style="padding-left:60px; padding-right:60px" href="/doc/en/lb4/todo-tutorial.html">View Tutorial</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- footer -->
+    <footer>
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <img src="images/global/loopback-mark-frame-white.svg" width=40px/>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Product</p>
+                    <p class="regular">
+                        <a href="getting-started.html">Getting Started</a>
+                    </p>
+                    <p class="regular">
+                        <a href="doc/en/lb4/Tutorials.html">Tutorials</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase" >Documentation</p>
+                    <p class="regular">
+                        <a href="/doc">Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="resources.html">Resources</a>
+                    </p>
+                    <p class="regular">
+                        <a href="contribute.html">Contribute</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Support</p>
+                    <p class="regular">
+                        <a href="/doc/en/lb4">LoopBack 4 Documentation</a>
+                    </p>
+                    <p class="regular">
+                        <a href="http://apidocs.loopback.io/@loopback%2fdocs/apidocs.html" target="_blank">API Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="https://strongloop.com/strongblog/" target="_blank">StrongLoop Blog</a>
+                    </p> 
+                    <p class="regular">
+                        <a href="https://www.ibm.com/marketplace/api-management" target="_blank">API Connect</a>
+                    </p>
+                </div>
+            </div>
+            <hr class="hairline-footer">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="regular"> &copy; Copyright 2018-2019 StrongLoop, an IBM company</p>
+                </div>
+                <div class="col-md-6">
+                    <p style="float:right">
+                        <a class="twitter-share-button"
+                            href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io">
+                          Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
+                        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+    <!-- GitHub button -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+
+</body>
diff --git a/getting-started/index.html b/getting-started/index.html
index 93161e507..53d98827d 100644
--- a/getting-started/index.html
+++ b/getting-started/index.html
@@ -2,6 +2,7 @@
 layout: overview
 title: Getting Started
 item: getting-started
+permalink: /lb3/getting-started
 ---
       <main class="c-content">
         <section class="c-section">
diff --git a/index-lb3.html b/index-lb3.html
new file mode 100644
index 000000000..4fc99e94c
--- /dev/null
+++ b/index-lb3.html
@@ -0,0 +1,202 @@
+---
+layout: overview
+title: Node.js framework
+item: index
+permalink: /lb3
+---
+  <!-- <body class="l-page-index -index js-body"> -->
+  <!-- Google Tag Manager -->
+    <!-- top.html include ends here -->
+
+<main class="c-content">
+  <section class="c-section">
+    <div class="c-container -padded">
+
+      <div class="c-grid" >
+        <div class="_col -col-2-3">
+          <p style="font-weight: bold; font-size: 110%; margin-bottom: 10px;">LoopBack is a highly-extensible, open-source Node.js framework</p>
+        </div>
+        <div class="_col -col-1-3" >
+          <a href="/resources#compare" class="c-button" style="float:right; ">Compare&nbsp;frameworks</a>
+        </div>
+      </div>
+
+      <div class="c-grid">
+        <div class="_col -col-1-6"></div>
+        <div class="_col -col-2-3"><p style="font-style: italic; padding: 10px; margin: 40px 10px 20px 10px; border: 1px solid #d6d6d6; border-radius: 3px; background-color: #404040;"><b><a href="http://loopback.io">LoopBack 4</a></b>, the next step in the evolution of LoopBack!
+        <br/>A completely redesigned modular framework especially for API developers.</p>
+        </div>
+        <div class="_col -col-1-6"></div>
+      </div>
+
+      <div class="c-grid">
+        <div class="_col -col-3-4">
+          <p>Building on LoopBack's success as an open-source Node.js framework,
+          <a href="https://developer.ibm.com/apiconnect">IBM API Connect</a> provides a graphical tool with many of the API composition features of StrongLoop Arc, a built-in API Micro Gateway,
+          and a CLI with API management and gateway features.</p>
+
+          <p><b>API Connect Essentials</b> is free to use!  For more information, see <a href="https://developer.ibm.com/apiconnect/getting-started/">API Connect - Getting Started</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+<section class="c-section">
+  <div class="c-container">
+    <div class="c-grid" >
+      <div class="_col -col-1-2">
+        <h2 class="c-heading -h3"> About</h2>
+        <br/>
+      </div>
+    </div>
+    <div class="c-grid">
+      <div class="_col -col-2-3">
+        <ul class="fa-ul">
+          <li><i class="fa-li fa fa-check"></i> <a href="#core">Quickly create dynamic end-to-end REST APIs</a>.</li>
+          <li><i class="fa-li fa fa-check"></i> <a href="#juggler">Connect devices and browsers</a> to data and services.</li>
+          <li><i class="fa-li fa fa-check"></i> Use <a href="#sdks">Android, iOS, and AngularJS SDKs</a> to easily create client apps.</li>
+          <li><i class="fa-li fa fa-check"></i> <a href="#components">Add-on components</a> for file management, 3rd-party login, and OAuth2.</li>
+          <li><i class="fa-li fa fa-check"></i> Runs on-premises or in the cloud</li>
+        </ul>
+        <br/>
+      </div>
+      <div class="_col -col-1-3 x-flex-e"><img src="/images/overview/comb.svg" class="c-fleximg -pull-down -last"/></div>
+
+    </div>
+  </div>
+</section>
+
+        <section class="c-section  x-greylight">
+          <div class="c-container -padded">
+            <h2 class="c-heading -h3">Check out who's using LoopBack!</h2>
+            <div class="c-grid -end-v">
+              <div class="_col -col-3-4">
+                <a href="/users"></a>
+              </div>
+              <div class="_col -col-1-4">
+                <a href="/resources#users" class="c-button -lg">View More</a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="c-section">
+          <a name="core"></a>
+          <div class="c-container -padded">
+            <h2 class="c-heading -h3">Core</h2>
+            <div class="c-grid">
+              <div class="_col -col-1-2">
+                <h3 class="c-heading -h5">Set up models and create REST APIs in minutes</h3>
+                <ul>
+                  <li>Easy-to-use CLI wizard</li>
+                  <li>Create models based on your schema if you have one</li>
+                  <li>Create dynamic models if you don't</li>
+                  <li>Built-in API Explorer</li>
+                </ul>
+                <h3 class="c-heading -h5">Model relation support</h3>
+                <ul>
+                  <li>Define hasMany, belongsTo, hasAndBelongsToMany relationships</li>
+                  <li>Automatically generates corresponding relational REST endpoints</li>
+                </ul>
+              </div>
+              <div class="_col -col-1-2">
+                <h3 class="c-heading -h5">Easy authentication and authorization setup</h3>
+                <ul>
+                  <li>Built-in role-based access controls</li>
+                  <li>oAuth user and registration models baked in</li>
+                  <li>Add custom policies using CLI or JSON</li>
+                  <li>Browser support (JSONP and CORS)</li>
+                </ul>
+                <h3 class="c-heading -h5">MIT Open-Source license</h3>
+              </div>
+              <br/><a name="flow-diagram"></a>
+              <div class="_col -col-1-1" style="margin-top: 10px;">
+                <img src="/images/overview/loopback-flow.png" class="x-img-span border-img"/>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="c-section  x-greylight">
+          <a name="juggler"></a>
+          <div class="c-container -padded">
+            <h2 class="c-heading -h3">Juggler</h2>
+            <div class="c-grid">
+              <div class="_col -col-1-2">
+                <h3 class="c-heading -h5">Connect to backend data stores</h3>
+                <ul>
+                  <li>MySQL, Oracle, MongoDB, Postgres and others</li>
+                  <li>Other REST services</li>
+                  <li>Discovery APIs for Oracle, MySQL, PostgreSQL and SQL Server</li>
+                </ul>
+              </div>
+              <div class="_col -col-1-2">
+                <h3 class="c-heading -h5">Run Ad-hoc queries</h3>
+                <ul>
+                  <li>Run dynamic queries on devices, browsers and the server</li>
+                  <li>Support for NoSQL-style queries against relational databases</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="c-section">
+          <a name="sdks"></a>
+          <div class="c-container -padded">
+            <div class="c-grid">
+              <div class="_col -col-1-2 x-flex-e x-flex-order-2"><img src="/images/overview/sdk.svg" class="c-fleximg -pull-down"/></div>
+              <div class="_col -col-1-2 x-flex-order-1">
+                <h2 class="c-heading -h3">Client SDKs</h2>
+                <h3 class="c-heading -h5">Native Mobile and Browser SDKs</h3>
+                <ul>
+                  <li>Easily persist data with a database API on the client</li>
+                  <li>Android / Java</li>
+                  <li>iOS</li>
+                  <li>Browser JavaScript (Angular)</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="c-section x-greylight">
+          <a name="components"></a>
+          <div class="c-container -padded">
+            <h2 class="c-heading -h3">Add-on components</h2>
+            <div class="c-grid">
+              <div class="_col -col-1-2">
+                <h3 class="c-heading -h5">Third-party login</h3>
+                <ul>
+                  <li>Use-third party login providers like Facebook, Google, GitHub, etc.</li>
+                  <li>Map inbound and outbound credentials to users</li>
+                </ul>
+              </div>
+              <div class="_col -col-1-2">
+                <h3 class="c-heading -h5">Storage service</h3>
+                <ul>
+                  <li>Integrate with cloud storage providers</li>
+                  <li>Organize data in containers and files</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="c-section">
+          <div class="c-container -padded">
+            <h2 class="c-heading -h3">More information</h2>
+            <div class="c-grid">
+              <div class="_col -col-1-2">
+                <ul>
+                  <li><a href="doc">LoopBack Documentation</a></li>
+                  <li><a href="http://apidocs.strongloop.com/loopback/">API docs</a></li>
+                  <li><a href="https://strongloop.com/strongblog/tag_LoopBack.html">StrongLoop blog</a></li>
+                  <li><a href="https://developer.ibm.com/apiconnect/">API Connect</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
\ No newline at end of file
diff --git a/index.html b/index.html
index 17e9d4485..9bd312887 100644
--- a/index.html
+++ b/index.html
@@ -1,201 +1,286 @@
----
-layout: overview
-title: Node.js framework
-item: index
----
-  <!-- <body class="l-page-index -index js-body"> -->
-  <!-- Google Tag Manager -->
-    <!-- top.html include ends here -->
-
-<main class="c-content">
-  <section class="c-section">
-    <div class="c-container -padded">
-
-      <div class="c-grid" >
-        <div class="_col -col-2-3">
-          <p style="font-weight: bold; font-size: 110%; margin-bottom: 10px;">LoopBack is a highly-extensible, open-source Node.js framework</p>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+    <title>LoopBack</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
+    <link href="css/loopback.css" rel="stylesheet">
+
+    <!-- Site Analytics -->
+    <script type="text/javascript">
+        /* Define digital data object based on _appInfo object */
+        window.digitalData = {
+            page: {
+                category: {
+                    primaryCategory: 'IBM_Cloud_GlobalMarketing',
+                },
+                pageInfo: {
+                    ibm: {
+                        siteID: 'Cloud',
+                    }
+                },
+            }
+        };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ida_stats.js" type="text/javascript"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <a class="navbar-brand" href="#">
+            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="getting-started.html">Getting Started</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contribute.html">Contribute</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="resources.html">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="oasgraph.html">GraphQL</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank">Test Your APIs</a>
+                </li>
+            </ul>
+
         </div>
-        <div class="_col -col-1-3" >
-          <a href="/resources#compare" class="c-button" style="float:right; ">Compare&nbsp;frameworks</a>
+    </nav>
+    
+    <!-- Header -->
+    <div class="masthead">
+        <div class="container-fluid"></div>
+        <br>
+        <br>
+        <h1>LoopBack 4: Build Amazing APIs</h1>
+        <h5>LoopBack 4 is the next step in the evolution of LoopBack.</h5>
+        <img class="main-logo" src="images/global/loopback-mark-frame-white.svg"></img>
+        <br>
+        <br>
+        <div class="row text-center">
+            <div class="col-md-4">
+            </div>
+            <div class="col-md-4">
+                
+                <div class="btn btn-main" role="button" href="getting-started.html">
+                    <a class="main-btn-link" href="index.html"><h5>
+                        <p class="main-btn-text">LoopBack 4</p>
+                        <p class="main-btn-text2">(Active)</p>
+                    </h5></a>
+                    <a class="github-button" href="/strongloop/loopback-next" data-icon="octicon-star" data-show-count="true"
+                        aria-label="Star strongloop/loopback-next on GitHub">Star</a>
+                </div>
+                <div class="btn btn-main" role="button">
+                    <a class="main-btn-link" href="/lb3"><h5>
+                        <p class="main-btn-text">LoopBack 3</p>
+                        <p class="main-btn-text2">(LTS)</p>    
+                    </h5></a>
+                    <a class="github-button" href="/strongloop/loopback" data-icon="octicon-star" data-show-count="true"
+                        aria-label="Star strongloop/loopback on GitHub">Star</a>
+                </div>
+            </div>
+            <div class="col-md-4">
+            </div>
         </div>
-      </div>
+        
+    </div>
 
-      <div class="c-grid">
-        <div class="_col -col-1-6"></div>
-        <div class="_col -col-2-3"><p style="font-style: italic; padding: 10px; margin: 40px 10px 20px 10px; border: 1px solid #d6d6d6; border-radius: 3px; background-color: #404040;"><b><a href="http://v4.loopback.io">LoopBack 4</a></b>, the next step in the evolution of LoopBack!
-        <br/>A completely redesigned modular framework especially for API developers.</p>
+    <!-- Feature section -->
+    <section id="features">
+        <!-- new core subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <h3 class="feature-heading">A Brand New Core</h3>
+                    <p class="p large">A brand new LoopBack core to deliver great extensibility and flexibility written in TypeScript/ES2017.</p>
+                </div>
+                <div class="col-md-6">
+                    <img src="images/homepage/core-illustration-2x.png" />
+                </div>
+            </div>
+        </div>
+        <!-- Open API subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <img src="images/homepage/openAPI-illustration-2x.png" />
+                </div>
+                <div class="col-md-6" style="align-content: right">
+                    <h3 class="feature-heading">OpenAPI Spec Driven REST API</h3>
+                    <p class="p large">Create powerful APIs easily with a new creation experience for defining REST API's and handling API requests/responses.
+                    </p>
+                </div>
+            </div>
         </div>
-        <div class="_col -col-1-6"></div>
-      </div>
-
-      <div class="c-grid">
-        <div class="_col -col-3-4">
-          <p>Building on LoopBack's success as an open-source Node.js framework,
-          <a href="https://developer.ibm.com/apiconnect">IBM API Connect</a> provides a graphical tool with many of the API composition features of StrongLoop Arc, a built-in API Micro Gateway,
-          and a CLI with API management and gateway features.</p>
 
-          <p><b>API Connect Essentials</b> is free to use!  For more information, see <a href="https://developer.ibm.com/apiconnect/getting-started/">API Connect - Getting Started</a>.
-          </p>
+        <!-- Extensibility subsection-->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <h3 class="feature-heading">Unbelievably Extensible</h4>
+                        <p class="p large">A new, improved programming model with Dependency Injection and new concepts such as Components,
+                            Mixins, Repositories, etc. make this the most extensible version yet.
+                        </p>
+                </div>
+                <div class="col-md-6">
+                    <img src="images/homepage/extensibile-illustration-2x.png" />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </section>
-
-<section class="c-section">
-  <div class="c-container">
-    <div class="c-grid" >
-      <div class="_col -col-1-2">
-        <h2 class="c-heading -h3"> About</h2>
-        <br/>
-      </div>
-    </div>
-    <div class="c-grid">
-      <div class="_col -col-2-3">
-        <ul class="fa-ul">
-          <li><i class="fa-li fa fa-check"></i> <a href="#core">Quickly create dynamic end-to-end REST APIs</a>.</li>
-          <li><i class="fa-li fa fa-check"></i> <a href="#juggler">Connect devices and browsers</a> to data and services.</li>
-          <li><i class="fa-li fa fa-check"></i> Use <a href="#sdks">Android, iOS, and AngularJS SDKs</a> to easily create client apps.</li>
-          <li><i class="fa-li fa fa-check"></i> <a href="#components">Add-on components</a> for file management, 3rd-party login, and OAuth2.</li>
-          <li><i class="fa-li fa fa-check"></i> Runs on-premises or in the cloud</li>
-        </ul>
-        <br/>
-      </div>
-      <div class="_col -col-1-3 x-flex-e"><img src="/images/overview/comb.svg" class="c-fleximg -pull-down -last"/></div>
 
-    </div>
-  </div>
-</section>
-
-        <section class="c-section  x-greylight">
-          <div class="c-container -padded">
-            <h2 class="c-heading -h3">Check out who's using LoopBack!</h2>
-            <div class="c-grid -end-v">
-              <div class="_col -col-3-4">
-                <a href="/users"><img src="images/overview/logo-collage.jpg" alt="Customers" class="c-fleximg x-last"></a>
-              </div>
-              <div class="_col -col-1-4">
-                <a href="/resources#users" class="c-button -lg">View More</a>
-              </div>
+        <!-- OASGraph subsection -->
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <img src="images/homepage/conveyorbelt-2x.png" />
+                </div>
+                <div class="col-md-6" style="align-content: right">
+                    <h3 class="feature-heading">GraphQL Support</h3>
+                    <p class="p large">Using OASGraph, create a GraphQL interface for any REST API. <a href="oasgraph.html">Learn more...</a>
+                    </p>
+                </div>
             </div>
-          </div>
-        </section>
-
-        <section class="c-section">
-          <a name="core"></a>
-          <div class="c-container -padded">
-            <h2 class="c-heading -h3">Core</h2>
-            <div class="c-grid">
-              <div class="_col -col-1-2">
-                <h3 class="c-heading -h5">Set up models and create REST APIs in minutes</h3>
-                <ul>
-                  <li>Easy-to-use CLI wizard</li>
-                  <li>Create models based on your schema if you have one</li>
-                  <li>Create dynamic models if you don't</li>
-                  <li>Built-in API Explorer</li>
-                </ul>
-                <h3 class="c-heading -h5">Model relation support</h3>
-                <ul>
-                  <li>Define hasMany, belongsTo, hasAndBelongsToMany relationships</li>
-                  <li>Automatically generates corresponding relational REST endpoints</li>
-                </ul>
-              </div>
-              <div class="_col -col-1-2">
-                <h3 class="c-heading -h5">Easy authentication and authorization setup</h3>
-                <ul>
-                  <li>Built-in role-based access controls</li>
-                  <li>oAuth user and registration models baked in</li>
-                  <li>Add custom policies using CLI or JSON</li>
-                  <li>Browser support (JSONP and CORS)</li>
-                </ul>
-                <h3 class="c-heading -h5">MIT Open-Source license</h3>
-              </div>
-              <br/><a name="flow-diagram"></a>
-              <div class="_col -col-1-1" style="margin-top: 10px;">
-                <img src="/images/overview/loopback-flow.png" class="x-img-span border-img"/>
-              </div>
+        </div>
+    </section>
+
+    <!-- How can we help -->
+    <section id="how-can-we-help">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h3 class="section-heading">How Can We Help?</h3>
+                    <p>We've curated resources to help you get started faster with LoopBack 4.</p>
+                    <p style="height:36px"></p>
+                </div>
             </div>
-          </div>
-        </section>
-
-        <section class="c-section  x-greylight">
-          <a name="juggler"></a>
-          <div class="c-container -padded">
-            <h2 class="c-heading -h3">Juggler</h2>
-            <div class="c-grid">
-              <div class="_col -col-1-2">
-                <h3 class="c-heading -h5">Connect to backend data stores</h3>
-                <ul>
-                  <li>MySQL, Oracle, MongoDB, Postgres and others</li>
-                  <li>Other REST services</li>
-                  <li>Discovery APIs for Oracle, MySQL, PostgreSQL and SQL Server</li>
-                </ul>
-              </div>
-              <div class="_col -col-1-2">
-                <h3 class="c-heading -h5">Run Ad-hoc queries</h3>
-                <ul>
-                  <li>Run dynamic queries on devices, browsers and the server</li>
-                  <li>Support for NoSQL-style queries against relational databases</li>
-                </ul>
-              </div>
+            <div class="row text-center" style="justify-content: center">
+                <a class="col-lg-4 card" href="/doc">
+                    <h5 class="card-title">Documentation</h5>
+                    <p class="regular text-gray">Code with confidence by learning more about LoopBack 4 through our documentation.</p>
+                </a>
+                <a class="col-lg-4 card" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">
+                    <h5 class="card-title">Stay in the Loop</h5>
+                    <p class="regular text-gray">Check out our LoopBack 4 blog posts that feature the latest news and updates.</p>
+                </a>
+                <a class="col-lg-4 card" href="/strongloop/loopback-next" target="_blank">
+                    <h5 class="card-title">Contribute to the development</h5>
+                    <p class="regular text-gray">Shape the future of LoopBack 4 to be more meaningful for our API creation experience.</p>
+                </a>
             </div>
-          </div>
-        </section>
-
-        <section class="c-section">
-          <a name="sdks"></a>
-          <div class="c-container -padded">
-            <div class="c-grid">
-              <div class="_col -col-1-2 x-flex-e x-flex-order-2"><img src="/images/overview/sdk.svg" class="c-fleximg -pull-down"/></div>
-              <div class="_col -col-1-2 x-flex-order-1">
-                <h2 class="c-heading -h3">Client SDKs</h2>
-                <h3 class="c-heading -h5">Native Mobile and Browser SDKs</h3>
-                <ul>
-                  <li>Easily persist data with a database API on the client</li>
-                  <li>Android / Java</li>
-                  <li>iOS</li>
-                  <li>Browser JavaScript (Angular)</li>
-                </ul>
-              </div>
+        </div>
+    </section>
+
+    <!-- Action section -->
+    <div class="action">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-8">
+                    <h3 style="color:white">Ready to build amazing things?
+                        <br> Try LoopBack 4 now.</h3>
+                </div>
+                <div class="col-md-4">
+                    <a class="btn btn-primary" role="button" href="http://loopback.io/doc/en/lb4/Getting-started.html" target="_blank">Get Started With LoopBack 4</a>
+                </div>
             </div>
-          </div>
-        </section>
-
-        <section class="c-section x-greylight">
-          <a name="components"></a>
-          <div class="c-container -padded">
-            <h2 class="c-heading -h3">Add-on components</h2>
-            <div class="c-grid">
-              <div class="_col -col-1-2">
-                <h3 class="c-heading -h5">Third-party login</h3>
-                <ul>
-                  <li>Use-third party login providers like Facebook, Google, GitHub, etc.</li>
-                  <li>Map inbound and outbound credentials to users</li>
-                </ul>
-              </div>
-              <div class="_col -col-1-2">
-                <h3 class="c-heading -h5">Storage service</h3>
-                <ul>
-                  <li>Integrate with cloud storage providers</li>
-                  <li>Organize data in containers and files</li>
-                </ul>
-              </div>
+        </div>
+    </div>
+
+    <!-- footer -->
+    <footer>
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <img src="images/global/loopback-mark-frame-white.svg" width=40px/>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Product</p>
+                    <p class="regular">
+                        <a href="getting-started.html">Getting Started</a>
+                    </p>
+                    <p class="regular">
+                        <a href="doc/en/lb4/Tutorials.html">Tutorials</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase" >Documentation</p>
+                    <p class="regular">
+                        <a href="/doc">Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="resources.html">Resources</a>
+                    </p>
+                    <p class="regular">
+                        <a href="contribute.html">Contribute</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Support</p>
+                    <p class="regular">
+                        <a href="/doc/en/lb4">LoopBack 4 Documentation</a>
+                    </p>
+                    <p class="regular">
+                        <a href="http://apidocs.loopback.io/@loopback%2fdocs/apidocs.html" target="_blank">API Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="https://strongloop.com/strongblog/" target="_blank">StrongLoop Blog</a>
+                    </p> 
+                    <p class="regular">
+                        <a href="https://www.ibm.com/marketplace/api-management" target="_blank">API Connect</a>
+                    </p>
+                </div>
             </div>
-          </div>
-        </section>
-
-        <section class="c-section">
-          <div class="c-container -padded">
-            <h2 class="c-heading -h3">More information</h2>
-            <div class="c-grid">
-              <div class="_col -col-1-2">
-                <ul>
-                  <li><a href="doc">LoopBack Documentation</a></li>
-                  <li><a href="http://apidocs.strongloop.com/loopback/">API docs</a></li>
-                  <li><a href="https://strongloop.com/strongblog/tag_LoopBack.html">StrongLoop blog</a></li>
-                  <li><a href="https://developer.ibm.com/apiconnect/">API Connect</a></li>
-                </ul>
-              </div>
+            <hr class="hairline-footer">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="regular"> &copy; Copyright 2018-2019 StrongLoop, an IBM company</p>
+                </div>
+                <div class="col-md-6">
+                    <p style="float:right">
+                        <a class="twitter-share-button"
+                            href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io">
+                          Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
+                        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                    </p>
+                </div>
             </div>
-          </div>
-        </section>
-      </main>
+        </div>
+    </footer>
+
+    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+
+    <!-- GitHub button -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+
+
+</body>
+
+</html>
diff --git a/oasgraph.html b/oasgraph.html
new file mode 100644
index 000000000..e77b3dab3
--- /dev/null
+++ b/oasgraph.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <!-- not working -->
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+    <title>OASGraph</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
+    <link href="css/loopback.css" rel="stylesheet">
+    <link href="css/oasgraph.css" rel="stylesheet">
+
+    <!-- Site Analytics -->
+    <script type="text/javascript">
+        /* Define digital data object based on _appInfo object */
+        window.digitalData = {
+            page: {
+                category: {
+                    primaryCategory: 'IBM_Cloud_GlobalMarketing',
+                },
+                pageInfo: {
+                    ibm: {
+                        siteID: 'Cloud',
+                    }
+                },
+            }
+        };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ida_stats.js" type="text/javascript"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <a class="navbar-brand" href="index.html">
+            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="getting-started.html">Getting Started</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contribute.html">Contribute</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="resources.html">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link highlighted" href="oasgraph.html">GraphQL</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank">Test Your APIs</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Header -->
+    <div class="oasgraph-masthead">
+        <h1>OASGraph</h1>
+        <h5>Take any OpenAPI Specification (OAS) and create a GraphQL interface</h5>
+    </div>
+
+    <!-- How it works section -->
+    <section class="odd-section">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12">
+            <h3 class="text-center">How it works</h3>
+            <div class="embed-responsive embed-responsive-16by9">
+              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KXUTmM6y-LM" allowfullscreen></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="oasgraph-hr">
+
+    <!-- Powerful functionality section -->
+    <section class="even-section">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12">
+            <h3 class="text-center">Powerful functionality</h3>
+            <br/>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-12 col-lg-4 text-center">
+            <img class="feature-image" src="images/oasgraph/nested-data-2x.png" alt="Icon depcting nested data"/>
+            <h4>Nested data</h4>
+            <p>
+              Schemas and links defined in the OAS are used to compose data definitions. Furthermore, hierarchical path structures can be used to nest data via the <code>addSubOperation</code> option (<a href="/strongloop/oasgraph#options" target="_blank">learn more...</a>).
+            </p>
+          </div>
+          <div class="col-sm-12 col-lg-4 text-center">
+            <img class="feature-image" src="images/oasgraph/data-sanitization-2x.png" alt="Icon depicting data sanitation"/>
+            <h4>API Sanitation</h4>
+            <p>
+              GraphQL-incompatible identifiers of your API are sanitized. For example, API parameters or data definitions with unsupported characters (e.g., <code>-</code>, <code>.</code>, <code>,</code>, <code>:</code>, <code>;</code>...) are removed.
+            </p>
+          </div>
+          <div class="col-sm-12 col-lg-4 text-center">
+            <img class="feature-image" src="images/oasgraph/authentication-2x.png" alt="Icon depicting authentication"/>
+            <h4>Authentication</h4>
+            <p>
+              OASGraph provides <em>viewers</em> to support passing API keys or basic auth credentials. OAuth 2.0 integration can be handled by the hosting application (<a href="/strongloop/oasgraph#authentication" target="_blank">learn more...</a>).
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="oasgraph-hr">
+
+    <!-- Get started section -->
+    <section class="odd-section">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12 col-md-8">
+            <h3>Get started</h3>
+            <h5>Ready to translate from REST to GraphQL? Let's get you started!</h5>
+            <a class="btn btn-secondary" style="padding-left:60px; padding-right:60px; top: 20%" role="button" href="getting-started-oasgraph.html">View Guide</a>
+          </div>
+          <div class="col-sm-12 col-md-4">
+            <img class="get-started-image float-right" src="images/oasgraph-getting-started/rocketship-2x.png" alt="Icon showing a rocket and depicting getting started"/>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="oasgraph-hr">
+
+    <!-- How can we help -->
+    <section class="even-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h3 class="section-heading">How Can We Help?</h3>
+                    <p>We've curated resources to help you get started faster with OASGraph.</p>
+                    <p style="height:36px"></p>
+                </div>
+            </div>
+
+            <div class="row text-center" style="justify-content: center">
+              <div class="col-sm-12 col-md-6">
+                <a class="oasgraph-card" href="https://strongloop.com/strongblog/" target="_blank">
+                  <div class="row">
+                    <div class="col-sm-3">
+                      <img class="help-image" src="images/oasgraph/blog-posts-2x.png" alt="Icon depicting blog"/>
+                    </div>
+                    <div class="col-sm-9">
+                      <h5 class="card-title">Blog posts</h5>
+                      <p class="regular text-gray">Visit our blog for all developer-related articles, tips, and advice.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+
+              <div class="col-sm-12 col-md-6">
+                <a class="oasgraph-card" href="/strongloop/oasgraph" target="_blank">
+                  <div class="row">
+                    <div class="col-sm-3">
+                      <img class="help-image" src="images/oasgraph/git-repository-2x.png" alt="Icon depicting Git repository"/>
+                    </div>
+                    <div class="col-sm-9">
+                      <h5 class="card-title">Git repository</h5>
+                      <p class="regular text-gray">Learn from or contribute to our repository, complete with regularly updated documentation.</p>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- footer -->
+    <footer>
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <img src="images/global/loopback-mark-frame-white.svg" width=40px/>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Product</p>
+                    <p class="regular">
+                        <a href="getting-started.html">Getting Started</a>
+                    </p>
+                    <p class="regular">
+                        <a href="doc/en/lb4/Tutorials.html">Tutorials</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase" >Documentation</p>
+                    <p class="regular">
+                        <a href="/doc">Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="resources.html">Resources</a>
+                    </p>
+                    <p class="regular">
+                        <a href="contribute.html">Contribute</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Support</p>
+                    <p class="regular">
+                        <a href="/doc/en/lb4">LoopBack 4 Documentation</a>
+                    </p>
+                    <p class="regular">
+                        <a href="http://apidocs.loopback.io/@loopback%2fdocs/apidocs.html" target="_blank">API Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="https://strongloop.com/strongblog/" target="_blank">StrongLoop Blog</a>
+                    </p> 
+                    <p class="regular">
+                        <a href="https://www.ibm.com/marketplace/api-management" target="_blank">API Connect</a>
+                    </p>
+                </div>
+            </div>
+            <hr class="hairline-footer">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="regular"> &copy; Copyright 2018-2019 StrongLoop, an IBM company</p>
+                </div>
+                <div class="col-md-6">
+                    <p style="float:right">
+                        <a class="twitter-share-button"
+                            href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io">
+                          Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
+                        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+
+    <!-- GitHub button -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+
+
+</body>
+
+</html>
diff --git a/resources.html b/resources.html
new file mode 100644
index 000000000..74914b08b
--- /dev/null
+++ b/resources.html
@@ -0,0 +1,471 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <!-- not working -->
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+
+    <title>LoopBack 4</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
+    <link href="css/loopback.css" rel="stylesheet">
+    <link href="css/resources.css" rel="stylesheet">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <!-- Site Analytics -->
+    <script type="text/javascript">
+        /* Define digital data object based on _appInfo object */
+        window.digitalData = {
+            page: {
+                category: {
+                    primaryCategory: 'IBM_Cloud_GlobalMarketing',
+                },
+                pageInfo: {
+                    ibm: {
+                        siteID: 'Cloud',
+                    }
+                },
+            }
+        };
+    </script>
+    <script src="//1.www.s81c.com/common/stats/ida_stats.js" type="text/javascript"></script>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+        <a class="navbar-brand" href="index.html">
+            <img src="images/global/loopback-full-logo-blue.svg" width=150px>
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="getting-started.html">Getting Started</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/doc/en/lb4">Docs</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="contribute.html">Contribute</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link highlighted" href="resources.html">Resources</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="oasgraph.html">GraphQL</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">Blog</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://ibm.biz/apitest" target="_blank">Test Your APIs</a>
+                </li>
+            </ul>
+        </div>
+    </nav> 
+
+     <!-- Header -->
+     <div class="r-masthead">
+        <div class="container-fluid"></div>
+        <div class="header-space"></div>
+        <h2>We are here to help!</h2>
+        <br>
+        <h5 style="font-weight: normal">Here are some more goodies for your reference.</h5>
+        <div class="header-space"></div>
+    </div>
+
+    <!-- Developer resources section -->
+    <section class="even-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h3 class="section-heading" style="padding-top: 48px;">Developer resources</h3>
+                    <p>Learn how to get things done in LoopBack.</p>
+                    <p style="height:24px"></p>
+                </div>
+            </div>
+
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="/doc/en/lb4">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/resources/docs-icon-1x.png" alt="Documentation icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Explore the documentation</h5>
+                            <p class="regular text-gray">See the full documentation, regularly updated and improved detailed API reference documentation.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+    
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="/strongloop/loopback-next/issues" target="_blank">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/resources/issue-icon-1x.png" alt="Issues icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">View our GitHub issues</h5>
+                            <p class="regular text-gray">Contribute, report bugs, and propose features on our GitHub's issues page.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+            </div>
+
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="https://gitter.im/strongloop/loopback" target="_blank">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/resources/devchat-icon-1x.png" alt="Chat room icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Participate in Gitter chat room</h5>
+                            <p class="regular text-gray">See the LoopBack Gitter channel for realtime discussions with fellow LoopBack developers.</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+    
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="/strongloop/loopback-next/blob/master/docs/CONTRIBUTING.md" target="_blank">
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <img class="icon" src="images/resources/contribute-icon-1x.png" alt="Contribute icon"/>
+                        </div>
+                        <div class="col-sm-9">
+                            <h5 class="card-title">Contribute to LoopBack</h5>
+                            <p class="regular text-gray">We have a collection of awesome things regarding LoopBack. Check them out and contribute!</p>
+                        </div>
+                    </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+    
+    <!-- Tutorials section -->
+    <section class="odd-section">
+        <div class="container" style="padding-bottom: 48px;">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h3 class="section-heading" style="padding-top: 48px;">Learn from our tutorials</h3>
+                    <p>Complete end-to-end tutorials while also learning LoopBack 4 concepts.</p>
+                    <p style="height:24px"></p>
+                </div>
+            </div>
+
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="/doc/en/lb4/Extending-LoopBack-4.html" target="_blank">
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <img class="icon" src="images/resources/extension-icon-1x.png" alt="Extension Icon"/>
+                            </div>
+                            <div class="col-sm-9">
+                                <h5 class="card-title">Tutorial for Extension Developers</h5>
+                                <p class="regular text-gray">Create new extensions and contribute to new features for LoopBack 4.</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+
+                <div class="col-sm-12 col-md-6">
+                    <a class="card-2" href="/doc/en/lb4/Tutorials.html">
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <img class="icon" src="images/resources/application-icon-1x.png" alt="Application Icon"/>
+                            </div>
+                            <div class="col-sm-9">
+                                <h5 class="card-title">Tutorial for Application Developers</h5>
+                                <p class="regular text-gray">Create new applications using LoopBack 4 for all of your API needs.</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <hr class="hairline">
+
+     <!-- Blog posts section -->
+    <section class="odd-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h3 class="section-heading" style="padding-top: 48px;">Blog posts</h3>
+                    <p>The go-to place for all developer related information and tips.</p>
+                    <p style="height:24px"></p>
+                </div>
+            </div>
+
+            <!-- Getting the six most recent blog posts from website -->
+            <script>
+                jQuery.ajax({ 
+                    url: 'https://strongloop.com/blog-archives/', 
+                    success: function(data) { 
+                        const body = jQuery(data);
+                        const list = body.find('li').toArray();
+                        const links = body.find('a').toArray();
+
+                        for(var i = 1; i < 7; i++) {
+                            var post = 'post' + i.toString();
+                            var link = 'link' + i.toString();
+                            var date = 'date' + i.toString();
+
+                            document.getElementById(post).innerHTML = list[i + 8].innerText.slice(0, list[i + 8].innerText.lastIndexOf(" -"));
+                            document.getElementById(link).href = links[i + 9];
+                            document.getElementById(date).innerHTML = list[i + 8].innerText.slice(list[i + 8].innerText.lastIndexOf("-") + 2);
+                        }
+                    }
+                });
+            </script>
+
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-md-4">
+                    <a id="link1" class="card-3" target="_blank">
+                        <h5 id="post1" class="card-title"></h5>
+                        <p id="date1" class="regular text-gray date"></p>
+                    </a>
+                </div>
+
+                <div class="col-md-4">
+                    <a id="link2" class="card-3" target="_blank">
+                        <h5 id="post2" class="card-title"></h5>
+                        <p id="date2" class="regular text-gray date"></p>
+                    </a>
+                </div>
+
+                <div class="col-md-4">
+                    <a id="link3" class="card-3" target="_blank">
+                        <h5 id="post3" class="card-title"></h5>
+                        <p id="date3" class="regular text-gray date"></p>
+                    </a>
+                </div>
+            </div>
+            <div class="row text-center" style="justify-content: center">
+                <div class="col-md-4">
+                    <a id="link4" class="card-3" target="_blank">
+                        <h5 id="post4" class="card-title"></h5>
+                        <p id="date4" class="regular text-gray date"></p>
+                    </a>
+                </div>
+
+                <div class="col-md-4">
+                    <a id="link5" class="card-3" target="_blank">
+                        <h5 id="post5" class="card-title"></h5>
+                        <p id="date5" class="regular text-gray date"></p>
+                    </a>
+                </div>
+
+                <div class="col-md-4">
+                    <a id="link6" class="card-3" target="_blank">
+                        <h5 id="post6" class="card-title"></h5>
+                        <p id="date6" class="regular text-gray date"></p>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Older button -->
+            <div>
+                <div class="row text-center" style="justify-content: center">
+                    <h6 style="margin-top: 18px; padding-right: 6px;">OLDER</h6>
+                    <a href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank">
+                        <img class="navigation" src="images/resources/forward_32.svg" alt="Forward button" height="23" width="23"
+                            style="margin-top:18px;">
+                    </a>
+                </div>
+            </div>
+
+        </div>
+    </section>
+    <hr class="hairline">
+
+    <!-- Presentation section -->
+    <section class="even-section">
+        <div class="container">
+            <div class="col-lg-12 text-center">
+                <h3 class="section-heading" style="padding-top: 48px;">Presentations</h3>
+                <p>See videos and slides from events.</p>
+            </div>
+            <div class="col-md-12 row">
+                <div class="col-md-6">
+                    <p style="height:6px;"></p>
+                    <div class="text-center" style="justify-content: center"> 
+                        <div class="card-2 pres multiple-links" onclick="window.open('https://www.youtube.com/watch?v=i3UW5PhDoQg')">
+                            <div class="col-sm-12 row" style="transform: translateY(0%);">
+                                <div class="col-sm-3">
+                                    <img class="icon" src="images/resources/play_128.svg" alt="Play icon"/>
+                                </div>
+                                <div class="col-sm-9">
+                                    <h5 class="card-title no-link">REST APIs in Minutes with LoopBack 4</h5>
+                                    <p class="regular text-gray" style="margin-bottom: 8px;">Janny Hou | Toronto Meetup 2019</p> 
+                                    <a href="https://www.slideshare.net/DaveWhiteley1/2019-02-05-toronto-cloud-integration-meetup" target="_blank"
+                                        onclick="window.open('https://www.slideshare.net/DaveWhiteley1/2019-02-05-toronto-cloud-integration-meetup')">
+                                        <div class="row">
+                                            <img class="icon slides-icon" src="images/resources/slideshare-brands.svg" alt="Slideshare icon"/>
+                                            <p class="regular text-gray">Slides</p>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <a class="card-2 pres" href="https://www.youtube.com/watch?v=W5u_YF96q6o&list=PL2I5I38o2kSCPCIxd8IjzYAMZnxcy3BYo&index=3&t=0s" target="_blank">
+                            <div class="col-sm-12 row">
+                                <div class="col-sm-3">
+                                    <img class="icon" src="images/resources/play_128.svg" alt="Play icon"/>
+                                </div>
+                                <div class="col-sm-9">
+                                    <h5 class="card-title">LoopBack 4 Demo Example Todo Application</h5>
+                                    <p class="regular text-gray"> Biniam Admikew | Toronto Meetup 2019</p>
+                                </div>
+                            </div>
+                        </a>
+                        <a class="card-2 pres" href="https://jsi2018.sched.com/event/HYVB?iframe=no" target="_blank">
+                            <div class="col-sm-12 row">
+                                <div class="col-sm-3">
+                                    <img class="icon" src="images/resources/slideshare-brands.svg" alt="Slideshare icon"/>
+                                </div>
+                                <div class="col-sm-9">
+                                    <h5 class="card-title">The Art of Building Node.js Projects at Scale</h5>
+                                    <p class="regular text-gray"> Raymond Feng | Node+JS Interactive 2018</p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <p style="height: 6px;"></p>
+                    <a class="card-2 pres" href="http://www.nodesummit.com/prior-video/node-summit-2018-async-functions-in-practice-miroslav-bajtos/" target="_blank">
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <img class="icon" src="images/resources/play_128.svg" alt="Play icon"/>
+                            </div>
+                            <div class="col-sm-9">
+                                <h5 class="card-title">Async Functions in Practice</h5>
+                                <p class="regular text-gray">Miroslav Bajtos | Node Summit 2018</p>
+                            </div>
+                        </div>
+                    </a>
+                    <a class="card-2 pres" href="http://www.nodesummit.com/prior-video/node-summit-2018-the-art-of-extensibility-and-composability-taranveer-virk/" target="_blank">
+                        <div class="row">
+                            <div class="col-sm-3">
+                                <img class="icon" src="images/resources/play_128.svg" alt="Play icon"/>
+                            </div>
+                            <div class="col-sm-9">
+                                <h5 class="card-title">The Art of Extensibility and Composability</h5>
+                                <p class="regular text-gray">Taranveer Virk | Node Summit 2018</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>                  
+        </div>
+    </section>
+    <hr class="hairline">
+
+     <!-- Loopback integration section -->
+    <section class="odd-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-8">
+                    <h3 style="padding-top: 80px;">Show off your LoopBack integration!
+                        <p class="p regular" style="margin-top: 8px;margin-bottom:48px;">We have prepared brand assets that you can include in your site or app.</h3>
+                    <a class="btn btn-secondary" role="button" style="padding-left:60px; padding-right:60px; margin-bottom: 80px;" 
+                        href=https://loopback.io/images/branding/LoopBack_Brand_Assets_v1.0.zip>Download Brand Assets</a>
+                </div>
+                <div class="col-md-4">
+                    <img class="logo" src="images/global/loopback-mark-frame-blue.svg" alt="LoopBack mark frame" height="192" width="169" style="margin-top:80px;"/>
+                </div>
+            </div>
+        </div>
+    </section>
+    <hr class="hairline">
+
+    <!-- footer -->
+    <footer>
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <img src="images/global/loopback-mark-frame-white.svg" width=40px/>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Product</p>
+                    <p class="regular">
+                        <a href="getting-started.html">Getting Started</a>
+                    </p>
+                    <p class="regular">
+                        <a href="doc/en/lb4/Tutorials.html">Tutorials</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase" >Documentation</p>
+                    <p class="regular">
+                        <a href="/doc">Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="resources.html">Resources</a>
+                    </p>
+                    <p class="regular">
+                        <a href="contribute.html">Contribute</a>
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <p class="label text-uppercase">Support</p>
+                    <p class="regular">
+                        <a href="/doc/en/lb4">LoopBack 4 Documentation</a>
+                    </p>
+                    <p class="regular">
+                        <a href="http://apidocs.loopback.io/@loopback%2fdocs/apidocs.html" target="_blank">API Docs</a>
+                    </p>
+                    <p class="regular">
+                        <a href="https://strongloop.com/strongblog/" target="_blank">StrongLoop Blog</a>
+                    </p> 
+                    <p class="regular">
+                        <a href="https://www.ibm.com/marketplace/api-management" target="_blank">API Connect</a>
+                    </p>
+                </div>
+            </div>
+            <hr class="hairline-footer">
+            <div class="row text-center">
+                <div class="col-md-6">
+                    <p class="regular"> &copy; Copyright 2018-2019 StrongLoop, an IBM company</p>
+                </div>
+                <div class="col-md-6">
+                    <p style="float:right">
+                        <a class="twitter-share-button"
+                            href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io">
+                          Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
+                        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="dist/jquery/jquery-3.3.1.slim.min.js"></script>
+    <script src="dist/popper/1.14.0/umd/popper.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script src="dist/bootstrap/js/bootstrap.min.js"></script>
+    <!-- GitHub button -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+
+</body>
diff --git a/resources/index.html b/resources/index.html
index ea64f71e0..03a52263e 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -2,6 +2,7 @@
 layout: overview
 title: Resources
 item: resources
+permalink: /lb3/resources
 ---
       <main class="c-content">
         <section class="c-section">
