ehancing SVG with links using meta yaml file

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1716025897749
+		"lastUpdateCheck": 1717062874290
 	}
 }

README.md

@@ -29,6 +29,8 @@ User friendly side menus collapsible and width adjustable with the mouse.
 - Markdown Details collapse block
 - Markdown external links identification and rendering with an arrow
 - Markdown relative assets with zero copy in dev
+- Add meta data to SVG by placing a yaml file with the same name e.g. for `diagram.svg` a `diagram.yaml`
+  - links : a list of `{label,link}` to add links to SVG text matches
 
 # User guide
 ```

config.js

@@ -31,7 +31,7 @@ config.collect_content = {
     rootdir:config.rootdir,
     contentdir:contentdir,
     content_ext:["md"],
-    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico","puml"],
+    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico","puml","yaml"],
     outdir:structuredir,//dist does not persist before build
     out_menu:"public/menu.json",//used by src\layout\client_nav_menu.js
     debug:false

content/examples/svg-diag/readme.md

@@ -0,0 +1,6 @@
+---
+title: SVG Diagram
+order: 3
+---
+
+![diag](./test-diag-link.svg)

content/examples/svg-diag/test-diag-link.yaml

@@ -0,0 +1,5 @@
+links:
+  - label: component
+    link: https://en.wikipedia.org/wiki/Software_component
+  - label: model
+    link: https://en.wikipedia.org/wiki/Model

src/components/gallery/gallery_pz.js

@@ -25,7 +25,7 @@ function init_container(container){
     for(let el in items){
         items[el].onclick = (e)=>{
             const modal = e.target.parentElement.querySelector(".modal-background")
-            event(modal,"init")
+            event(modal,"open")
         }
     }
 
@@ -40,7 +40,7 @@ function checkModal(){
         const container = document.querySelector(".container.gallery")
         const item = container.querySelector(`[data-name="${modal_name}"]`)
         const modal = item.querySelector(".modal-background")
-        event(modal,"init")
+        event(modal,"open")
     }
 }
 

src/components/markdown/image/MarkdownImage.astro

@@ -1,5 +1,5 @@
 ---
-import {relAssetToUrl} from '@/libs/assets.js'
+import {relAssetToUrl, getMetaData} from '@/libs/assets.js'
 import Panzoom from '@/components/panzoom/panzoom.astro'
 
 export interface Props {
@@ -12,6 +12,7 @@ const {title, url, alt} = node;
 
 console.log(`url / dirpath = ${url} / ${dirpath}`)
 const asseturl = await relAssetToUrl(url, dirpath)
+const meta = await getMetaData(url, dirpath)
 console.log(`asseturl = ${asseturl}`)
 ---
-<Panzoom src={asseturl} alt={alt} title={title} />
+<Panzoom src={asseturl} alt={alt} title={title} meta={meta}/>

src/components/panzoom/panzoom.astro

@@ -6,9 +6,10 @@ export interface Props {
   src: string;
   alt: string;
   title: string;
+  meta: object;
 }
 
-const { src, alt, title } = Astro.props as Props;
+const { src, alt, title, meta } = Astro.props as Props;
 const asseturl = src;
 const assetname = asseturl.substring(asseturl.lastIndexOf('/') + 1)
 console.log(` * panzoom : '${src}' : '${asseturl}'`)
@@ -18,7 +19,7 @@ const isImg = !isSvg
 
 //<img src={asseturl} title={title} alt={alt} />
 ---
-<div class="container panzoom" data-type={isSvg?"svg":"img"} data-name={assetname} data-url-map={}>
+<div class="container panzoom" data-type={isSvg?"svg":"img"} data-name={assetname} data-meta={JSON.stringify(meta)}>
   <div class="header open">
     <SvgIcons filename="full-screen"/>
   </div>

src/components/panzoom/panzoom.js

@@ -23,46 +23,50 @@ function fixSvgSize(svg){
   }
 }
 
-async function add_links(svg,url_map){
+async function add_links(svg,link_list){
   const SVGjsModule = await import('@svgdotjs/svg.js');
   const SVGjs = SVGjsModule.SVG;
 
   let draw = SVGjs(svg)
   let text_nodes = draw.find('text')
   let text_array = [ ...text_nodes ];
   text_array.forEach((text)=>{
-    const key = text.node.innerHTML
-    if(key in url_map){
-      var isAbs = new RegExp('^(?:[a-z+]+:)?//', 'i');//isAbsolute https://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative
-      if(isAbs.test(url_map[key])){
-        text.linkTo((link)=>{link.to(url_map[key]).target('_blank')})//link in new page
-      }else{
-        text.linkTo((link)=>{link.to(url_map[key]).target('_top')})//link outside the shadow DOM
+    const html_text = text.node.innerHTML
+    link_list.forEach((entry)=>{
+      if(html_text == entry.label){
+        var isAbs = new RegExp('^(?:[a-z+]+:)?//', 'i');//isAbsolute https://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative
+        if(isAbs.test(entry.link)){
+          text.linkTo((link)=>{link.to(entry.link).target('_blank')})//link in new page
+        }else{
+          text.linkTo((link)=>{link.to(entry.link).target('_top')})//link outside the shadow DOM
+        }
+        text.css({'text-decoration': 'underline'})  
+        //text.fill('#f06')
       }
-      text.css({'text-decoration': 'underline'})  
-      //text.fill('#f06')
-    }
+    })
   })
 }
 
-function checkModal(){
+function checkURLModal(){
   //check if any modal needs to be opened
   const params = new URL(location.href).searchParams;
   const modal_name = params.get('modal');
   if(modal_name){
     console.log(`opening modal for ${modal_name}`)
     const container = document.querySelector(`.container.panzoom[data-name="${modal_name}"]`)
     const modal = container.querySelector(".modal-background")
-    event(modal,"init")
+    event(modal,"open")
   }
 }
 
 function processSVG(svg,container){
   fixSvgSize(svg);
-  const url_map_string = container.getAttribute("data-url-map");
-  if(url_map_string){
-    const url_map = JSON.parse(url_map_string);
-    add_links(svg, url_map);
+  const meta_string = container.getAttribute("data-meta");
+  if(meta_string){
+    const meta = JSON.parse(meta_string);
+    if(Object.hasOwn(meta,"links")){
+      add_links(svg, meta.links);
+    }
   }
 }
 
@@ -90,11 +94,11 @@ function init(){
     const open = container.querySelector(".open")
     open.onclick = ()=>{
       const modal = container.querySelector(".modal-background")
-      event(modal,"init")
+      event(modal,"open")
     }
   }
   //allow the modal to init and register its listener before throwing the open event
-  setTimeout(checkModal,10)
+  setTimeout(checkURLModal,10)
 }
 
 document.addEventListener('DOMContentLoaded', init, false);

src/components/panzoom/panzoommodal.js

@@ -48,8 +48,23 @@ function window_url_remove_modal(){
     const new_href = window.location.origin+window.location.pathname
     window.history.pushState({},"",new_href)
 }
+function is_url_modal(center){
+  const params = new URL(location.href).searchParams;
+  const modal_name = params.get('modal');
+  if(modal_name){
+    const container = center.parentElement.parentElement.parentElement.parentElement
+    const pz_name = container.getAttribute("data-name")
+    return (modal_name == pz_name)
+  }
+  return false
+}
 
-async function initModal(event){
+function handle_url_modal(){
+  const params = new URL(location.href).searchParams;
+  //TODO check text highlight params
+}
+
+async function openModal(event){
 
   const modal = event.target
   const close = modal.querySelector(".close")
@@ -76,7 +91,11 @@ async function initModal(event){
     }
     window_url_remove_modal()
   }
-  window_url_add_modal(center)
+  if(is_url_modal(center)){
+    handle_url_modal()
+  }else{
+    window_url_add_modal(center)
+  }
   modal.classList.add("visible")
 }
 
@@ -89,7 +108,7 @@ function init(){
     for(let el in modals){
       const modal = modals[el]
       if(modal.getAttribute("data-state") == "init"){
-        modal.addEventListener("init",initModal  ,false)
+        modal.addEventListener("open",openModal  ,false)
         modal.setAttribute("data-state","run")
       }
     }

src/layout/client_nav_menu.js

@@ -135,6 +135,9 @@ function create_ul_from_items(items,root,expanded){
 }
 
 function set_active_expanded(items,section_name,pathname){
+    if(!Array.isArray(items)){
+        return
+    }
     for(let item of items){
         if(Object.hasOwn(menu.sections_expand[section_name],item.url)){
             item.expanded = menu.sections_expand[section_name][item.url]

src/libs/assets.js

@@ -3,6 +3,7 @@ import {constants, access, stat, mkdir, readFile} from 'fs/promises'
 import {dirname,join, basename, extname} from 'path'
 import {config} from '../../config.js'
 import {createHash} from 'crypto';
+import {load_yaml_abs} from './utils.js'
 
 
 async function exists(filePath) {
@@ -166,6 +167,18 @@ function file_ext(url){
     return (lastDotIndex === -1) ? '' : filename.substring(lastDotIndex + 1)
 }
 
+async function getMetaData(url, dirpath){
+    const dir_abs = join(config.content_path,dirpath)
+    const file_abs = join(dir_abs,url)
+    const lastDotIndex = file_abs.lastIndexOf('.');
+    const meta_file = file_abs.substring(0,lastDotIndex)+".yaml"
+    if(await exists(meta_file)){
+        console.log(` * MarkdownImage> found meta file ${meta_file}`)
+        return await load_yaml_abs(meta_file)
+    }
+    return {}
+}
+
 export{
   assetToUrl,
   relAssetToUrl,
@@ -178,5 +191,6 @@ export{
   file_ext,
   add_base,
   remove_base,
-  hashed_path_content
+  hashed_path_content,
+  getMetaData
 }