astro-accelerator 4.0.0 → 4.0.2

package/public/js/modules/headers.js

@@ -1,21 +0,0 @@
-import { qsa } from './query.js';
-
-/** 
- * Enables copy on code blocks (<pre><code>...)
-*/
-function enhanceHeaders() {
-
-    // Make code blocks focusable, so they can be keyboard scrolled
-    qsa('h2[id], h3[id], h4[id], h5[id], h6[id]').forEach((elem) => {
-        const linkContainer = document.createElement('a');
-        linkContainer.href = `#${elem.id}`;
-        linkContainer.className = 'bookmark-link';
-        linkContainer.innerHTML = 'Bookmark'
-        console.log(elem, typeof elem);
-        elem.appendChild(linkContainer);
-    });
-
-   
-}
-
-export { enhanceHeaders }

package/public/js/modules/input-type.js

@@ -1,53 +0,0 @@
-// @ts-check
-
-let inputType = 'unknown';
-
-/**
- * Sets the user input mode as a class
- */
-function monitorInputType() {
-    window.addEventListener('keydown', event => {
-        const eventType = 'input-keyboard';
-        processInput(eventType);
-    });
-
-    window.addEventListener('mousemove', event => {
-        const eventType = 'input-mouse';
-        processInput(eventType);
-    });
-
-    window.addEventListener('touchstart', event => {
-        const eventType = 'input-touch';
-        processInput(eventType);
-    });
-}
-
-/**
- * Processes the keyboard, mouse, or touch event
- * @param {string} eventType 
- */
-function processInput(eventType) {
-    if (inputType !== eventType) {
-        removeClass(inputType);
-        inputType = eventType;
-        addClass(inputType);
-    }
-}
-
-/**
- * Removes an input type class from the body
- * @param {string} inputType 
- */
-function removeClass(inputType) {
-    document.body.classList.remove(inputType);
-}
-
-/**
- * Adds an input type class to the body
- * @param {string} inputType 
- */
-function addClass(inputType) {
-    document.body.classList.add(inputType);
-}
-
-export { monitorInputType };

package/public/js/modules/nav-mobile.js

