astro-accelerator 4.0.0 → 4.0.2

package/public/css/vars.css

@@ -1,89 +0,0 @@
-/* Recommended Tools
-    Check accessibility for colour combinations
-    https://toolness.github.io/accessible-color-matrix/
-*/
-
-:root {
-    --fore: #333;
-    --fore-headings: #225;
-    --aft: #FBFBFC;
-
-    --fore-link: #2d4295;
-    --fore-link-alt: #4D71FF;
-    --aft-link-alt: #F3F5FF;
-
-    --fore-head: #333;
-    --aft-head: #E6E8F1;
-
-    --fore-breadcrumb: #333;
-    --aft-breadcrumb: #F3F5FF;
-
-    --link-head: #2d4295;
-    --link-alt-head: #2a4dd8;
-
-    --fore-block: #333;
-    --aft-block: #F3F5FF;
-    --icon-block: #4D71FF;
-    
-    --fore-table-head: #FDFDFE;
-    --aft-table-head: #2F3141;
-    --fore-table-row-odd: #333;
-    --aft-table-row-odd: #FDFDFE;
-    --fore-table-row-even: #333;
-    --aft-table-row-even: #F3F5FF;
-
-    --heading-font: Georgia, 'Times New Roman', Times, serif;
-    --content-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    --code-font: Consolas, 'Courier New', Courier, monospace;
-    --unicode-font: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
-
-    --block-gap: 2rem;
-    --block-radius: 0.3rem;
-
-    --marker-size: 1.2rem;
-    --paragraph-margin: 1.2rem;
-
-    --box-shadow: 0 12px 24px -12px rgb(0 0 0 / 80%);
-    --box-shadow-slight: 0 6px 12px -6px rgb(0 0 0 / 40%);
-
-    --content-width: 78vw;
-    --navigation-width: 260px;
-    --grid-gap: 1rem;
-    --grid-max-width: 60rem;
-    --grid-width: 90vw;
-
-    /* Calculate the mobile width by removing l/r columns and grid gap */
-    --content-width-mobile: calc(100vw - (1rem * 2));
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --fore: #CCC;
-        --fore-headings: #CCE;
-        --aft: #333;
-    
-        --fore-link: #abb9ef;
-        --fore-link-alt: #abb9ef;
-        --aft-link-alt: #232323;
-        
-        --fore-head: #CCC;
-        --aft-head: #222;
-
-        --fore-breadcrumb: #CCC;
-        --aft-breadcrumb: #2C2C2C;
-
-        --link-head: #abb9ef;
-        --link-alt-head: #6580ed;
-
-        --fore-block: #CCC;
-        --aft-block: #111;
-        --icon-block: #abb9ef;
-
-        --fore-table-head: #CCC;
-        --aft-table-head: #222; 
-        --fore-table-row-odd: #CCC;
-        --aft-table-row-odd: #333;
-        --fore-table-row-even: #CCC;
-        --aft-table-row-even: #444;
-    }
-}

package/public/js/main.js

