astro-accelerator 0.0.79 → 0.0.81

package/package.json

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

package/public/css/main.css

@@ -519,6 +519,10 @@ nav.site-nav h2 {
     padding: 0.5rem 1rem;
 }
 
+.page-toc li a.highlight {
+    font-weight: bold;
+}
+
 .page-toc li.toc-lev-2 {
     padding-left: 1rem;
 }

package/public/js/main.js

@@ -7,6 +7,7 @@ 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();
 
@@ -18,6 +19,7 @@ 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 ?? {};

package/public/js/modules/toc.js

@@ -0,0 +1,70 @@
+// @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 linkParts = link.href.split('#');
+        if (linkParts.length === 2) {
+            const id = linkParts[1];
+            headings.push(document.getElementById(id));
+        }
+    });
+
+    recheck();
+}
+
+function highlight(id) {
+    links.forEach((link) => {
+        link.classList.remove(highlightClass);
+
+        if (link.href.indexOf(`#${id}`) > -1) {
+            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 isValid = (docTop + vh) - elem.offsetTop > (vh / 3);
+        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/src/themes/accelerator/components/TableOfContents.astro

@@ -9,18 +9,19 @@ type Props = {
   lang: string;
   frontmatter: Frontmatter;
   headings: { depth: number; slug: string; text: string; }[];
+  expanded?: boolean;
 };
-const { lang, frontmatter, headings } = Astro.props satisfies Props;
+const { lang, frontmatter, headings, expanded } = Astro.props satisfies Props;
 
 // Language
 const _ = Lang(lang);
 
 // Logic
-// ...
+const openAttribute = expanded ? 'open' : null;
 ---
 {headings?.length > 0 &&
 <nav class="page-toc" aria-label={ _(Translations.aria.toc) }>
-  <details>
+  <details open={ openAttribute }>
     <summary>{ _(Translations.toc.title) }</summary>
     <ol>
       {headings.map((heading) =>(