@@ -1,159 +0,0 @@
-// @ts-check
-
-import { qs, qsa } from './query.js';
-import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus.js';
-
-/**
- * Provides an overlay with the navigation for mobile users.
- * 
- * Example: You have site navigation on the page, but demote it (closer to the footer) on mobile to avoid
- * the content being pushed below the fold. You provide an icon that bookmarks to the
- * navigation.
- * 
- * The mobile navigation intercepts the bookmark link and opens the navigation in a modal
- * overlay, trapping keyboard focus until the overlay is closed.
- * 
- * @param {string} resizedEventName
- */
-function addMobileNav(resizedEventName) {
-    const icons = qsa('[data-navigationid]');
-    for (let icon of icons) {
-        addMobileNavigation(icon, resizedEventName);
-    }
-
-    const details = qsa('[data-openon]');
-    for (let detail of details) {
-        const minWidth = parseInt(detail.dataset.openon, 10);
-        const width = window.innerWidth;
-        if (width > minWidth) {
-            detail.setAttribute('open', 'open');
-        }
-    }
-}
-
-/**
- * @param {HTMLElement} icon 
- * @param {string} resizedEventName
- */
- function addMobileNavigation(icon, resizedEventName) {
-    const navigationSelector = icon.dataset.navigationid || '';
-    const iconType = icon.firstElementChild && icon.firstElementChild.tagName == 'svg'
-        ? 'svg'
-        : 'element';
-
-    const originalIcon = icon.innerHTML;
-    const overlay = document.createElement('div');
-    const dataOpen = 'data-open';
-
-    icon.setAttribute('aria-expanded', 'false');
-    icon.setAttribute('aria-controls', navigationSelector);
-
-    // Focus trap (forwards the tab / shift-tab back to the menu)
-    icon.addEventListener('keydown', function(e) { 
-        if (icon.getAttribute(dataOpen) === dataOpen) {
-            var focusElements = getFocusableElement(overlay);
-            trapFocusForward(e, focusElements.first); 
-            trapReverseFocus(e, focusElements.last);
-        }
-    });
-
-    // Close menu on escape-key press
-    document.addEventListener('keydown', function(e) { 
-        if (icon.getAttribute(dataOpen) === dataOpen) {
-            if (e.key === 'Escape') {
-                closeMobileMenu();
-            }
-        }
-    });
-
-    // Opens and closes menu
-    function handleIconInteraction() {
-        if (icon.dataset.open == dataOpen) {
-            closeMobileMenu();
-        } else {
-            openMobileMenu();
-        }
-    }
-
-    function openMobileMenu(){
-        const w1 = document.body.getBoundingClientRect().width;
-        document.body.style.overflow = 'hidden';
-        const w2 = document.body.getBoundingClientRect().width;
-        document.documentElement.style.color = 'red';
-        document.documentElement.style.paddingInlineEnd = (w2 - w1) + 'px';
-
-        console.log(w1, w2, w1 - w2);
-        const menuElement = qs('#' + navigationSelector);
-        
-        overlay.innerHTML = menuElement.outerHTML;
-        overlay.className = 'overlay overlay-menu';
-        overlay.style.display = 'block';
-        menuElement.style.display = 'none';
-
-        qsa('[id]', overlay).forEach((elem) => {
-            elem.id = 'overlay__' + elem.id
-        });
-
-        // Modal Accessibility
-        const title = menuElement.getAttribute('aria-label') ?? '';
-        overlay.setAttribute('role', 'dialog');
-        overlay.setAttribute('aria-modal', 'true');
-        overlay.setAttribute('aria-label', title);
-
-        // Trap Focus to Visible Overlay
-        const focusElements = getFocusableElement(overlay);
-
-        focusElements.first.addEventListener('keydown', function(e) {
-            trapReverseFocus(e, icon);
-        })
-        focusElements.last.addEventListener('keydown', function(e) { 
-            trapFocusForward(e, icon); 
-        });
-
-        if (iconType === 'svg') {
-            icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" 
-                width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" 
-                fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>`;
-        }
-
-        document.body.appendChild(overlay);
-        icon.setAttribute(dataOpen, dataOpen);
-        icon.setAttribute('aria-expanded', 'true');
-        focusElements.first.focus();
-    }
-
-    function closeMobileMenu() {
-        const menuElement = qs('#' + navigationSelector);
-        menuElement.style.display = '';
-        document.body.style.overflow = 'auto';
-        document.documentElement.style.paddingInlineEnd = '0';
-
-        if (icon.getAttribute(dataOpen) === dataOpen) {
-            overlay.innerHTML = '';
-            overlay.style.display = 'none';
-            document.body.removeChild(overlay);
-        }
-
-        icon.innerHTML = originalIcon;
-        icon.removeAttribute(dataOpen);
-        icon.setAttribute('aria-expanded', 'false');
-    }
-
-    icon.addEventListener('click', function (e) {
-        e.preventDefault();
-        handleIconInteraction();
-        return false;
-    });
-
-    document.addEventListener(resizedEventName, function (/** @type {any} */e) {
-        if (e.detail.change.width > 0) {
-            closeMobileMenu();
-        }
-    })
-}
-
-export { addMobileNav };

package/public/js/modules/nav-sticky.js

@@ -1,56 +0,0 @@
-// @ts-check
-
-import { qs } from './query.js';
-
-/**
- * Makes an existing navigation element sticky
- * 
- * Example: If the existing navigation is not as tall as the content, the
- * navigation will stick to the top, allowing the user to see it as 
- * they scroll through the article
- * 
- * @param {string} headerSelector 
- * @param {string} navigationSelector 
- * @param {string} navigationListSelector 
- * @param {string} resizedEventName
- */
-function addStickyNavigation(headerSelector, navigationSelector, navigationListSelector, resizedEventName) {
-    function setNavigationMode() {
-        const header = qs(headerSelector);
-        const navigation = qs(navigationSelector);
-        const navigationList = qs(navigationListSelector); 
-        
-        const buffer = 50;
-        const className = 'sticky';
-
-        const dimensions = {
-            browserHeight: window.innerHeight,
-            browserWidth: window.innerWidth,
-            headerHeight: header.clientHeight,
-            navigationHeight: navigationList.clientHeight
-        };
-
-        // Only enable sticky mode if the menu will fit vertically
-        // && where the browser is more than 860px wide
-        if (dimensions.navigationHeight < ((dimensions.browserHeight - Math.max(dimensions.headerHeight, site_features.stickyNav.top)) - buffer)
-            && dimensions.browserWidth > 860) {
-            console.log('Navigation: Sticky Mode');
-            navigation.classList.add(className);
-            const top = site_features.stickyNav.top ?? 220;
-            navigation.style.top = top + 'px';
-        } else {
-            console.log('Navigation: Fixed Mode');
-            navigation.classList.remove(className);
-        }
-    }
-
-    setNavigationMode();
-
-    document.addEventListener(resizedEventName, function(e) {
-        if (e.detail && e.detail.change && e.detail.change.height != 0) {
-            setNavigationMode();
-        }
-    });
-}
-
-export { addStickyNavigation };

package/public/js/modules/query.js

@@ -1,41 +0,0 @@
-// @ts-check
-
-/**
- * 
- * @param {string} query 
- * @param {HTMLElement} [container]
- * @returns {HTMLElement}
- */
-function qs(query, container) {
-    const target = (container)
-        ? container
-        : document;
-
-    /** @type {any} */
-    const result = target.querySelector(query);
-
-    if (result) {
-        return result;
-    }
-
-    throw new Error(`No element ${query}`);
-}
-
-/**
- * Utility for query selector all
- * 
- * @param {string} query
- * @param {HTMLElement | null} [container]
- * @returns {NodeListOf<any>}
- */
- function qsa(query, container) {
-    const target = (container)
-        ? container
-        : document;
-
-    /** @type {NodeListOf<HTMLElement>} */
-    const result = target.querySelectorAll(query);
-    return result;
-}
-
-export { qs, qsa };

package/public/js/modules/resizing.js

@@ -1,43 +0,0 @@
-// @ts-check
-
-import { raiseEvent } from './events.js';
-
-var resizeEventName = 'resize';
-var resizedEventName = 'resized';
-
-var width = window.innerWidth;
-var height = window.innerHeight;
-
-/**
- * Adds a de-bounced "resized" event, so you can listen to:
- * document.addEventListener('resized', <handler>);
- * 
- * @returns {string}
- */
- function addResizedEvent() {
-    let debounce = null;
-
-    function resizeEnd(e) {
-        window.clearTimeout(debounce);
-        debounce = window.setTimeout(raiseResizeEvent, 500);
-    }
-
-    function raiseResizeEvent() {
-        const change = {
-            width: window.innerWidth - width,
-            height: window.innerHeight - height
-        };
-
-        width = window.innerWidth;
-        height = window.innerHeight;
-        
-
-        raiseEvent(resizedEventName, { change: change });
-    }
-
-    window.addEventListener(resizeEventName, resizeEnd);
-
-    return resizedEventName;
-}
-
-export { addResizedEvent };

package/public/js/modules/search-dialog.js

@@ -1,69 +0,0 @@
-// @ts-check
-
-function enhanceSearchIcon() {
-    if (document.querySelector('#site-search-query') == null) {
-        const icon = document.querySelector('a.search-icon');
-
-        if (icon != null) {
-            fetch(icon.href)
-                .then(response => response.text())
-                .then(html => {
-                    const parser = new DOMParser();
-                    const doc = parser.parseFromString(html, 'text/html');
-                    const form = doc.querySelector('#site-search');
-                    const input = form.querySelector('#site-search-query');
-                    const results = doc.querySelector('#site-search-results');
-                    icon.setAttribute('aria-expanded', 'false');
-                    
-                    input?.setAttribute('autofocus', 'autofocus');
-
-                    const close = document.createElement('button');
-                    close.id = 'site-search-close';
-                    close.value = 'cancel';
-                    close.formMethod = 'dialog';
-                    close.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                    </svg>`;
-                    
-                    const script = doc.querySelector('script[src*="/search.js"]');
-                    const scr = document.createElement('script');
-                    for (let att, i = 0, atts = script.attributes, n = atts.length; i < n; i++){
-                        att = atts[i];
-                        scr.setAttribute(att.nodeName, att.nodeValue ?? '');
-                    }
-
-                    const dialog = document.createElement('dialog');
-                    dialog.className = 'search-dialog';
-                    dialog.append(close, form, results);
-                    
-                    document.body.appendChild(dialog);
-                    document.body.appendChild(scr);
-
-                    function openSearch(e) {
-                        e.preventDefault();
-                        dialog.showModal();
-                        icon.setAttribute('aria-expanded', 'true');
-                        return false;
-                    }
-
-                    // Open search on CTRL + SPACE
-                    window.onkeydown = function(e) {
-                        if (e.ctrlKey && e.key == ' ') {
-                            return openSearch(e);
-                        }
-                    };
-
-                    // Open search on click
-                    icon.addEventListener('click', openSearch);
-
-                    // Close dialog
-                    close.addEventListener('click', () => dialog.close());
-                    dialog.addEventListener('close', () => icon.setAttribute('aria-expanded', 'false'));
-                });
-        }
-    }
-}
-
-export { enhanceSearchIcon };

