@kenjura/ursa 0.10.0 → 0.33.0

package/meta/sticky.js

@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const article = document.querySelector('article#main-content');
+    if (!article) return;
+
+    const headings = article.querySelectorAll('h1, h2, h3');
+
+    function updateStuckState() {
+        let currentStuckHeading = null;
+        
+        headings.forEach(el => {
+            const wasStuck = el.classList.contains('stuck');
+            const style = window.getComputedStyle(el);
+            if (style.position === 'sticky' && style.top !== 'auto') {
+                const rect = el.getBoundingClientRect();
+                const top = parseInt(style.top, 10) || 0;
+                if (rect.top <= top && rect.bottom > top) {
+                    el.classList.add('stuck');
+                    currentStuckHeading = el;
+                } else {
+                    el.classList.remove('stuck');
+                }
+            } else {
+                el.classList.remove('stuck');
+            }
+            
+            // Dispatch event if stuck state changed
+            if (wasStuck !== el.classList.contains('stuck')) {
+                const event = new CustomEvent('headingStuckStateChanged', {
+                    detail: { 
+                        heading: el, 
+                        stuck: el.classList.contains('stuck'),
+                        currentStuckHeading: currentStuckHeading
+                    }
+                });
+                document.dispatchEvent(event);
+            }
+            
+            // Handle text updates for H1 elements
+            if (el.tagName === 'H1') {
+                // Store original text if not already stored
+                if (!el.dataset.originalText) {
+                    el.dataset.originalText = el.textContent;
+                }
+                
+                // Only update text if this H1 is stuck
+                if (el.classList.contains('stuck')) {
+                    // Find the last stuck h2 and h3 (i.e., the "current" ones)
+                    const stuckH2s = Array.from(headings).filter(h => h.tagName === 'H2' && h.classList.contains('stuck'));
+                    const stuckH3s = Array.from(headings).filter(h => h.tagName === 'H3' && h.classList.contains('stuck'));
+                    const stuckH2 = stuckH2s.length ? stuckH2s[stuckH2s.length - 1] : null;
+                    const stuckH3 = stuckH3s.length ? stuckH3s[stuckH3s.length - 1] : null;
+
+                    let newText = el.dataset.originalText;
+
+                    if (stuckH3 && stuckH2) {
+                        newText += ' > ' + (stuckH2.dataset.originalText || stuckH2.textContent) + ' > ' + (stuckH3.dataset.originalText || stuckH3.textContent);
+                    } else if (stuckH2) {
+                        newText += ' > ' + (stuckH2.dataset.originalText || stuckH2.textContent);
+                    }
+
+                    el.textContent = newText;
+                } else {
+                    // Restore original text if not stuck
+                    el.textContent = el.dataset.originalText;
+                }
+            }
+        });
+    }
+
+    updateStuckState();
+    window.addEventListener('scroll', updateStuckState, { passive: true });
+    window.addEventListener('resize', updateStuckState);
+});

package/meta/toc-generator.js