@@ -1,66 +0,0 @@
-// @ts-check
-import { addIntersectionObserver, addListImageIntersectionObserver } from './modules/animation.js';
-import { addResizedEvent } from './modules/resizing.js';
-import { addStickyNavigation } from './modules/nav-sticky.js';
-import { addMobileNav } from './modules/nav-mobile.js';
-import { setClickableBlocks } from './modules/click-blocks.js';
-import { setExternalLinkAttributes } from './modules/external-links.js';
-import { monitorInputType } from './modules/input-type.js';
-import { enableSharing } from './modules/share.js';
-import { highlightCurrentHeading } from './modules/toc.js';
-
-const resizedEventName = addResizedEvent();
-
-setClickableBlocks();
-setExternalLinkAttributes();
-addStickyNavigation('.site-header', '#site-nav', '#site-nav > ul', resizedEventName);
-addMobileNav(resizedEventName);
-addIntersectionObserver('.anim-show-parent img, .anim-show-parent .list-item');
-addListImageIntersectionObserver('.post-list img');
-monitorInputType();
-enableSharing();
-highlightCurrentHeading('.page-toc a');
-
-// @ts-ignore
-const f = site_features ?? {};
-
-/**
- * 
- * @param {string[]} settings 
- * @param {string} option 
- * @returns 
- */
-function enabled(settings, option) {
-    return settings
-        && settings.includes(option);
-}
-
-if (enabled(f.details, 'tabs')) {
-    const tabs = await import('./modules/detail-tabs.js');
-    tabs.enhanceDetailGroups();
-}
-
-if (enabled(f.youTubeLinks, 'embed')) {
-    const youTube = await import('./modules/youtube.js');
-    youTube.enhanceYoutubeLinks();
-}
-
-if (enabled(f.codeBlocks, 'copy')) {
-    const codeBlocks = await import('./modules/code-blocks.js');
-    codeBlocks.enhanceCodeBlocks();
-}
-
-if (enabled(f.figures, 'enlarge')) {
-    const figures = await import('./modules/figures.js');
-    figures.enhanceFigures();
-}
-
-if (enabled(f.headers, 'link')) {
-    const headers = await import('./modules/headers.js');
-    headers.enhanceHeaders();
-}
-
-if (enabled(f.search, 'dialog')) {
-    const searchDialog = await import ('./modules/search-dialog.js');
-    searchDialog.enhanceSearchIcon();
-}

package/public/js/modules/animation.js

@@ -1,69 +0,0 @@
-// @ts-check
-
-import { qsa } from './query.js';
-
-/**
- * Assists animation by setting "--shown" CSS property
- * 
- * When an item is visible in the viewport, it will have --shown: 1
- * Otherwise it will be --shown: 0
- * This allows CSS transitions and calculated properties to animate elements
- * 
- * Example
- *     transition: all 0.2s ease-in;
- *     scale: calc(0.75 + (var(--shown, 1) * 0.25));
- * 
- * @param {string} listItemQuery 
- */
-function addIntersectionObserver(listItemQuery) {
-    function handleIntersection(entries, observer) {
-        for (let entry of entries) {
-            const value = entry.isIntersecting ? 1 : 0;
-            entry.target.style.setProperty('--shown', value);
-        }
-    }
-
-    const options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0
-    };
-
-    const observer = new IntersectionObserver(handleIntersection, options)
-
-    qsa(listItemQuery).forEach((elem) => observer.observe(elem));
-}
-
-/**
- * Assists animation by setting "--shown" CSS property
- * 
- * When an item is visible in the viewport, it will have --shown: 1
- * Otherwise it will be --shown: 0
- * This allows CSS transitions and calculated properties to animate elements
- * 
- * Example
- *     transition: all 0.2s ease-in;
- *     scale: calc(0.75 + (var(--shown, 1) * 0.25));
- * 
- * @param {string} imgItemQuery 
- */
- function addListImageIntersectionObserver(imgItemQuery) {
-    function handleIntersection(entries, observer) {
-        for (let entry of entries) {
-            const value = entry.isIntersecting ? 1 : 0;
-            entry.target.style.setProperty('--imgshown', value);
-        }
-    }
-
-    const options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-    };
-
-    const observer = new IntersectionObserver(handleIntersection, options)
-
-    qsa(imgItemQuery).forEach((elem) => observer.observe(elem));
-}
-
-export { addIntersectionObserver, addListImageIntersectionObserver };

package/public/js/modules/click-blocks.js

@@ -1,42 +0,0 @@
-// @ts-check
-
-import { qsa } from './query.js';
-
-const dataAttributeName = 'data-destination';
-
-/**
- * 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 setClickableBlocks() {
-    qsa('[' + dataAttributeName + ']').forEach((listItem) => {
-        listItem.style.cursor = 'pointer';
-        listItem.addEventListener('click', handleClick);
-        listItem.addEventListener('touch', handleClick);
-    });
-}
-
-/**
- * Handles the block-level clicks
- * 
- * @param {Event} e 
- * @returns 
- */
-function handleClick(e) {
-    const location = this.getAttribute(dataAttributeName);
-
-    if (location) {
-        e.preventDefault();
-        document.location = location;
-        return false;
-    }
-}
-
-export { setClickableBlocks };

