fix: clean wikilinks and render latex in popover
This commit is contained in:
		
							parent
							
								
									364aee36fc
								
							
						
					
					
						commit
						b21b27d1d3
					
				
					 4 changed files with 31 additions and 19 deletions
				
			
		| 
						 | 
					@ -5,13 +5,14 @@ function htmlToElement(html) {
 | 
				
			||||||
  return template.content.firstChild
 | 
					  return template.content.firstChild
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function initPopover(baseURL, useContextualBacklinks) {
 | 
					function initPopover(baseURL, useContextualBacklinks, renderLatex) {
 | 
				
			||||||
  const basePath = baseURL.replace(window.location.origin, "")
 | 
					  const basePath = baseURL.replace(window.location.origin, "")
 | 
				
			||||||
  fetchData.then(({ content }) => {
 | 
					  fetchData.then(({ content }) => {
 | 
				
			||||||
    const links = [...document.getElementsByClassName("internal-link")]
 | 
					    const links = [...document.getElementsByClassName("internal-link")]
 | 
				
			||||||
    links
 | 
					    links
 | 
				
			||||||
      .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
 | 
					      .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
 | 
				
			||||||
      .forEach(li => {
 | 
					      .forEach(li => {
 | 
				
			||||||
 | 
					        var el
 | 
				
			||||||
        if (li.dataset.ctx) {
 | 
					        if (li.dataset.ctx) {
 | 
				
			||||||
          const linkDest = content[li.dataset.src]
 | 
					          const linkDest = content[li.dataset.src]
 | 
				
			||||||
          const popoverElement = `<div class="popover">
 | 
					          const popoverElement = `<div class="popover">
 | 
				
			||||||
| 
						 | 
					@ -19,32 +20,38 @@ function initPopover(baseURL, useContextualBacklinks) {
 | 
				
			||||||
    <p>${highlight(removeMarkdown(linkDest.content), li.dataset.ctx)}...</p>
 | 
					    <p>${highlight(removeMarkdown(linkDest.content), li.dataset.ctx)}...</p>
 | 
				
			||||||
    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 | 
					    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 | 
				
			||||||
</div>`
 | 
					</div>`
 | 
				
			||||||
          const el = htmlToElement(popoverElement)
 | 
					          el = htmlToElement(popoverElement)
 | 
				
			||||||
          li.appendChild(el)
 | 
					 | 
				
			||||||
          li.addEventListener("mouseover", () => {
 | 
					 | 
				
			||||||
            el.classList.add("visible")
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
          li.addEventListener("mouseout", () => {
 | 
					 | 
				
			||||||
            el.classList.remove("visible")
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
        } else {
 | 
					        } else {
 | 
				
			||||||
          const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
 | 
					          const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
 | 
				
			||||||
 | 
					          console.log(linkDest.content)
 | 
				
			||||||
          if (linkDest) {
 | 
					          if (linkDest) {
 | 
				
			||||||
            const popoverElement = `<div class="popover">
 | 
					            const popoverElement = `<div class="popover">
 | 
				
			||||||
    <h3>${linkDest.title}</h3>
 | 
					    <h3>${linkDest.title}</h3>
 | 
				
			||||||
    <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
 | 
					    <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
 | 
				
			||||||
    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 | 
					    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 | 
				
			||||||
</div>`
 | 
					</div>`
 | 
				
			||||||
            const el = htmlToElement(popoverElement)
 | 
					            el = htmlToElement(popoverElement)
 | 
				
			||||||
            li.appendChild(el)
 | 
					 | 
				
			||||||
            li.addEventListener("mouseover", () => {
 | 
					 | 
				
			||||||
              el.classList.add("visible")
 | 
					 | 
				
			||||||
            })
 | 
					 | 
				
			||||||
            li.addEventListener("mouseout", () => {
 | 
					 | 
				
			||||||
              el.classList.remove("visible")
 | 
					 | 
				
			||||||
            })
 | 
					 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					        li.appendChild(el)
 | 
				
			||||||
 | 
					        if (renderLatex) {
 | 
				
			||||||
 | 
					          renderMathInElement(el, {
 | 
				
			||||||
 | 
					            delimiters: [
 | 
				
			||||||
 | 
					              { left: '$$', right: '$$', display: false },
 | 
				
			||||||
 | 
					              { left: '$', right: '$', display: false },
 | 
				
			||||||
 | 
					              { left: '\\(', right: '\\)', display: false },
 | 
				
			||||||
 | 
					              { left: '\\[', right: '\\]', display: false }
 | 
				
			||||||
 | 
					            ],
 | 
				
			||||||
 | 
					            throwOnError: false
 | 
				
			||||||
 | 
					          })
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        li.addEventListener("mouseover", () => {
 | 
				
			||||||
 | 
					          el.classList.add("visible")
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        li.addEventListener("mouseout", () => {
 | 
				
			||||||
 | 
					          el.classList.remove("visible")
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      })
 | 
					      })
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -39,6 +39,7 @@ const removeMarkdown = (
 | 
				
			||||||
      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
 | 
					      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
 | 
				
			||||||
      .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, options.useImgAltText ? '$1' : '')
 | 
					      .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, options.useImgAltText ? '$1' : '')
 | 
				
			||||||
      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
 | 
					      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
 | 
				
			||||||
 | 
					      .replace(/!?\[\[\S[^\[\]\|]*(?:\|([^\[\]]*))?\S\]\]/g, '$1')
 | 
				
			||||||
      .replace(/^\s{0,3}>\s?/g, '')
 | 
					      .replace(/^\s{0,3}>\s?/g, '')
 | 
				
			||||||
      .replace(/(^|\n)\s{0,3}>\s?/g, '\n\n')
 | 
					      .replace(/(^|\n)\s{0,3}>\s?/g, '\n\n')
 | 
				
			||||||
      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
 | 
					      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -85,7 +85,11 @@
 | 
				
			||||||
      );
 | 
					      );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      {{if $.Site.Data.config.enableLinkPreview}}
 | 
					      {{if $.Site.Data.config.enableLinkPreview}}
 | 
				
			||||||
      initPopover({{strings.TrimRight "/" .Site.BaseURL }}, {{$.Site.Data.config.enableContextualBacklinks}})
 | 
					      initPopover(
 | 
				
			||||||
 | 
					        {{strings.TrimRight "/" .Site.BaseURL }},
 | 
				
			||||||
 | 
					        {{$.Site.Data.config.enableContextualBacklinks}},
 | 
				
			||||||
 | 
					        {{$.Site.Data.config.enableLatex}}
 | 
				
			||||||
 | 
					      )
 | 
				
			||||||
      {{end}}
 | 
					      {{end}}
 | 
				
			||||||
      {{if $.Site.Data.config.enableLatex}}
 | 
					      {{if $.Site.Data.config.enableLatex}}
 | 
				
			||||||
      renderMathInElement(document.body, {
 | 
					      renderMathInElement(document.body, {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -12,4 +12,4 @@
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
    </li>
 | 
					    </li>
 | 
				
			||||||
    {{- end -}}
 | 
					    {{- end -}}
 | 
				
			||||||
</ul>
 | 
					</ul>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue