Skip to content

Commit abba0eb

Browse files
djhidjhi
committed
Hide tips until loaded and optimize time to interactive
1 parent f215c2c commit abba0eb

File tree

4 files changed

+278
-267
lines changed

4 files changed

+278
-267
lines changed

‎docs/_layouts/default.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,15 +134,16 @@
134134
</main>
135135

136136
<script src="{{ '/js/materialize.min.js' | relative_url }}"></script>
137+
<script src="js/ra-navigation.js"></script>
137138
<script src="{{ 'js/prism.js' | relative_url }}"></script>
139+
<script src="{{ 'js/ra-doc-exec.js' | relative_url }}" type="module" defer async></script>
138140
<script
139141
src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"
140142
defer
141143
integrity="sha512-oD3xGN8YTxenx6tdS4D/RKqO4OtORBQtAb2/FseM17GGMIi6jMwKUBc8duX4A5RwMOGGXoFBZrsqbOk8GpXFgQ=="
142144
crossorigin="anonymous"
143145
referrerpolicy="no-referrer"
144146
></script>
145-
<script src="{{ 'js/ra-doc-exec.js' | relative_url }}" type="module"></script>
146147

147148
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
148149
{% if page.dir contains "doc" %} {% assign version = page.dir | split:

‎docs/documentation.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ <h2>Recipes</h2>
262262
</div>
263263
<div
264264
id="tip-container"
265-
style="padding: 32px 12px 32px; color: #888;"
265+
style="visibility: hidden; padding: 32px 12px 32px; color: #888;"
266266
>
267267
<div style="border: solid 1px #C0CCD9; padding: 17px;">
268268
<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>
291291
</main>
292292

293293
<script src="js/materialize.min.js"></script>
294+
<script src="js/ra-navigation.js"></script>
294295
<script src="js/prism.js"></script>
296+
<script src="js/ra-doc-exec.js" type="module" defer async></script>
295297
<script
296298
src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"
297299
defer
298300
integrity="sha512-oD3xGN8YTxenx6tdS4D/RKqO4OtORBQtAb2/FseM17GGMIi6jMwKUBc8duX4A5RwMOGGXoFBZrsqbOk8GpXFgQ=="
299301
crossorigin="anonymous"
300302
referrerpolicy="no-referrer"
301303
></script>
302-
<script src="js/ra-doc-exec.js" type="module"></script>
303304

304305
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
305306
{% if page.dir contains "doc" %} {% assign version = page.dir | split:

‎docs/js/ra-doc-exec.js

Lines changed: 3 additions & 264 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import * as babel from 'https://esm.sh/prettier@3.5.1/plugins/babel';
55
import * as estree from 'https://esm.sh/prettier@3.5.1/plugins/estree';
66
import { marked } from 'https://esm.sh/marked@15.0.7';
77

8-
var allMenus, navLinks, versionsLinks;
9-
10-
const showTip = async () => {
8+
export const showTip = async () => {
9+
const tipContainer = document.getElementById('tip-container');
1110
const tipElement = document.getElementById('tip');
1211
if (!tipElement) return;
1312

@@ -24,6 +23,7 @@ const showTip = async () => {
2423
if (codeBlock) {
2524
Prism.highlightElement(codeBlock);
2625
}
26+
tipContainer.style.visibility = 'visible';
2727
};
2828

2929
const getContents = async file => {
@@ -214,270 +214,9 @@ export const buildJSCodeBlocksFromTS = async (
214214
applyPreferredLanguage();
215215
};
216216

217-
// eslint-disable-next-line no-unused-vars
218-
function slugify(text) {
219-
return text
220-
.toString()
221-
.toLowerCase()
222-
.replace(/\s+/g, '-') // Replace spaces with -
223-
.replace(/[^\w-]+/g, '') // Remove all non-word chars
224-
.replace(/--+/g, '-') // Replace multiple - with single -
225-
.replace(/^-+/, '') // Trim - from start of text
226-
.replace(/-+$/, ''); // Trim - from end of text
227-
}
228-
229-
function navigationFitScroll() {
230-
var scrollIntoView = window.sessionStorage.getItem('scrollIntoView');
231-
if (scrollIntoView !== 'false') {
232-
var activeMenu = document.querySelector('.sidenav li.active');
233-
if (activeMenu) activeMenu.parentNode.scrollIntoView();
234-
}
235-
window.sessionStorage.removeItem('scrollIntoView');
236-
}
237-
238-
function buildPageToC() {
239-
var M = window.M;
240-
M.Sidenav.init(document.querySelectorAll('.sidenav'));
241-
// Initialize version selector
242-
M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'));
243-
244-
var Prism = window.Prism;
245-
Prism.highlightAll();
246-
247-
/* Generate table of contents */
248-
if (document.querySelector('.toc') != null) {
249-
var tocbot = window.tocbot;
250-
tocbot.init({
251-
// Where to render the table of contents
252-
tocSelector: '.toc',
253-
positionFixedSelector: '.toc',
254-
// Where to grab the headings to build the table of contents
255-
contentSelector: '.toc-content',
256-
// More options
257-
headingSelector: 'h2, h3, h4',
258-
includeHtml: true,
259-
collapseDepth: 2,
260-
hasInnerContainers: true,
261-
});
262-
}
263-
}
264-
265-
function replaceContent(text) {
266-
var tocContainer = document.querySelector('.toc-container');
267-
if (tocContainer) {
268-
tocContainer.className =
269-
text.trim() !== ''
270-
? 'toc-container col hide-on-small-only m3'
271-
: 'toc-container';
272-
273-
var tmpElement = document.createElement('div');
274-
tmpElement.innerHTML = text;
275-
}
276-
277-
var content = document.querySelector('.container');
278-
var tmpContent = tmpElement.querySelector('.container');
279-
if (content && tmpContent) {
280-
content.innerHTML = tmpContent.innerHTML;
281-
}
282-
283-
window.scrollTo(0, 0);
284-
285-
buildPageToC();
286-
287-
navigationFitScroll();
288-
}
289-
290-
function changeSelectedMenu() {
291-
var activeMenu = document.querySelector(`.sidenav li.active`);
292-
activeMenu && activeMenu.classList.remove('active');
293-
const newActiveMenu = allMenus.find(
294-
menuEl => menuEl.href === window.location.href
295-
);
296-
newActiveMenu && newActiveMenu.parentNode.classList.add('active');
297-
}
298-
299-
function toggleDockBlocks(status) {
300-
const docBlock = document.querySelector('.docBlocks');
301-
const needHelp = document.querySelector('.needHelp');
302-
if (status) {
303-
if (docBlock) docBlock.style.display = 'grid';
304-
if (needHelp) needHelp.style.display = 'block';
305-
} else {
306-
if (docBlock) docBlock.style.display = 'none';
307-
if (needHelp) needHelp.style.display = 'none';
308-
}
309-
}
310-
311-
function loadNewsletterScript() {
312-
/* Load the script only of the form is in the DOM */
313-
if (document.querySelector('#sib-form') != null) {
314-
const script = document.createElement('script');
315-
script.src = 'https://sibforms.com/forms/end-form/build/main.js';
316-
script.type = 'text/javascript';
317-
script.id = 'newsletter_script';
318-
document.head.appendChild(script);
319-
} else {
320-
document.getElementById('newsletter_script')?.remove();
321-
}
322-
}
323-
324-
/**
325-
* Beginner mode
326-
*/
327-
328-
let beginnerMode = window.localStorage.getItem('beginner-mode') === 'true';
329-
330-
function hideNonBeginnerDoc() {
331-
const chapters = document.querySelectorAll('.sidenav > ul li');
332-
chapters.forEach(chapter => {
333-
if (!chapter.classList.contains('beginner')) {
334-
chapter.style.display = 'none';
335-
}
336-
});
337-
document.querySelectorAll('.beginner-mode-on').forEach(el => {
338-
el.style.display = 'block';
339-
});
340-
}
341-
342-
function showNonBeginnerDoc() {
343-
const chapters = document.querySelectorAll('.sidenav > ul li');
344-
chapters.forEach(chapter => {
345-
chapter.style.display = 'list-item';
346-
});
347-
document.querySelectorAll('.beginner-mode-on').forEach(el => {
348-
el.style.display = 'none';
349-
});
350-
}
351-
352-
function hideTips() {
353-
const tipElement = document.getElementById('tip');
354-
const tipContainer = document.getElementById('tip-container');
355-
356-
if (tipElement) {
357-
tipElement.remove();
358-
}
359-
if (tipContainer) {
360-
tipContainer.remove();
361-
}
362-
}
363-
364-
document.addEventListener('DOMContentLoaded', () => {
365-
const beginnerModeTrigger = document.getElementById(
366-
'beginner-mode-trigger'
367-
);
368-
369-
if (window.location.pathname === '/documentation.html') {
370-
}
371-
372-
if (beginnerModeTrigger) {
373-
beginnerModeTrigger.addEventListener('click', () => {
374-
beginnerMode = !beginnerMode;
375-
if (beginnerMode) {
376-
window.localStorage.setItem('beginner-mode', 'true');
377-
hideNonBeginnerDoc();
378-
} else {
379-
window.localStorage.removeItem('beginner-mode');
380-
showNonBeginnerDoc();
381-
}
382-
});
383-
384-
beginnerModeTrigger.checked = beginnerMode;
385-
if (beginnerMode) {
386-
hideNonBeginnerDoc();
387-
}
388-
}
389-
});
390-
391-
// Replace full page reloads by a fill of the content area
392-
// so that the side navigation keeps its state
393-
// use a global event listener to also catch links inside the content area
394-
document.addEventListener('click', event => {
395-
var link = event.target.closest('a');
396-
if (!link) {
397-
return; // click not on a link
398-
}
399-
var location = document.location.href.split('#')[0];
400-
var href = link.href;
401-
if (href.indexOf(`${location}#`) === 0) {
402-
return; // click on an anchor in the current page
403-
}
404-
if (!navLinks.includes(href)) {
405-
return; // not a navigation link
406-
}
407-
window.sessionStorage.setItem(
408-
'scrollIntoView',
409-
link.closest('.sidenav') ? 'false' : 'true'
410-
);
411-
// now we're sure it's an internal navigation link
412-
// transform it to an AJAX call
413-
event.preventDefault();
414-
// update versions links
415-
var currentPage = href.split('/').pop();
416-
versionsLinks.forEach(link => {
417-
link.href =
418-
link.href.substr(0, link.href.lastIndexOf('/') + 1) + currentPage;
419-
});
420-
// fetch the new content
421-
fetch(href)
422-
.then(res => res.text())
423-
.then(replaceContent)
424-
.then(() => {
425-
if (href.includes('documentation.html')) {
426-
showTip();
427-
} else {
428-
hideTips();
429-
}
430-
})
431-
.then(buildJSCodeBlocksFromTS)
432-
.then(loadNewsletterScript);
433-
// change the URL
434-
window.history.pushState(null, null, href);
435-
changeSelectedMenu();
436-
});
437-
438-
// make back button work again
439-
window.addEventListener('popstate', () => {
440-
if (document.location.href.indexOf('#') !== -1) {
441-
// popstate triggered by a click on an anchor, not back button
442-
return;
443-
}
444-
if (window.location.pathname === '/documentation.html') {
445-
fetch(window.location.pathname)
446-
.then(res => res.text())
447-
.then(replaceContent)
448-
.then(() => {
449-
document.querySelector('.DocSearch-content').innerHTML = '';
450-
toggleDockBlocks(true);
451-
showTip();
452-
});
453-
} else {
454-
// fetch the new content
455-
fetch(window.location.pathname)
456-
.then(res => res.text())
457-
.then(replaceContent)
458-
.then(() => {
459-
toggleDockBlocks(false);
460-
})
461-
.then(hideTips)
462-
.then(buildJSCodeBlocksFromTS)
463-
.then(loadNewsletterScript);
464-
}
465-
changeSelectedMenu();
466-
});
467-
468217
window.addEventListener('DOMContentLoaded', () => {
469-
allMenus = Array.from(document.querySelectorAll(`.sidenav a.nav-link`));
470-
navLinks = allMenus
471-
.filter(link => !link.classList.contains('external'))
472-
.map(link => link.href);
473-
versionsLinks = Array.from(document.querySelectorAll('#versions > li > a'));
474-
475218
if (window.location.pathname === '/documentation.html') {
476219
showTip();
477220
}
478-
buildPageToC();
479-
480-
navigationFitScroll();
481221
buildJSCodeBlocksFromTS();
482-
loadNewsletterScript();
483222
});

0 commit comments

Comments
 (0)