@@ -0,0 +1,124 @@
+// Table of Contents Generator
+document.addEventListener('DOMContentLoaded', () => {
+    const tocNav = document.getElementById('nav-toc');
+    const article = document.querySelector('article#main-content');
+    
+    if (!tocNav || !article) return;
+    
+    // Find all headings in the article
+    const headings = article.querySelectorAll('h1, h2, h3');
+    
+    if (headings.length === 0) {
+        tocNav.style.display = 'none';
+        return;
+    }
+    
+    // Generate TOC HTML
+    const tocList = document.createElement('ul');
+    
+    headings.forEach((heading, index) => {
+        // Create unique ID for the heading if it doesn't have one
+        if (!heading.id) {
+            const text = heading.textContent.trim()
+                .toLowerCase()
+                .replace(/[^\w\s-]/g, '') // Remove special characters
+                .replace(/\s+/g, '-'); // Replace spaces with hyphens
+            heading.id = `heading-${index}-${text}`;
+        }
+        
+        // Create TOC item
+        const listItem = document.createElement('li');
+        listItem.className = `toc-${heading.tagName.toLowerCase()}`;
+        
+        const link = document.createElement('a');
+        link.href = `#${heading.id}`;
+        link.textContent = heading.textContent;
+        link.addEventListener('click', handleTocClick);
+        
+        listItem.appendChild(link);
+        tocList.appendChild(listItem);
+    });
+    
+    tocNav.appendChild(tocList);
+    
+    // Handle TOC link clicks for smooth scrolling
+    function handleTocClick(e) {
+        e.preventDefault();
+        const targetId = e.target.getAttribute('href').substring(1);
+        const targetElement = document.getElementById(targetId);
+        
+        if (targetElement) {
+            // Calculate offset to account for sticky header
+            const globalNavHeight = getComputedStyle(document.documentElement)
+                .getPropertyValue('--global-nav-height') || '48px';
+            const offset = parseInt(globalNavHeight) + 40; // Adjusted offset (was +20, now -29 for 49px less)
+            
+            const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset;
+            
+            window.scrollTo({
+                top: targetPosition,
+                behavior: 'smooth'
+            });
+        }
+    }
+    
+    // Update active TOC item based on scroll position
+    function updateActiveTocItem() {
+        const scrollPosition = window.pageYOffset;
+        const globalNavHeight = getComputedStyle(document.documentElement)
+            .getPropertyValue('--global-nav-height') || '48px';
+        const offset = parseInt(globalNavHeight) + 100;
+        
+        let activeHeading = null;
+        
+        // Find the current heading based on scroll position
+        headings.forEach(heading => {
+            const headingTop = heading.getBoundingClientRect().top + window.pageYOffset;
+            if (headingTop <= scrollPosition + offset) {
+                activeHeading = heading;
+            }
+        });
+        
+        updateTocActiveState(activeHeading);
+    }
+    
+    // Update TOC active state
+    function updateTocActiveState(activeHeading) {
+        const tocLinks = tocNav.querySelectorAll('a');
+        tocLinks.forEach(link => {
+            link.classList.remove('active');
+        });
+        
+        if (activeHeading) {
+            const activeLink = tocNav.querySelector(`a[href="#${activeHeading.id}"]`);
+            if (activeLink) {
+                activeLink.classList.add('active');
+            }
+        }
+    }
+    
+    // Listen for heading stuck state changes from sticky.js
+    document.addEventListener('headingStuckStateChanged', (event) => {
+        if (event.detail.currentStuckHeading) {
+            updateTocActiveState(event.detail.currentStuckHeading);
+        } else {
+            // If no heading is stuck, fall back to scroll-based detection
+            updateActiveTocItem();
+        }
+    });
+    
+    // Listen for scroll events
+    let ticking = false;
+    window.addEventListener('scroll', () => {
+        if (!ticking) {
+            requestAnimationFrame(() => {
+                updateActiveTocItem();
+                ticking = false;
+            });
+            ticking = true;
+        }
+    });
+    
+    // Initial update
+    updateActiveTocItem();
+});

package/meta/toc.js