package/public/js/modules/share.js

@@ -1,31 +0,0 @@
-import { qs, qsa } from './query.js';
-
-function handleClick() {
-
-    const title = this.dataset.sharetitle ?? qs('meta[property="og:title"]').content;
-    const text = this.dataset.sharetext ?? qs('meta[property="og:description"]').content;
-    const url = this.dataset.shareurl ?? document.location;
-
-    const share = {
-        title: title,
-        text: text,
-        url: url
-    };
-
-    if (navigator.share) {
-        navigator.share(share);
-    }
-}
-
-function enableSharing() {
-    const canShare = !!navigator.share;
-    qsa('[data-share]').forEach((elem) => {
-        if (canShare) {
-            elem.addEventListener('click', handleClick);
-        } else {
-            elem.style.display = 'none';
-        }
-    });
-}
-
-export { enableSharing }

package/public/js/modules/string.js

@@ -1,77 +0,0 @@
-// @ts-check
-
-/**
- * Looks for a search within a string
- * 
- * @param {string} string 
- * @param {string} search 
- * @returns 
- */
-function contains(string, search) {
-    return string.indexOf(search) > -1;
-}
-
-/**
- * Looks for a search within a string
- * 
- * @param {string} string 
- * @param {string} search 
- * @returns 
- */
-function containsWord(string, search) {
-    return string.split(' ').indexOf(search) > -1;
-}
-
-/**
- * 
- * @param {string} string 
- * @param {string[]} terms 
- * @returns 
- */
-function highlight(string, terms) {
-    terms.forEach(term => {
-        const regEx = new RegExp(term, "ig");
-        const matches = string.match(regEx);
-        if (matches) {
-            string = string.replace(regEx, `<mark>${matches[0]}</mark>`)
-        }
-    });
-    return string;
-}
-
-/**
- * Simplifies a string to plain lower case, removing diacritic characters and hyphens
- * This means a search for "co-op" will be found in "COOP" and "Café" will be found in "cafe"
- * @param {string} string 
- * @returns {string}
- */
- function sanitise(string) {
-    // @ts-ignore
-    if (String.prototype.normalize) {
-        // Reduces diacritic characters to plain characters
-        string.trim().normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().replace(/-/g, '');
-    }
-
-    // Some browsers can't normalise strings
-    return string.trim().toLowerCase().replace(/-/g, '');
-}
-
-/**
- * Sets a minimum length for a search
- * @param {string} string 
- * @returns 
- */
- function isLongEnough(string) {
-    return string.length > 1;
-}
-
-/**
- * 
- * @param {string} string 
- * @returns {string[]}
- */
-function explode(string) {
-    return string.split(' ').filter(isLongEnough).map(sanitise);
-}
-
-export { contains, containsWord, sanitise, explode, highlight };

