astro-accelerator 0.0.88 → 0.0.90

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.88",
+  "version": "0.0.90",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@astrojs/mdx": "^0.19.6",
     "astro": "^2.5.7",
-    "astro-accelerator-utils": "^0.2.27",
+    "astro-accelerator-utils": "^0.2.28",
     "hast-util-from-selector": "^2.0.1",
     "remark-directive": "^2.0.1",
     "sharp": "^0.32.1"

package/public/css/main.css

@@ -1015,6 +1015,76 @@ button[data-share]:focus {
     stroke: var(--fore-link-alt);
 }
 
+/* Detail tabs */
+  
+.tablist [role="tablist"] {
+    min-width: 100%;
+}
+
+.tablist [role="tab"],
+.tablist [role="tab"]:focus,
+.tablist [role="tab"]:hover {
+    display: inline-block;
+    position: relative;
+    z-index: 2;
+    top: 2px;
+    margin: 0;
+    margin-top: 4px;
+    border: 2px solid var(--aft-block);
+    border-radius: var(--block-radius) var(--block-radius) 0 0;
+    background: var(--aft-block);
+    outline: none;
+    font-weight: bold;
+    text-align: left;
+    cursor: pointer;
+}
+
+.tablist [role="tab"][aria-selected="true"] {
+    margin-top: 0;
+    border-width: 2px;
+    border-top-width: 6px;
+    border-top-color: var(--fore-link);
+    border-inline-color: var(--fore-link);
+    border-bottom-color: var(--aft);
+    background-color: var(--aft);
+}
+
+.tablist [role="tab"][aria-selected="false"] {
+    top: 0px;
+}
+
+.tablist [role="tab"] span.focus {
+    display: inline-block;
+    margin: 2px;
+    padding: 4px 6px;
+    outline: none;
+}
+
+.input-keyboard .tablist [role="tab"]:hover span.focus,
+.input-keyboard .tablist [role="tab"]:focus span.focus,
+.input-keyboard .tablist [role="tab"]:active span.focus {
+    outline: 2px solid var(--fore-link);
+}
+
+[role="tabpanel"] {
+    position:relative;
+    padding: 1rem;
+    border: 2px solid var(--fore-link);
+    border-radius: 0 var(--block-radius) var(--block-radius);
+    background: var(--aft);
+    min-height: 10em;
+    width: 100%;
+    overflow: auto;
+}
+
+[role="tabpanel"].is-hidden {
+    display: none;
+}
+
+[role="tabpanel"] p {
+    margin: 0;
+}
+
 /* Animation */
 
 @media (prefers-reduced-motion: no-preference) {

package/public/js/main.js

@@ -54,3 +54,8 @@ if (enabled(f.headers, 'link')) {
     const headers = await import('./modules/headers.js');
     headers.enhanceHeaders();
 }
+
+if (enabled(f.details, 'tabs')) {
+    const tabs = await import('./modules/detail-tabs.js');
+    tabs.enhanceDetailGroups();
+}

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

@@ -0,0 +1,196 @@
+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 = 'tablist';
+        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.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.role = 'tab';
+            tabButton.ariaSelected = 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);
+            
+            console.log(heading.innerText, content)
+        });
+
+        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();
+    }
+  
+    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();
+      }
+    }
+  
+    // Since this example uses buttons for the tabs, the click onr also is activated
+    // with the space and enter keys
+    onClick(event) {
+      this.setSelectedTab(event.currentTarget);
+    }
+  }
+  
+
+export { enhanceDetailGroups }

package/public/js/modules/string.js

@@ -7,10 +7,21 @@
  * @param {string} search 
  * @returns 
  */
- function contains(string, search) {
+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 
@@ -63,4 +74,4 @@ function explode(string) {
     return string.split(' ').filter(isLongEnough).map(sanitise);
 }
 
-export { contains, sanitise, explode, highlight };
+export { contains, containsWord, sanitise, explode, highlight };

package/public/js/search.js

@@ -2,7 +2,7 @@
 
 import { qs } from './modules/query.js';
 import { raiseEvent } from './modules/events.js';
-import { contains, sanitise, explode, highlight } from './modules/string.js';
+import { contains, containsWord, sanitise, explode, highlight } from './modules/string.js';
 
 /**
 type Heading = {
@@ -60,6 +60,13 @@ function search(s) {
         // Imagine the user searched for "Kitchen Sink"
         // The scores are arranged below from highest to lowest relevance
 
+        // If the title contains a whole word match
+        queryTerms.forEach(t => {
+            if (containsWord(item.safeTitle, t)) {
+                item.score = item.score + 120;
+            }
+        });
+
         // If the title contains "Kitchen Sink"
         if (contains(item.safeTitle, currentQuery)) {
             item.score = item.score + 60;
@@ -67,8 +74,14 @@ function search(s) {
 
         // If a heading contains "Kitchen Sink"
         item.headings.forEach(c => {
+            queryTerms.forEach(t => {
+                if (containsWord(c.safeText, t)) {
+                    item.score = item.score + 40;
+                }
+            });
+
             if (contains(c.safeText, currentQuery)) {
-                item.score = item.score + 25;
+                item.score = item.score + 20;
                 item.matchedHeadings.push(c);
             }
         });

package/src/config.ts

@@ -36,6 +36,7 @@ const SITE: Site = {
 		figures: ['enlarge'],
 		youTubeLinks: ['embed'],
 		headers: ['link'],
+		details: ['tabs'],
 	},
 	images: {
 		// Generated using https://ausi.github.io/respimagelint/