From 5d36def32ce5e8521d61ab7a3b2a8dbcfd4023b1 Mon Sep 17 00:00:00 2001 From: James Brumond Date: Sun, 28 May 2023 15:56:56 -0700 Subject: [PATCH] updates for new svg view/download links --- extras/components/outline-button.js | 9 ++++- extras/components/outline-inline.js | 9 ++++- extras/svg-links.js | 58 +++++++++++++++++++++++++++++ extras/typography/compact.css | 10 +++++ extras/typography/general.css | 1 - extras/typography/spacious.css | 10 +++++ package-lock.json | 14 +++---- package.json | 2 +- src/template.ts | 1 + 9 files changed, 103 insertions(+), 11 deletions(-) create mode 100644 extras/svg-links.js diff --git a/extras/components/outline-button.js b/extras/components/outline-button.js index 07bc2df..5c2e775 100644 --- a/extras/components/outline-button.js +++ b/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(`
  • - ${heading.innerText} + ${content.innerHTML}
    • `); } diff --git a/extras/components/outline-inline.js b/extras/components/outline-inline.js index 910fba6..f27b9c6 100644 --- a/extras/components/outline-inline.js +++ b/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(`
  • - ${heading.innerText} + ${content.innerHTML}
    • `); } diff --git a/extras/svg-links.js b/extras/svg-links.js new file mode 100644 index 0000000..7e9c9bb --- /dev/null +++ b/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 = '\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); + } + } + +})(); \ No newline at end of file diff --git a/extras/typography/compact.css b/extras/typography/compact.css index 8caeaba..9e331a3 100644 --- a/extras/typography/compact.css +++ b/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; +} diff --git a/extras/typography/general.css b/extras/typography/general.css index 90b9d56..ac5d877 100644 --- a/extras/typography/general.css +++ b/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; diff --git a/extras/typography/spacious.css b/extras/typography/spacious.css index b51f4d6..c14937d 100644 --- a/extras/typography/spacious.css +++ b/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; +} diff --git a/package-lock.json b/package-lock.json index 25ffc6a..b9d7e63 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.1/markdown2html-0.3.1.tgz", - "integrity": "sha512-+1i1dOrQYCPMMi7L84frt+JdYGX7uBvSEhY3zSIkGVgLVeyWhCnDVQ3celwaRCOpnnuK6qh9nWCD6WwmjULnqw==", + "version": "0.3.2", + "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.2/markdown2html-0.3.2.tgz", + "integrity": "sha512-aRPlxA25gowmWmzPID4xyLCTVs7VgQJvlmYn3amnFAsUC55JzFXZQ9MR40AKeQYv9VSXIpxjUr7A86hgOzRFFw==", "dependencies": { "bytefield-svg": "^1.6.1", "dompurify": "^2.3.6", @@ -2692,9 +2692,9 @@ } }, "@doc-utils/markdown2html": { - "version": "0.3.1", - "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.1/markdown2html-0.3.1.tgz", - "integrity": "sha512-+1i1dOrQYCPMMi7L84frt+JdYGX7uBvSEhY3zSIkGVgLVeyWhCnDVQ3celwaRCOpnnuK6qh9nWCD6WwmjULnqw==", + "version": "0.3.2", + "resolved": "https://gitea.jbrumond.me/api/packages/doc-utils/npm/%40doc-utils%2Fmarkdown2html/-/0.3.2/markdown2html-0.3.2.tgz", + "integrity": "sha512-aRPlxA25gowmWmzPID4xyLCTVs7VgQJvlmYn3amnFAsUC55JzFXZQ9MR40AKeQYv9VSXIpxjUr7A86hgOzRFFw==", "requires": { "bytefield-svg": "^1.6.1", "dompurify": "^2.3.6", diff --git a/package.json b/package.json index 6187eb3..88665e2 100644 --- a/package.json +++ b/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", diff --git a/src/template.ts b/src/template.ts index da0f96d..020a7d1 100644 --- a/src/template.ts +++ b/src/template.ts @@ -104,6 +104,7 @@ export async function load_extras() { const extras: Record = 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',