package/public/js/modules/toc.js

@@ -1,82 +0,0 @@
-// @ts-check
-
-import { qsa } from './query.js';
-
-let links = [];
-let current = '';
-const headings = [];
-const highlightClass = 'highlight';
-
-/**
- * Makes an entire block clickable based on a data-attribute, usually "data-destination"
- * 
- * Example: You have a list of blog posts, including featured images. If you make the title
- * clickable, clicks on the image won't open the blog. Adding links to the images means
- * keyboard users have to tab twice as much to get through the list.
- * 
- * Use clickable blocks to allow keyboard users to tab through the real links, but still
- * capture clicks elsewhere on the block.
- * 
- */
-function highlightCurrentHeading(tocSelector) {
-    links = qsa(tocSelector);
-
-    links.forEach((link) => {
-        const bookmarkLink = getBookmarkLink(link.href);
-        if (bookmarkLink) {
-            headings.push(document.getElementById(bookmarkLink));
-        }
-    });
-
-    recheck();
-}
-
-function getBookmarkLink(link) {
-    const linkParts = link.split('#');
-    if (linkParts.length === 2) {
-        return linkParts[1];
-    }
-
-    return '';
-}
-
-function highlight(id) {
-    links.forEach((link) => {
-        link.classList.remove(highlightClass);
-
-        const bookmarkLink = getBookmarkLink(link.href);
-        if (bookmarkLink === id) {
-            link.classList.add(highlightClass);
-        }
-    });
-}
-
-function recheck() {
-    const docTop = Math.floor(document.documentElement.scrollTop);
-    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
-
-    const validItems = [];
-
-    headings.forEach((elem) => {
-        
-        const hasPassed = (elem.offsetTop < docTop);
-        const inView = (elem.offsetTop > docTop) && (elem.offsetTop < (docTop + vh));
-        const isValid = (docTop + vh) - elem.offsetTop > (vh / 1.5);
-
-        if (isValid) {
-            validItems.push(elem);
-        }
-    });
-
-    const item = validItems.pop();
-
-    if (item && item.id !== current) {
-        console.log('Reading', item.id);
-        current = item.id;
-        highlight(item.id);
-    }
-
-    window.setTimeout(recheck, 1000);
-}
-
-export { highlightCurrentHeading };

