I'm impressed with the work Marc and Eric have done in the exploration as to how we can find and format node and arc labels as wiki links. Here I try my hand at letting wiki carry more weight in this investigation.
The top grey box is a Asset Plugin. Drag any file onto it to upload the file to this asset plug in.
Marc has a big collection of SVGs. Can we find a more general-purpose way to enrich them with wiki's internal links?
samples
Mermaid => Saved somehow, we are not sure. => svg 
Omnigraffle => Maybe exported, but how? => svg 
.
//eric.dojo.fed.wiki/assets/pages/snippet-template/esm.html
We code this as Eric did but with inputs retrieved from the page as is our habit.
import * as frame from "http://code.fed.wiki/assets/v1/frame.js" import * as index from "http://code.fed.wiki/assets/v1/index.js"
const context = await frame.context() const folds = index.folds(context.page.story) const samples = folds.samples.map(item => item.text)
const buttons = samples .map(sample => { const [what,how,link] = sample.split(/ => /) return ` <p><button data-text="${sample}"> ${what}</button> ${how}</p>`}) .join("\n")+`<div id=diagram></div>`
Each button invokes the explore logic to craft a page and this is then opened as a ghost.
export async function bind(el) { el.innerHTML = buttons el.addEventListener('click',async event => { const button = event.target const title = `Exploring ${button.innerText}` let text = button.dataset.text const story = await explore(text) frame.open({title,story},event.shiftKey) }) }
async function explore(sample) { const [what,how,link] = sample.split(/ => /) const [_,url,word] = link.split(/[\[ \]]/) const el = document.querySelector('#diagram') el.innerHTML = await fetch(url) .then(res => res.text()) const svg = el.querySelector('svg') rescale(svg) const text = svg.outerHTML const from = `See ${context.title}` const nodes = [...selectTextNodes(svg)] .filter(node => node[0].match(/\S/)) .filter(node => node[1].nodeName != 'style') .map(node => `${node[1].nodeName}: ${node[0]}`) svg.outerHTML = '' return [ {type:'paragraph',text:`${how} ${link}`}, {type:'paragraph',text:from}, {type:'html',text}, {type:'markdown',text:nodes.join("\n")} ] }
Here is the heavy lifting we have taken unchanged from Eric's example.
function rescale (svg) { let {x,y,width,height} = svg.getBBox() svg.setAttribute('viewBox', `${x} ${y} ${width} ${height}`) svg.removeAttribute("width") svg.removeAttribute("height") svg.style.width="100%" return svg }
function* selectTextNodes(el) { if (el.nodeType != Element.ELEMENT_NODE) return for (let item of el.childNodes) { if (item.nodeType == Element.ELEMENT_NODE) { yield* selectTextNodes(item) } else { yield [item.textContent, el] } } }