astro-accelerator 0.0.1

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

@@ -0,0 +1,122 @@
+// @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} iconSelector 
+ * @param {string} navigationSelector 
+ * @param {string} resizedEventName
+ */
+ function addMobileNavigation(iconSelector, navigationSelector, resizedEventName) {
+    const icon = qs(iconSelector);
+    const originalIcon = icon.innerHTML;
+    const overlay = document.createElement('div');
+    const dataOpen = 'data-open';
+
+    // 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(){
+        document.body.style.overflow = 'hidden';
+        const menuElement = qs(navigationSelector);
+        
+        overlay.innerHTML = menuElement.outerHTML;
+        overlay.className = 'overlay overlay-menu';
+        overlay.style.display = 'block';
+
+        qsa('[id]', overlay).forEach((elem) => {
+            elem.id = 'overlay__' + elem.id
+        });
+
+        // Modal Accessibility
+        const title = qs('.site-nav-title', overlay);
+        title.setAttribute('id', 'modal-title');
+        title.setAttribute('tabindex', '-1');
+        overlay.setAttribute('role', 'dialog');
+        overlay.setAttribute('aria-modal', 'true');
+        overlay.setAttribute('aria-labelledby', 'modal-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); 
+        });
+
+        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);
+        focusElements.first.focus();
+    }
+
+    function closeMobileMenu() {
+        document.body.style.overflow = 'auto';
+
+        if (icon.getAttribute(dataOpen) === dataOpen) {
+            overlay.innerHTML = '';
+            overlay.style.display = 'none';
+            document.body.removeChild(overlay);
+        }
+
+        icon.innerHTML = originalIcon;
+        icon.removeAttribute(dataOpen);
+    }
+
+    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 { addMobileNavigation };

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

@@ -0,0 +1,54 @@
+// @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 
+ */
+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 - dimensions.headerHeight) - buffer)
+            && dimensions.browserWidth > 860) {
+            console.log('Navigation: Sticky Mode');
+            navigation.classList.add(className)
+            navigation.style.top = dimensions.headerHeight.toString() + '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

@@ -0,0 +1,41 @@
+// @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

@@ -0,0 +1,43 @@
+// @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/string.js

@@ -0,0 +1,66 @@
+// @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;
+}
+
+/**
+ * 
+ * @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 
+ */
+ 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, sanitise, explode, highlight };

package/public/js/modules/youtube.js

@@ -0,0 +1,39 @@
+// @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) {
+        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 }

package/public/js/search.js

