[Doc] Show nav sidebar on main navigation page

docs/_layouts/default.html

@@ -20,7 +20,7 @@
         />
         <link
             rel="stylesheet"
-            href="{{ '/css/style-v12.css' | relative_url }}"
+            href="{{ '/css/style-v13.css' | relative_url }}"
         />
         <link rel="stylesheet" href="{{ '/css/syntax.css' | relative_url }}" />
         <link rel="stylesheet" href="{{ '/css/prism.css' | relative_url }}" />
@@ -36,6 +36,9 @@
         <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.css"
+            integrity="sha512-2kqK5bWDwdrluTn6Wkj+jgiwyzvAHLirVp08Kz7kN5I8PWQ0tUtEMxfhyWDCrnws91BJ9PfrUy6ImfA7Qb22TA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
         />
         <link
             rel="stylesheet"
@@ -76,46 +79,18 @@
 
         <script src="{{ '/js/materialize.min.js' | relative_url }}"></script>
         <script src="{{ 'js/prism.js' | relative_url }}"></script>
-        <script>
-            function slugify(text) {
-                return text
-                    .toString()
-                    .toLowerCase()
-                    .replace(/\s+/g, '-') // Replace spaces with -
-                    .replace(/[^\w\-]+/g, '') // Remove all non-word chars
-                    .replace(/\-\-+/g, '-') // Replace multiple - with single -
-                    .replace(/^-+/, '') // Trim - from start of text
-                    .replace(/-+$/, ''); // Trim - from end of text
-            }
-            function buildPageToC() {
-                M.Sidenav.init(document.querySelectorAll('.sidenav'));
-                // Initialize version selector
-                M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'));
-                /* Generate table of contents */
-                tocbot.init({
-                    // Where to render the table of contents
-                    tocSelector: '.toc',
-                    positionFixedSelector: '.toc',
-                    // Where to grab the headings to build the table of contents
-                    contentSelector: '.toc-content',
-                    // More options
-                    headingSelector: 'h2, h3, h4',
-                    includeHtml: true,
-                    collapseDepth: 2,
-                    hasInnerContainers: true,
-                });
-            }
-            // build ToC on page load
-            document.addEventListener('DOMContentLoaded', function () {
-                buildPageToC();
-            });
-        </script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"
+            defer
+            integrity="sha512-oD3xGN8YTxenx6tdS4D/RKqO4OtORBQtAb2/FseM17GGMIi6jMwKUBc8duX4A5RwMOGGXoFBZrsqbOk8GpXFgQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        ></script>
+        <script src="{{ 'js/ra-doc-exec.js' | relative_url }}"></script>
+
         <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-        {% if page.dir contains "doc" %}
-        {% assign version = page.dir | split: '/' | last %}
-        {% else %}
-        {% assign version = "latest" %}
-        {% endif %}
+        {% if page.dir contains "doc" %} {% assign version = page.dir | split:
+        '/' | last %} {% else %} {% assign version = "latest" %} {% endif %}
         <script type="text/javascript">
             docsearch({
                 container: '#docsearch',
@@ -125,10 +100,7 @@
                 searchParameters: { facetFilters: ['version:  {{ version }}'] },
             });
         </script>
-        <script
-            src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"
-            defer
-        ></script>
+
         <!--
         React-admin protects your privacy!
         We use our own self-hosted tracking solution to collect some raw metrics,

docs/css/style-v12.css → docs/css/style-v13.css