package/public/js/modules/code-blocks.js

@@ -1,59 +0,0 @@
-import { qs, qsa } from './query.js';
-
-const activeClass = "copy-button";
-
-const clipboard = `<svg xmlns="http://www.w3.org/2000/svg" title="Copy" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
-<rect x="9" y="3" width="6" height="4" rx="2" />
-</svg>`;
-
-const clipboardDone = `<svg xmlns="http://www.w3.org/2000/svg" title="Copied" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
-<rect x="9" y="3" width="6" height="4" rx="2" />
-<path d="M9 14l2 2l4 -4" />
-</svg>`;
-
-const clipboardError = `<svg xmlns="http://www.w3.org/2000/svg" title="Cannot copy" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
-<rect x="9" y="3" width="6" height="4" rx="2" />
-<path d="M10 12l4 4m0 -4l-4 4" />
-</svg>`
-
-/** 
- * Enables copy on code blocks (<pre><code>...)
-*/
-function enhanceCodeBlocks() {
-
-    // Make code blocks focusable, so they can be keyboard scrolled
-    qsa('pre.astro-code').forEach((elem) => elem.setAttribute('tabindex', '0'));
-
-    qsa(`pre:not(.${activeClass})`).forEach(node => {
-        const copy = document.createElement('button');
-        copy.classList.add(activeClass);
-        copy.innerHTML = clipboard;
-        copy.title = 'Copy';
-
-        const copyContainer = document.createElement('div');
-        copyContainer.className = 'copy-container';
-        copyContainer.appendChild(copy);
-
-        node.insertAdjacentElement('beforebegin', copyContainer);
-        copy.addEventListener('click', async () => {
-            if (navigator.clipboard) {
-                // @ts-ignore
-                const text = qs('code', node).innerText;
-                await navigator.clipboard.writeText(text);
-                copy.innerHTML = clipboardDone;
-            } else {
-                copy.innerHTML = clipboardError;
-            }
-
-            setTimeout(() => copy.innerHTML = clipboard, 2000);
-        });
-    });
-}
-
-export { enhanceCodeBlocks }

package/public/js/modules/detail-tabs.js

