updates for new svg view/download links

extras/components/outline-button.js

@@ -116,9 +116,16 @@
 		const outline = [ ];
 
 		for (const heading of headings) {
+			const content = heading.cloneNode(true);
+			const anchor = content.querySelector('a.heading-anchor');
+
+			if (anchor) {
+				anchor.parentNode.removeChild(anchor);
+			}
+
 			outline.push(`
 			<li data-depth="${heading.tagName.toLowerCase()}">
-				<a href="#${heading.id}">${heading.innerText}</a>
+				<a href="#${heading.id}">${content.innerHTML}</a>
 			</li>
 			`);
 		}

extras/components/outline-inline.js

@@ -92,9 +92,16 @@
 		const outline = [ ];
 
 		for (const heading of headings) {
+			const content = heading.cloneNode(true);
+			const anchor = content.querySelector('a.heading-anchor');
+
+			if (anchor) {
+				anchor.parentNode.removeChild(anchor);
+			}
+
 			outline.push(`
 			<li data-depth="${heading.tagName.toLowerCase()}">
-				<a href="#${heading.id}">${heading.innerText}</a>
+				<a href="#${heading.id}">${content.innerHTML}</a>
 			</li>
 			`);
 		}

extras/svg-links.js

@@ -0,0 +1,58 @@
+(() => {
+	
+	if (document.readyState === 'complete') {
+		add_svg_links();
+	}
+
+	else {
+		window.addEventListener('DOMContentLoaded', add_svg_links);
+	}
+
+	function add_svg_links() {
+		const svg_elems = document.querySelectorAll('figure > svg');
+
+		for (const svg_elem of svg_elems) {
+			const figure_elem = svg_elem.parentElement;
+			const anchor_elem = document.createElement('a');
+			const lang = figure_elem.getAttribute('data-lang') || '';
+
+			let svg_html;
+
+			if ('svg_link_css' in window) {
+				const svg_clone = svg_elem.cloneNode(true);
+				const style_elem = document.createElement('style');
+				svg_clone.insertBefore(style_elem, svg_clone.firstChild);
+
+				const css
+					= (window.svg_link_css['*'] || '')
+					+ (lang ? window.svg_link_css[lang] || '' : '');
+	
+				style_elem.setAttribute('type', 'text/css');
+				style_elem.appendChild(document.createTextNode(css));
+
+				svg_html = svg_clone.outerHTML;
+			}
+
+			else {
+				svg_html = svg_elem.outerHTML;
+			}
+			
+			const box = document.createElement('div');
+			const svg_xml = '<?xml version="1.0" standalone="no" ?>\r\n'
+				+ svg_html.replace(/(&(?!(amp|gt|lt|quot|apos))[^;]+;)/g, ($0, $1) => {
+					box.innerHTML = $0;
+					return box.textContent;
+				});
+
+			const svg_blob = new Blob([ svg_xml ], { type: 'image/svg+xml; charset=utf-8' });
+			const svg_object_url = URL.createObjectURL(svg_blob);
+
+			anchor_elem.href = svg_object_url;
+			anchor_elem.className = 'view-svg';
+			anchor_elem.textContent = 'View / Download Graphic';
+
+			figure_elem.insertBefore(anchor_elem, svg_elem);
+		}
+	}
+
+})();

extras/typography/compact.css

@@ -66,3 +66,13 @@ dd + dt {
 	margin-block-start: 0;
 	margin-block-end: 0.15rem;
 }
+
+
+
+
+
+/* ===== Figure Captions ===== */
+
+figcaption {
+	margin-block-start: 1.5rem;
+}

extras/typography/general.css

@@ -326,7 +326,6 @@ figcaption {
 	font-family: var(--font-body);
 	text-align: center;
 	font-size: 0.85rem;
-	margin-block-start: 1rem;
 	color: var(--theme-text-light);
 	max-width: 60vw;
 	margin-inline: auto;

extras/typography/spacious.css

@@ -65,3 +65,13 @@ dd + dt {
 	margin-block-start: 0;
 	margin-block-end: 0.25rem;
 }
+
+
+
+
+
+/* ===== Figure Captions ===== */
+
+figcaption {
+	margin-block-start: 2rem;
+}

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@doc-utils/color-themes": "^0.1.14",
         "@doc-utils/jsonschema2markdown": "^0.1.1",
-        "@doc-utils/markdown2html": "^0.3.1",
+        "@doc-utils/markdown2html": "^0.3.2",
         "glob": "^10.2.3",
         "ical": "^0.8.0",
         "ical-generator": "^4.1.0",
@@ -51,9 +51,9 @@
       }
     },
     "node_modules/@doc-utils/markdown2html": {
-      "version": "0.3.1",
+      "version": "0.3.2",
-      "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.1/markdown2html-0.3.1.tgz",
+      "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.2/markdown2html-0.3.2.tgz",
-      "integrity": "sha512-+1i1dOrQYCPMMi7L84frt+JdYGX7uBvSEhY3zSIkGVgLVeyWhCnDVQ3celwaRCOpnnuK6qh9nWCD6WwmjULnqw==",
+      "integrity": "sha512-aRPlxA25gowmWmzPID4xyLCTVs7VgQJvlmYn3amnFAsUC55JzFXZQ9MR40AKeQYv9VSXIpxjUr7A86hgOzRFFw==",
       "dependencies": {
         "bytefield-svg": "^1.6.1",
         "dompurify": "^2.3.6",
@@ -2692,9 +2692,9 @@
       }
     },
     "@doc-utils/markdown2html": {
-      "version": "0.3.1",
+      "version": "0.3.2",
-      "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.1/markdown2html-0.3.1.tgz",
+      "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.2/markdown2html-0.3.2.tgz",
-      "integrity": "sha512-+1i1dOrQYCPMMi7L84frt+JdYGX7uBvSEhY3zSIkGVgLVeyWhCnDVQ3celwaRCOpnnuK6qh9nWCD6WwmjULnqw==",
+      "integrity": "sha512-aRPlxA25gowmWmzPID4xyLCTVs7VgQJvlmYn3amnFAsUC55JzFXZQ9MR40AKeQYv9VSXIpxjUr7A86hgOzRFFw==",
       "requires": {
         "bytefield-svg": "^1.6.1",
         "dompurify": "^2.3.6",

package.json

@@ -24,7 +24,7 @@
   "dependencies": {
     "@doc-utils/color-themes": "^0.1.14",
     "@doc-utils/jsonschema2markdown": "^0.1.1",
-    "@doc-utils/markdown2html": "^0.3.1",
+    "@doc-utils/markdown2html": "^0.3.2",
     "glob": "^10.2.3",
     "ical": "^0.8.0",
     "ical-generator": "^4.1.0",

src/template.ts

@@ -104,6 +104,7 @@ export async function load_extras() {
 	const extras: Record<string, string> = Object.create(null);
 	const extras_dir = resolve_path(__dirname, '../extras');
 	const extras_files = [
+		'svg-links.js',
 		'components/color-scheme-toggle-button.js',
 		'components/outline-button.js',
 		'components/outline-inline.js',