Hide tips until loaded and optimize time to interactive

djhi · djhi · commit abba0ebf3387 · 2025-02-26T10:55:11.000+01:00
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -134,15 +134,16 @@
         </main>
 
         <script src="{{ '/js/materialize.min.js' | relative_url }}"></script>
+        <script src="js/ra-navigation.js"></script>
         <script src="{{ 'js/prism.js' | relative_url }}"></script>
+        <script src="{{ 'js/ra-doc-exec.js' | relative_url }}" type="module" defer async></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 }}" type="module"></script>
 
         <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
         {% if page.dir contains "doc" %} {% assign version = page.dir | split:
diff --git a/docs/documentation.html b/docs/documentation.html
@@ -262,7 +262,7 @@ <h2>Recipes</h2>
                     </div>
                     <div
                         id="tip-container"
-                        style="padding: 32px 12px 32px; color: #888;"
+                        style="visibility: hidden; padding: 32px 12px 32px; color: #888;"
                     >
                         <div style="border: solid 1px #C0CCD9; padding: 17px;">
                             <div class="sib-form-block" style="font-size:16px; text-align:left; font-weight:700; font-family:&quot;Helvetica&quot;, sans-serif; color:#3C4858; background-color:transparent; text-align:left">
@@ -291,15 +291,16 @@ <h2>Recipes</h2>
         </main>
 
         <script src="js/materialize.min.js"></script>
+        <script src="js/ra-navigation.js"></script>
         <script src="js/prism.js"></script>
+        <script src="js/ra-doc-exec.js" type="module" defer async></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" type="module"></script>
 
         <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
         {% if page.dir contains "doc" %} {% assign version = page.dir | split:
diff --git a/docs/js/ra-doc-exec.js b/docs/js/ra-doc-exec.js
@@ -5,9 +5,8 @@ import * as babel from 'https://esm.sh/prettier@3.5.1/plugins/babel';
 import * as estree from 'https://esm.sh/prettier@3.5.1/plugins/estree';
 import { marked } from 'https://esm.sh/marked@15.0.7';
 
-var allMenus, navLinks, versionsLinks;
-
-const showTip = async () => {
+export const showTip = async () => {
+    const tipContainer = document.getElementById('tip-container');
     const tipElement = document.getElementById('tip');
     if (!tipElement) return;
 
@@ -24,6 +23,7 @@ const showTip = async () => {
     if (codeBlock) {
         Prism.highlightElement(codeBlock);
     }
+    tipContainer.style.visibility = 'visible';
 };
 
 const getContents = async file => {
@@ -214,270 +214,9 @@ export const buildJSCodeBlocksFromTS = async (
     applyPreferredLanguage();
 };
 
-// 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 (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');
-    if (tocContainer) {
-        tocContainer.className =
-            text.trim() !== ''
-                ? 'toc-container col hide-on-small-only m3'
-                : 'toc-container';
-
-        var tmpElement = document.createElement('div');
-        tmpElement.innerHTML = text;
-    }
-
-    var content = document.querySelector('.container');
-    var tmpContent = tmpElement.querySelector('.container');
-    if (content && tmpContent) {
-        content.innerHTML = tmpContent.innerHTML;
-    }
-
-    window.scrollTo(0, 0);
-
-    buildPageToC();
-
-    navigationFitScroll();
-}
-
-function changeSelectedMenu() {
-    var activeMenu = document.querySelector(`.sidenav li.active`);
-    activeMenu && activeMenu.classList.remove('active');
-    const newActiveMenu = allMenus.find(
-        menuEl => menuEl.href === window.location.href
-    );
-    newActiveMenu && newActiveMenu.parentNode.classList.add('active');
-}
-
-function toggleDockBlocks(status) {
-    const docBlock = document.querySelector('.docBlocks');
-    const needHelp = document.querySelector('.needHelp');
-    if (status) {
-        if (docBlock) docBlock.style.display = 'grid';
-        if (needHelp) needHelp.style.display = 'block';
-    } else {
-        if (docBlock) docBlock.style.display = 'none';
-        if (needHelp) needHelp.style.display = 'none';
-    }
-}
-
-function loadNewsletterScript() {
-    /* Load the script only of the form is in the DOM */
-    if (document.querySelector('#sib-form') != null) {
-        const script = document.createElement('script');
-        script.src = 'https://sibforms.com/forms/end-form/build/main.js';
-        script.type = 'text/javascript';
-        script.id = 'newsletter_script';
-        document.head.appendChild(script);
-    } else {
-        document.getElementById('newsletter_script')?.remove();
-    }
-}
-
-/**
- * Beginner mode
- */
-
-let beginnerMode = window.localStorage.getItem('beginner-mode') === 'true';
-
-function hideNonBeginnerDoc() {
-    const chapters = document.querySelectorAll('.sidenav > ul  li');
-    chapters.forEach(chapter => {
-        if (!chapter.classList.contains('beginner')) {
-            chapter.style.display = 'none';
-        }
-    });
-    document.querySelectorAll('.beginner-mode-on').forEach(el => {
-        el.style.display = 'block';
-    });
-}
-
-function showNonBeginnerDoc() {
-    const chapters = document.querySelectorAll('.sidenav > ul  li');
-    chapters.forEach(chapter => {
-        chapter.style.display = 'list-item';
-    });
-    document.querySelectorAll('.beginner-mode-on').forEach(el => {
-        el.style.display = 'none';
-    });
-}
-
-function hideTips() {
-    const tipElement = document.getElementById('tip');
-    const tipContainer = document.getElementById('tip-container');
-
-    if (tipElement) {
-        tipElement.remove();
-    }
-    if (tipContainer) {
-        tipContainer.remove();
-    }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const beginnerModeTrigger = document.getElementById(
-        'beginner-mode-trigger'
-    );
-
-    if (window.location.pathname === '/documentation.html') {
-    }
-
-    if (beginnerModeTrigger) {
-        beginnerModeTrigger.addEventListener('click', () => {
-            beginnerMode = !beginnerMode;
-            if (beginnerMode) {
-                window.localStorage.setItem('beginner-mode', 'true');
-                hideNonBeginnerDoc();
-            } else {
-                window.localStorage.removeItem('beginner-mode');
-                showNonBeginnerDoc();
-            }
-        });
-
-        beginnerModeTrigger.checked = beginnerMode;
-        if (beginnerMode) {
-            hideNonBeginnerDoc();
-        }
-    }
-});
-
-// 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)
-        .then(() => {
-            if (href.includes('documentation.html')) {
-                showTip();
-            } else {
-                hideTips();
-            }
-        })
-        .then(buildJSCodeBlocksFromTS)
-        .then(loadNewsletterScript);
-    // change the URL
-    window.history.pushState(null, null, href);
-    changeSelectedMenu();
-});
-
-// make back button work again
-window.addEventListener('popstate', () => {
-    if (document.location.href.indexOf('#') !== -1) {
-        // popstate triggered by a click on an anchor, not back button
-        return;
-    }
-    if (window.location.pathname === '/documentation.html') {
-        fetch(window.location.pathname)
-            .then(res => res.text())
-            .then(replaceContent)
-            .then(() => {
-                document.querySelector('.DocSearch-content').innerHTML = '';
-                toggleDockBlocks(true);
-                showTip();
-            });
-    } else {
-        // fetch the new content
-        fetch(window.location.pathname)
-            .then(res => res.text())
-            .then(replaceContent)
-            .then(() => {
-                toggleDockBlocks(false);
-            })
-            .then(hideTips)
-            .then(buildJSCodeBlocksFromTS)
-            .then(loadNewsletterScript);
-    }
-    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'));
-
     if (window.location.pathname === '/documentation.html') {
         showTip();
     }
-    buildPageToC();
-
-    navigationFitScroll();
     buildJSCodeBlocksFromTS();
-    loadNewsletterScript();
 });
diff --git a/docs/js/ra-navigation.js b/docs/js/ra-navigation.js