@@ -0,0 +1,93 @@
+(() => {
+  const toc = document.getElementById('toc');
+  if (!toc) return;
+
+  const links = Array.from(toc.querySelectorAll('a[href^="#"]'));
+  const heads = links
+    .map(a => document.getElementById(decodeURIComponent(a.hash.slice(1))))
+    .filter(Boolean);
+
+  const linkById = new Map(links.map(a => [decodeURIComponent(a.hash.slice(1)), a]));
+
+  // === sticky top detector ===
+  let STICKY_TOP = 48; // fallback
+  const nav = document.getElementById('nav-global');
+
+  function readStickyTop() {
+    const b = nav?.getBoundingClientRect();
+    // if nav is fixed at top, its bottom is the sticky line
+    STICKY_TOP = b ? Math.max(0, Math.round(b.bottom)) : 48;
+  }
+
+  readStickyTop();
+  window.addEventListener('resize', readStickyTop, { passive: true });
+  if (nav && 'ResizeObserver' in window) {
+    new ResizeObserver(readStickyTop).observe(nav);
+  }
+
+  // === build 1px sentinels just above each heading ===
+  function ensureSentinels() {
+    heads.forEach(h => {
+      if (h.previousElementSibling?.classList.contains('toc-sentinel')) return;
+      const s = document.createElement('div');
+      s.className = 'toc-sentinel';
+      s.style.position = 'relative';
+      s.style.height = '1px';
+      s.style.marginTop = `-${STICKY_TOP}px`; // place sentinel STICKY_TOP above h
+      s.style.pointerEvents = 'none';
+      s.dataset.forId = h.id;
+      h.before(s);
+    });
+  }
+
+  // === observer factory tied to current STICKY_TOP ===
+  let observer = null;
+  function (re)buildObserver() {
+    if (observer) observer.disconnect();
+    // ignore intersections near the bottom; we only care about the top line
+    const bottomRM = -(window.innerHeight - 1) + 'px';
+    observer = new IntersectionObserver(updateActiveFromSentinels, {
+      root: null,
+      rootMargin: `-${STICKY_TOP}px 0px ${bottomRM} 0px`,
+      threshold: 0
+    });
+    document.querySelectorAll('.toc-sentinel').forEach(s => observer.observe(s));
+  }
+
+  function updateActiveFromSentinels() {
+    // Pick the last sentinel whose top is <= 0 relative to the adjusted rootMargin,
+    // i.e. the heading whose sticky line has been crossed.
+    const sentinels = Array.from(document.querySelectorAll('.toc-sentinel'));
+    let candidate = null;
+    for (const s of sentinels) {
+      const top = s.getBoundingClientRect().top - STICKY_TOP; // compare to sticky line
+      if (top <= 0) candidate = s; else break;
+    }
+    const activeId = candidate ? candidate.dataset.forId : heads[0]?.id;
+    links.forEach(a => a.classList.toggle('active', decodeURIComponent(a.hash.slice(1)) === activeId));
+  }
+
+  // keep anchor jumps clear of the sticky bar
+  heads.forEach(h => h.style.scrollMarginTop = (STICKY_TOP + 8) + 'px');
+
+  // initial setup
+  ensureSentinels();
+  (re)buildObserver();
+  updateActiveFromSentinels();
+
+  // react when sticky top changes
+  let resizeTick = false;
+  window.addEventListener('resize', () => {
+    if (resizeTick) return;
+    resizeTick = true;
+    requestAnimationFrame(() => {
+      resizeTick = false;
+      readStickyTop();
+      // update sentinel offsets
+      document.querySelectorAll('.toc-sentinel').forEach(s => s.style.marginTop = `-${STICKY_TOP}px`);
+      heads.forEach(h => h.style.scrollMarginTop = (STICKY_TOP + 8) + 'px');
+      (re)buildObserver();
+      updateActiveFromSentinels();
+    });
+  }, { passive: true });
+})();

package/package.json

@@ -2,12 +2,17 @@
   "name": "@kenjura/ursa",
   "author": "Andrew London <andrew@kenjura.com>",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.33.0",
   "description": "static site generator from MD/wikitext/YML",
   "main": "lib/index.js",
+  "bin": {
+    "ursa": "bin/ursa.js"
+  },
   "scripts": {
     "serve": "nodemon --config nodemon.json  src/serve.js",
     "serve:debug": "nodemon --config nodemon.json  --inspect-brk src/serve.js",
+    "cli:debug": "node --inspect bin/ursa.js",
+    "cli:debug-brk": "node --inspect-brk bin/ursa.js",
     "start": "node src/index.js",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
@@ -27,7 +32,8 @@
     "markdown-it-sup": "^1.0.0",
     "node-watch": "^0.7.3",
     "object-to-xml": "^2.0.0",
-    "yaml": "^2.1.3"
+    "yaml": "^2.1.3",
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
     "jest": "^29.6.2",
@@ -43,6 +49,21 @@
   },
   "keywords": [
     "static-site",
-    "markdown"
-  ]
+    "markdown",
+    "static-site-generator",
+    "wikitext",
+    "cli"
+  ],
+  "files": [
+    "lib/",
+    "src/",
+    "bin/",
+    "meta/",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
 }

package/src/helper/WikiImage.js