@@ -484,6 +484,7 @@ ul.sidenav code {
 .docBlocks a:hover {
     border: #c0c0c0 1px solid;
     box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1);
+    text-decoration: none;
 }
 
 .docBlocks a .docBlock {

docs/documentation.html

@@ -19,7 +19,7 @@
         />
         <link
             rel="stylesheet"
-            href="{{ '/css/style-v12.css' | relative_url }}"
+            href="{{ '/css/style-v13.css' | relative_url }}"
         />
         <link rel="stylesheet" href="{{ '/css/syntax.css' | relative_url }}" />
         <link rel="stylesheet" href="{{ '/css/prism.css' | relative_url }}" />
@@ -39,8 +39,20 @@
         <link rel="stylesheet" href="css/docsearch.css" />
     </head>
 
-    <body class="no-sidebar">
-        {% include nav.html %}
+    <body>
+        <header>
+            {% include nav.html %}
+            <ul id="slide-out" class="sidenav sidenav-fixed">
+                <li class="logo">
+                    <a href="{{ site.url }}"
+                        ><img src="{{ site.url }}/assets/logo_white.png"
+                    /></a>
+                </li>
+                <li class="version">{% include versions.html %}</li>
+                {% include_relative navigation.html %}
+            </ul>
+        </header>
+
         <main>
             <div class="container">
                 <div class="row nav_root">
@@ -129,7 +141,7 @@ <h2>Fields</h2>
                             <div class="material-icons">&#xe8f4;</div>
                         </a>
 
-                        <a href="./Inputs.html">
+                        <a class="nav-link" href="./Inputs.html">
                             <div class="docBlock">
                                 <h2>Inputs</h2>
                                 <code>&lt;TextInput&gt;</code>,
@@ -181,17 +193,32 @@ <h2>Recipes</h2>
                             <div class="material-icons">&#xe1bd;</div>
                         </a>
                     </div>
+                    <div class="col s12 m9">
+                        <div
+                            class="markdown-section DocSearch-content toc-content"
+                        ></div>
+                    </div>
+                    <div class="toc-container">
+                        <div class="toc"></div>
+                    </div>
                 </div>
             </div>
         </main>
 
         <script src="js/materialize.min.js"></script>
+        <script src="js/prism.js"></script>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"
+            defer
+            integrity="sha512-oD3xGN8YTxenx6tdS4D/RKqO4OtORBQtAb2/FseM17GGMIi6jMwKUBc8duX4A5RwMOGGXoFBZrsqbOk8GpXFgQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        ></script>
+        <script src="js/ra-doc-exec.js"></script>
+
         <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-        {% if page.dir contains "doc" %}
-        {% assign version = page.dir | split: '/' | last %}
-        {% else %}
-        {% assign version = "latest" %}
-        {% endif %}
+        {% if page.dir contains "doc" %} {% assign version = page.dir | split:
+        '/' | last %} {% else %} {% assign version = "latest" %} {% endif %}
         <script type="text/javascript">
             docsearch({
                 container: '#docsearch',
@@ -201,6 +228,7 @@ <h2>Recipes</h2>
                 searchParameters: { facetFilters: ['version:  {{ version }}'] },
             });
         </script>
+
         <!--
         React-admin protects your privacy!
         We use our own self-hosted tracking solution to collect some raw metrics,

docs/js/ra-doc-exec.js

@@ -0,0 +1,155 @@
+var allMenus, navLinks, versionsLinks;
+
+// eslint-disable-next-line no-unused-vars
+function slugify(text) {
+    return text
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with -
+        .replace(/[^\w-]+/g, '') // Remove all non-word chars
+        .replace(/--+/g, '-') // Replace multiple - with single -
+        .replace(/^-+/, '') // Trim - from start of text
+        .replace(/-+$/, ''); // Trim - from end of text
+}
+
+function navigationFitScroll() {
+    var scrollIntoView = window.sessionStorage.getItem('scrollIntoView');
+    if (true || scrollIntoView !== 'false') {
+        var activeMenu = document.querySelector('.sidenav li.active');
+        if (activeMenu) activeMenu.parentNode.scrollIntoView();
+    }
+    window.sessionStorage.removeItem('scrollIntoView');
+}
+
+function buildPageToC() {
+    var M = window.M;
+    M.Sidenav.init(document.querySelectorAll('.sidenav'));
+    // Initialize version selector
+    M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'));
+
+    var Prism = window.Prism;
+    Prism.highlightAll();
+
+    /* Generate table of contents */
+    if (document.querySelector('.toc') != null) {
+        var tocbot = window.tocbot;
+        tocbot.init({
+            // Where to render the table of contents
+            tocSelector: '.toc',
+            positionFixedSelector: '.toc',
+            // Where to grab the headings to build the table of contents
+            contentSelector: '.toc-content',
+            // More options
+            headingSelector: 'h2, h3, h4',
+            includeHtml: true,
+            collapseDepth: 2,
+            hasInnerContainers: true,
+        });
+    }
+}
+
+function replaceContent(text) {
+    var tocContainer = document.querySelector('.toc-container');
+    tocContainer.className =
+        text.trim() !== ''
+            ? 'toc-container col hide-on-small-only m3'
+            : 'toc-container';
+
+    var tmpElement = document.createElement('div');
+    tmpElement.innerHTML = text;
+
+    toggleDockBlocks(false);
+
+    var content = document.querySelector('.DocSearch-content');
+    content.innerHTML = tmpElement.querySelector(
+        '.DocSearch-content'
+    ).innerHTML;
+
+    window.scrollTo(0, 0);
+
+    buildPageToC();
+
+    navigationFitScroll();
+}
+
+function changeSelectedMenu() {
+    var activeMenu = document.querySelector(`.sidenav li.active`);
+    activeMenu && activeMenu.classList.remove('active');
+    allMenus
+        .find(menuEl => menuEl.href === window.location.href)
+        .parentNode.classList.add('active');
+}
+
+function toggleDockBlocks(status) {
+    var docBlock = document.querySelector('.docBlocks');
+    if (!docBlock) return;
+    docBlock.style.display = status ? 'grid' : 'none';
+}
+
+// Replace full page reloads by a fill of the content area
+// so that the side navigation keeps its state
+// use a global event listener to also catch links inside the content area
+document.addEventListener('click', event => {
+    var link = event.target.closest('a');
+    if (!link) {
+        return; // click not on a link
+    }
+    var location = document.location.href.split('#')[0];
+    var href = link.href;
+    if (href.indexOf(`${location}#`) === 0) {
+        return; // click on an anchor in the current page
+    }
+    if (!navLinks.includes(href)) {
+        return; // not a navigation link
+    }
+    window.sessionStorage.setItem(
+        'scrollIntoView',
+        link.closest('.sidenav') ? 'false' : 'true'
+    );
+    // now we're sure it's an internal navigation link
+    // transform it to an AJAX call
+    event.preventDefault();
+    // update versions links
+    var currentPage = href.split('/').pop();
+    versionsLinks.forEach(link => {
+        link.href =
+            link.href.substr(0, link.href.lastIndexOf('/') + 1) + currentPage;
+    });
+    // fetch the new content
+    fetch(href)
+        .then(res => res.text())
+        .then(replaceContent);
+    // change the URL
+    window.history.pushState(null, null, href);
+    changeSelectedMenu();
+});
+
+// make back button work again
+window.addEventListener('popstate', event => {
+    if (document.location.href.indexOf('#') !== -1) {
+        // popstate triggered by a click on an anchor, not back button
+        return;
+    }
+    if (window.location.pathname === '/documentation.html') {
+        document.querySelector('.DocSearch-content').innerHTML = '';
+        toggleDockBlocks(true);
+    } else {
+        // fetch the new content
+        fetch(window.location.pathname)
+            .then(res => res.text())
+            .then(replaceContent);
+    }
+    changeSelectedMenu();
+});
+
+window.addEventListener('DOMContentLoaded', () => {
+    allMenus = Array.from(document.querySelectorAll(`.sidenav a.nav-link`));
+    navLinks = allMenus
+        .filter(link => !link.classList.contains('external'))
+        .map(link => link.href);
+    versionsLinks = Array.from(document.querySelectorAll('#versions > li > a'));
+
+    buildPageToC();
+
+    navigationFitScroll();
+});