@@ -1,194 +0,0 @@
-import { qs, qsa } from './query.js';
-
-function unique(value, index, array) {
-    return array.indexOf(value) === index;
-}
-
-/** 
- * Converts <detail data-group="id"> into tabs
-*/
-function enhanceDetailGroups() {
-    const details = qsa('details[data-group]');
-    const groups = [];
-
-    details.forEach(d => d.dataset && d.dataset.group && groups.push(d.dataset.group));
-    let uniqueGroups = groups.filter(unique);
-
-    uniqueGroups.forEach(g => {
-        const participants = qsa(`details[data-group='${ g }']`);
-        if (participants.length === 0) {
-            return;
-        }
-
-        const tablist = document.createElement('div');
-        tablist.role = 'tablist';
-        tablist.className = 'tab-list';
-        participants[0].parentNode.insertBefore(tablist, participants[0]);
-        
-        participants.forEach((p, i) => {
-
-            const heading = qs('summary', p);
-
-            // Create the tab panel
-
-            const tabPanel = document.createElement('div');
-            tabPanel.setAttribute('tabindex', '0');
-            tabPanel.setAttribute('role', 'tabpanel');
-            tabPanel.setAttribute('aria-labelledby', `aatb_${ g }_${ i }`);
-            tabPanel.id = `aatb_panel_${ g }_${ i }`;
-
-            const content = document.createElement('div');
-            content.innerHTML = p.innerHTML;
-            const contentSummary = qs('summary', content);
-            content.removeChild(contentSummary);
-
-            tabPanel.appendChild(content);
-
-            participants[0].parentNode.insertBefore(tabPanel, participants[0]);
-
-            // Create the tab control
-
-            const tabButton = document.createElement('button');
-            tabButton.id = `aatb_${ g }_${ i }`;
-            tabButton.type = 'button';
-            tabButton.setAttribute('role', 'tab');
-            tabButton.setAttribute('aria-selected', i == 0 ? 'true' : 'false');
-            tabButton.setAttribute('aria-controls', tabPanel.id);
-
-            const tabHeading = document.createElement('span');
-            tabHeading.className = 'focus';
-            tabHeading.innerText = heading.innerText;
-            
-            tabButton.appendChild(tabHeading);
-            tablist.appendChild(tabButton);
-        });
-
-        new TabsManual(tablist);
-
-        participants.forEach((p, i) => {
-            p.parentNode.removeChild(p);
-        });
-
-        // remove details elements
-    });
-    
-}
-
-class TabsManual {
-    constructor(groupNode) {
-      this.tablistNode = groupNode;
-  
-      this.tabs = [];
-  
-      this.firstTab = null;
-      this.lastTab = null;
-  
-      this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab]'));
-      this.tabpanels = [];
-  
-      for (var i = 0; i < this.tabs.length; i += 1) {
-        var tab = this.tabs[i];
-        var tabpanel = document.getElementById(tab.getAttribute('aria-controls'));
-  
-        tab.tabIndex = -1;
-        tab.setAttribute('aria-selected', 'false');
-        this.tabpanels.push(tabpanel);
-  
-        tab.addEventListener('keydown', this.onKeydown.bind(this));
-        tab.addEventListener('click', this.onClick.bind(this));
-  
-        if (!this.firstTab) {
-          this.firstTab = tab;
-        }
-        this.lastTab = tab;
-      }
-  
-      this.setSelectedTab(this.firstTab);
-    }
-  
-    setSelectedTab(currentTab) {
-      for (var i = 0; i < this.tabs.length; i += 1) {
-        var tab = this.tabs[i];
-        if (currentTab === tab) {
-          tab.setAttribute('aria-selected', 'true');
-          tab.removeAttribute('tabindex');
-          this.tabpanels[i].classList.remove('is-hidden');
-        } else {
-          tab.setAttribute('aria-selected', 'false');
-          tab.tabIndex = -1;
-          this.tabpanels[i].classList.add('is-hidden');
-        }
-      }
-    }
-  
-    moveFocusToTab(currentTab) {
-      currentTab.focus();
-      this.setSelectedTab(currentTab);
-    }
-  
-    moveFocusToPreviousTab(currentTab) {
-      var index;
-  
-      if (currentTab === this.firstTab) {
-        this.moveFocusToTab(this.lastTab);
-      } else {
-        index = this.tabs.indexOf(currentTab);
-        this.moveFocusToTab(this.tabs[index - 1]);
-      }
-    }
-  
-    moveFocusToNextTab(currentTab) {
-      var index;
-  
-      if (currentTab === this.lastTab) {
-        this.moveFocusToTab(this.firstTab);
-      } else {
-        index = this.tabs.indexOf(currentTab);
-        this.moveFocusToTab(this.tabs[index + 1]);
-      }
-    }
-  
-    /* EVENT HANDLERS */
-  
-    onKeydown(event) {
-      var tgt = event.currentTarget,
-        flag = false;
-  
-      switch (event.key) {
-        case 'ArrowLeft':
-          this.moveFocusToPreviousTab(tgt);
-          flag = true;
-          break;
-  
-        case 'ArrowRight':
-          this.moveFocusToNextTab(tgt);
-          flag = true;
-          break;
-  
-        case 'Home':
-          this.moveFocusToTab(this.firstTab);
-          flag = true;
-          break;
-  
-        case 'End':
-          this.moveFocusToTab(this.lastTab);
-          flag = true;
-          break;
-  
-        default:
-          break;
-      }
-  
-      if (flag) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    }
-  
-    onClick(event) {
-      this.setSelectedTab(event.currentTarget);
-    }
-  }
-  
-
-export { enhanceDetailGroups }