@@ -0,0 +1,138 @@
+export function getImageTag(args) {
+	if (!args) args = {};
+	if (!args.name) { console.error('WikiImage.getImage > cannot get image with no name.'); return ''; }
+	// if (!args.article) { console.error('WikiImage.getImage > article not supplied.'); return ''; }
+	
+	// var images = args.article.images;
+	// var image = null;
+	// if (images) {
+	// 	for (var i = 0; i < images.length; i++) {
+	// 		if ( images[i].name == args.name ) {
+	// 			image = images[i];
+	// 			break;
+	// 		}
+	// 	}
+	// }
+	// if (!image) {
+	// 	// image not yet uploaded
+	// 	return '<div class="noImage" ng-click="activateImage(\''+args.name+'\')">?</div>';
+	// } else {
+		// path
+		// var imgUrl = WikiImage.imageRoot + image.path;		
+		var imgUrl = args.imgUrl;		
+		// style
+		var width = 'auto', height = 'auto', classes = '', caption = '', fillMode = null, float = '';
+		if (args.args&&args.args.length) {
+			for (var i = 0; i < args.args.length; i++) {
+				var arg = args.args[i];
+				// numbers = width/height. for now, let's just do width
+				if (!isNaN(arg)) { 
+					if (width=='auto') width = parseFloat(arg) + 'px'; 
+					else height = parseFloat(arg) + 'px';
+					continue; 
+				}
+				if (arg.substr(-1)=='%') { 
+					if (width=='auto') width = arg; 
+					else height = arg;
+					continue; 
+				}
+				if (arg.substr(-2)=='px') { 
+					if (width=='auto') width = arg; 
+					else height = arg;
+					continue; 
+				}
+				// string values might mean something...
+				if (arg=='right') { float = 'float: right; clear: right;'; continue; }
+				if (arg=='fit'||arg=='box') { classes += arg + ' '; continue; }
+				if (arg=='center') { classes += 'center '; continue; }
+				if (arg=='cover'||arg=='contain') { fillMode = arg; continue; }
+				// else, assume it's the caption
+				caption = arg;
+			}
+		}		
+		var style = 'width: '+width+'; height: '+height+';' + float;
+		
+		// events		
+		// var events = 'onclick="_scope.activateImage(\''+args.name+'\',\''+imgUrl+'\')"';	
+		var events = 'ng-click="activateImage(\''+args.name+'\',\''+imgUrl+'\')"';
+		
+		//return '<img class="wikiImage" src="'+imgUrl+'" style="'+style+'" '+events+' />';
+
+		var template = ''+
+		'<a href="{src}">'+
+			'<div class="wikiImage {class}" style="{style}" title="{caption}">'+
+				'<img src="{src}" {events} />'+
+				'<div class="wikiImage_caption">{caption}</div>'+
+			'</div>'+
+		'</a>';
+
+		// var template2 = ''+
+		// '<a href="{src}">'+
+		// 	'<div class="wikiImage {class}" style="background: url(\'{src}\'); background-size: {fillMode}; {style}" {events}>'+
+		// 		'<div class="wikiImage_caption">{caption}</div>'+
+		// 	'</div>'+
+		// '</a>';
+
+		const template2 = `<span class="wiki-image-container"><img src="${imgUrl}" style="${style}" class="wikiImage wiki-image" onClick="evt => imageZoom(evt)" />`;
+		return template2;
+
+
+		var html = template;
+		if (fillMode) html = template2;
+
+		html = html.replace( /\{src\}/g , imgUrl );
+		html = html.replace( '{class}' , classes );
+		html = html.replace( '{style}' , style );
+		html = html.replace( '{events}' , events );
+		html = html.replace( /\{caption\}/g , caption );
+		if (fillMode)
+			html = html.replace( '{fillMode}' , fillMode );
+
+		return html;
+	// }
+	
+	/*
+	var imgCache = localStorage.getItem('imageCache');
+	if (!imgCache) imgCache = JSON.stringify({});
+	
+	try {
+		imgCache = JSON.parse(imgCache);
+		var imgUrl = imgCache[args.name];
+		if (!imgUrl) {
+			//var img = new WikiImage(args);
+			var img = new WikiImage(args);
+			var tag = img.render();
+			imgCache[args.name] = img.url;						
+		} else {
+			args.url = imgUrl;			
+			var img = new WikiImage(args);			
+			var tag = img.render();
+		}
+		localStorage.setItem('imageCache',JSON.stringify(imgCache));
+		return tag;
+	} catch(e) {
+		error('WikiImage.getImage > could not retrieve or parse the image cache. error to follow.');
+		error(e);
+		return new WikiImage(args);
+	}
+	*/
+
+	
+}
+
+
+
+
+/* how images should work:
+* when you load an article, you also get a list of all images used in that article, and their URLs
+* when rendering an image, check that list first. if the image name isn't in that list, don't bother trying to load the image
+** if it is in the list, load it, relying on browser cache to reduce load
+** important: do not use the server method to find each image's url; get them all from the loadArticle call
+** the FS db option should store image (and link) data in a special section at the end of the article body. it also doesn't allow images to have a different name than their url
+* when an image is not yet uploaded, show a gray box with a question mark
+* when the grey box or the image is clicked, pop up the image upload modal
+* the image upload modal uses the appropriate service endpoint to upload, then returns the new URL
+** the new URL is then cached
+** the image is loaded from the URL
+** the image is associated with the article, which is immediately saved with the new image association
+*/