package/public/js/modules/youtube.js

@@ -1,44 +0,0 @@
-// @ts-check
-
-import { qsa } from './query.js';
-
-function enhanceYoutubeLinks() {
-    const videos = qsa('a[href^="https://www.youtube.com/watch?v="]');
-
-    for (var video of videos) {
-        if (video.parentNode.childNodes.length > 1) {
-            // Don't turn video into embed if it's part of a longer paragraph, for example.
-            continue;
-        }
-
-        const id = new URL(video.href).searchParams.get('v');
-        video.setAttribute('data-youtube', id);
-        video.classList.add('init');
-        video.setAttribute('role', 'button');
-
-        video.innerHTML = `<div class="yt-video">
-        <div class="play-icon" style="background-image: url(https://img.youtube.com/vi/${id}/0.jpg)">▶</div>
-        <div class="title">${video.textContent}</div>
-        </div>`;
-    }
-
-    function clickHandler (event) {
-        var link = event.target.closest('[data-youtube]');
-
-        if (!link) {
-            return;
-        }
-
-        event.preventDefault();
-        var id = link.getAttribute('data-youtube');
-
-        var player = document.createElement('div');
-        player.innerHTML = `<iframe class="yt-iframe" width="560" height="315" src="https://www.youtube-nocookie.com/embed/${id}?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
-
-        link.replaceWith(player);
-    }
-
-    document.addEventListener('click', clickHandler);
-}
-
-export { enhanceYoutubeLinks }