Add note previews (similar to Wikipedia page previews)

[j-steinbach]

When hovering over an internal link, a preview window should appear and give a preview over the note.

Page Previews are designed to reduce the cost of exploration of a link, as well as to promote learning by allowing readers to gain context on the article they are reading or to define an unfamiliar term, object, event, or idea without navigating away from their original topic. For casual readers, Page Previews will make it easier for users to get an overview of an article before deciding whether or not to browse to it. Users interested in reading an entire article in its totality will not be distracted or discouraged by viewing unfamiliar concepts - they can simply preview the concept without navigating to a new page. Consequently, the smoothness of the user experience for these users will be increased.

https://www.mediawiki.org/wiki/Page_Previews

More links:

• https://www.mediawiki.org/wiki/Extension:Popups
• https://en.wikipedia.org/wiki/Wikipedia:Tools/Navigation_popups
• https://techblog.wikimedia.org/2020/11/23/web-performance-case-study-wikipedia-page-previews/
• https://wikimedia.github.io/wikipedia-preview/

A few options/ideas for the preview

• preview size, i.e. how many lines to preview
• show a specific section from the linked note (e.g. the note might contain a "definition" section)
• show note tags
• show note parents/folgezettel links, ...
• list note headings

[srid]

Depends on #84

[vcavallo]

idea: for minimal impact on the main note (that is, doesn't make it weird to view on its own outside of emanote) we could use the convention of the first pullquote being used as the preview. That's a relatively common convention in blogging and journalism: having a pullquote synopsis of the article.

# Some Concept X

This is my note about this concept, X,  that I learned about in September 2021.

> X is a new way of looking at the world where you hold thin sheets of seaweed up over your eyes.

The first thing to do is get some seaweed. 

Preview would be: "X is a new way of looking at the world where you hold thin sheets of seaweed up over your eyes."

It puts a bit of constraint on the user, unfortunately. If they, say, wanted to have a quote from someone at the top, but use a different quote later down as the "preview", they wouldn't be able to.
But I err on the side of: don't force people's notes to take on weird sections or markup just to support a small feature of a particular app.

---

Alternative: put it in the yaml frontmatter. frontmatter is already a given that the user has signed up for.
The downside there is it's less DRY. If you're basically copy and pasting some bit of the note into the frontmatter, you might get out of sync if you edit the note a lot.

---

Either way, the preview could default to the first X characters of the note, truncated.

[srid]

We can generalize this notion as this question: what should be the $snippet of a note?.

Where $snippet can be used in one of the 3 places:

1. Metadata Allow page-specific 'description' from Pandoc #60
2. Wiki-link embedding WikiLink Embedding - ![[..]] #24
3. Note previews (this idea)

For (1) and (3), by convention/ default we may pull the first block (eg: the first paragraph). For (2), by default right now we embed entire note - but I'd like a way for the user to specify which subset to embed. How to let the user configure these things is an open question - but I think we should include all these 3 scenarios into picture when considering it.

[j-steinbach]

Everyone should be able to write their notes however they want. We should not force anyone to use any specific note syntax.

I believe there are a few approaches to get the $snippet:

• Fallback: Display the first X characters
• Grab the first paragraph
• Grab a user specified paragraph (tagged? id?)
• Actively generate summaries (example)

[srid]

Grab a user specified paragraph (tagged? id?)

This would be #105

[j-steinbach]

Grab a user specified paragraph (tagged? id?)

This would be #105

Are the Emanotes generated on the fly? Or is there already an HTML page? Because if the HTML we are linking to exists, I believe that this can be "easily" done with CSS selctors.