walcutt/searchable-jekyll-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #123 from hqweay/link-preview

Browse Source 
caching link content for link preview
This commit is contained in:
Maxime Vaillancourt 2022-06-27 19:47:15 -04:00 committed by GitHub
commit 18b003881c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
_includes/link-previews.html
View File

@ -50,6 +50,8 @@
var tooltipWrapper = document.getElementById('tooltip-wrapper') var tooltipWrapper = document.getElementById('tooltip-wrapper')
var tooltipContent = document.getElementById('tooltip-content') var tooltipContent = document.getElementById('tooltip-content')
var linkHistories = {};
function hideTooltip() { function hideTooltip() {
opacityTimeout = setTimeout(function() { opacityTimeout = setTimeout(function() {
tooltipWrapper.style.opacity = 0; tooltipWrapper.style.opacity = 0;
@ -66,20 +68,30 @@
var top = window.pageYOffset || document.documentElement.scrollTop var top = window.pageYOffset || document.documentElement.scrollTop
if (event.target.host === window.location.host) { if (event.target.host === window.location.host) {
iframe.src = event.target.href if (!linkHistories[event.target.href]) {
iframe.onload = function() { iframe.src = event.target.href
tooltipContentHtml = '' iframe.onload = function() {
tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>' tooltipContentHtml = ''
tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML
tooltipContent.innerHTML = tooltipContentHtml tooltipContent.innerHTML = tooltipContentHtml
linkHistories[event.target.href] = tooltipContentHtml
tooltipWrapper.style.display = 'block';
setTimeout(function() {
tooltipWrapper.style.opacity = 1;
}, 1)
}
} else {
tooltipContent.innerHTML = linkHistories[event.target.href]
tooltipWrapper.style.display = 'block'; tooltipWrapper.style.display = 'block';
setTimeout(function() { setTimeout(function() {
tooltipWrapper.style.opacity = 1; tooltipWrapper.style.opacity = 1;
}, 1) }, 1)
} }
tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px"; tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px";
if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) { if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) {
tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px"; tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px";

2
_notes/your-first-note.md
View File

@ -58,6 +58,8 @@ Notice in the "Notes mentioning this note" section that there is another note li
If you're on a device with mouse support, try hovering your mouse on internal links to preview the notes: [[a note about cats]]. If you're on a device with mouse support, try hovering your mouse on internal links to preview the notes: [[a note about cats]].
Links that have been previewed will be cached to avoid redundant requests.
### Images and other Markdown goodies ### Images and other Markdown goodies
Finally, because you have the full power of Markdown in this template, you can use regular Markdown syntax for various formatting options. Finally, because you have the full power of Markdown in this template, you can use regular Markdown syntax for various formatting options.