astro-accelerator 0.0.41 → 0.0.43

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.41",
+  "version": "0.0.43",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/js/main.js

@@ -2,7 +2,7 @@
 import { addIntersectionObserver, addListImageIntersectionObserver } from './modules/animation.js';
 import { addResizedEvent } from './modules/resizing.js';
 import { addStickyNavigation } from './modules/nav-sticky.js';
-import { addMobileNavigation } from './modules/nav-mobile.js';
+import { addMobileNav } from './modules/nav-mobile.js';
 import { setClickableBlocks } from './modules/click-blocks.js';
 import { setExternalLinkAttributes } from './modules/external-links.js';
 
@@ -11,7 +11,7 @@ const resizedEventName = addResizedEvent();
 setClickableBlocks();
 setExternalLinkAttributes();
 addStickyNavigation('.site-header', '#site-nav', '#site-nav > ul', resizedEventName);
-addMobileNavigation('.navigation-icon', '#site-nav', resizedEventName);
+addMobileNav(resizedEventName);
 addIntersectionObserver('.anim-show-parent img, .anim-show-parent > *:not(h1, h2, h3, h4, h5, h6)');
 addListImageIntersectionObserver('.post-list img');
 

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

@@ -13,12 +13,26 @@ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus
  * 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);
+function addMobileNav(resizedEventName) {
+    const icons = qsa('[data-navigationid');
+    for (let icon of icons) {
+        addMobileNavigation(icon, resizedEventName);
+    }
+}
+
+/**
+ * @param {HTMLElement} icon 
+ * @param {string} resizedEventName
+ */
+ function addMobileNavigation(icon, resizedEventName) {
+    icon.tabIndex = 0;
+    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';
@@ -52,7 +66,7 @@ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus
 
     function openMobileMenu(){
         document.body.style.overflow = 'hidden';
-        const menuElement = qs(navigationSelector);
+        const menuElement = qs('#' + navigationSelector);
         
         overlay.innerHTML = menuElement.outerHTML;
         overlay.className = 'overlay overlay-menu';
@@ -63,12 +77,10 @@ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus
         });
 
         // Modal Accessibility
-        const title = qs('.site-nav-title', overlay);
-        title.setAttribute('id', 'modal-title');
-        title.setAttribute('tabindex', '-1');
+        const title = menuElement.getAttribute('aria-label') ?? '';
         overlay.setAttribute('role', 'dialog');
         overlay.setAttribute('aria-modal', 'true');
-        overlay.setAttribute('aria-labelledby', 'modal-title');
+        overlay.setAttribute('aria-label', title);
 
         // Trap Focus to Visible Overlay
         const focusElements = getFocusableElement(overlay);
@@ -80,13 +92,15 @@ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus
             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>`;
+        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);
@@ -119,4 +133,4 @@ import { getFocusableElement, trapFocusForward, trapReverseFocus } from './focus
     })
 }
 
-export { addMobileNavigation };
+export { addMobileNav };

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

@@ -34,8 +34,9 @@ function addStickyNavigation(headerSelector, navigationSelector, navigationListS
         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';
+            navigation.classList.add(className);
+            const top = navigation.parentElement?.offsetTop ?? 220;
+            navigation.style.top = top + 'px';
         } else {
             console.log('Navigation: Fixed Mode');
             navigation.classList.remove(className);

package/src/themes/accelerator/components/Authors.astro

@@ -41,7 +41,7 @@ const authorImage = authorList?.image?.src
         <a href={ accelerator.urlFormatter.addSlashToAddress(authorList.mainAuthor.url) + '1/' } itemprop="author">{ authorList.mainAuthor.frontmatter.title }</a>
       }{authorList.contributors.map((writer) => (
         <a href={ accelerator.urlFormatter.addSlashToAddress(writer.url) + '1/' } itemprop="contributor">{ writer.frontmatter.title }</a>
-      ))}.
+      ))}
       <br /><time datetime={ frontmatter.pubDate.toString() } itemprop="datePublished">
       { accelerator.dateFormatter.formatDate(frontmatter.pubDate, lang) }
       </time>

package/src/themes/accelerator/components/Header.astro

@@ -21,7 +21,7 @@ const accelerator = new Accelerator(SITE);
 const search = accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
 ---
 <header class="site-header">
-  <a href="#site-nav" class="navigation-icon" title={ _(Translations.header.open_menu) }><svg xmlns="http://www.w3.org/2000/svg" 
+  <a href="#site-nav" data-navigationid="site-nav" class="navigation-icon" title={ _(Translations.header.open_menu) }><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"/>