package/public/js/modules/events.js

@@ -1,19 +0,0 @@
-// @ts-check
-
-/**
- * 
- * @param {string} name 
- * @param {{[key: string]: any}} detail 
- * @param {Document | HTMLElement} [target]
- */
-function raiseEvent(name, detail, target) {
-    if (!target) {
-        target = document;
-    }
-
-    const event = new CustomEvent(name, { detail: detail});
-    document.dispatchEvent(event);
-    console.log('Event Raised', name, detail);
-}
-
-export { raiseEvent };

package/public/js/modules/external-links.js

@@ -1,20 +0,0 @@
-import { qsa } from './query.js';
-
-function setExternalLinkAttributes() {
-    // Open external links in a new tab
-    qsa('a[href^=http]').forEach((link) => {
-        // Open external links in a new tab
-        const destination = new URL(link.href);
-        if (destination.hostname != window.location.hostname) {
-            if (!link.target) {
-                link.setAttribute('target', '_blank');
-            }
-
-            if (!link.rel) {
-                link.setAttribute('rel', 'noopener');
-            }
-        }
-    });
-}
-
-export { setExternalLinkAttributes }

package/public/js/modules/figures.js

@@ -1,28 +0,0 @@
-import { qs, qsa } from './query.js';
-
-const activeClass = 'magnify-icon';
-
-/** 
- * Enables opening image in new tab
-*/
-function enhanceFigures() {
-    qsa(`figure > p > img`).forEach(node => {
-        const src = node.src;
-
-        const magnify = document.createElement('button');
-        magnify.classList.add(activeClass);
-        magnify.title = 'Enlarge';
-
-        const magnifyContainer = document.createElement('div');
-        magnifyContainer.className = 'magnify-container';
-        magnifyContainer.appendChild(magnify);
-
-        node.insertAdjacentElement('beforebegin', magnifyContainer);
-
-        magnify.addEventListener('click', async () => {
-            window.open(src);
-        });
-    });
-}
-
-export { enhanceFigures }

package/public/js/modules/focus.js

@@ -1,76 +0,0 @@
-// @ts-check
-
-import { qsa } from './query.js';
-
-/**
- * Gets first, last, and all focusable elements in the target
- * 
- * For the supplied element, finds all the elements that can receive keyboard focus.
- * 
- * Examples: a, button, input, textarea, select, and other valid interactive items
- * that haven't been disabled or hidden.
- * 
- * @param {HTMLElement} target element
- * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}}
- */
- function getFocusableElement(target) {
-    const focusElements = Array.from(
-        qsa('a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])', target)
-    ).filter(function(el) {
-        return !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden');
-    });
-    
-    return {
-        first: focusElements[0],
-        last: focusElements[focusElements.length -1],
-        all: focusElements
-    };
-}
-
-/**
- * Mechanism to trap focus
- * 
- * @param {KeyboardEvent} event 
- * @param {HTMLElement} focusItem 
- * @returns 
- */
-function trapFocus(event, focusItem) {
-    switch (event.code.toLowerCase()) {
-        case 'tab':
-        event.preventDefault();    
-        focusItem.focus();
-        return false;
-    }
-}
-
-/**
- * Mechanism to trap focus (TAB)
- * 
- * @param {KeyboardEvent} event 
- * @param {HTMLElement} focusItem 
- * @returns 
- */
-function trapFocusForward(event, focusItem) {
-    if (event.shiftKey) {
-        return;
-    }
-
-    trapFocus(event, focusItem);
-}
-
-/**
- * Mechanism to trap tab (SHIFT + TAB)
- * 
- * @param {KeyboardEvent} event 
- * @param {HTMLElement} focusItem 
- * @returns 
- */
-function trapReverseFocus(event, focusItem) {
-    if (!event.shiftKey) {
-        return;
-    }
-
-    trapFocus(event, focusItem);
-}
-
-export { getFocusableElement, trapFocusForward, trapReverseFocus };