@@ -0,0 +1,249 @@
+// @ts-check
+
+import { qs } from './modules/query.js';
+import { raiseEvent } from './modules/events.js';
+import { contains, sanitise, explode, highlight } from './modules/string.js';
+
+/**
+type Heading = {
+    text: string;
+    safeText: string;
+    slug: string;
+}
+
+type SearchEntry = {
+    score: number;
+    title: string;
+    safeTitle: string;
+    description: string;
+    safeDescription: string;
+    headings: Heading[];
+    tags: string;
+    url: string;
+    date: string;
+    matchedHeadings: Heading[];
+}
+ */
+
+var dataUrl = qs('#site-search').dataset.sourcedata;
+var haystack = /** @type {SearchEntry} */ [];
+var currentQuery = '';
+
+var ready = false;
+var scrolled = false;
+
+/**
+ * 
+ * @param {string} s 
+ * @returns 
+ */
+function search(s) {
+    const needles = /** @type {SearchEntry} */ [];
+
+    // Clean the input
+    const cleanQuery = sanitise(s);
+
+    if (currentQuery === cleanQuery) {
+        return;
+    }
+
+    raiseEvent('searched', { search: s });
+
+    currentQuery = cleanQuery;
+    const queryTerms = explode(currentQuery);
+
+    s.length > 0 && haystack.forEach( (item) => {
+
+        item.score = 0;
+        item.matchedHeadings = [];
+
+        // Imagine the user searched for "Kitchen Sink"
+        // The scores are arranged below from highest to lowest relevance
+
+        // If the title contains "Kitchen Sink"
+        if (contains(item.safeTitle, currentQuery)) {
+            item.score = item.score + 60;
+        }
+
+        // If a heading contains "Kitchen Sink"
+        item.headings.forEach(c => {
+            if (contains(c.safeText, currentQuery)) {
+                item.score = item.score + 25;
+                item.matchedHeadings.push(c);
+            }
+        });
+
+        // If the title contains "Kitchen Sink"
+        if (contains(item.description, currentQuery)) {
+            item.score = item.score + 20;
+        }
+        
+        queryTerms.forEach(term => {
+            // If the title contains "Kitchen" or "Sink"
+            if (contains(item.safeTitle, term)) {
+                item.score = item.score + 40;
+            }
+
+            // If a heading contains "Kitchen" or "Sink"
+            item.headings.forEach(c => {
+                if (contains(c.safeText, term)) {
+                    item.score = item.score + 15;
+                    if (item.matchedHeadings.filter(h => h.slug == c.slug).length == 0) {
+                        item.matchedHeadings.push(c);
+                    }
+                }
+            });
+
+            // If the description contains "Kitchen" or "Sink"
+            if (contains(item.description, term)) {
+                item.score = item.score + 10;
+            }
+
+            // If a tag contains "Kitchen" or "Sink"
+            item.tags.forEach(t => {
+                if (contains(t, term)) {
+                    item.score = item.score + 5;
+                }
+            });
+        })
+
+        if (item.score > 0) {
+            needles.push(item);
+        }
+    });
+
+    needles.sort(function (a, b){
+        return b.score - a.score;
+    });
+
+    const total = needles.reduce(function (accumulator, needle) {
+        return accumulator + needle.score;
+        }, 0);
+
+    const results = qs('#site-search-results');
+
+    const ol = document.createElement('ol');
+    ol.className = 'site-search-results';
+
+    const limit = Math.min(needles.length, 12);
+
+    // @ts-ignore
+    const siteUrl = new URL(site_url);
+
+    for (let i = 0; i < limit; i++) {
+        const needle = needles[i];
+
+        const address = new URL(needle.url);
+        const isSameHost = siteUrl.host == address.host;
+        const url =  isSameHost ? address.pathname : needle.url;
+
+        const a = document.createElement('a');
+        a.innerHTML = highlight(needle.title, queryTerms);
+        a.href = url;
+
+        const path = document.createElement('div');
+        path.className = 'result-path';
+        path.innerHTML = address.pathname;
+
+        const markers = document.createElement('div');
+        markers.className = 'result-text';
+        markers.innerHTML = highlight(needle.description, queryTerms);
+
+        const headings = document.createElement('ul');
+        markers.className = 'result-headings';
+        console.log(needle.matchedHeadings);
+        needle.matchedHeadings
+            .forEach(h => {
+                const item = document.createElement('li');
+                const link = document.createElement('a');
+                link.href = url + '#' + h.slug;
+                link.innerHTML = highlight(h.text, queryTerms);
+                item.appendChild(link);
+                headings.append(item);
+            });
+
+        const li = document.createElement('li');
+        li.appendChild(a);
+        li.appendChild(path);
+        li.appendChild(markers);
+        li.append(headings);
+        li.dataset.score = (Math.round((needle.score/ total) * 100)).toString();
+
+        ol.appendChild(li);
+    }
+
+    var h2 = document.createElement('h2');
+    h2.innerHTML = needles.length === 0
+        ? results.dataset.emptytitle || 'No Results'
+        : results.dataset.title || 'Results';
+
+    results.innerHTML = '';
+    results.appendChild(h2);
+    results.appendChild(ol);
+}
+
+var debounceTimer;
+
+function debounceSearch() {
+    var input = /** @type {HTMLInputElement} */(qs('#site-search-query'));
+
+    if (input == null) {
+        throw new Error('Cannot find #site-search-query');
+    }
+
+    var s = input.value;
+
+    window.clearTimeout(debounceTimer);
+    debounceTimer = window.setTimeout(function () {
+        if (ready) {
+            search(s);
+        }
+    }, 400);
+}
+
+fetch(dataUrl)
+    .then(function (response) { 
+        return response.json();
+    })
+    .then(function (data) { 
+        haystack = data;
+        ready = true;
+
+        for (let i = 0; i < haystack.length; i++) {
+            const item = haystack[i];
+            item.safeTitle = sanitise(item.title);
+            item.tags = item.tags.map(t => sanitise(t));
+            item.safeDescription = sanitise(item.description);
+
+            item.headings.forEach(h => h.safeText = sanitise(h.text));
+        }
+
+        var siteSearch = qs('#site-search');
+        var siteSearchQuery = qs('#site-search-query');
+
+        if (siteSearch == null || siteSearchQuery == null) {
+            throw new Error('Cannot find #site-search or #site-search-query');
+        }
+    
+        siteSearch.addEventListener('submit', function (e) {
+            e.preventDefault();
+            debounceSearch();
+            return false;
+        });
+    
+        siteSearchQuery.addEventListener('keyup', function (e) {
+            e.preventDefault();
+            if (!scrolled) {
+                scrolled = true;
+                this.scrollIntoView(true);
+            }
+            debounceSearch();
+            return false;
+        });
+
+        console.log('Search ready');
+        debounceSearch();
+    })
+    .catch((error) => {
+        console.log(error)
+    });

package/src/data/footer.ts

@@ -0,0 +1,43 @@
+import type { NavPage } from '@util/NavigationTypes.astro';
+
+export const menu: (NavPage | 'categories' | 'tags' | 'toptags')[] = [
+	'categories',
+	'tags',
+	{
+		title: 'Quick Links',
+		url: '',
+		ariaCurrent: false,
+		isOpen: false,
+		order: 1,
+		children: [{
+			title: 'Steve Fenton',
+			url: 'https://www.stevefenton.co.uk/',
+			ariaCurrent: false,
+			isOpen: false,
+			order: 1,
+			children: []
+		},{
+			title: 'Astro',
+			url: 'https://astro.build',
+			ariaCurrent: false,
+			isOpen: false,
+			order: 1,
+			children: []
+		},{
+			title: 'GitHub',
+			url: 'https://github.com/Steve-Fenton/astro-accelerator',
+			ariaCurrent: false,
+			isOpen: false,
+			order: 1,
+			children: []
+		}]
+}];
+
+/*
+See navigation.ts
+Allows customisation of the footer navigation
+
+'categories' -> Auto columns of links for categories
+'tags' -> Auto columns of links for tags
+
+*/

package/src/data/image-size.mjs

@@ -0,0 +1,5 @@
+export const size = {
+    small: 400,
+    medium: 700,
+    large: 1000
+};

package/src/data/images.mjs

@@ -0,0 +1,4 @@
+export const imagePaths = {
+    src: 'img',
+    dest: 'i'
+}